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

@@ -10,113 +10,105 @@
 // http://let.hatelabo.jp/noromanba/let/hLHXivqj-p4O
 
 // TODO
-// - extract function for scope
-// - style to CSS
+// - strict observe stupid objects
+//  - "load.js", window.$PAGES
 (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     | 4    | ... | odd last    | even last   |
-    // | detail | fixed navi | cover | right | left | ... | right/blank | next update |
-    // | pair   | +----------------+ | +----------+ | ... | +-----------------------+ |
-    var FIRSTINDEX = 2;
-
-    // front cover
-    var container = document.createElement('div');
-    container.tabIndex = 0;
-    container.style.textAlign = 'center';
-    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 limg = document.createElement('img');
-        limg.src = endpoint + (page + 1) + '.jpg';
-        limg.style.maxWidth = '50%';
-        limg.style.maxHeight = HEIGHT;
-        limg.dataset.tyjAlign = 'left';
-        container.appendChild(limg);
-
-        var rimg = document.createElement('img');
-        rimg.src = endpoint + page + '.jpg';
-        rimg.style.maxWidth = '50%';
-        rimg.style.maxHeight = HEIGHT;
-        rimg.dataset.tyjAlign = 'right';
-        container.appendChild(rimg);
-
-        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);
-    }
+    var spread = function () {
+        // TODO check loading w/ observer
+        // http://tonarinoyj.jp/manga/XXXX/NN/HTML5/
+        var LAST_PAGE = Number(document.querySelector('#sTitle').textContent.match(/\d+/g).pop());
+
+        // cleanup c.f. http://jsperf.com/innerhtml-vs-removechild/157
+        var body = document.body;
+        // XXX crash "load.js" when remove DOMs earlier
+        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     | 4    | ... | odd last    | even last   |
+        // | detail | fixed navi | cover | right | left | ... | right/blank | next update |
+        // | pair   | +----------------+ | +----------+ | ... | +-----------------------+ |
+
+        //*/
+        for (var page = 1; page <= LAST_PAGE; page += 2) {
+            var container = document.createElement('div');
+            container.style.textAlign = 'center';
+            container.tabIndex = 0;
+
+            var limg = document.createElement('img');
+            limg.src = endpoint + (page + 1) + '.jpg';
+            limg.style.maxWidth = '50%';
+            limg.style.maxHeight = HEIGHT;
+            container.appendChild(limg);
+
+            var rimg = document.createElement('img');
+            rimg.src = endpoint + page + '.jpg';
+            rimg.style.maxWidth = '50%';
+            rimg.style.maxHeight = HEIGHT;
+            container.appendChild(rimg);
+
+            body.appendChild(container);
+        }
+
+        // WIP
+        /*/
+        Array.apply(null, Array(LAST_PAGE)).map(function (_, idx) {
+            return (idx % 2) ? idx : idx + 2;
+        }).forEach(function (page) {
+            var container = document.createElement('div');
+            container.style.textAlign = 'center';
+            container.tabIndex = 0;
+
+            var img = document.createElement('img');
+            img.src = endpoint + page + '.jpg';
+            img.style.maxWidth = '50%';
+            img.style.maxHeight = HEIGHT;
+            container.appendChild(img);
+
+            body.appendChild(container);
+        });
+        //*/
+
+        var appendNavigation = function () {
+            var container = document.createElement('div');
+            container.style.backgroundColor = 'ivory';
+            container.style.height = '5em';
+            container.style.textAlign = 'center';
+
+           // XXX unsafeWindow for touch window.$PAGES by UserScript
+           var window = unsafeWindow || window;
+           console.debug('window.$PAGES', window.$PAGES);
+
+            ['next', 'index', 'prev'].forEach(function (which) {
+                var link = document.createElement('a');
+                var navi = window.$PAGES; // can use after DOMContentloaded
+                link.href = navi[which] ? navi[which] + 'HTML5' : '../../';
+                link.rel = navi[which] ? which : '';
+                link.style.marginLeft = '5em';
+                link.appendChild(document.createTextNode(which));
+                link.tabIndex = 0;
+
+                container.appendChild(link);
+            });
+
+            body.appendChild(container);
+        };
+        appendNavigation();
+    };
 
-    body.appendChild(container);
+    // XXX wait load.js
+    setTimeout(spread, 500);
 }());
 
 // DBG
@@ -125,12 +117,12 @@
 // 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
+// http://tonarinoyj.jp/manga/onepanman/1/iPhone/ipad/1/1.jpg
+// http://tonarinoyj.jp/manga/onepanman/1/iPhone/ipad/1/2.jpg
+// http://tonarinoyj.jp/manga/onepanman/1/iPhone/ipad/1/3.jpg
 //
 // default flash interface
-// http://tonarinoyj.jp/manga/onepanman/3/?type=single&viewer=
+// http://tonarinoyj.jp/manga/onepanman/1/?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

/*
 * @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
// - strict observe stupid objects
//  - "load.js", window.$PAGES
(function () {
    var meta = (/tonarinoyj\.jp\/manga\/(\w+)\/([\w-]+)/.exec(location.hostname + location.pathname) || []).slice(1);
    if (meta.length < 2) return;

    var spread = function () {
        // TODO check loading w/ observer
        // http://tonarinoyj.jp/manga/XXXX/NN/HTML5/
        var LAST_PAGE = Number(document.querySelector('#sTitle').textContent.match(/\d+/g).pop());

        // cleanup c.f. http://jsperf.com/innerhtml-vs-removechild/157
        var body = document.body;
        // XXX crash "load.js" when remove DOMs earlier
        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     | 4    | ... | odd last    | even last   |
        // | detail | fixed navi | cover | right | left | ... | right/blank | next update |
        // | pair   | +----------------+ | +----------+ | ... | +-----------------------+ |

        //*/
        for (var page = 1; page <= LAST_PAGE; page += 2) {
            var container = document.createElement('div');
            container.style.textAlign = 'center';
            container.tabIndex = 0;

            var limg = document.createElement('img');
            limg.src = endpoint + (page + 1) + '.jpg';
            limg.style.maxWidth = '50%';
            limg.style.maxHeight = HEIGHT;
            container.appendChild(limg);

            var rimg = document.createElement('img');
            rimg.src = endpoint + page + '.jpg';
            rimg.style.maxWidth = '50%';
            rimg.style.maxHeight = HEIGHT;
            container.appendChild(rimg);

            body.appendChild(container);
        }

        // WIP
        /*/
        Array.apply(null, Array(LAST_PAGE)).map(function (_, idx) {
            return (idx % 2) ? idx : idx + 2;
        }).forEach(function (page) {
            var container = document.createElement('div');
            container.style.textAlign = 'center';
            container.tabIndex = 0;

            var img = document.createElement('img');
            img.src = endpoint + page + '.jpg';
            img.style.maxWidth = '50%';
            img.style.maxHeight = HEIGHT;
            container.appendChild(img);

            body.appendChild(container);
        });
        //*/

        var appendNavigation = function () {
            var container = document.createElement('div');
            container.style.backgroundColor = 'ivory';
            container.style.height = '5em';
            container.style.textAlign = 'center';

           // XXX unsafeWindow for touch window.$PAGES by UserScript
           var window = unsafeWindow || window;
           console.debug('window.$PAGES', window.$PAGES);

            ['next', 'index', 'prev'].forEach(function (which) {
                var link = document.createElement('a');
                var navi = window.$PAGES; // can use after DOMContentloaded
                link.href = navi[which] ? navi[which] + 'HTML5' : '../../';
                link.rel = navi[which] ? which : '';
                link.style.marginLeft = '5em';
                link.appendChild(document.createTextNode(which));
                link.tabIndex = 0;

                container.appendChild(link);
            });

            body.appendChild(container);
        };
        appendNavigation();
    };

    // XXX wait load.js
    setTimeout(spread, 500);
}());

// 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/1/iPhone/ipad/1/1.jpg
// http://tonarinoyj.jp/manga/onepanman/1/iPhone/ipad/1/2.jpg
// http://tonarinoyj.jp/manga/onepanman/1/iPhone/ipad/1/3.jpg
//
// default flash interface
// http://tonarinoyj.jp/manga/onepanman/1/?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