+ add frame, sortable frames

1 files changed, 21 insertions, 5 deletions

diff --git a/shader-gif.html b/shader-gif.html
index 49e4ac0..f99aaba 100644
--- a/shader-gif.html
+++ b/shader-gif.html
@@ -6,8 +6,10 @@
 #url { width: 100px; }
 #width,#height,#frames,#delay {width: 30px; }
 #shader { width: 400px; height: 247px; font-family: fixed; }
-#frames { width: 400px; height: 100px; overflow-x: scroll; }
+#frames { width: 400px; height: 100px; }
 #controls { width: 450px; }
+#frames div { padding: 1px; }
+#frames .remove { position: absolute; top: 5px; right: 5px; color: #f00; }
 div { float: left; padding: 10px;}
 </style>
 </head>
@@ -38,6 +40,7 @@ delay <input type="text" id="delay" value="60">
 <script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
 <script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script>
 <script type="text/javascript" src="js/vendor/jquery/jquery.min.js"></script>
+<script type="text/javascript" src="js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
 <script type="text/javascript" src="js/vendor/canvasquery.js"></script>
 <script type="text/javascript" src="js/canvasquery.dither.js"></script>
 <script type="text/javascript" src="js/color.js"></script>
@@ -46,6 +49,7 @@ delay <input type="text" id="delay" value="60">
 
 var cc = cq(0,0).appendTo("#workspace")
 var w, h
+var dragging = false
 
 $(init)
 
@@ -53,8 +57,14 @@ function init(){
   $("#url").change(load)
   $("#reset").click(reset)
   $("#pause").click(pause)
+  $("#add-frame").click(add_frame)
   $("#demo").click(function(){ demo("#first") })
   $("#dither-demo").click(function(){ demo("#second") })
+  $("#frames").sortable({
+    start: function(){ dragging = true },
+    stop: function(){ dragging = false }
+  });
+  $("#frames").disableSelection();
   demo('#first')
   load()
   draw()
@@ -81,7 +91,7 @@ function pause(){
 var timeout = null, raf_id, start_t = 0, old_t = 0, pause_t = 0, paused = false;
 function draw(t){
   raf_id = requestAnimationFrame(draw);
-  if (paused) {
+  if (paused || dragging) {
     pause_t += t - old_t
     old_t = t
     return
@@ -135,14 +145,20 @@ function shade(frame, t){
   }
 }
 
-frames = []
 function add_frame(){
-  var cel = cc.clone().appendTo("#frames")
-  frames.push(cel)
+  var $el = $("<div>")
+  $el.html( $("#frame-template").html() )
+  var frame = cc.clone()
+  var thumb = cc.clone().resize(100,100).appendTo($el.find(".frame")[0])
+  $("#frames").append($el)
 }
 function remove_frame(){
 }
 </script>
+<script type="text/html" id="frame-template">
+<span class="remove"></span>
+<span class="frame"></span>
+</script>
 <script type="text/javascript-shader" id="first">
 t /= 500
 if (a == 0) { r = g = b = x; t /= -3 }