diff options
| author | jules <jules@okfoc.us> | 2014-01-26 00:11:32 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2014-01-26 00:11:32 -0500 |
| commit | e7b0213ebf2621b71fcaa04e7ad80614853e9551 (patch) | |
| tree | ef1ba141ff9ff26c68a1aeaacb37c7ddb3f70091 | |
| parent | 8ad7a952e7a3bea3c0106ab8157c8b86ab4f2453 (diff) | |
toggle gallery
| -rw-r--r-- | dither-picker.html | 4 | ||||
| -rw-r--r-- | js/gallery.js | 2 | ||||
| -rw-r--r-- | js/render.js | 2 | ||||
| -rw-r--r-- | shader-combo.html | 80 | ||||
| -rw-r--r-- | 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 @@ <button id="gallery-search">DUMP SEARCH</button> </form> <button id="gallery-random">IM RANDOM</button> - <span id="status"></span> + <span class="status"></span> <div id="gallery-images"></div> </div> @@ -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; } </style> </head> <body> -<!-- -<div id="gallery"> - <div id="gallery-form"> - <form id="gallery-search"> - <input type="text" id="dumpfm-search-query" value="duck bill"> - <button id="gallery-search">DUMP SEARCH</button> - </form> - <button id="gallery-random">IM RANDOM</button> - <span class="status"></span> - </div> - <div id="gallery-images"></div> -</div> ---> -<div id="shader-api"> +<div id="header"> <button id="help">help</button> <button id="new-shader"><b>new shader</b></button> +<!-- <input type="text" id="shader-id" disabled><button id="fetch-info" disabled>info</button> <button id="fetch-history" disabled>history</button> | <button id="fetch-originals" disabled>originals</button> <button id="fetch-all">all</button> - <button id="fetch-latest">latest</button> - <button id="fetch-next-page" disabled>next page</button> - <select id="pick-user"> - <option>fetching users..</option> - </select> - <input type="checkbox" id="persist-image" checked> - <label for="persist-image">load image</label> - - <div id="shader-gallery"> - </div> +--> + | + <button id="toggle-shaders">browse shaders</button> + <button id="toggle-images">browse images</button> + <button id="toggle-off">hide</button> + | + <span id="shader-api-form" class="form"> + <button id="fetch-latest">latest</button> + <button id="fetch-next-page" class="hidden">→</button> + <select id="pick-user"> + <option>fetching users..</option> + </select> + <input type="checkbox" id="persist-image" checked> + <label for="persist-image">load image</label> + <span class="status"></span> + <div id="shader-gallery"></div> + </span> + <span id="gallery-form" class="form"> + <form id="gallery-search"> + <input type="text" id="dumpfm-search-query" value="duck bill"> + <button id="gallery-search">DUMP SEARCH</button> + </form> + <button id="gallery-random">IM RANDOM</button> + <span class="status"></span> + <div id="gallery-images"></div> + </span> </div> <div id="controls"> @@ -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;} <button id="reset">reset</button> <button id="pause">pause</button> <button id="step-forward">>></button> - <span id="status"></span> + <span class="status"></span> <button id="save" disabled>save</button> <button id="upload" disabled>upload</button> <br> @@ -337,7 +337,7 @@ function render (){ } function status(s){ - $("#status").html(s) + $(".status").html(s) } var encoder = new GifEncoder() |