ridiculous minification-by-hand. Overhead per page is ~3.6k now

diff --git a/editor.js b/editor.js
index 4bf01452b1ec84678041681e8f1b90130f3a4d61..b25ee0bf8886113abe4efff2f5276d54497c6e44 100644 (file)
--- a/editor.js
+++ b/editor.js
@@ -1,86 +1,64 @@
 "use strict";
 
 (() => {
-    const getSelNode = () => {
-        const node = document.getSelection().anchorNode;
-        return (node.nodeType === 3 ? node.parentNode : node);
-    };
+       const getSelNode = () => {
+               const node = document.getSelection().anchorNode;
+               return (node.nodeType === 3 ? node.parentNode : node);
+       };
 
-    const keyCmd = (evnt, cmd, arg) => {
-        if (evnt.ctrlKey || evnt.metaKey)
-            return !document.execCommand(cmd, false, arg);
-        return true;
-    }
+       const ymd_string = () => {
+               const dt = new Date(), month = (dt.getMonth() + 1), day = dt.getDate();
+               return [dt.getFullYear(), (month > 9 ? '' : '0') + month, (day > 9 ? '' : '0') + day].join('.')
+       };
 
-    const keys = {
-        "b": (evnt) => keyCmd(evnt, "bold"),
-        "i": (evnt) => keyCmd(evnt, "italic"),
-        "u": (evnt) => keyCmd(evnt, "underline"),
-        "0": (evnt) => keyCmd(evnt, "formatBlock", "<p>"),
-        "1": (evnt) => keyCmd(evnt, "formatBlock", "<h1>"),
-        "2": (evnt) => keyCmd(evnt, "formatBlock", "<h2>"),
-        "3": (evnt) => keyCmd(evnt, "formatBlock", "<h3>"),
-        "4": (evnt) => keyCmd(evnt, "formatBlock", "<h4>"),
-        "5": (evnt) => keyCmd(evnt, "formatBlock", "<h5>"),
-        "6": (evnt) => keyCmd(evnt, "formatBlock", "<h6>"),
-        "7": (evnt) => keyCmd(evnt, "insertOrderedList"),
-        "8": (evnt) => keyCmd(evnt, "insertUnorderedList"),
-        "9": (evnt) => {
-            if (evnt.ctrlKey || evnt.metaKey) {
-                const node = getSelNode();
-                const defurl = (node.nodeName === "A" ? node.href : "http://");
-                const url = prompt("Enter URL:", defurl);
-                return !document.execCommand(
-                    (url === "" ? "unlink" : "createLink"), false, url);
-            }
-            return true;
-        },
+       const exec = document.execCommand;
+       const ctrlHeld = (ev) => (ev.ctrlKey || ev.metaKey)
+       const inTag = (tag) => (getSelNode().nodeName === tag);
+       const keyCmd = (ev, cmd, arg) => (ctrlHeld() ? !exec(cmd, false, arg) : true);
 
-        "Enter": () => {
-            if (getSelNode().nodeName === "CODE")
-                return !document.execCommand("insertHTML",false,"\n");
-            else
-                return !document.execCommand("insertParagraph",false);
-        },
+       const keys = {
+               "b": (ev) => keyCmd(ev, "bold"),
+               "i": (ev) => keyCmd(ev, "italic"),
+               "u": (ev) => keyCmd(ev, "underline"),
+               "0": (ev) => keyCmd(ev, "formatBlock", "<p>"),
+               "1": (ev) => keyCmd(ev, "formatBlock", "<h1>"),
+               "2": (ev) => keyCmd(ev, "formatBlock", "<h2>"),
+               "3": (ev) => keyCmd(ev, "formatBlock", "<h3>"),
+               "4": (ev) => keyCmd(ev, "formatBlock", "<h4>"),
+               "5": (ev) => keyCmd(ev, "formatBlock", "<h5>"),
+               "6": (ev) => keyCmd(ev, "formatBlock", "<h6>"),
+               "7": (ev) => keyCmd(ev, "insertOrderedList"),
+               "8": (ev) => keyCmd(ev, "insertUnorderedList"),
+               "9": (ev) => {
+                       if (ctrlHeld()) {
+                               const defurl = (inTag("A") ? getSelNode().href : "http://");
+                               const url = prompt("Enter URL:", defurl);
+                               return !exec((url !== null && url !== "" ? "createLink" : "unlink"), false, url);
+                       }
+                       return true;
+               },
 
-        "Tab": (evnt) => {
-            if (getSelNode().nodeName === "CODE")
-                return !document.execCommand("insertHTML",false,"\t");
-            else
-                return !document.execCommand((evnt.shiftKey ? "out" : "in")+"dent",false);
-        },
+               "Enter": () => !exec(inTag("CODE") ? "insertHTML" : "insertParagraph", false, "\n"),
 
-        ";": (evnt) => keyCmd(evnt, "insertHTML", "<code>\r\n</code>"),
-        "'": (evnt) => {
-            if (evnt.ctrlKey || evnt.metaKey) {
-                const block = (getSelNode().nodeName === "BLOCKQUOTE" ? "<p>" : "<blockquote>");
-                return !document.execCommand("formatBlock", false, block);
-            }
-            return true;
-        },
-    };
+               "Tab": (ev) => {
+                       if (inTag("CODE"))
+                               return !exec("insertHTML",false,"\t");
+                       else
+                               return !exec((ev.shiftKey ? "out" : "in")+"dent",false);
+               },
 
-    const ymd_string = () => {
-        const date = new Date();
-        const month = date.getMonth() + 1;
-        const day = date.getDate();
-        return "" +
-            date.getFullYear() + "." +
-            (month > 9 ? '' : '0') + month + "." +
-            (day > 9 ? '' : '0') + day;
-    };
+               ";": (ev) => keyCmd(ev, "insertHTML", "<code>\r\n</code>"),
+               "'": (ev) => {
+                       if (ctrlHeld()) {
+                               const block = (inTag("BLOCKQUOTE") ? "<p>" : "<blockquote>");
+                               return !exec("formatBlock", false, block);
+                       }
+                       return true;
+               },
+       };
 
-    header.onkeyup = (evnt) => {
-        document.title = header.innerText;
-    }
-
-    content.onkeydown = (evnt) => {
-        const keyfn = keys[evnt.key];
-        return (keyfn ? keyfn(evnt) : true);
-    }
-
-    /* set the title to todays date */
-    header.innerHTML = '<h1 align="center" contenteditable="true">'
-                     + ymd_string() + '</h1><hr/>';
-    document.title = header.innerText;
+       header.onkeyup = (ev) => (document.title = header.innerText)
+       content.onkeydown = (ev) => (keys[ev.key] ? keyfn(keys[ev.key]) : true),
+       header.innerHTML = '<h1 align="center" contenteditable="true">' + ymd_string() + '</h1><hr/>';
+       document.title = header.innerText;
 })();

diff --git a/index.html b/index.html
index 0e6f56b7c96f316714724a2f7b25a0ce54321f1b..62bfc6bf61156c0cf23c8a0402aa4cefffdb20ee 100644 (file)
--- a/index.html
+++ b/index.html
@@ -1,61 +1,17 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Journal</title>
-        <meta charset="utf-8">
-        <meta name="description" content="Journal">
-        <link rel="stylesheet" type="text/css" href="style.css">
-    </head>
-    <body>
-        <section>
-            <header id="header">
-                <h1 align="center" contenteditable="true">
-                    2017.12.01
-                </h1>
-                <hr>
-            </header>
-            <article id="content" contenteditable="true">
-                <h1>Heading 1</h1>
-                <h2>Heading 2</h2>
-                <h3>Heading 3</h3>
-                <a href="http://google.com">This is a link</a><br/>
-                <p>blockqoute:</p>
-                <blockquote>
-                this is a block quote<br/>
-                and it's multi-line
-                </blockquote>
-                <p>unordered list:</p>
-                <ul>
-                    <li>foo</li>
-                </ul>
-                <p>ordered list:</p>
-                <ol>
-                    <li>foo</li>
-                </ol>
-                <p>table:</p>
-                <table>
-                    <thead>
-                        <tr>
-                            <th>Header 1</th>
-                            <th>Header 2</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>Cell 1</td>
-                            <td>Cell 2</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <p>code block:</p>
-                <code>void main(int argc, char** argv) {
-    return 0;
-}</code>
-                <p>Paragraph text:<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nisl tellus, lacinia lobortis feugiat eu, fermentum sit amet nulla. Donec tincidunt feugiat tortor, sit amet varius nisi posuere ultrices. Suspendisse feugiat, massa in dictum ultricies, mauris neque tincidunt ex, sit amet pharetra risus urna vel velit. Phasellus mattis magna vitae mollis venenatis. Vestibulum pulvinar sem quis efficitur tincidunt. Morbi tempor neque id erat placerat, ac iaculis ex venenatis. Duis porttitor euismod augue, et ullamcorper quam sodales nec. Vestibulum ultricies pellentesque mattis. Nulla sit amet felis auctor, pellentesque nunc a, suscipit ligula. Praesent in justo dolor. Nullam eleifend tempus mi ac malesuada. Mauris et libero lacus.</p>
-                <br/>
-            </article>
-        </section>
-        <script src="editor.js"></script>
-    </body>
+<head>
+       <title></title>
+       <meta charset="utf-8">
+       <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+       <section>
+               <header id="header"></header>
+               <article id="content" contenteditable="true">
+                       <p>Edit here...</p>
+               </article>
+       </section>
+       <script src="editor.js"></script>
+</body>
 </html>

diff --git a/style.css b/style.css
index 52721ed0ec6d35807de7344144d1114cd963e361..80a885cf7a390cbcb0fc3661f03bc7373efd6446 100644 (file)
--- a/style.css
+++ b/style.css
@@ -1,17 +1,14 @@
-/* Get rid of border box on editable content */
 * { -moz-box-sizing: border-box; box-sizing: border-box; }
 *:focus { outline: none; }
 
-/* set the font and the artical content width */
 body {
-    font-family: sans-serif;
-    font-size: 16px;
-    max-width: 75%;
-    margin-left: auto;
-    margin-right: auto;
+       font-family: sans-serif;
+       font-size: 16px;
+       max-width: 75%;
+       margin-left: auto;
+       margin-right: auto;
 }
 
-/* override default heading sizes */
 h1 { font-size: 2.0rem; }
 h2 { font-size: 1.5rem; }
 h3 { font-size: 1.17rem; }
@@ -20,53 +17,49 @@ h5 { font-size: 0.83rem; }
 h6 { font-size: 0.67rem; }
 a { color: deepskyblue; }
 
-/* table styling: Github or skeleton table style */
 table {
-    display: block;
-    width: 100%;
-    overflow: auto;
-    border-spacing: 0;
-    border-collapse: collapse;
+       display: block;
+       width: 100%;
+       overflow: auto;
+       border-spacing: 0;
+       border-collapse: collapse;
 }
 
-/* code blocks */
 code {
-    display: block;
-    padding: 1rem 1.5rem;
-    white-space: pre;
-    margin: 0.2rem;
-    background: #F1F1F1;
-    border: 1px solid #E1E1E1;
-    border-radius: 4px;
-    -moz-tab-size: 4;
-    -o-tab-size:   4;
-    tab-size:      4;
+       display: block;
+       padding: 1rem 1.5rem;
+       white-space: pre;
+       margin: 0.2rem;
+       background: #F1F1F1;
+       border: 1px solid #E1E1E1;
+       border-radius: 4px;
+       -moz-tab-size: 4;
+       -o-tab-size:   4;
+       tab-size:      4;
 }
 
-/* code blocks */
 blockquote {
-    display: block;
-    border-left: 4px solid deepskyblue;
-    margin-left: -19px;
-    padding-left: 15px;
-    margin-right: 0px;
+       display: block;
+       border-left: 4px solid deepskyblue;
+       margin-left: -19px;
+       padding-left: 15px;
+       margin-right: 0px;
 }
 
-/* table formatting */
 table {
-    width: 100%;
-    display: table;
-    border-collapse: separate;
-    border-color: grey;
-    text-align: left;
-    vertical-align: middle;
+       width: 100%;
+       display: table;
+       border-collapse: separate;
+       border-color: grey;
+       text-align: left;
+       vertical-align: middle;
 }
 
 th, td {
-    padding: 0.80rem 0.80rem;
-    border-bottom: 1px solid #E1E1E1;
+       padding: 0.80rem 0.80rem;
+       border-bottom: 1px solid #E1E1E1;
 }
 
 th:first-child, td:first-child {
-    padding-left: 0;
+       padding-left: 0;
 }