collapse frame editor ; reorder dropdown renders gif

1 files changed, 37 insertions, 18 deletions

diff --git a/shader-combo.html b/shader-combo.html
index 65b81e9..6b721a1 100644
--- a/shader-combo.html
+++ b/shader-combo.html
@@ -31,6 +31,7 @@ a { color: #00f; }
 #instructions.dragging iframe { pointer-events: none; }
 #instructions .close { position: absolute; top: 5px; right: 5px; color: #f00; padding: 3px; border: 0;background: white; font-size: 10px; line-height: 10px; }
 
+#frame-controls { display: none; }
 #frames { display: block; width: 404px; max-height: 150px; overflow: auto; border: 1px solid #ddd; line-height: 0; }
 #frames div { margin: 1px; padding: 0; position: relative; border: 1px solid #eee; cursor: -webkit-grab; }
 #frames canvas { display: block }
@@ -114,26 +115,30 @@ a { color: #00f; }
 	<!--<button id="step-forward">&gt;&gt;</button>-->
 	<br>
 	<br>	
-
-	frames <input type="text" id="framecount" value="10">
-	<button id="add-frame">+add frames</button>
-	<select id="reorder-frames">
-		<option value="">reorder</option>
-		<option value="weave-frames">weave</button>
-		<option value="shuffle-frames">shuffle</button>
-		<option value="reverse-frames">reverse</button>
-		<option value="sort-frames">sort</button>
-	</select>
-	<!--<button id="remove-all-frames">clear</button>-->
-	<br>
-	
-	<span id="frames"></span>
+	<span id="frame-hidden-controls">
+		<button id="show-frame-controls">show frame editor</button>
+	</span>
+	<span id="frame-controls">
+		<button id="hide-frame-controls">x</button>
+		frames <input type="text" id="framecount" value="10">
+		rate <input type="text" id="framedelay" value="0.06s">
+		bg <input type="text" id="background" value="#fff">
+		<button id="add-frame">+add</button>
+		<select id="reorder-frames">
+			<option value="">reorder</option>
+			<option value="weave-frames">weave</button>
+			<option value="shuffle-frames">shuffle</button>
+			<option value="reverse-frames">reverse</button>
+			<option value="sort-frames">sort</button>
+		</select>
+		<!--<button id="remove-all-frames">clear</button>-->
+		<br>
+		<span id="frames"></span>
+	</span>
 	<br>
 	<br>
 
 	<button id="pause">pause</button>
-	gif delay <input type="text" id="framedelay" value="0.06s">
-	background <input type="text" id="background" value="#fff">
 </div>
 
 <div id="workspace"></div>
@@ -224,11 +229,25 @@ function init(){
 		cc.canvas.width = w
 		cc.canvas.height = h
 	})
+	$("#show-frame-controls").click(function(){
+		$("#frame-controls").show()
+		$("#frame-hidden-controls").hide()
+	})
+	$("#hide-frame-controls").click(function(){
+		$("#frame-controls").hide()
+		$("#frame-hidden-controls").show()
+	})
 	$("#reorder-frames").change(function(){
 		var order = $(this).val()
-		if (order) {
-			
+		console.log(order)
+		switch (order) {
+			case "weave-frames": weave_frames(); break;
+			case "shuffle-frames": shuffle_frames(); break;
+			case "reverse-frames": reverse_frames(); break;
+			case "sort-frames": sort_frames(); break;
+			default: return;
 		}
+		render()
 	})
 
 	load()