Future is now, demo etc

cutting-room-floor · Apr 13, 2012 · 8883f52 · 8883f52
1 parent d679ecd
commit 8883f52
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -14,22 +14,41 @@
   <link href='site.css' type='text/css' rel='stylesheet' />
 </head>
 <body>
-  <div id='map'></div>
+  <div id='header'>
+    <strong>Easey</strong> is a simple map animation library.
+  </div>
   <div class='right'>
-  <div class='intro'>
-    <p><strong>easey</strong> is an easing library for
-    <a href='http://github.com/stamen/modestmaps-js'>Modest Maps</a> that
-    makes your map transitions slick and fancy. You can <a href='http://ds.io/ooBi3R'>read
-    a bit about easey</a> on our blog.</p>
-
-    <p>Easey has two parts: handlers, that make your normal interaction with
-    a map slicker, and an API, that lets you run transitions robotically.</p>
+<pre class='live'>
+easey().map(map)
+  .to(map.locationCoordinate({ lat: 38, lon: -80 })
+    .zoomTo(5)).run(2000);
+</pre>
+<pre class='live'>
+easey().map(map)
+  .to(map.locationCoordinate({ lat: 38, lon: 80 })
+    .zoomTo(10))
+    .path('about')
+    .run(2000);
+</pre>
 
-    <p><a href='https://github.com/mapbox/easey'>get it on GitHub</a>
-    and do cool things with it.</p>
+  <div id='scrolly'>
+    <div class='topic'>
+      <h3>Afghanistan</h3>
+      <small>The country sits at an important geostrategic location that connects the Middle East with Central Asia and the Indian subcontinent,[12] which has been home to various peoples through the ages</small>
+    </div>
+    <div class='topic'>
+      <h3>Iraq</h3>
+      <small>Iraq borders Syria to the northwest, Turkey to the north, Iran to the east, Jordan to the southwest and Kuwait and Saudi Arabia to the south. Iraq has a narrow section of coastline measuring 58 km (36 mi) on the northern Persian Gulf. The capital city, Baghdad is in the center-east of the country.</small>
+    </div>
+    <div class='topic'>
+      <h3>Pakistan</h3>
+      <small>The region forming modern Pakistan was the site of several ancient cultures including the neolithic Mehrgarh and the bronze era Indus Valley Civilisation. Subsequently it has seen invasions or settlements by Hindu, Persian, Indo-Greek, Islamic, Turco-Mongol, Afghan and Sikh cultures.</small>
+    </div>
+  </div>
 
   </div>
-</div>
+  <div id='map'></div>
+
 <script src='index.js' type='text/javascript'></script>
 <script type="text/javascript">
   var _gaq = _gaq || [];

diff --git a/index.js b/index.js
@@ -12,5 +12,33 @@ window.onload = function() {
                 easey.DoubleClickHandler()
             ]);
         map.setCenterZoom(new com.modestmaps.Location(-10, 50), 3);
+
+        var pres = document.getElementsByTagName('pre');
+
+        for (var i = 0; i < pres.length; i++) {
+          pres[i].onclick = function() {
+            eval(this.innerHTML);
+          };
+        }
+
+
+        var scrolly = document.getElementById('scrolly');
+
+        var positions = [
+          map.locationCoordinate({ lat: 33.5, lon: 65.6 }).zoomTo(6),
+          map.locationCoordinate({ lat: 33.1, lon: 44.6 }).zoomTo(6),
+          map.locationCoordinate({ lat: 28.7, lon: 69.2 }).zoomTo(6)];
+
+        var ea = easey().map(map);
+
+        function update() {
+          var pos = scrolly.scrollTop / 200;
+
+          ea.from(positions[Math.floor(pos)])
+            .to(positions[Math.ceil(pos)])
+            .t(pos - Math.floor(pos));
+        }
+
+        scrolly.addEventListener('scroll', update, false);
     });
 };
diff --git a/site.css b/site.css
@@ -0,0 +1,70 @@
+body, button {
+  font:13px/20px "Helvetica Neue", "Helvetica", sans-serif;
+}
+body {
+  background:#9098a1;
+}
+html, body, pre, h1, h2, h3, p {
+  margin:0;padding:0;
+}
+a { color: #A50B00; }
+div.intro {
+  padding:10px;
+  margin-bottom:20px;
+  border:1px solid #000;
+  background:#fff;
+}
+#map {
+  background:#d7edf8;
+  position:absolute;
+  top:50px;
+  right:400px;
+  left:0;
+  bottom:0;
+}
+
+#header {
+  position:absolute;
+  top:0px;
+  right:0;
+  left:0;
+  height:29px;
+  padding:10px;
+  background:#fff;
+  border-bottom:1px solid #aaa;
+}
+
+.right {
+  position:absolute;
+  top:50px;
+  right:0px;
+  background:#fff;
+  padding:10px;
+  z-index:999;
+  width:380px;
+}
+
+pre.live {
+  margin-top:5px;
+  color:#444;
+}
+
+pre.live:hover {
+  color:#000;
+}
+
+div.codeblock {
+  background:#fff;
+  padding:10px;
+  width:448px;
+  margin-bottom:10px;
+}
+
+#scrolly {
+  height:200px;
+  overflow:auto;
+}
+
+#scrolly div.topic {
+  height:200px;
+}
diff --git a/src/easey.js b/src/easey.js
@@ -42,11 +42,6 @@
             return easey;
         };
 
-        easey.time = function(x) {
-            time = x;
-            return easey;
-        };
-
         easey.from = function(x) {
             if (!arguments.length) return from.copy();
             from = x.copy();
@@ -140,7 +135,8 @@
             }, 1);
         };
 
-        easey.run = function(callback) {
+        easey.run = function(time, callback) {
+
             var start = (+new Date());
 
             running = true;