Begin editor experiment

diff --git a/package.json b/package.json
index a29fa8e..d34f5e5 100644 (file)
--- a/package.json
+++ b/package.json
@@ -22,7 +22,8 @@
         "url": "http://github.com/kriskowal/tengwarjs.git"
     },
     "dependencies": {
-        "mr": "0.0.x"
+        "mr": "0.0.x",
+        "qs": "0.1.x"
     },
     "devDependencies": {
         "jasmine-node": "1.0.x"

diff --git a/test.css b/test.css
index 2f7d53c..dccdde4 100644 (file)
--- a/test.css
+++ b/test.css
@@ -1,16 +1,10 @@
 
 body {
-    color: #ff0;
-
-    background-repeat: no-repeat;
-    background: #fefcea; /* Old browsers */
-    background: -moz-linear-gradient(top, #fefcea 0%, #f9e63b 7%, #e0a928 53%, #d69a2c 94%, #c97e16 99%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(7%,#f9e63b), color-stop(53%,#e0a928), color-stop(94%,#d69a2c), color-stop(99%,#c97e16)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top, #fefcea 0%,#f9e63b 7%,#e0a928 53%,#d69a2c 94%,#c97e16 99%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #fefcea 0%,#f9e63b 7%,#e0a928 53%,#d69a2c 94%,#c97e16 99%); /* Opera11.10+ */
-    background: -ms-linear-gradient(top, #fefcea 0%,#f9e63b 7%,#e0a928 53%,#d69a2c 94%,#c97e16 99%); /* IE10+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#c97e16',GradientType=0 ); /* IE6-9 */
-    background: linear-gradient(top, #fefcea 0%,#f9e63b 7%,#e0a928 53%,#d69a2c 94%,#c97e16 99%); /* W3C */
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
 
 }
 
@@ -60,15 +54,27 @@ a:focus {
     line-height: 150px;
     font-size: 60px;
     width: 100%;
-    text-shadow: 0px 0px 10px #730 ;
 }
 
-#output-box {
-    margin-bottom: 10px;
+#output-box, #input-box {
     overflow: auto;
+    color: #ff0;
+
+    background-repeat: no-repeat;
+    background: #fefcea; /* Old browsers */
+    background: -moz-linear-gradient(top, #fefcea 0%, #f9e63b 7%, #e0a928 53%, #d69a2c 94%, #c97e16 99%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(7%,#f9e63b), color-stop(53%,#e0a928), color-stop(94%,#d69a2c), color-stop(99%,#c97e16)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, #fefcea 0%,#f9e63b 7%,#e0a928 53%,#d69a2c 94%,#c97e16 99%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #fefcea 0%,#f9e63b 7%,#e0a928 53%,#d69a2c 94%,#c97e16 99%); /* Opera11.10+ */
+    background: -ms-linear-gradient(top, #fefcea 0%,#f9e63b 7%,#e0a928 53%,#d69a2c 94%,#c97e16 99%); /* IE10+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#c97e16',GradientType=0 ); /* IE6-9 */
+    background: linear-gradient(top, #fefcea 0%,#f9e63b 7%,#e0a928 53%,#d69a2c 94%,#c97e16 99%); /* W3C */
+
+    text-shadow: 0px 0px 10px #730 ;
 }
 
 #input {
+    font-family: monospace;
     text-align: center;
     width: 100%;
 }
@@ -99,6 +105,8 @@ a:focus {
     -webkit-box-align: baseline;
     -moz-box-align: baseline;
     box-align: baseline;
+    margin: 0;
+    padding: 0;
 }
 .vbox {
     display: -webkit-box;
@@ -107,16 +115,22 @@ a:focus {
     -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
     box-orient: vertical;
+    margin: 0;
+    padding: 0;
 }
 .strut {
     -webkit-box-flex: 0;
     -moz-box-flex: 0;
     box-flex: 0;
+    margin: 0;
+    padding: 0;
 }
 .spring {
     -webkit-box-flex: 1;
     -moz-box-flex: 1;
     box-flex: 1;
+    margin: 0;
+    padding: 0;
 }
 
 table {

diff --git a/test.html b/test.html
index 65fb016..23c96c0 100644 (file)
--- a/test.html
+++ b/test.html
@@ -18,37 +18,28 @@
             these features.
         </noscript>
 
-        <div class="vbox" style="height: 100%; width: 100%">
+        <div class="vbox" style="height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden">
             <div class="vbox spring" id="output-box">
                 <div class="spring"></div>
                 <div id="output" class="strut tengwar parmaite"></div>
                 <div class="spring"></div>
-                <div class="strut hbox">
-                    <div class="spring"></div>
-                    <div id="annotation"></div>
-                    <div class="spring"></div>
-                </div>
             </div>
-            <div class="strut hbox">
-                <div class="strut" style="width: 30ex"></div>
-                <div class="spring">
-                    <textarea id="input"></textarea>
+            <div class="strut hbox" id="input-box" style="height: 20%; overflow: hidden; padding: 5px; margin: 0">
+                <div class="strut" style="width: 20%; overflow: auto; padding: 0; margin: 0">
+                    <input type="radio" name="mode" id="input-general-use" value="general-use" checked>
+                    <label for="input-general-use">General Use</label><br>
+                    <input type="radio" name="mode" id="input-classical" value="classical">
+                    <label for="input-classical">Classical</label><br>
+                    <input type="radio" name="font" id="input-tengwar-annatar" value="annatar" checked>
+                    <label for="input-tengwar-annatar">Tengwar Annatar</label><br>
+                    <input type="radio" name="font" id="input-tengwar-parmaite" value="parmaite">
+                    <label for="input-tengwar-parmaite">Tengwar Parmaitë</label><br>
                 </div>
-                <div class="strut" style="width: 30ex"></div>
+                <div contenteditable id="input" class="spring" style="max-height: 100%; overflow: auto; padding: 0; margin: 0"></div>
+                <div class="strut" style="width: 20%"></div>
             </div>
         </div>
 
-        <div id="option-box">
-            <input type="radio" name="mode" id="input-general-use" value="general-use" checked>
-            <label for="input-general-use">General Use</label><br>
-            <input type="radio" name="mode" id="input-classical" value="classical">
-            <label for="input-classical">Classical</label><br>
-            <input type="radio" name="font" id="input-tengwar-annatar" value="tengwar-annatar" checked>
-            <label for="input-tengwar-annatar">Tengwar Annatar</label><br>
-            <input type="radio" name="font" id="input-tengwar-parmaite" value="tengwar-parmaite">
-            <label for="input-tengwar-parmaite">Tengwar Parmaitë</label><br>
-        </div>
-
         <div id="about-box">
             <a href="about.html">about</a>
         </div>

diff --git a/test.js b/test.js
index b6a2dfd..6e258e7 100644 (file)
--- a/test.js
+++ b/test.js
@@ -1,4 +1,5 @@
 
+var QS = require("qs");
 var GeneralUse = require("./general-use");
 var Classical = require("./classical");
 var TengwarAnnatar = require("./tengwar-annatar");
@@ -11,22 +12,50 @@ var annatar = document.querySelector("#input-tengwar-annatar");
 var parmaite = document.querySelector("#input-tengwar-parmaite");
 var output = document.querySelector("#output");
 
+if (window.location.search) {
+    query = QS.parse(window.location.search.slice(1));
+    input.innerText = query.q || "";
+    generalUse.checked = query.mode === "general-use";
+    classical.checked = query.mode === "classical";
+    parmaite.checked = query.font === "parmaite";
+    annatar.checked = query.font === "annatar";
+    update();
+} else {
+    query = {};
+}
+
 function update() {
-    var value = input.value;
-    var mode = generalUse.checked ? GeneralUse : Classical;
-    var font = annatar.checked ? TengwarAnnatar : TengwarParmaite;
-    output.classList.remove(annatar.checked ? "parmaite" : "annatar");
-    output.classList.add(annatar.checked ? "annatar" : "parmaite");
+    var value = query.q || "";
+    history.replaceState(query, value, "?" + QS.stringify(query));
+    var mode = query.mode === "classical" ? Classical : GeneralUse;
+    var font = query.font === "annatar" ? TengwarAnnatar : TengwarParmaite;
+    output.classList.remove(query.font !== "parmaite" ? "parmaite" : "annatar");
+    output.classList.add(query.font === "parmaite" ? "parmaite" : "annatar");
     output.innerHTML = mode.transcribe(value, {font: font, block: true});
 }
 
 function onupdate(event) {
+    query.q = input.innerText;
+    query.mode = generalUse.checked ? "general-use" : "classical";
+    query.font = annatar.checked ? "annatar" : "parmaite";
     update();
 }
 
 input.addEventListener("keyup", onupdate);
 input.addEventListener("keydown", onupdate);
-input.select();
+
+input.focus();
+var range = document.createRange();
+var node;
+if (!input.lastChild) {
+    input.appendChild(document.createTextNode(""));
+}
+node = input.lastChild;
+range.selectNode(node);
+range.collapse();
+var selection = window.getSelection();
+selection.removeAllRanges();
+selection.addRange(range);
 
 generalUse.addEventListener("change", onupdate);
 classical.addEventListener("change", onupdate);