Purple numbers

2 files changed, 390 insertions, 83 deletions

diff --git a/hatta/static/scripts.js b/hatta/static/scripts.js
index c687ca5..3463fa6 100644
--- a/hatta/static/scripts.js
+++ b/hatta/static/scripts.js
@@ -1,30 +1,152 @@
-function hatta_dates(){var a=document.getElementsByTagName(
-'abbr');var p=function(i){return('00'+i).slice(-2)};for(var i=0;i<a.length;++i)
-{var n=a[i];if(n.className==='date'){var m=
-/^([0-9]{4})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2}):([0-9]{2})Z$/.exec(
-n.getAttribute('title'));var d=new Date(Date.UTC(+m[1],+m[2]-1,+m[3],+m[4],
-+m[5],+m[6]));if(d){var b=-d.getTimezoneOffset()/60;if(b>=0){b="+"+b}
-n.textContent=""+d.getFullYear()+"-"+p(d.getMonth()+1)+"-"+p(d.getDate())+" "+
-p(d.getHours())+":"+p(d.getMinutes())+" GMT"+b}}}}function hatta_edit(){var b=
-document.getElementById('editortext');if(b){var c=0+
-document.location.hash.substring(1);var d=b.textContent.match(/(.*\n)/g);var
-f='';for(var i=0;i<d.length&&i<c;++i){f+=d[i]}b.focus();if(b.setSelectionRange)
-{b.setSelectionRange(f.length,f.length)}else if(b.createTextRange){var g=
-b.createTextRange();g.collapse(true);g.moveEnd('character',f.length);
-g.moveStart('character',f.length);g.select()}var h=document.createElement('pre'
-);b.parentNode.appendChild(h);var k=window.getComputedStyle(b,'');h.style.font=
-k.font;h.style.border=k.border;h.style.outline=k.outline;h.style.lineHeight=
-k.lineHeight;h.style.letterSpacing=k.letterSpacing;h.style.fontFamily=
-k.fontFamily;h.style.fontSize=k.fontSize;h.style.padding=0;h.style.overflow=
-'scroll';try{h.style.whiteSpace="-moz-pre-wrap"}catch(e){};try{
-h.style.whiteSpace="-o-pre-wrap"}catch(e){};try{h.style.whiteSpace="-pre-wrap"
-}catch(e){};try{h.style.whiteSpace="pre-wrap"}catch(e){};h.textContent=f;
-b.scrollTop=h.scrollHeight;h.parentNode.removeChild(h)}else{var l='';var m=
-document.getElementsByTagName('link');for(var i=0;i<m.length;++i){var n=m[i];
-if(n.getAttribute('type')==='application/wiki'){l=n.getAttribute('href')}}if(
-l===''){return}var o=['p','h1','h2','h3','h4','h5','h6','pre','ul','div',
-'span'];for(var j=0;j<o.length;++j){var m=document.getElementsByTagName(o[j]);
-for(var i=0;i<m.length;++i){var n=m[i];if(n.id&&n.id.match(/^line_\d+$/)){
-n.ondblclick=function(){var a=l+'#'+this.id.replace('line_','');
-document.location.href=a}}}}}}
-window.onload=function(){hatta_dates();hatta_edit()}
+(function () {
+
+var parse_date = function (text) {
+    /* Parse an ISO 8601 date string. */
+
+    var m = /^([0-9]{4})-([0-9]{2})-([0-9]{2})T([0-9]{2}):([0-9]{2}):([0-9]{2})Z$/.exec(text);
+    return new Date(Date.UTC(+m[1], +m[2] - 1, +m[3], +m[4], +m[5], +m[6]));
+};
+
+var format_date = function (d) {
+    /* Format a date for output. */
+
+    var pad  = function(number) {
+        return ('00' + number).slice(-2);
+    };
+    var tz = -d.getTimezoneOffset() / 60;
+    if (tz >= 0) {
+        tz = "+" + tz;
+    };
+    return ("" + d.getFullYear() + "-" +
+            pad(d.getMonth() + 1) + "-" + 
+            pad(d.getDate()) + " " +
+            pad(d.getHours()) + ":" +
+            pad(d.getMinutes()) + " " +
+            "GMT" + tz);
+};
+
+var localize_dates = function () {
+    /* Scan whole document for UTC dates and replace them with
+     * local time versions */
+
+    var nodes = document.getElementsByTagName('abbr');
+    for (var i=0, len=nodes.length; i < len; ++i) {
+        var node = nodes[i];
+        if (node.className === 'date') {
+            var d = parse_date(node.getAttribute('title'));
+            if (d) {
+                node.textContent = format_date(d);
+            };
+        };
+    };
+};
+
+var js_editor = function () {
+    /* Make double click invoke the editor and scroll it to the right place. */
+
+    var textBox = document.getElementById('editortext');
+    if (textBox) {
+        /* We have an editor, so scroll it to the right place. */
+        var jumpLine = 0 + document.location.hash.substring(1);
+        var textLines = textBox.textContent.match(/(.*\n)/g);
+        var scrolledText = '';
+        for (var i=0, len=textLines.length; i < len && i < jumpLine; ++i) {
+            scrolledText += textLines[i];
+        }
+        /* Put the cursor in the right place. */
+        textBox.focus();
+        if (textBox.setSelectionRange) {
+            textBox.setSelectionRange(scrolledText.length, scrolledText.length);
+        } else if (textBox.createTextRange) {
+            var range = textBox.createTextRange();
+            range.collapse(true);
+            range.moveEnd('character', scrolledText.length);
+            range.moveStart('character', scrolledText.length);
+            range.select();
+        }
+        /* Determine the height of our text. */
+        var scrollPre = document.createElement('pre');
+        textBox.parentNode.appendChild(scrollPre);
+        var style = window.getComputedStyle(textBox, '');
+        scrollPre.style.font = style.font;
+        scrollPre.style.border = style.border;
+        scrollPre.style.outline = style.outline;
+        scrollPre.style.lineHeight = style.lineHeight;
+        scrollPre.style.letterSpacing = style.letterSpacing;
+        scrollPre.style.fontFamily = style.fontFamily;
+        scrollPre.style.fontSize = style.fontSize;
+        scrollPre.style.padding = 0;
+        scrollPre.style.overflow = 'scroll';
+        try { scrollPre.style.whiteSpace = "-moz-pre-wrap" } catch(e) {};
+        try { scrollPre.style.whiteSpace = "-o-pre-wrap" } catch(e) {};
+        try { scrollPre.style.whiteSpace = "-pre-wrap" } catch(e) {};
+        try { scrollPre.style.whiteSpace = "pre-wrap" } catch(e) {};
+        scrollPre.textContent = scrolledText;
+        /* Scroll our editor to the right place. */
+        textBox.scrollTop = scrollPre.scrollHeight;
+        scrollPre.parentNode.removeChild(scrollPre);
+    } else {
+        /* We have a normal page, make it go to editor on double click. */
+        var baseUrl = '';
+        var tags = document.getElementsByTagName('link');
+        for (var i=0, len=tags.length; i < len; ++i) {
+            var tag = tags[i];
+            if (tag.getAttribute('type') === 'application/wiki') {
+                baseUrl = tag.getAttribute('href');
+            }
+        }
+        if (baseUrl==='') {
+            return;
+        }
+        var tagList = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre',
+                       'ul', 'div'];
+        var dblclick = function () {
+            /* The callback that invokes the editor. */
+            var url = baseUrl + '#' + this.id.replace('line_', '');
+            document.location = url;
+            return false;
+        };
+        for (var j=0, len=tagList.length; j < len; ++j) {
+            var tags = document.getElementsByTagName(tagList[j]);
+            for (var i=0, len2=tags.length; i < len2; ++i) {
+                var tag = tags[i];
+                if (tag.id && tag.id.match(/^line_\d+$/)) {
+                    tag.ondblclick = dblclick;
+                };
+            };
+        };
+    };
+};
+
+var purple_numbers = function () {
+    /* Add links to the headings. */
+
+    var tagList = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    for (var j=0, len=tagList.length; j < len; ++j) {
+        var tags = document.getElementsByTagName(tagList[j]);
+        for (var i=0, len2=tags.length; i < len2; ++i) {
+            var tag = tags[i];
+            var prev = tag.previousSibling;
+            while (prev && !prev.tagName) {
+                prev = prev.previousSibling;
+            };
+            if (prev && prev.tagName === 'A') {
+                var name = prev.getAttribute('name');
+                if (name) {
+                    tag.insertAdjacentHTML('beforeend', '<a href="#' + name +
+                        '" class="hatta-purple">&para;</a>');
+                };
+            };
+        };
+    };
+};
+
+window.onload = function () {
+    /* Initialize our scripts when the document loads. */
+
+    localize_dates();
+    js_editor();
+    purple_numbers();
+};
+
+})();
diff --git a/hatta/static/style.css b/hatta/static/style.css
index 73ef2f8..fac6990 100644
--- a/hatta/static/style.css
+++ b/hatta/static/style.css
@@ -1,55 +1,240 @@
-html { background: #fff; color: #2e3436;
-    font-family: sans-serif; font-size: 96% }
-body { margin: 1em auto; line-height: 1.3; width: 40em }
-a { color: #3465a4; text-decoration: none }
-a:hover { text-decoration: underline }
-a.wiki:visited { color: #204a87 }
-a.nonexistent, a.nonexistent:visited { color: #a40000; }
-a.external { color: #3465a4; text-decoration: underline }
-a.external:visited { color: #75507b }
-a img { border: none }
-img.math, img.smiley { vertical-align: middle }
-pre { font-size: 100%; white-space: pre-wrap; word-wrap: break-word;
-    white-space: -moz-pre-wrap; white-space: -pre-wrap;
-    white-space: -o-pre-wrap; line-height: 1.2; color: #555753 }
-div.conflict pre.local { background: #fcaf3e; margin-bottom: 0; color: 000}
-div.conflict pre.other { background: #ffdd66; margin-top: 0; color: 000; border-top: #d80 dashed 1px; }
-pre.diff div.orig { font-size: 75%; color: #babdb6 }
-b.highlight, pre.diff ins { font-weight: bold; background: #fcaf3e;
-color: #ce5c00; text-decoration: none }
-pre.diff del { background: #eeeeec; color: #888a85; text-decoration: none }
-pre.diff div.change { border-left: 2px solid #fcaf3e }
-div#hatta-footer { border-top: solid 1px #babdb6; text-align: right }
-h1, h2, h3, h4 { color: #babdb6; font-weight: normal; letter-spacing: 0.125em}
-div.buttons { text-align: center }
-input.button, div.buttons input { font-weight: bold; font-size: 100%;
-    background: #eee; border: solid 1px #babdb6; margin: 0.25em; color: #888a85}
-.history input.button { font-size: 75% }
-.editor textarea { width: 100%; display: block; font-size: 100%;
-    border: solid 1px #babdb6; }
-.editor label { display:block; text-align: right }
-.editor .upload { margin: 2em auto; text-align: center }
-form#hatta-search input#hatta-search, .editor label input { font-size: 100%;
-    border: solid 1px #babdb6; margin: 0.125em 0 }
-.editor label.comment input  { width: 32em }
-a#hatta-logo { float: left; display: block; margin: 0.25em }
-div#hatta-header h1 { margin: 0; }
-div#hatta-content { clear: left }
-form#hatta-search { margin:0; text-align: right; font-size: 80% }
-div.snippet { font-size: 80%; color: #888a85 }
-div#hatta-header div#hatta-menu { float: right; margin-top: 1.25em }
-div#hatta-header div#hatta-menu a.current { color: #000 }
-hr { background: transparent; border:none; height: 0;
-     border-bottom: 1px solid #babdb6; clear: both }
-blockquote { border-left:.25em solid #ccc; padding-left:.5em; margin-left:0}
-abbr.date {border:none}
-dt {font-weight: bold; float: left; }
-dd {font-style: italic; }
+/* General */
+
+html {
+    background: #fff;
+    color: #2e3436;
+    font-family: sans-serif;
+    font-size: 96%;
+}
+body {
+    margin: 1em auto;
+    line-height: 1.3;
+    width: 40em
+}
+a {
+    color: #3465a4;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+a.wiki:visited {
+    color: #204a87;
+}
+a.nonexistent,
+a.nonexistent:visited {
+    color: #a40000;
+}
+a.external {
+    color: #3465a4;
+    text-decoration: underline;
+}
+a.external:visited {
+    color: #75507b;
+}
+a img {
+    border: none;
+}
+h1, h2, h3, h4 {
+    color: #babdb6;
+    font-weight: normal;
+    letter-spacing: 0.125em;
+}
+pre {
+    font-size: 100%;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    line-height: 1.2;
+    color: #555753;
+}
+hr {
+    background: transparent;
+    border:none;
+    height: 0;
+    border-bottom: 1px solid #babdb6;
+    clear: both;
+}
+blockquote {
+    border-left:.25em solid #ccc;
+    padding-left:.5em;
+    margin-left:0;
+}
+abbr.date {
+    border:none;
+}
+dt {
+    font-weight: bold;
+    float: left;
+}
+dd {
+    font-style: italic;
+}
+
+/* Special images */
+img.math,
+img.smiley {
+    vertical-align: middle;
+}
+
+/* Conflicts */
+div.conflict pre.local {
+    background: #fcaf3e;
+    margin-bottom: 0;
+    color: #000;
+}
+div.conflict pre.other {
+    background: #ffdd66;
+    margin-top: 0;
+    color: #000;
+    border-top: #d80 dashed 1px;
+}
+
+/* Diffs */
+pre.diff div.orig {
+    font-size: 75%;
+    color: #babdb6;
+}
+b.highlight,
+pre.diff ins {
+    font-weight: bold;
+    background: #fcaf3e;
+    color: #ce5c00;
+    text-decoration: none;
+}
+pre.diff del {
+    background: #eeeeec;
+    color: #888a85;
+    text-decoration: none;
+}
+pre.diff div.change {
+    border-left: 2px solid #fcaf3e;
+}
+
+/* Layout */
+div#hatta-footer {
+    border-top: solid 1px #babdb6;
+    text-align: right;
+}
+a#hatta-logo {
+    float: left;
+    display: block;
+    margin: 0.25em;
+}
+div#hatta-header h1 {
+    margin: 0;
+}
+div#hatta-content {
+    clear: left;
+}
+div#hatta-header div#hatta-menu {
+    float: right;
+    margin-top: 1.25em;
+}
+div#hatta-header div#hatta-menu a.current {
+    color: #000;
+}
+
+/* Buttons */
+div.buttons {
+    text-align: center;
+}
+input.button,
+div.buttons input {
+    font-weight: bold;
+    font-size: 100%;
+    background: #eee;
+    border: solid 1px #babdb6;
+    margin: 0.25em;
+    color: #888a85;
+}
+.history input.button {
+    font-size: 75%;
+}
+
+/* Editor */
+.editor textarea {
+    width: 100%;
+    display: block;
+    font-size: 100%;
+    border: solid 1px #babdb6;
+}
+.editor label {
+    display:block;
+    text-align: right;
+}
+.editor .upload {
+    margin: 2em auto;
+    text-align: center;
+}
+.editor label input {
+    font-size: 100%;
+    border: solid 1px #babdb6;
+    margin: 0.125em 0;
+}
+.editor label.comment input {
+    width: 32em;
+}
+
+/* Search */
+form#hatta-search input#hatta-search {
+    font-size: 100%;
+    border: solid 1px #babdb6;
+    margin: 0.125em 0;
+}
+form#hatta-search {
+    margin:0;
+    text-align: right;
+    font-size: 80%;
+}
+div.snippet {
+    font-size: 80%;
+    color: #888a85;
+}
+
+/* Purple numbers */
+a.hatta-purple {
+    visibility: hidden;
+    vertical-align: middle;
+    font-size: 75%;
+    font-weight: bold;
+    color: #888a85;
+}
+h1:hover a.hatta-purple,
+h2:hover a.hatta-purple,
+h3:hover a.hatta-purple,
+h4:hover a.hatta-purple,
+h5:hover a.hatta-purple,
+h6:hover a.hatta-purple {
+    visibility: visible;
+}
+
+/* Print styles */
 @media print {
- body {background:white;color:black;font-size:100%;font-family:serif;}
- #hatta-search, #hatta-menu, #hatta-footer {display:none;}
- a:link, a:visited {color:#520;font-weight:bold;text-decoration:underline;}
- #hatta-content {width:auto;}
- #hatta-content a:link:after,
- #hatta-content a:visited:after{content:" ["attr(href)"] ";font-size:90%;}
+    body {
+        background: white;
+        color: black;
+        font-size: 100%;
+        font-family: serif;
+    }
+    #hatta-search,
+    #hatta-menu,
+    #hatta-footer {
+        display:none;
+    }
+    a:link, a:visited {
+        color: #520;
+        font-weight: bold;
+        text-decoration: underline;
+    }
+    #hatta-content {
+        width:auto;
+    }
+    #hatta-content a:link:after,
+    #hatta-content a:visited:after {
+        content:" ["attr(href)"] ";
+        font-size:90%;
+    }
 }