TYJ viewer

  • /*
     * @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
    // - UserScriptable
    (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';
    
                // unsafeWindow for easy touch window.$PAGES from UserScript
                var navi = window.$PAGES;
                var appendLink = function (which) {
                        var link = document.createElement('a');
                        link.href = navi[which] ? navi[which] + 'HTML5' : '../../';
                        link.rel = which;
                        link.style.marginLeft = '5em';
                        link.appendChild(document.createTextNode(which));
                        link.tabIndex = 0;
    
                        container.appendChild(link);
                };
                navi.next && appendLink('next');
                appendLink('index');
                navi.prev && appendLink('prev');
    
                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
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2015/05/15 10:17:24 - 2015-05-15
  2. 2015/05/15 09:34:13 - 2015-05-15
  3. 2015/03/31 08:47:01 - 2015-03-31
  4. 2015/03/31 04:50:48 - 2015-03-31
  5. 2015/03/31 04:49:33 - 2015-03-31
  6. 2015/03/29 22:48:12 - 2015-03-29
  7. 2015/03/27 07:42:32 - 2015-03-27