by noromanba
2015-05-15 [2015/05/15 10:17:24]
non-flick spread image viewer w/ Tab-navi on flash-free tonarinoyj
/*
* @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