Add toggle.

lxbarth · lxbarth · commit e5b58c479c99 · 2015-08-28T23:16:37.000-07:00
diff --git a/compare.png b/compare.png
diff --git a/index.html b/index.html
@@ -17,10 +17,9 @@
 </head>
 
 <body>
-  <div id='map1'>
-  </div>
-  <div class='contain clearfix' id='map2'>
-  </div>
+  <div id='map1'></div>
+  <div class='contain clearfix' id='map2'></div>
+  <div id='toggle' class='leaflet-bar'></div>
   <div id='help'>
     <a href="https://github.com/lxbarth/compare" class='button' id='forkme'>Fork me on Github</a>
     <h2>Compare maps</h2>
diff --git a/site.js b/site.js
@@ -3,6 +3,7 @@
     if (!layerids) {
         document.getElementById('map1').style.display = 'none';
         document.getElementById('map2').style.display = 'none';
+        document.getElementById('toggle').style.display = 'none';
         document.getElementById('help').style.display = 'block';
 
         document.getElementById('compare').onclick = function(e) {
@@ -63,4 +64,9 @@
             reset: true
         });
     }
+
+    // Toggle to swipe.
+    document.getElementById('toggle').onclick = function() {
+        location.href = location.origin + location.pathname + "swipe/" + location.search + location.hash;
+    };
 })();
diff --git a/style.css b/style.css
@@ -7,6 +7,17 @@ body {
 #map { position:absolute; top:0; bottom:0; width:100%; background-color: #202222; }
 #map1 { position:absolute; top:0; bottom:0; left:0; right:50%; background-color: #202222; }
 #map2 { position:absolute; top:0; bottom:0; left:50%; right:0; background-color: #202222; }
+#toggle {
+  position: absolute;
+  background-image: url('swipe.png');
+  background-color: rgba(255, 255, 255, 0.5);
+  z-index: 20000;
+  top: 10px;
+  right: 10px;
+  width: 52px;
+  height: 26px;
+  cursor: pointer;
+}
 #range {
   top: 50%;
   width: 100%;
diff --git a/swipe.png b/swipe.png
diff --git a/swipe/index.html b/swipe/index.html
@@ -15,9 +15,15 @@
 <script src='../common.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
 <link href='../style.css' rel='stylesheet' />
+<style>
+#toggle {
+  background-image: url('../compare.png');
+}
+</style>
 </head>
 <body>
-<div id='map'></div>
+<div id='map'></div>  
+<div id='toggle'></div>
 <input id="range" type="range" min="0" max="1.0" step="any" style="width: 100%; position: absolute" />
 <script src='site.js'></script>
 </body>
diff --git a/swipe/site.js b/swipe/site.js
@@ -49,4 +49,10 @@
             document.getElementById('range').style.top = (e.screenY - 120) + "px";
         };
     };
+
+    // Toggle to compare.
+    document.getElementById('toggle').onclick = function() {
+        var path = location.pathname.replace('swipe/', '');
+        location.href = location.origin + path + location.search + location.hash;
+    };
 })();
