diff options
| -rw-r--r-- | css/sally.css | 39 | ||||
| -rw-r--r-- | index.html | 57 | ||||
| -rw-r--r-- | js/app.js | 2 | ||||
| -rw-r--r-- | js/clipboard.js | 114 | ||||
| -rw-r--r-- | js/matrix.js | 2 | ||||
| -rw-r--r-- | js/ui/controls.js | 34 |
6 files changed, 139 insertions, 109 deletions
diff --git a/css/sally.css b/css/sally.css index 238fdab..71029f8 100644 --- a/css/sally.css +++ b/css/sally.css @@ -41,7 +41,6 @@ a:link, a:visited {text-decoration: none; color: #3b3740} word-wrap: break-word; } .block { - white-space:pre-line; padding-left: 30px; } .tool { @@ -50,41 +49,3 @@ a:link, a:visited {text-decoration: none; color: #3b3740} @media screen and (-webkit-min-device-pixel-ratio:0) { #nvgovy{white-space:pre;} } - -#users { - position:fixed !important; - width:85px; - right:9px; - height:100%; - z-index: 355; - top:0px; - margin-bottom:32px; -} - -#seperator{ - box-shadow: inset 0px 1px 1px 0px rgba(11, 11, 11, 0.05); - position:absolute; - margin-top:0px; - margin-left:0px; - width:5px; - height:100%; - background: -webkit-linear-gradient(left, #000000, #222222, #474747, #535353, #474747, #131313); - background: -moz-linear-gradient(0deg, #000000, #222222, #474747, #535353, #474747, #131313) repeat scroll 0 0 transparent; -} - -#shroud { - background-color: #000000; - height: 100%; - position: absolute; - right: 75px; - width: 5px; - z-index: 377; -} - -#list { - background-color: #000000; - height: 100%; - margin-left: 10px; - margin-top: 6px; - position: fixed; -} @@ -11,7 +11,10 @@ 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; float: right; font-size:12pt; width: 45%; height: 400px; background: #333; color: #0f0; border: 0; font-family: 'FixedsysExcelsior301Regular'; outline: 0; border: 1px solid #333; background:#010;} +#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;} +#import_rapper { display: none; } #cursor_input { position: absolute; top: 0; right: 0; width:30px; opacity: 0; } </style> @@ -25,31 +28,41 @@ body { transition: 0.1s linear; } <div id="palette_rapper" class="rapper"></div> <div id="brush_rapper" class="rapper"></div> <div id="tools_rapper" class="block"> - <span id="square_el" class="tool">square</span> - <span id="circle_el" class="tool">circle</span> - <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> - <span id="import_el" class="tool">import</span> - <span id="export_el" class="tool">export</span> + <span id="square_el" class="tool">square</span><br> + <span id="circle_el" class="tool">circle</span><br> + <span id="text_el" class="tool">text</span><br> + <span id="clear_el" class="tool">clear</span><br> + <span id="grid_el" class="tool">grid</span><br> + <br> + brush size: <span id="width_el" class="ed">5</span> x <span id="height_el" class="ed">5</span><br> + canvas size: <span id="canvas_width_el" class="ed">80</span> x <span id="canvas_height_el" class="ed">24</span><br> + <br> + <span id="animate_checkbox" class="tool">_ animate</span><br> + </div> + + <div id="textarea_mode"> + <div> + <span id="shader_el" class="tool">shader</span> + <span id="load_el" class="tool">load</span> + <span id="save_el" class="tool">save</span> + </div> + + <div id="import_rapper"> + <span id="format_group"> + <input type="radio" name="import_format" id="import_ascii"><label for="import_ascii">ascii</label> + <input type="radio" name="import_format" id="import_irssi"><label for="import_irssi">irssi</label> + <input type="radio" name="import_format" id="import_mirc"><label for="import_mirc">mirc</label> + </span> + <button id="import_button">import</button> + <button id="export_button">export</button><br> + <textarea id="import_textarea"></textarea> + </div> - 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> - - <span id="animate_checkbox" class="tool">_ animate</span> + <textarea id="shader_textarea"></textarea> </div> - <textarea id="shader_textarea"></textarea> + </div> - <div id="import_rapper"> - <input type="radio" name="import_format" id="import_ascii"><label for="import_ascii">ascii</label> - <input type="radio" name="import_format" id="import_irssi"><label for="import_irssi">irssi</label> - <input type="radio" name="import_format" id="import_mirc"><label for="import_mirc">mirc</label> - <button id="import_button">import</button> - <button id="export_button">export</button> - <textarea id="import_textarea" cols=80 rows=24></textarea> - </div> <input type="text" id="cursor_input"> @@ -34,7 +34,7 @@ function bind () { window.addEventListener('mouseup', function(){ dragging = erasing = false - if (current_tool.name != 'shader') { cursor_input.focus() } + if (current_tool.name != 'shader' && current_tool.name != 'load' && current_tool.name != 'save') { cursor_input.focus() } }); window.addEventListener('mousedown', function(e){ diff --git a/js/clipboard.js b/js/clipboard.js index 501b189..97261bc 100644 --- a/js/clipboard.js +++ b/js/clipboard.js @@ -1,49 +1,79 @@ var clipboard = (function () { - var format; - var disabled = false; - var contentType = 'text/plain;charset=utf-8' - document.body.addEventListener('copy', function (e) { - if (disabled) { return } - if (e.clipboardData) { - e.preventDefault(); - e.clipboardData.setData(contentType, canvas.irssi()); - } - if (window.clipboardData) { - e.returnValue = false; - window.clipboardData.setData(contentType, canvas.irssi()); - } - }, false); - - function import_data () { - var data = import_textarea.value - lines = data.split("\n") - } - function export_data () { - var output - switch (format) { - case 'ascii': - output = canvas.ascii() - break - case 'mirc': - output = canvas.mirc() - break - case 'irssi': - output = canvas.irssi() - break - } - } + var exports = { + format: "irssi", + importing: false, + visible: false, + + bind: function () { + import_ascii.addEventListener("change", exports.setFormat("ascii")) + import_irssi.addEventListener("change", exports.setFormat("irssi")) + import_mirc.addEventListener("change", exports.setFormat("mirc")) + import_button.addEventListener("click", exports.import_data) + export_button.addEventListener("click", exports.export_data) + import_textarea.addEventListener("focus", exports.focus) + import_textarea.addEventListener("blur", exports.blur) + import_irssi.setAttribute("checked", true) + }, + setFormat: function (name) { + return function () { + clipboard.format = name + if (! clipboard.importing) { clipboard.export_data() } + } + }, + show: function () { import_rapper.style.display = "block"; clipboard.visible = true }, + hide: function () { import_rapper.style.display = "none"; clipboard.visible = false }, + focus: function () { + if (! clipboard.importing) { + import_textarea.focus() + import_textarea.select() + } + }, + blur: function () { + }, - import_ascii.addEventListener("click", function(){ format = "ascii" }) - import_irssi.addEventListener("click", function(){ format = "irssi" }) - import_mirc.addEventListener("click", function(){ format = "mirc" }) - import_button.addEventListener("click", import_data) - export_button.addEventListener("click", export_data) - // import_textarea + import_mode: function () { + focus() + clipboard.importing = true + import_button.style.display = "inline-block" + export_button.style.display = format_group.display = "none" + import_textarea.value = "" + }, + export_mode: function () { + focus() + clipboard.importing = false + import_button.style.display = "none" + export_button.style.display = format_group.display = "inline-block" + clipboard.export_data() + }, + import_data: function () { + var data = import_textarea.value + lines = data.split("\n") + var width = lines.reduce(function(a,b){ return Math.max(a, b.length) }) + var height = lines.length + }, + export_data: function () { + var output + switch (clipboard.format) { + case 'ascii': + output = canvas.ascii() + break + case 'mirc': + output = canvas.mirc() + break + case 'irssi': + output = canvas.irssi() + break + } + import_textarea.value = output + clipboard.focus() + return output + }, - return { - enable: function(){ disabled = false }, - disable: function(){ disabled = true } } + exports.bind() + + return exports + })()
\ No newline at end of file diff --git a/js/matrix.js b/js/matrix.js index 4366eaa..81ced3e 100644 --- a/js/matrix.js +++ b/js/matrix.js @@ -107,7 +107,7 @@ Matrix.prototype.mirc = function () { } }) if (last && ! last.isClear()) { line += "\x03" } - return line.replace(/\s+$/,"") + return line }).filter(function(line){ return line.length > 0 }) return lines.join("\n") } diff --git a/js/ui/controls.js b/js/ui/controls.js index c780c50..d575725 100644 --- a/js/ui/controls.js +++ b/js/ui/controls.js @@ -64,12 +64,10 @@ var controls = (function(){ shader_textarea.style.display = "block" // setTimeout(function(){ shader_textarea.focus() }) shader_textarea.focus() - clipboard.disable() } controls.shader.blur = function(){ Tool.prototype.blur.call(this) shader_textarea.style.display = "none" - clipboard.enable() } shader_textarea.value = demo_shader.innerHTML shader_textarea.addEventListener("input", function(){ @@ -77,7 +75,25 @@ var controls = (function(){ fn && shader.run(canvas) }) - + controls.save = new Tool (save_el) + controls.save.use = function(){ + clipboard.show() + clipboard.export_mode() + } + controls.save.blur = function(){ + Tool.prototype.blur.call(this) + clipboard.hide() + } + controls.load = new Tool (load_el) + controls.load.use = function(){ + clipboard.show() + clipboard.import_mode() + } + controls.load.blur = function(){ + Tool.prototype.blur.call(this) + clipboard.hide() + } + controls.animate = new Tool (animate_checkbox) controls.animate.use = function(){ var state = shader.toggle() @@ -100,7 +116,17 @@ var controls = (function(){ }) }); - [controls.square, controls.circle, controls.text, controls.clear, controls.grid, controls.shader, controls.animate].forEach(function(tool){ + [ + controls.square, + controls.circle, + controls.text, + controls.clear, + controls.grid, + controls.shader, + controls.animate, + controls.save, + controls.load + ].forEach(function(tool){ tool.span.addEventListener('mousedown', function(e){ tool.focus() }) |