by noromanba
2015-05-15 [2015/05/15 10:17:24]
non-flick spread image viewer w/ Tab-navi on flash-free tonarinoyj
@@ -12,8 +12,6 @@ // 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; @@ -36,15 +34,15 @@ // 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 | | +----------+ | ... | +--------------------+ |+ // | 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'; // TBD remove; align left w/ margin+ container.style.textAlign = 'center'; var cover = document.createElement('img'); cover.src = endpoint + FIRSTINDEX + '.jpg'; cover.style.maxWidth = '50%'; @@ -59,20 +57,20 @@ 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.src = endpoint + (page + 1) + '.jpg'; limg.style.maxWidth = '50%'; limg.style.maxHeight = HEIGHT;- limg.dataset.align = 'left';+ 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); }
/*
* @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
(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);
}
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