export to ascii / mirc / irssi

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;
-}
diff --git a/index.html b/index.html
index ec39e73..bfd8b27 100644
--- a/index.html
+++ b/index.html
@@ -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">
 
diff --git a/js/app.js b/js/app.js
index 284ea13..b2f1dfa 100644
--- a/js/app.js
+++ b/js/app.js
@@ -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()
 			})