TOC

by noromanba 2015-06-22 [2015/06/22 03:16:18]
(Forked from TOC by rikuba)

create table of contents w/ Autopaging

@@ -1,12 +1,17 @@
 /*
  * @title TOC
- * @description Create Table of contents with AutoPagerize, AutoPatchWork, AutoPager (Forked)
+ * @description Create table of contents work with AutoPagerize, AutoPatchWork and AutoPager (Forked)
  * @include http://*
  * @license MIT License http://www.opensource.org/licenses/mit-license
+ * @contributor rikuba http://let.hatelabo.jp/rikuba/let/gYC-yqG0xYLkFw
+ * @author noromanba
  * @require
  */
 
-// Fork of http://let.hatelabo.jp/rikuba/let/gYC-yqG0xYLkFw
+// # Changes
+// - replace Array generics to prototype call
+// - support AutoPatchWork and AutoPager
+
 (function () {
   init(document);
   Array.prototype.forEach.call(frames, function (frame) {
@@ -16,11 +21,12 @@
   });
 
   function init(doc) {
-    var container;
-    if ((container = doc.getElementById('bookmarklet_TOC'))) {
+    var container = doc.querySelector('#bookmarklet_TOC');
+    if (container) {
       container.parentNode.removeChild(container);
       return;
     }
+
     container = doc.createElement('div');
     container.id = 'bookmarklet_TOC';
     container.appendChild(createTOC(doc));
@@ -29,7 +35,7 @@
     var style = doc.createElement('style');
     style.type = 'text/css';
     style.textContent = [
-      '#bookmarklet_TOC { background: rgba(0, 0, 0, 0.9); color: #fff;',
+      '#bookmarklet_TOC { background: rgba(0,0,0,0.9); color: #fff;',
       'text-align: left; font: 90%/1.5 sans-serif;',
       'width: 30px; height: 30px; z-index: 256;',
       'max-width: 600px; max-height: 600px; overflow-y: auto;',
@@ -37,7 +43,7 @@
       '-moz-border-radius: 0 0 0 8px; border-radius: 0 0 0 8px; }',
       '#bookmarklet_TOC:hover { width: auto; height: auto;',
       'padding: 1ex 1em; }',
-      '#bookmarklet_TOC ol { list-style: none; display: none;',
+      '#bookmarklet_TOC ol { listContainer-style: none; display: none;',
       'margin: 0; padding: 0; }',
       '#bookmarklet_TOC ol ol { margin-left: 1.5em; }',
       '#bookmarklet_TOC:hover ol { display: block; }',
@@ -46,41 +52,43 @@
     ].join('\n');
     doc.querySelector('head').appendChild(style);
 
-    doc.addEventListener('AutoPagerize_DOMNodeInserted', function (e) {
-      container.appendChild(createTOC(e.target));
+    doc.addEventListener('AutoPagerize_DOMNodeInserted', function (event) {
+      container.appendChild(createTOC(event.target));
     }, false);
-    doc.addEventListener('AutoPatchWork.DOMNodeInserted', function (e) {
-      container.appendChild(createTOC(e.target));
+    doc.addEventListener('AutoPatchWork.DOMNodeInserted', function (event) {
+      container.appendChild(createTOC(event.target));
     }, false);
-    doc.addEventListener('AutoPagerAfterInsert', function (e) {
-      container.appendChild(createTOC(e.target));
+    doc.addEventListener('AutoPagerAfterInsert', function (event) {
+      container.appendChild(createTOC(event.target));
     }, false);
   }
 
   function createTOC(root) {
     var doc = root.ownerDocument || root;
-    var r = l = doc.createElement('ol');
-    var c = [, 0, 0, 0, 0, 0, 0];
-    var ln = 1;
-    Array.prototype.forEach.call(root.querySelectorAll('h1, h2, h3, h4, h5, h6'), function (h) {
-      var n = h.nodeName[1];
-      var d = ln - n;
-      if (ln < n) {
-        while (d++) {
-          l = (l.hasChildNodes() ? l.lastChild : l.appendChild(doc.createElement('li'))).appendChild(doc.createElement('ol'));
+    var contents = listContainer = doc.createElement('ol');
+    var lastLevel = 1;
+    Array.prototype.forEach.call(root.querySelectorAll('h1, h2, h3, h4, h5, h6'), function (headline) {
+      var hLevel = Number(headline.nodeName.slice(1));
+      var depth = lastLevel - hLevel; // TODO remove depth
+      if (lastLevel < hLevel) {
+        while (depth++) {
+          listContainer = (listContainer.hasChildNodes() ? listContainer.lastChild : listContainer.appendChild(doc.createElement('li'))).
+            appendChild(doc.createElement('ol'));
         }
-      } else if (n < ln) {
-        while (d--) {
-          l = l.parentNode.parentNode;
+      } else if (hLevel < lastLevel) {
+        while (depth--) {
+          listContainer = listContainer.parentNode.parentNode;
         }
       }
-      var s = l.appendChild(doc.createElement('li')).appendChild(doc.createElement('span'));
-      s.appendChild(doc.createTextNode(h.textContent || ''));
+
+      var s = listContainer.appendChild(doc.createElement('li')).appendChild(doc.createElement('span'));
+      s.appendChild(doc.createTextNode(headline.textContent || ''));
       s.addEventListener('click', function () {
-        h.scrollIntoView();
+        headline.scrollIntoView();
       }, false);
-      ln = n;
+
+      lastLevel = hLevel;
     });
-    return r;
+    return contents;
   }
 })();

• /*
   * @title TOC
   * @description Create table of contents work with AutoPagerize, AutoPatchWork and AutoPager (Forked)
   * @include http://*
   * @license MIT License http://www.opensource.org/licenses/mit-license
   * @contributor rikuba http://let.hatelabo.jp/rikuba/let/gYC-yqG0xYLkFw
   * @author noromanba
   * @require
   */
  
  // # Changes
  // - replace Array generics to prototype call
  // - support AutoPatchWork and AutoPager
  
  (function () {
    init(document);
    Array.prototype.forEach.call(frames, function (frame) {
      try {
        init(frame.document);
      } catch (e) {}
    });
  
    function init(doc) {
      var container = doc.querySelector('#bookmarklet_TOC');
      if (container) {
        container.parentNode.removeChild(container);
        return;
      }
  
      container = doc.createElement('div');
      container.id = 'bookmarklet_TOC';
      container.appendChild(createTOC(doc));
      doc.body.appendChild(container);
  
      var style = doc.createElement('style');
      style.type = 'text/css';
      style.textContent = [
        '#bookmarklet_TOC { background: rgba(0,0,0,0.9); color: #fff;',
        'text-align: left; font: 90%/1.5 sans-serif;',
        'width: 30px; height: 30px; z-index: 256;',
        'max-width: 600px; max-height: 600px; overflow-y: auto;',
        'position: fixed; top: 0; right: 0; margin: 0; padding: 0;',
        '-moz-border-radius: 0 0 0 8px; border-radius: 0 0 0 8px; }',
        '#bookmarklet_TOC:hover { width: auto; height: auto;',
        'padding: 1ex 1em; }',
        '#bookmarklet_TOC ol { listContainer-style: none; display: none;',
        'margin: 0; padding: 0; }',
        '#bookmarklet_TOC ol ol { margin-left: 1.5em; }',
        '#bookmarklet_TOC:hover ol { display: block; }',
        '#bookmarklet_TOC span:hover { cursor: pointer; ',
        'text-decoration: underline; }'
      ].join('\n');
      doc.querySelector('head').appendChild(style);
  
      doc.addEventListener('AutoPagerize_DOMNodeInserted', function (event) {
        container.appendChild(createTOC(event.target));
      }, false);
      doc.addEventListener('AutoPatchWork.DOMNodeInserted', function (event) {
        container.appendChild(createTOC(event.target));
      }, false);
      doc.addEventListener('AutoPagerAfterInsert', function (event) {
        container.appendChild(createTOC(event.target));
      }, false);
    }
  
    function createTOC(root) {
      var doc = root.ownerDocument || root;
      var contents = listContainer = doc.createElement('ol');
      var lastLevel = 1;
      Array.prototype.forEach.call(root.querySelectorAll('h1, h2, h3, h4, h5, h6'), function (headline) {
        var hLevel = Number(headline.nodeName.slice(1));
        var depth = lastLevel - hLevel; // TODO remove depth
        if (lastLevel < hLevel) {
          while (depth++) {
            listContainer = (listContainer.hasChildNodes() ? listContainer.lastChild : listContainer.appendChild(doc.createElement('li'))).
              appendChild(doc.createElement('ol'));
          }
        } else if (hLevel < lastLevel) {
          while (depth--) {
            listContainer = listContainer.parentNode.parentNode;
          }
        }
  
        var s = listContainer.appendChild(doc.createElement('li')).appendChild(doc.createElement('span'));
        s.appendChild(doc.createTextNode(headline.textContent || ''));
        s.addEventListener('click', function () {
          headline.scrollIntoView();
        }, false);
  
        lastLevel = hLevel;
      });
      return contents;
    }
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。