Merge branch 'master' of github.com:enjalot/tributary

sandbox/templates/inlet.handlebars

@@ -123,14 +123,13 @@
 
 		</section>
 		<section id="code">
-
 		</section>
 
-    <section id="controls">
-    </section>
-
 	</aside>
 
+  <section id="controls">
+  </section>
+
   <section id="plugins">
   </section>
 

src/context.js

@@ -62,10 +62,19 @@ function init(options) {
   this.config = options.config;
   //execute on code changes (if not silenced)
   if(!options.silent) {
-    this.model.on("change:code", function() {
-      tributary.__events__.trigger("execute");
-    });
-    tributary.__events__.on("post:execute", this.execute, this)
+    // we want to let some things execute before others
+    // e.g. html and svg should happen before any new code executes
+    if(options.preExecute) {
+      this.model.on("change:code", function() {
+        tributary.__events__.trigger("execute");
+      });
+      tributary.__events__.on("pre:execute", this.execute, this)
+    } else {
+      this.model.on("change:code", function() {
+        tributary.__events__.trigger("execute");
+      });
+      tributary.__events__.on("post:execute", this.execute, this)
+    }
   }
   //if the user has modified the code, we want to protect them from losing their work
   this.model.on("change:code", function() {
@@ -257,6 +266,7 @@ tributary.HTMLContext = function(options) {
     this.model.trigger("noerror");
     return true;
   }
+  options.preExecute = true
   init.call(ctx, options);
   return ctx;
 }
@@ -280,6 +290,7 @@ tributary.SVGContext = function(options) {
     this.model.trigger("noerror");
     return true;
   }
+  options.preExecute = true
   init.call(ctx, options);
   return ctx;
 }

src/main.js

@@ -29,7 +29,11 @@ tributary.Main = function(options) {
       if(tributary.autoinit) {
         tributary.clear();
         //trigger all the contexts to execute, after the canvas has been cleared
-        tributary.__events__.trigger("post:execute");
+        tributary.__events__.trigger("pre:execute");
+        //setTimeout(function() {
+          tributary.__events__.trigger("post:execute");
+        //},0)
+        //tributary.__events__.trigger("post:execute");
       }
       //then we run the user defined run function
       tributary.execute();

static/css/less/style.less

@@ -345,6 +345,12 @@ px      68    160    252    344    436    528    620    712    804    896    */
   }
 }
 
+#controls {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+}
+
 
 
 
@@ -458,13 +464,6 @@ px      68    160    252    */
     height: auto;
   }
 
-  #controls {
-    position: static;
-    //bottom: 12px;
-    //left: 12px;
-    text-align: center;
-    margin-bottom: 18px;
-  }
   #panel #config {
     position: static !important;
     width: 100%;

static/css/style.css

@@ -746,6 +746,11 @@ px      68    160    252    344    436    528    620    712    804    896    */
   width: 100%;
   height: 100%;
 }
+#controls {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+}
 /*    Tablet Layout: 768px.
     Gutters: 24px.
     Outer margins: 28px.
@@ -825,11 +830,6 @@ px      68    160    252    */
   #panel #files {
     height: auto;
   }
-  #controls {
-    position: static;
-    text-align: center;
-    margin-bottom: 18px;
-  }
   #panel #config {
     position: static !important;
     width: 100%;

static/header.js

@@ -28,9 +28,21 @@
     //sandbox.postMessage({request: "load", gist: data, query: header.query}, _origin);
     sandbox.postMessage({request: "load", gistid: header.gistid, query: header.query}, _origin);
   }
+  /*
   d3.select("#sandbox").node().onload = function() {
     sandbox.postMessage({request: "load", gistid: header.gistid, query: header.query}, _origin);
-  }
+  }*/
+  //on the load of the iframe, we want to get the gist (if any)
+  //and then give it what it needs to fill out
+  d3.select("#sandbox").on("load", function() {
+    load();
+    if(header.gistid !== "" && header.gistid) {
+      getGist(header.gistid, function(err) { if(err) console.log("err", err) });
+    } else {
+      //this sets up the ui even tho we have no gist;
+      handle_gist();
+    }
+  })
 
   //Config object has everything we need to save our gist
   function getConfig() {
@@ -59,18 +71,6 @@
     sandbox.postMessage({request: "step" }, _origin)
   }
 
-  //on the load of the iframe, we want to get the gist (if any)
-  //and then give it what it needs to fill out
-  d3.select("#sandbox").on("load", function() {
-    load();
-    if(header.gistid !== "" && header.gistid) {
-      getGist(header.gistid, function(err) { if(err) console.log("err", err) });
-    } else {
-      //this sets up the ui even tho we have no gist;
-      handle_gist();
-    }
-  })
-
   window.addEventListener("message", recieveMessage, false)
   function recieveMessage(event) {
     if(event.origin !== _origin || !event.data) return;

static/plugins/play/index.js

@@ -32,12 +32,19 @@ function tributaryPlayPlugin(tributary, plugin) {
     config.on("change:restart", restartButton, this);
     config.on("pause", onPlayPause, this);
 
+    //attach the time_controls to the #control display div
+    var controlDiv = d3.select("#controls")
+    var timeControlNode = d3.select(el).select(".time_controls").node()
+    if(timeControlNode) {
+      controlDiv.node().appendChild(timeControlNode);
+    }
+
     //Setup the ui for choosing the controls in the config div
     var configDiv = d3.select("#config-content");
-    var timeControlNode = d3.select(el).select(".timecontrols").node()
-    if(!timeControlNode) return;
+    var timeControlConfigNode = d3.select(el).select(".timecontrols").node()
+    if(!timeControlConfigNode) return;
 
-    var timecontrolsDiv = configDiv.node().appendChild(timeControlNode);
+    var timecontrolsDiv = configDiv.node().appendChild(timeControlConfigNode);
     var timecontrols = d3.select(timecontrolsDiv)
       .selectAll("button");
 
@@ -207,6 +214,7 @@ function tributaryPlayPlugin(tributary, plugin) {
     //we can finish a transition
     tributary.timer = {
       then: new Date(),
+      last: new Date(),
       ctime: tributary.t
     };
 
@@ -254,6 +262,11 @@ function tributaryPlayPlugin(tributary, plugin) {
       var dtime = now - tributary.timer.then;
       var dt;
 
+      // rate limiting
+      var last = tributary.timer.last
+      if(now - last < 20) return false;
+      tributary.timer.last = now;
+
       if(tributary.loop) {
         if (tributary.reverse) {
           dt = tributary.timer.ctime * dtime / tributary.duration * -1;

static/plugins/play/style.css

@@ -1,10 +1,10 @@
 
-
+/*
 .time_controls {
   position: absolute;
   bottom: 10px;
   left: 10px;
-}
+}*/
 
 .time_slider {
   background-image: none !important;

static/plugins/screenshots/index.html

@@ -5,8 +5,9 @@
     <button id="gifdone" title="click to create your gif. will try to save to imgur and set as screenshot if < 2MB">Done</button>
     <button id="gifclear" title="click to start over">Clear</button>
   </div>
-  <div id="gifprogress"></div>
-  <div id="gifframes"></div>
+  <div id="gifframes">
+    <div id="gifprogress"></div>
+  </div>
 </div>
 
 <canvas id='pngit' style="display:none"></canvas>

static/plugins/screenshots/index.js

@@ -17,7 +17,11 @@ function tributaryScreenshotPlugin(tributary, plugin) {
     d3.select("#thumbnail-content").node().appendChild(screenshotDiv);
     d3.select("#screenshot").on("click", _handleScreenshot);
 
-    d3.select(".time_controls")
+    d3.select("#controls")
+    .selectAll("button#gif")
+      .data([0])
+    .enter()
+    .append("div").classed("gif_button", true)
       .append("button")
       .attr("id", "gif")
       .text("GIF")
@@ -185,6 +189,7 @@ function tributaryScreenshotPlugin(tributary, plugin) {
           console.log(percent * maxProgress + "px")
           d3.select("#gifprogress").style({
             "width": percent * maxProgress + "px",
+            "height": "20px",
             "background-color": d3.scale.linear().range(["#F8025B", "#38F514"]).interpolate(d3.interpolateHsl)(percent)
           });
         })
@@ -205,7 +210,10 @@ function tributaryScreenshotPlugin(tributary, plugin) {
           $('.frame').tipsy({fade: true, gravity: 'sw', opacity: 0.86});
 
           tributary.__frames__ = [];
-          d3.select("#gifprogress").style("width", "0px");
+          d3.select("#gifprogress").style({
+            "width": "0px",
+            "height": "0px"
+          })
         });
         gif.render();
       })

static/plugins/screenshots/style.css

@@ -3,7 +3,7 @@ canvas#pngit {
   pointer-events: none;
 }
 
-#gif {
+.gif_button {
   /*position: absolute;
   bottom: 10px;
   left: 350px;
@@ -13,8 +13,8 @@ canvas#pngit {
   position: absolute;
   bottom: 60px;
   left: 10px;
-  width: 180px;
-  height: 90px;
+  height: 120px;
+  background-color: white;
 }
 .gifbuttons {
   float:left;
@@ -28,24 +28,25 @@ canvas#pngit {
   float:left;
   clear:left;
 }
+
 #gifprogress {
-  float:left;
-  display: inline-block;
-  height: 20px;
+  width: 0px;
+  height: 0px;
   background-color: #1EAD1E;
   /*border: 1px solid #fff;*/
 }
 #gifframes {
   position: absolute;
-  left: 70px;
-  top: 5px;
+  left: 75px;
   width: 400px;
-  height: 90px;
+  height: 120px;
   overflow: scroll;
   pointer-events: none;
+  background-color: white;
 }
 .frame {
-  border: 1px solid white;
+  border: 1px solid black;
+  margin: 2px;
   float:left;
   top: 0px;
   display: inline-block;

static/tributary.js

@@ -340,6 +340,7 @@ Tributary = function() {
       try {
         if (tributary.autoinit) {
           tributary.clear();
+          tributary.__events__.trigger("pre:execute");
           tributary.__events__.trigger("post:execute");
         }
         tributary.execute();
@@ -507,10 +508,17 @@ Tributary = function() {
     this.el = options.el;
     this.config = options.config;
     if (!options.silent) {
-      this.model.on("change:code", function() {
-        tributary.__events__.trigger("execute");
-      });
-      tributary.__events__.on("post:execute", this.execute, this);
+      if (options.preExecute) {
+        this.model.on("change:code", function() {
+          tributary.__events__.trigger("execute");
+        });
+        tributary.__events__.on("pre:execute", this.execute, this);
+      } else {
+        this.model.on("change:code", function() {
+          tributary.__events__.trigger("execute");
+        });
+        tributary.__events__.on("post:execute", this.execute, this);
+      }
     }
     this.model.on("change:code", function() {
       tributary.__events__.trigger("warnchanged");
@@ -671,6 +679,7 @@ Tributary = function() {
       this.model.trigger("noerror");
       return true;
     };
+    options.preExecute = true;
     init.call(ctx, options);
     return ctx;
   };
@@ -691,6 +700,7 @@ Tributary = function() {
       this.model.trigger("noerror");
       return true;
     };
+    options.preExecute = true;
     init.call(ctx, options);
     return ctx;
   };