TYJ viewer

    @@ -14,6 +14,7 @@ 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()); @@ -28,12 +29,17 @@ var book = meta[0], volume = meta[1]; var endpoint = 'http://img.tonarinoyj.jp/manga/' + book + '/' + volume + '/books/images/2/'; + // TODO fit to resize + // height + var HEIGHT = document.documentElement.clientHeight + 'px'; + // front cover var container = document.createElement('div'); container.tabIndex = 0; var cover = document.createElement('img'); cover.src = endpoint + 2 + '.jpg'; cover.style.maxWidth = '50%'; + cover.style.maxHeight = HEIGHT; container.appendChild(cover); body.appendChild(container); @@ -46,14 +52,14 @@ var rimg = document.createElement('img'); rimg.src = endpoint + (page + 1) + '.jpg'; rimg.style.maxWidth = '50%'; - rimg.style.maxHeight = '100%'; + 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 = '100%'; + limg.style.maxHeight = HEIGHT; limg.dataset.align = 'left'; container.appendChild(limg); @@ -114,3 +120,4 @@ // 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 +
  • /*
     * @title TYJ viewer
     * @description non-flick spread 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 split to function for scope
    (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
        // height
        var HEIGHT = document.documentElement.clientHeight + 'px';
    
        // front cover
        var container = document.createElement('div');
        container.tabIndex = 0;
        var cover = document.createElement('img');
        cover.src = endpoint + 2 + '.jpg';
        cover.style.maxWidth = '50%';
        cover.style.maxHeight = HEIGHT;
        container.appendChild(cover);
    
        body.appendChild(container);
    
        // contents
        for (var page = 3; page <= pageCount; page += 2) {
            var container = document.createElement('div');
            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';
    
        // 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 = '10%';
        next.tabIndex = 0;
        container.appendChild(next);
    
        var prev = document.createElement('a');
        var ptext;
        if (navi.prev) { // first story
            prev.href = navi.prev + 'HTML5';
            ptext = 'prev >';
        } else {
            prev.href = '../../';
            ptext = 'index';
        }
        prev.appendChild(document.createTextNode(ptext));
        prev.style.marginLeft = '20%';
        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
    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