TYJ viewer

by noromanba 2015-05-15 [2015/05/15 10:17:24]

non-flick spread image viewer w/ Tab-navi on flash-free tonarinoyj

@@ -98,6 +98,7 @@
     }
 
     var index = document.createElement('a');
+    var itext;
     index.href =  '../../';
     itext = 'index';
     index.appendChild(document.createTextNode(itext));

• /*
   * @title TYJ viewer
   * @description non-flick spread image viewer w/ Tab-navi on flash-free tonarinoyj
   * @include http://tonarinoyj.jp/manga/*
   * @license MIT http://opensource.org/licenses/MIT
   * @javascript_url
   */
  
  // require TYJ HTML5
  // http://let.hatelabo.jp/noromanba/let/hLHXivqj-p4O
  
  // TODO
  // - extract function for scope
  // - style to CSS
  // - defocus img for Firefox
  //  - e.g. tabIndex = -1
  (function () {
      var meta = (/tonarinoyj\.jp\/manga\/(\w+)\/([\w-]+)/.exec(location.hostname + location.pathname) || []).slice(1);
      if (meta.length < 2) return;
  
      // TODO check loading w/ MutationObserver
      // http://tonarinoyj.jp/manga/XXXX/XX/HTML5/
      var pageCount = Number(document.querySelector('#sTitle').textContent.match(/\d+/g).pop());
  
      // cleanup c.f. http://jsperf.com/innerhtml-vs-removechild/157
      var body = document.body;
      while (body.firstChild) { // TBD range
          body.removeChild(body.firstChild);
      }
      body.removeAttribute('style');
  
      // TBD named RegExp capture
      var book = meta[0], volume = meta[1];
      var endpoint = 'http://img.tonarinoyj.jp/manga/' + book + '/' + volume + '/books/images/2/';
  
      // TODO fit to resize
      var HEIGHT = document.documentElement.clientHeight + 'px';
      // image structure
      // | index  | 1          | 2     | 3    | ... | even last   | odd last |
      // | detail | fixed navi | right | left | ... | next update | right    |
      // | pair   |            | +----------+ | ... | +--------------------+ |
      var FIRSTINDEX = 2;
  
      // front cover
      var container = document.createElement('div');
      container.tabIndex = 0;
      container.style.textAlign = 'center'; // TBD remove; align left w/ margin
      var cover = document.createElement('img');
      cover.src = endpoint + FIRSTINDEX + '.jpg';
      cover.style.maxWidth = '50%';
      cover.style.maxHeight = HEIGHT;
      container.appendChild(cover);
  
      body.appendChild(container);
  
      // contents
      for (var page = FIRSTINDEX + 1; page <= pageCount; page += 2) {
          var container = document.createElement('div');
          container.style.textAlign = 'center';
          container.tabIndex = 0;
  
          var rimg = document.createElement('img');
          rimg.src = endpoint + (page + 1) + '.jpg';
          rimg.style.maxWidth = '50%';
          rimg.style.maxHeight = HEIGHT;
          rimg.dataset.align = 'right';
          container.appendChild(rimg);
  
          var limg = document.createElement('img');
          limg.src = endpoint + page + '.jpg';
          limg.style.maxWidth = '50%';
          limg.style.maxHeight = HEIGHT;
          limg.dataset.align = 'left';
          container.appendChild(limg);
  
          body.appendChild(container);
      }
  
      // navigation
      var container = document.createElement('div');
      container.style.backgroundColor = 'ivory';
      container.style.height = '5em';
      container.style.textAlign = 'center';
  
      // TODO sepalate index
      var navi = window.$PAGES;
  
      var next = document.createElement('a');
      var ntext;
      if (navi.next) {
          next.href = navi.next + 'HTML5';
          ntext = '< next';
          next.appendChild(document.createTextNode(ntext));
          next.style.marginLeft = '5em';
          next.rel = 'next';
          next.tabIndex = 0;
          container.appendChild(next);
      }
  
      var index = document.createElement('a');
      var itext;
      index.href =  '../../';
      itext = 'index';
      index.appendChild(document.createTextNode(itext));
      index.style.marginLeft = '5em';
      index.tabIndex = 0;
      container.appendChild(index);
  
      var prev = document.createElement('a');
      var ptext;
      if (navi.prev) {
          prev.href = navi.prev + 'HTML5';
          ptext = 'prev >';
          prev.appendChild(document.createTextNode(ptext));
          prev.style.marginLeft = '5em';
          prev.rel = 'prev';
          prev.tabIndex = 0;
          container.appendChild(prev);
      }
  
      body.appendChild(container);
  }());
  
  // DBG
  // e.g. http://tonarinoyj.jp/manga/onepanman/1
  //
  // HTML5 interface for "smart"-devices
  // http://tonarinoyj.jp/manga/onepanman/1/HTML5/?type=single
  // low-rez images in div#horizontal_div
  // http://tonarinoyj.jp/manga/onepanman/2/iPhone/ipad/1/1.jpg
  // http://tonarinoyj.jp/manga/onepanman/2/iPhone/ipad/1/2.jpg
  // http://tonarinoyj.jp/manga/onepanman/2/iPhone/ipad/1/3.jpg
  //
  // default flash interface
  // http://tonarinoyj.jp/manga/onepanman/3/?type=single&viewer=
  // high-rez images in flash
  // http://img.tonarinoyj.jp/manga/onepanman/1/books/images/2/1.jpg
  // http://img.tonarinoyj.jp/manga/onepanman/1/books/images/2/2.jpg
  // http://img.tonarinoyj.jp/manga/onepanman/1/books/images/2/3.jpg
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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