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

@@ -1,6 +1,6 @@
 /*
  * @title TYJ viewer
- * @description non-flick spread viewer w/ Tab-navi on flash-free tonarinoyj
+ * @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
@@ -9,7 +9,11 @@
 // require TYJ HTML5
 // http://let.hatelabo.jp/noromanba/let/hLHXivqj-p4O
 
-// TODO split to function for scope
+// 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;
@@ -30,14 +34,19 @@
     var endpoint = 'http://img.tonarinoyj.jp/manga/' + book + '/' + volume + '/books/images/2/';
 
     // TODO fit to resize
-    // height
     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 + 2 + '.jpg';
+    cover.src = endpoint + FIRSTINDEX + '.jpg';
     cover.style.maxWidth = '50%';
     cover.style.maxHeight = HEIGHT;
     container.appendChild(cover);
@@ -45,8 +54,9 @@
     body.appendChild(container);
 
     // contents
-    for (var page = 3; page <= pageCount; page += 2) {
+    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');
@@ -70,36 +80,42 @@
     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';
-    } else { // latest story
-        next.href =  '../../';
-        ntext = 'index';
+        next.appendChild(document.createTextNode(ntext));
+        next.style.marginLeft = '5em';
+        next.rel = 'next';
+        next.tabIndex = 0;
+        container.appendChild(next);
     }
-    next.appendChild(document.createTextNode(ntext));
-    next.style.marginLeft = '10%';
-    next.tabIndex = 0;
-    container.appendChild(next);
+
+    var index = document.createElement('a');
+    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) { // first story
+    if (navi.prev) {
         prev.href = navi.prev + 'HTML5';
         ptext = 'prev >';
-    } else {
-        prev.href = '../../';
-        ptext = 'index';
+        prev.appendChild(document.createTextNode(ptext));
+        prev.style.marginLeft = '5em';
+        prev.rel = 'prev';
+        prev.tabIndex = 0;
+        container.appendChild(prev);
     }
-    prev.appendChild(document.createTextNode(ptext));
-    prev.style.marginLeft = '20%';
-    prev.tabIndex = 0;
-    container.appendChild(prev);
 
     body.appendChild(container);
 }());

/*
 * @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');
    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 です。

History

2015/05/15 10:17:24 - 2015-05-15
2015/05/15 09:34:13 - 2015-05-15
2015/03/31 08:47:01 - 2015-03-31
2015/03/31 04:50:48 - 2015-03-31
2015/03/31 04:49:33 - 2015-03-31
2015/03/29 22:48:12 - 2015-03-29
2015/03/27 07:42:32 - 2015-03-27