Editor draft

diff --git a/editor.css b/editor.css
new file mode 100644 (file)
index 0000000..a96db15
--- /dev/null
+++ b/editor.css
@@ -0,0 +1,175 @@
+
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+
+    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 ;
+}
+
+body, textarea {
+    font-family: serif;
+    font-size: 25px;
+}
+
+textarea, .copy {
+    font-family: monospace;
+    color: black;
+}
+
+a {
+    color: #a00;
+}
+
+a:visited {
+    color: #c00;
+}
+
+a:hover {
+}
+
+a:focus {
+}
+
+.error {
+    text-shadow: 0px 0px 10px #f00 ;
+}
+
+.tengwar.annatar > p {
+    line-height: 210%;
+}
+
+.tengwar.parmaite > p {
+    line-height: 100%;
+}
+
+#output {
+    text-align: center;
+    line-height: 150px;
+    font-size: 60px;
+}
+
+#output-box, #input-box {
+    overflow: auto;
+}
+
+#divider {
+    background: #dae7f2; /* Old browsers */
+    background: -moz-linear-gradient(top,  #dae7f2 0%, #646c70 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dae7f2), color-stop(100%,#646c70)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #dae7f2 0%,#646c70 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #dae7f2 0%,#646c70 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #dae7f2 0%,#646c70 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #dae7f2 0%,#646c70 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dae7f2', endColorstr='#646c70',GradientType=0 ); /* IE6-9 */
+
+    -webkit-user-select: none;
+}
+
+#input {
+    font-family: monospace;
+    text-align: center;
+}
+
+/* layout */
+
+#body-box {
+    display: -webkit-flex;
+    -webkit-flex-flow: column;
+    -webkit-align-items: stretch;
+    height: 100%;
+    width: 100%;
+}
+
+#output-box {
+    -webkit-flex: 3;
+    display: -webkit-flex;
+    -webkit-flex-flow: column;
+    -webkit-align-items: center;
+    -webkit-justify-content: center;
+    padding: 30px;
+}
+
+#divider {
+    -webkit-flex: 0 0 10px;
+    background-color: #aaa;
+    cursor: row-resize;
+}
+
+#transliteration-box {
+    display: -webkit-flex;
+    -webkit-flex-flow: row;
+    -webkit-justify-content: center;
+    -webkit-align-items: center;
+    overflow: auto;
+}
+
+#transliteration-box > div {
+    display: -webkit-flex;
+    -webkit-flex-flow: column;
+    -webkit-justify-content: center;
+    -webkit-align-items: center;
+    padding: 0 4px;
+}
+
+#transliteration-box > div > div {
+    font-family: monospace;
+}
+
+#input-box {
+    height: 10em;
+    display: -webkit-flex;
+    -webkit-flex-flow: row;
+    -webkit-justify-content: center;
+    -webkit-align-items: stretch;
+    overflow: hidden;
+}
+
+#form-box {
+    padding: 20px;
+    overflow: auto;
+}
+
+#content-box {
+    -webkit-flex: 1;
+    display: -webkit-flex;
+    -webkit-flex-flow: column;
+    -webkit-align-items: stretch;
+    -webkit-justify-content: stretch;
+    padding: 10px;
+}
+
+#input {
+    -webkit-flex: 1;
+    height: 100%;
+    width: 100%;
+}
+
+#about-box {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 20px 35px;
+}
+
+/* animation */
+
+body.bootstrap #input-box {
+    -webkit-transition-property: height;
+    -webkit-transition-duration: 500ms;
+}
+

diff --git a/editor.html b/editor.html
new file mode 100644 (file)
index 0000000..4c905e4
--- /dev/null
+++ b/editor.html
@@ -0,0 +1,73 @@
+<html>
+    <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8">
+        <title>Tengwar Transcriber</title>
+        <link rel="stylesheet" type="text/css" href="tengwar-parmaite.css">
+        <link rel="stylesheet" type="text/css" href="tengwar-annatar.css">
+        <link rel="stylesheet" type="text/css" href="editor.css">
+    </head>
+    <body>
+
+        <noscript>
+            <br>This transcriber makes extensive use
+            of JavaScript and very new CSS tricks.
+            You might try using the much older
+            <a href="http://tengwar.art.pl/tengwar/ott/start.php?l=en">
+                tengwar transcriber
+            </a> if your browser does not support
+            these features.
+        </noscript>
+
+        <div id="body-box">
+            <div id="output-box">
+                <div id="output" class="tengwar annatar"></div>
+            </div>
+            <div id="transliteration-box">
+            </div>
+            <div id="divider"></div>
+            <div id="input-box">
+                <div id="form-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="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>
+                    <!--
+                    <input type="checkbox" name="transliteration" id="input-transliteration">
+                    <label for="input-transliteration">Show transliteration</label>
+                    -->
+                </div>
+                <div id="content-box" style="">
+                    <textarea id="input" spellcheck="false"></textarea>
+                    <!--<div id="input" contenteditable spellcheck="false"></div>-->
+                </div>
+            </div>
+        </div>
+
+        <div id="about-box">
+            <a href="about.html">about</a>
+        </div>
+
+        <script src="node_modules/mr/bootstrap.js" data-module="editor" charset="utf-8"></script>
+
+        <script src="http://static.getclicky.com/js" type="text/javascript"></script> 
+        <script type="text/javascript">clicky.init(237383);</script> 
+        <noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/237383ns.gif" /></p></noscript> 
+
+        <script type="text/javascript">
+            var _gaq = _gaq || [];
+            _gaq.push(['_setAccount', 'UA-25808349-1']);
+            _gaq.push(['_setDomainName', '.3rin.gs']);
+            _gaq.push(['_trackPageview']);
+            (function() {
+                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+            })();
+        </script>
+
+    </body>
+</html>

diff --git a/test.js b/editor.js
similarity index 56%
rename from test.js
rename to editor.js
index 6e258e7..e90ce66 100644 (file)
--- a/test.js
+++ b/editor.js
@@ -5,45 +5,69 @@ var Classical = require("./classical");
 var TengwarAnnatar = require("./tengwar-annatar");
 var TengwarParmaite = require("./tengwar-parmaite");
 
+var body = document.body;
 var input = document.querySelector("#input");
 var generalUse = document.querySelector("#input-general-use");
 var classical = document.querySelector("#input-classical");
 var annatar = document.querySelector("#input-tengwar-annatar");
 var parmaite = document.querySelector("#input-tengwar-parmaite");
 var output = document.querySelector("#output");
+var divider = document.querySelector("#divider");
+var inputBox = document.querySelector("#input-box");
 
 if (window.location.search) {
     query = QS.parse(window.location.search.slice(1));
-    input.innerText = query.q || "";
+    input.value = 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 = {};
+    query = {
+        q: "Mae govannen, Arda!",
+        mode: "general-use",
+        font: "annatar"
+    };
 }
 
+body.classList.add("bootstrap");
+update();
+setTimeout(function () {
+    body.classList.remove("bootstrap");
+}, 1000);
+
 function update() {
     var value = query.q || "";
+    if (value != input.value) {
+        input.value = value;
+    }
     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});
+    inputBox.style.height = query.height + "px";
 }
 
 function onupdate(event) {
-    query.q = input.innerText;
-    query.mode = generalUse.checked ? "general-use" : "classical";
-    query.font = annatar.checked ? "annatar" : "parmaite";
-    update();
+    var change;
+    if (query.q !== input.value) change = true;
+    query.q = input.value;
+    var newMode = generalUse.checked ? "general-use" : "classical";
+    if (query.mode !== newMode) change = true;
+    query.mode = newMode;
+    var newFont = annatar.checked ? "annatar" : "parmaite";
+    if (query.font !== newFont) change = true;
+    query.font = newFont;
+    if (change) update();
 }
 
 input.addEventListener("keyup", onupdate);
 input.addEventListener("keydown", onupdate);
 
+input.select();
+/*
 input.focus();
 var range = document.createRange();
 var node;
@@ -56,9 +80,29 @@ range.collapse();
 var selection = window.getSelection();
 selection.removeAllRanges();
 selection.addRange(range);
+*/
 
 generalUse.addEventListener("change", onupdate);
 classical.addEventListener("change", onupdate);
 parmaite.addEventListener("change", onupdate);
 annatar.addEventListener("change", onupdate);
 
+divider.addEventListener("mousedown", function (event) {
+    event.preventDefault();
+    var start = event.y;
+    window.addEventListener("mouseup", mouseup);
+    window.addEventListener("mousemove", mousemove);
+    function mousemove(event) {
+        var end = event.y;
+        var delta = end - start;
+        var height = parseInt(window.getComputedStyle(inputBox).height, 10);
+        start = end;
+        query.height = height - delta;
+        update();
+    }
+    function mouseup(event) {
+        window.removeEventListener("mouseup", mouseup);
+        window.removeEventListener("mousemove", mousemove);
+    }
+});
+

diff --git a/test.css b/test.css
deleted file mode 100644 (file)
index dccdde4..0000000
--- a/test.css
+++ /dev/null
@@ -1,155 +0,0 @@
-
-body {
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    height: 100%;
-    width: 100%;
-
-}
-
-body, textarea {
-    font-family: serif;
-    font-size: 25px;
-}
-
-textarea, .copy {
-    font-family: monospace;
-    color: black;
-}
-
-a {
-    color: #a00;
-}
-
-a:visited {
-    color: #c00;
-}
-
-a:hover {
-}
-
-a:focus {
-}
-
-#annotation table {
-    border-collapse: collapse;
-    margin-right: 1em;
-}
-
-#annotation td {
-    border: solid 1px;
-    width: 1em;
-    text-align: left;
-    font-size: 20px;
-    padding: 2px;
-    line-height: 100%;
-    text-shadow: 0px 0px 10px #730 ;
-    white-space: nowrap;
-    font-family: monospace;
-}
-
-#output {
-    text-align: center;
-    line-height: 150px;
-    font-size: 60px;
-    width: 100%;
-}
-
-#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%;
-}
-
-#about-box {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    padding-right: 1ex;
-    padding-bottom: .5ex;
-}
-
-#option-box {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    padding-left: 1ex;
-    padding-bottom: .5ex;
-}
-
-.hbox {
-    display: -webkit-box;
-    display: -moz-box;
-    display: box;
-    -webkit-box-orient: horizontal;
-    -moz-box-orient: horizontal;
-    box-orient: horizontal;
-    -webkit-box-align: baseline;
-    -moz-box-align: baseline;
-    box-align: baseline;
-    margin: 0;
-    padding: 0;
-}
-.vbox {
-    display: -webkit-box;
-    display: -moz-box;
-    display: box;
-    -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 {
-    padding: 4ex;
-}
-
-td {
-    width: 4em;
-}
-
-.error {
-    text-shadow: 0px 0px 10px #f00 ;
-}
-
-.tengwar.annatar > p {
-    line-height: 210%;
-}
-
-.tengwar.parmaite > p {
-    line-height: 100%;
-}
-

diff --git a/test.html b/test.html
deleted file mode 100644 (file)
index 23c96c0..0000000
--- a/test.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=utf-8">
-        <title>Tengwar Transcriber</title>
-        <link rel="stylesheet" type="text/css" href="tengwar-parmaite.css">
-        <link rel="stylesheet" type="text/css" href="tengwar-annatar.css">
-        <link rel="stylesheet" type="text/css" href="test.css">
-    </head>
-    <body>
-
-        <noscript>
-            <br>This transcriber makes extensive use
-            of JavaScript and very new CSS tricks.
-            You might try using the much older
-            <a href="http://tengwar.art.pl/tengwar/ott/start.php?l=en">
-                tengwar transcriber
-            </a> if your browser does not support
-            these features.
-        </noscript>
-
-        <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>
-            <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 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="about-box">
-            <a href="about.html">about</a>
-        </div>
-
-        <script src="node_modules/mr/bootstrap.js" data-module="test" charset="utf-8"></script>
-
-    </body>
-</html>