Merge pull request #34 from Odrin/feature/line-link

GitHub-like line links

Author: 2fd

.gitignore

@@ -40,7 +40,9 @@ jspm_packages
 .vscode
 *.js
 !template/**/*.js
+!plugins/**/assets/*.js
 *.js.map
 *.d.ts
 gh-pages
-build/*
+build/*
+/.idea

lib/utility/html.ts

@@ -5,33 +5,11 @@ import {
 
 import { LIST, NON_NULL } from './introspection';
 
-const EM_SIZE = 14;
-
-function htmlLines(html: string): number {
-
-    let count = 0;
-    let position = 0;
-
-    while (position !== -1) {
-        position = html.indexOf('</li><li>', position + 1);
-        count++;
-    }
-
-    return count;
-};
-
-function padding(html: string): string {
-
-    const lines = htmlLines(html);
-    const orderOfMagnitude = lines.toString().length;
-
-    return (orderOfMagnitude * EM_SIZE + EM_SIZE).toString() + 'px';
-};
-
 export class HTML {
+    index = 1;
 
     code(code: string): string {
-        return `<code class="highlight"><ul class="code" style="padding-left:${padding(code)}">${code}</ul></code>`;
+      return `<code class="highlight"><table class="code"><tbody>${code}</tbody></table></code>`;
     }
 
     highlight(text: string): string {
@@ -42,8 +20,9 @@ export class HTML {
         return ` <sup>${text}</sup>`;
     }
 
-    line(code: string): string {
-        return `<li>${code}</li>`;
+    line(code?: string): string {
+        const row = this.index++;
+        return `<tr class="row"><td id="L${row}" class="td-index">${row}</td><td id="LC${row}" class="td-code">${code || ''}</td></tr>`;
     }
 
     tab(code: string): string {
@@ -103,9 +82,6 @@ export class HTML {
     }
 }
 
-
-export const html = new HTML;
-
 export function split(text: string, len: number): string[] {
 
     return text

lib/utility/index.ts

@@ -1,5 +1,5 @@
 export {
-    html,
+    HTML,
     split
 } from './html';
 

plugins/document.schema/code.css plugins/document.schema/assets/code.cssplugins/document.schema/code.css renamed to plugins/document.schema/assets/code.css

@@ -1,10 +1,9 @@
 .code {
-  background-color: #f6f6f6;
+  background-color: #fff;
   color: #4D4D4C;
   border: 1px solid #4D4D4C;
   font-size: 14px;
   font-family: 'Ubuntu Mono';
-  cursor: text;
   list-style-type: decimal;
   border-radius: 0.25rem; 
 }
@@ -19,13 +18,28 @@
   background: #f6f6f6
 }
 
-.code li {
-  min-height: 1em;
-  background: #FFF;
+.code .row:hover {
+  background: #EFEFEF;
+}
+
+.code .td-index {
+  color: rgba(27, 31, 35, .3);
+  padding: 1px 8px 1px 16px;
+  text-align: right;
+  width: 1%;
+}
+
+.code .td-index:hover {
+  cursor: pointer;
+  color: rgba(27, 31, 35, .6);
+}
+
+.code .td-code {
   padding: 1px 8px;
 }
-.code li:hover {
-  background: #EFEFEF;
+
+.code .td-code.highlighted {
+  background-color: #fffbdd;
 }
 
 .code .tab {

plugins/document.schema/assets/line-link.js

@@ -0,0 +1,71 @@
+(function () {
+  ready(function () {
+    var tables = window.document.getElementsByClassName('code');
+
+    for (var i = 0; i < tables.length; i++) {
+      var table = tables[i];
+
+      table.addEventListener('click', onClick);
+    }
+
+    window.addEventListener("hashchange", onHashChange, false);
+
+    onHashChange();
+  });
+
+  function onHashChange() {
+    var id = window.location.href.split('#')[1];
+
+    if (!id) {
+      return;
+    }
+
+    var lcid = id.indexOf('C') === -1 ? id.replace('L', 'LC') : id;
+    var lineCode = window.document.getElementById(lcid);
+
+    if (!lineCode) {
+      return;
+    }
+
+    var highlighted = lineCode.closest('.code').getElementsByClassName('highlighted');
+
+    for (var i = 0; i < highlighted.length; i++) {
+      highlighted[i].classList.remove('highlighted');
+    }
+
+    lineCode.classList.add('highlighted');
+  }
+
+  function onClick(e) {
+    var target = e.target;
+
+    if (!target.classList.contains('td-index')) {
+      return;
+    }
+
+    var href = window.location.href.split('#')[0];
+
+    window.location.href = href + '#' + target.id;
+  }
+
+  function ready(fn) {
+    if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
+      fn();
+    } else {
+      document.addEventListener('DOMContentLoaded', fn);
+    }
+  }
+})();
+
+// https://developer.mozilla.org/ru/docs/Web/API/Element/closest
+(function(e){
+  e.closest = e.closest || function(css){
+    var node = this;
+
+    while (node) {
+      if (node.matches(css)) return node;
+      else node = node.parentElement;
+    }
+    return null;
+  }
+})(Element.prototype);