diff --git a/css/app.css b/css/app.css
index 54aa3ecaa..a8b33767b 100644
--- a/css/app.css
+++ b/css/app.css
@@ -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 {
diff --git a/data/core.yaml b/data/core.yaml
index 627e62a2c..8297146be 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -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"
diff --git a/dist/img/sprite.svg b/dist/img/sprite.svg
index b47a50a64..7aec0cc11 100644
--- a/dist/img/sprite.svg
+++ b/dist/img/sprite.svg
@@ -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">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/locales/en.json b/dist/locales/en.json
index 4bcd52986..2c59ab543 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -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",
diff --git a/index.html b/index.html
index cf71e0b9e..b54c337c6 100644
--- a/index.html
+++ b/index.html
@@ -99,6 +99,7 @@
+
diff --git a/js/id/ui.js b/js/id/ui.js
index 6d8534501..1fb7d0a2a 100644
--- a/js/id/ui.js
+++ b/js/id/ui.js
@@ -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));
diff --git a/js/id/ui/full_screen.js b/js/id/ui/full_screen.js
new file mode 100644
index 000000000..e16569221
--- /dev/null
+++ b/js/id/ui/full_screen.js
@@ -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);
+ };
+};