Merge branch 'PaulAnnekov-full-screen-mode'

This commit is contained in:
Bryan Housel
2015-09-05 23:17:41 -04:00
7 changed files with 179 additions and 10 deletions
+25 -4
View File
@@ -29,7 +29,6 @@ body {
.id-container {
height: 100%;
width: 100%;
position: fixed;
min-width: 768px;
}
@@ -58,14 +57,12 @@ body {
.spinner {
opacity: .5;
float: right;
}
.spinner img {
position: absolute;
height: 40px;
width: 40px;
right: 10px;
top: 10px;
border-radius: 4px;
margin-right: 10px;
background: black;
@@ -555,6 +552,9 @@ button.save.has-count .count::before {
.icon.back.blue { background-position: -420px -20px;}
.icon.forward.blue { background-position: -440px -20px;}
.icon.full-screen { background-position: -620px -20px;}
.active .icon.full-screen { background-position: -640px -20px;}
button[disabled] .icon.alert { background-position: 0 -40px;}
button[disabled] .icon.add-point { background-position: -20px -40px;}
button[disabled] .icon.add-line { background-position: -40px -40px;}
@@ -1740,6 +1740,27 @@ img.wiki-image {
background: rgba(0,0,0,.8);
}
/* Fullscreen button */
div.full-screen {
float: right;
width: 40px;
margin-right: 10px;
}
div.full-screen .tooltip {
min-width: 160px;
}
div.full-screen > button, div.full-screen > button.active {
width: 40px;
height: 40px;
background: transparent;
}
div.full-screen > button:hover {
background-color: rgba(0, 0, 0, .8);
}
/* Map Controls */
.map-controls {
+1
View File
@@ -401,6 +401,7 @@ en:
in: Zoom In
out: Zoom Out
cannot_zoom: "Cannot zoom out further in current mode."
full_screen: Toggle Full Screen
gpx:
local_layer: "Local GPX file"
drag_drop: "Drag and drop a .gpx file on the page, or click the button to the right to browse"
+74 -6
View File
@@ -13,7 +13,7 @@
width="800"
height="560"
id="svg12393"
inkscape:version="0.48.5 r10040"
inkscape:version="0.48.4 r9939"
sodipodi:docname="sprite.svg">
<sodipodi:namedview
pagecolor="#ffffff"
@@ -28,11 +28,11 @@
inkscape:window-height="856"
id="namedview392"
showgrid="true"
inkscape:zoom="1"
inkscape:cx="475.13394"
inkscape:cy="495.7147"
inkscape:window-x="276"
inkscape:window-y="71"
inkscape:zoom="16"
inkscape:cx="641.185"
inkscape:cy="531.10386"
inkscape:window-x="285"
inkscape:window-y="196"
inkscape:window-maximized="0"
inkscape:current-layer="svg12393"
showguides="true"
@@ -2106,4 +2106,72 @@
style="color:#000000;fill:#8cd05f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccccccccccccsscsscssccscccccccccccccccccccccccccccssssssssssssssscccccccccsccsssssssssssssss" />
<g
id="g3387"
transform="translate(642.0625,21.9785)"
style="fill:#ffffff">
<g
style="fill:#ffffff"
transform="scale(0.5,0.5)"
id="Layer_1" />
<g
style="fill:#ffffff"
transform="scale(0.5,0.5)"
id="fullscreen_x5F_exit_x5F_alt">
<g
style="fill:#ffffff"
id="g6">
<polygon
id="polygon8"
style="fill:#ffffff"
points="25.414,22.586 28,20 20,20 20,28 22.586,25.414 29.172,32 32,29.172 " />
<polygon
id="polygon10"
style="fill:#ffffff"
points="12,4 9.375,6.543 2.828,0 0,2.828 6.547,9.371 4,12 11.961,11.957 " />
<polygon
id="polygon12"
style="fill:#ffffff"
points="12,28 12,20 4,20 6.586,22.586 0,29.172 2.828,32 9.414,25.414 " />
<polygon
id="polygon14"
style="fill:#ffffff"
points="29.164,0 22.598,6.566 20,3.971 20,12 28.031,12 25.438,9.404 32,2.838 " />
</g>
</g>
</g>
<g
id="g3407"
transform="translate(622.082,22.043)"
style="fill:#ffffff">
<g
style="fill:#ffffff"
transform="scale(0.5,0.5)"
id="Layer_1-1" />
<g
style="fill:#ffffff"
transform="scale(0.5,0.5)"
id="fullscreen_x5F_alt">
<g
style="fill:#ffffff"
id="g6-8">
<polygon
id="polygon8-1"
style="fill:#ffffff"
points="20,22.828 26.586,29.414 24,32 32,32 32,24 29.414,26.586 22.828,20 " />
<polygon
id="polygon10-6"
style="fill:#ffffff"
points="12,9.172 5.414,2.586 8,0 0,0 0,8 2.586,5.414 9.172,12 " />
<polygon
id="polygon12-0"
style="fill:#ffffff"
points="22.828,12 29.414,5.414 32,8 32,0 24,0 26.586,2.586 20,9.172 " />
<polygon
id="polygon14-3"
style="fill:#ffffff"
points="2.586,26.586 0,24 0,32 8,32 5.414,29.414 12,22.828 9.172,20 " />
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 179 KiB

After

Width:  |  Height:  |  Size: 181 KiB

+1
View File
@@ -484,6 +484,7 @@
"out": "Zoom Out"
},
"cannot_zoom": "Cannot zoom out further in current mode.",
"full_screen": "Toggle Full Screen",
"gpx": {
"local_layer": "Local GPX file",
"drag_drop": "Drag and drop a .gpx file on the page, or click the button to the right to browse",
+1
View File
@@ -99,6 +99,7 @@
<script src='js/id/ui/flash.js'></script>
<script src='js/id/ui/feature_info.js'></script>
<script src='js/id/ui/save.js'></script>
<script src='js/id/ui/full_screen.js'></script>
<script src='js/id/ui/scale.js'></script>
<script src='js/id/ui/splash.js'></script>
<script src='js/id/ui/spinner.js'></script>
+4
View File
@@ -60,6 +60,10 @@ iD.ui = function(context) {
.attr('class', 'button-wrap col1')
.call(iD.ui.Save(context));
bar.append('div')
.attr('class', 'full-screen')
.call(iD.ui.FullScreen(context));
bar.append('div')
.attr('class', 'spinner')
.call(iD.ui.Spinner(context));
+73
View File
@@ -0,0 +1,73 @@
iD.ui.FullScreen = function(context) {
var element = context.container().node(),
keybinding = d3.keybinding('full-screen');
// button;
function getFullScreenFn() {
if (element.requestFullscreen) {
return element.requestFullscreen;
} else if (element.msRequestFullscreen) {
return element.msRequestFullscreen;
} else if (element.mozRequestFullScreen) {
return element.mozRequestFullScreen;
} else if (element.webkitRequestFullscreen) {
return element.webkitRequestFullscreen;
}
}
function getExitFullScreenFn() {
if (document.exitFullscreen) {
return document.exitFullscreen;
} else if (document.msExitFullscreen) {
return document.msExitFullscreen;
} else if (document.mozCancelFullScreen) {
return document.mozCancelFullScreen;
} else if (document.webkitExitFullscreen) {
return document.webkitExitFullscreen;
}
}
function isFullScreen() {
return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ||
document.msFullscreenElement;
}
function isSupported() {
return !!getFullScreenFn();
}
function fullScreen() {
d3.event.preventDefault();
if (!isFullScreen()) {
// button.classed('active', true);
getFullScreenFn().apply(element);
} else {
// button.classed('active', false);
getExitFullScreenFn().apply(document);
}
}
return function() { // selection) {
if (!isSupported())
return;
// var tooltip = bootstrap.tooltip()
// .placement('left');
// button = selection.append('button')
// .attr('title', t('full_screen'))
// .attr('tabindex', -1)
// .on('click', fullScreen)
// .call(tooltip);
// button.append('span')
// .attr('class', 'icon full-screen');
keybinding
.on(iD.ui.cmd('f11'), fullScreen)
.on(iD.ui.cmd('⌘⇧F'), fullScreen);
d3.select(document)
.call(keybinding);
};
};