Merge branch 'full-screen-mode' of https://github.com/PaulAnnekov/iD into PaulAnnekov-full-screen-mode

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 {

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">
   <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>

dist/locales/en.json

@@ -430,6 +430,7 @@
             "help": "Another user changed some of the same map features you changed.\nClick on each item below for more details about the conflict, and choose whether to keep\nyour changes or the other user's changes.\n"
         }
     },
+    "full_screen": "Toggle Fullscreen",
     "merge_remote_changes": {
         "conflict": {
             "deleted": "This object has been deleted by {user}.",

index.html

@@ -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>

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));

js/id/ui/full_screen.js

@@ -0,0 +1,64 @@
+iD.ui.FullScreen = function(context) {
+    var element = context.container().node(), 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 is_supported() {
+        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 (!is_supported())
+            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');
+    };
+};