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