diff options
Diffstat (limited to 'shader-combo.html')
| -rw-r--r-- | shader-combo.html | 80 |
1 files changed, 52 insertions, 28 deletions
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) |