TOC

by rikuba 2010-06-09 [2010/06/09 07:49:25]

ページ内の見出しから目次を生成（右上）。AutoPagerize対応。最近のブラウザでないと動きません。

@@ -1,12 +1,17 @@
 /*
  * @title TOC
- * @description ページ内の見出しから目次を生成（右上）。最近のブラウザでないと動きません。
+ * @description ページ内の見出しから目次を生成（右上）。AutoPagerize対応。最近のブラウザでないと動きません。
  * @include http://*
  * @license MIT License
  * @require 
  */
 
 (function () {
+  init(document);
+  [].forEach(frames, function (frame) {
+    try { init(frame.document); } catch (e) {}
+  });
+
   function init(doc) {
     var container, style;
     if (container = doc.getElementById('bookmarklet_TOC')) {
@@ -35,13 +40,18 @@
       '#bookmarklet_TOC span:hover { cursor: pointer; ',
       'text-decoration: underline; }'].join('\n');
     doc.querySelector('head').appendChild(style);
+    doc.addEventListener('AutoPagerize_DOMNodeInserted', function (e) {
+      container.appendChild(createTOC(e.target));
+    }, false);
   }
-  function createTOC(doc) {
+
+  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;
     [].forEach.call(
-      doc.querySelectorAll('h1,h2,h3,h4,h5,h6'),
+      root.querySelectorAll('h1,h2,h3,h4,h5,h6'),
       function (h) {
         var n = h.nodeName[1];
         var d = ln - n;
@@ -65,8 +75,4 @@
     );
     return r;
   }
-  init(document);
-  [].forEach(frames, function (frame) {
-    try { init(frame.document); } catch (e) {}
-  });
 })();

• /*
   * @title TOC
   * @description ページ内の見出しから目次を生成（右上）。AutoPagerize対応。最近のブラウザでないと動きません。
   * @include http://*
   * @license MIT License
   * @require 
   */
  
  (function () {
    init(document);
    [].forEach(frames, function (frame) {
      try { init(frame.document); } catch (e) {}
    });
  
    function init(doc) {
      var container, style;
      if (container = doc.getElementById('bookmarklet_TOC')) {
        container.parentNode.removeChild(container);
        return;
      }
      container = doc.createElement('div');
      container.id = 'bookmarklet_TOC';
      container.appendChild(createTOC(doc));
      doc.body.appendChild(container);
      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 { list-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 (e) {
        container.appendChild(createTOC(e.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;
      [].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'));
            else if (n < ln)
              while (d--)
                l = l.parentNode.parentNode;
          var s = l.appendChild(doc.createElement('li'))
                   .appendChild(doc.createElement('span'));
          s.appendChild(doc.createTextNode(h.textContent || ''));
          s.addEventListener('click', function () {
            h.scrollIntoView();
          }, false);
          ln = n;
        }
      );
      return r;
    }
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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