From e7b0213ebf2621b71fcaa04e7ad80614853e9551 Mon Sep 17 00:00:00 2001 From: jules Date: Sun, 26 Jan 2014 00:11:32 -0500 Subject: toggle gallery --- dither-picker.html | 4 +-- js/gallery.js | 2 +- js/render.js | 2 +- shader-combo.html | 80 +++++++++++++++++++++++++++++++++++------------------- shader-gif.html | 4 +-- 5 files changed, 58 insertions(+), 34 deletions(-) diff --git a/dither-picker.html b/dither-picker.html index 5e9bff9..fe210ef 100644 --- a/dither-picker.html +++ b/dither-picker.html @@ -16,7 +16,7 @@ - +

@@ -123,7 +123,7 @@ ui.dither = function (frame){ return cc } -function status(s){ $("#status").html(s); console.log(s) } +function status(s){ $(".status").html(s); console.log(s) } $(ui.init) diff --git a/js/gallery.js b/js/gallery.js index d114ec6..a9430fc 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -5,7 +5,7 @@ var gallery = {} gallery.init = function(choose){ if (choose) { - galler.choose = choose; + gallery.choose = choose; } gallery.bind() } diff --git a/js/render.js b/js/render.js index fdb0125..4a9eeef 100644 --- a/js/render.js +++ b/js/render.js @@ -103,4 +103,4 @@ function draw(t) { shade(frame, t) } -function status(s){ $("#status").html(s); console.log(s) } +function status(s){ $(".status").html(s); console.log(s) } diff --git a/shader-combo.html b/shader-combo.html index 3c2eac0..92cb6e1 100644 --- a/shader-combo.html +++ b/shader-combo.html @@ -7,8 +7,8 @@ #shader { width: 400px; height: 247px; font-family: fixed; } div { float: left; padding: 10px;} form { display: inline-block; } -#shader-api,#gallery { clear: right; width:100%; padding: 0; font-size: 12px; } -#shader-gallery,#gallery-images { display: block; min-height: 152px; max-height: 210px; overflow-y: auto; width: 100%; padding: 0; } +#header { clear: right; width:100%; padding: 0; font-size: 12px; } +#shader-gallery,#gallery-images { display: block; height: 152px; overflow-y: auto; width: 100%; padding: 0; } #shader-gallery img,#shader-gallery canvas,#gallery-images img, #gallery-images canvas { max-width: 200px; height: 100px; margin: 5px; cursor: pointer; clear: right; } .shader { width: 100px; } .shader span { display: block } @@ -22,43 +22,49 @@ a { color: #00f; } #instructions iframe {width: 100%;height:100%;margin:0;padding:0;border:0;} #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; } - +.hidden { display: none; } +.form { display: none; } +.bold { font-weight: bold; } - -

+

@@ -130,10 +136,28 @@ function init(){ $("#reset").click(reset) $("#pause").click(pause) + $("#toggle-shaders").click(function(){ + $("#header .form").hide() + $("#shader-api-form").show() + $(".bold").removeClass("bold") + $(this).addClass("bold") + }).trigger("click") + $("#toggle-images").click(function(){ + $("#header .form").hide() + $("#gallery-form").show() + $(".bold").removeClass("bold") + $(this).addClass("bold") + }) + $("#toggle-off").click(function(){ + $("#header .form").hide() + $(".bold").removeClass("bold") + }) + user.init() help.init() shader_gallery.init() - + gallery.init(choose) + document.getElementById('shader').addEventListener('input', shader_build); requestAnimationFrame(animate) diff --git a/shader-gif.html b/shader-gif.html index 1369225..1f944c9 100644 --- a/shader-gif.html +++ b/shader-gif.html @@ -67,7 +67,7 @@ div { display: inline-block; padding: 10px;} - +
@@ -337,7 +337,7 @@ function render (){ } function status(s){ - $("#status").html(s) + $(".status").html(s) } var encoder = new GifEncoder() -- cgit v1.2.3-70-g09d2