From f6cd4aac9a8ea96df0c41618c3a83a0c8097acc4 Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Sat, 20 Dec 2014 22:29:09 -0500 Subject: making more things textareas --- css/sally.css | 4 ++-- index.html | 16 +++++++------- js/app.js | 2 +- js/lex.js | 12 ++++++++-- js/tool.js | 10 +++++++++ js/ui/brush.js | 4 ++++ js/ui/controls.js | 66 ++++++++++++++++++++++++++++++++++++++----------------- 7 files changed, 81 insertions(+), 33 deletions(-) diff --git a/css/sally.css b/css/sally.css index 515442a..6fdbe55 100644 --- a/css/sally.css +++ b/css/sally.css @@ -55,9 +55,9 @@ body.grid div { border-top: 1px solid #444; border-left: 1px solid #444; } body.loading { opacity: 0; } body { transition: 0.1s linear; } .focused { box-shadow: inset 1px 0 2px white, inset -1px 0 2px white, inset 0 1px 2px white, inset 0 -1px 2px white; } -#shader_textarea { display: none; } #import_textarea { font-size: 9pt; } -textarea { font-size:12pt; width: 45%; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;} +textarea { font-size:12pt; width: 42%; height: 300px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;} +#shader_rapper { display: none; } #import_rapper { display: none; } #cursor_input { position: absolute; top: 0; right: 0; width:30px; opacity: 0; } .selector_el { diff --git a/index.html b/index.html index 2cdb580..4d2c07e 100644 --- a/index.html +++ b/index.html @@ -18,17 +18,14 @@ fill

clear
- grid
+ _ grid

brush size: 5 x 5
canvas size: 80 x 24

- _ animate
- + x fg
+ x bg
+ x char
@@ -49,7 +46,10 @@
- +
+ _ animate
+ +
diff --git a/js/app.js b/js/app.js index ab2c1ab..96faa7b 100644 --- a/js/app.js +++ b/js/app.js @@ -28,7 +28,7 @@ function build () { brush.generate() brush.build() - controls.grid.use() + // controls.grid.use() } function bind () { canvas.bind() diff --git a/js/lex.js b/js/lex.js index 8c3b0f1..bfc8e8e 100644 --- a/js/lex.js +++ b/js/lex.js @@ -17,7 +17,7 @@ Lex.prototype.build = function(){ this.span.innerHTML = this.html() } Lex.prototype.css = function(){ - if (this.opacity == 0) return "fabb" + if (this.opacity == 0 && ! this.char) return "fabb" return "f" + letters[mod(this.fg,16)] + "b" + letters[mod(this.bg,16)] } Lex.prototype.html = function(){ @@ -57,6 +57,14 @@ Lex.prototype.clone = function (lex){ this.opacity = lex.opacity this.build() } +Lex.prototype.paint = function (lex){ + if (lex.opacity == 0) return + if (brush.draw_fg) this.fg = lex.fg + if (brush.draw_bg) this.bg = lex.bg + if (brush.draw_char) this.char = lex.char + this.opacity = 1 + this.build() +} Lex.prototype.copy = function () { var lex = new Lex (0,0) lex.clone(this) @@ -108,6 +116,6 @@ Lex.prototype.demolish = function(){ Lex.prototype.key = function(char, keyCode) { if (! char) { return } this.char = char - this.fg = brush.bg + this.fg = brush.fg this.build() } diff --git a/js/tool.js b/js/tool.js index 190f29f..d3d40c1 100644 --- a/js/tool.js +++ b/js/tool.js @@ -21,4 +21,14 @@ var Tool = Model({ }) var Checkbox = Tool.extend({ + init: function (span){ + this.__init(span) + var state = this.name[0] == "x" + this.name = this.name.replace(/^[x_] /,"") + this.update(state) + }, + update: function(state){ + if (state) this.el.innerHTML = "x " + this.name + else this.el.innerHTML = "_ " + this.name + } }) diff --git a/js/ui/brush.js b/js/ui/brush.js index 50f6e07..9bc80a5 100644 --- a/js/ui/brush.js +++ b/js/ui/brush.js @@ -73,6 +73,10 @@ var brush = (function(){ brush.bg = 1 brush.opacity = 1 + brush.draw_fg = true + brush.draw_bg = true + brush.draw_char = true + return brush })() \ No newline at end of file diff --git a/js/ui/controls.js b/js/ui/controls.js index 81403db..6f0fb91 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -1,7 +1,7 @@ var controls = (function(){ var controls = {} - + controls.circle = new Tool (circle_el) controls.circle.use = function(){ brush.generate = controls.circle.generate @@ -69,15 +69,18 @@ var controls = (function(){ canvas.clear() } - controls.grid = new Tool (grid_el) + controls.grid = new Checkbox (grid_el) controls.grid.use = function(){ document.body.classList.toggle('grid') + this.update( document.body.classList.contains("grid") ) } controls.grid.show = function(){ document.body.classList.add('grid') + this.update( true ) } controls.grid.hide = function(){ document.body.classList.remove('grid') + this.update( false ) } ClipboardTool = Tool.extend({ @@ -86,43 +89,63 @@ var controls = (function(){ clipboard.hide() } }) + controls.save = new ClipboardTool (save_el) + controls.save.use = function(){ + clipboard.show() + clipboard.export_mode() + } + controls.load = new ClipboardTool (load_el) + controls.load.use = function(){ + clipboard.show() + clipboard.import_mode() + } + + // + ShaderTool = Tool.extend({ use: function(){ - shader_textarea.style.display = "block" + shader_rapper.style.display = "block" shader_textarea.focus() }, blur: function(){ this.__blur() - shader_textarea.style.display = "none" + shader_rapper.style.display = "none" } }) - controls.shader = new ShaderTool (shader_el) - shader_textarea.value = demo_shader.innerHTML shader_textarea.addEventListener("input", function(){ var fn = shader.build(shader_textarea.value) fn && shader.run(canvas) }) + controls.animate = new Checkbox (animate_checkbox) + controls.animate.use = function(state){ + var state = shader.toggle() + this.update(state) + } + + // - controls.save = new ClipboardTool (save_el) - controls.save.use = function(){ - clipboard.show() - clipboard.export_mode() + controls.fg = new Checkbox (fg_checkbox) + controls.fg.use = function(state){ + brush.draw_fg = state || ! brush.draw_fg + this.update(brush.draw_fg) } - controls.load = new ClipboardTool (load_el) - controls.load.use = function(){ - clipboard.show() - clipboard.import_mode() + + controls.bg = new Checkbox (bg_checkbox) + controls.bg.use = function(state){ + brush.draw_bg = state || ! brush.draw_bg + this.update(brush.draw_bg) } - - controls.animate = new Tool (animate_checkbox) - controls.animate.use = function(){ - var state = shader.toggle() - if (state) this.el.innerHTML = "x animate" - else this.el.innerHTML = "_ animate" + + controls.char = new Checkbox (char_checkbox) + controls.char.use = function(state){ + brush.draw_char = state || ! brush.draw_char + this.update(brush.draw_char) } + // + controls.width = new Lex (width_el) controls.height = new Lex (height_el) controls.canvas_width = new Lex (canvas_width_el) @@ -150,6 +173,9 @@ var controls = (function(){ controls.select, controls.clear, controls.grid, + controls.fg, + controls.bg, + controls.char, controls.shader, controls.animate, controls.save, -- cgit v1.2.3-70-g09d2