diff options
| author | Jules Laplace <jules@okfoc.us> | 2014-11-22 10:43:51 -0500 |
|---|---|---|
| committer | Jules Laplace <jules@okfoc.us> | 2014-11-22 10:43:51 -0500 |
| commit | 2464f6e5d4d190631efbb738e56d9c2c810f7ced (patch) | |
| tree | 3af1457dc816c178cb3efbb1d8f795257b6d77bb | |
| parent | 19c41332c434dddfa76da972c0b587632dd4668e (diff) | |
toggle textarea
| -rw-r--r-- | index.html | 7 | ||||
| -rw-r--r-- | js/app.js | 15 |
2 files changed, 20 insertions, 2 deletions
@@ -8,10 +8,13 @@ body.grid div { border-top: 1px solid #444; border-left: 1px solid #444; } .ed { color: #fff; } .focused { text-shadow: 0 3px 3px #fff; border-color: #fff; } .tool.focused, .ed.focused { color: white; text-decoration: underline; } +body.loading { opacity: 0; } +body { transition: 0.1s linear; } body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset 0 0 2px white; } +#shader_textarea { display: none; } </style> -<body class="grid"> +<body class="grid loading"> <div> <div id="canvas_rapper" class="rapper"></div> @@ -25,10 +28,12 @@ body.grid .focused { box-shadow: inset 0 0 2px white, inset 0 0 2px white, inset <span id="text_el" class="tool">text</span> <span id="clear_el" class="tool">clear</span> <span id="grid_el" class="tool">grid</span> + <span id="shader_el" class="tool">shader</span> brush size: <span id="width_el" class="ed">5</span> x <span id="height_el" class="ed">5</span> canvas size: <span id="canvas_width_el" class="ed">80</span> x <span id="canvas_height_el" class="ed">24</span> </div> +<textarea id="shader_textarea"></textarea> </div> </body> @@ -95,6 +95,15 @@ function build () { document.body.classList.toggle('grid') } + controls.shader = new Tool (shader_el) + controls.shader.use = function(){ + shader_textarea.style.display = "block" + } + controls.shader.blur = function(){ + Tool.prototype.blur.call(this) + shader_textarea.style.display = "none" + } + controls.width = new Lex (width_el) controls.height = new Lex (height_el) controls.canvas_width = new Lex (canvas_width_el) @@ -155,7 +164,7 @@ function bind () { }) }); - [controls.square, controls.circle, controls.text, controls.clear, controls.grid].forEach(function(tool){ + [controls.square, controls.circle, controls.text, controls.clear, controls.grid, controls.shader].forEach(function(tool){ tool.span.addEventListener('mousedown', function(e){ tool.focus() }) @@ -221,6 +230,10 @@ function bind () { break } }) + + document.addEventListener('DOMContentLoaded', function(){ + document.body.classList.remove('loading') + }) } |