';
// message area
var floatingMsg = '';
// stats
var stats = '
>>
';
// combine ui elements
document.body.innerHTML = nav + '' + nav + floatingMsg + stats;
// add main styles
addStyle('main', true, viewerCss, imagesCss, imageCss, counterCss, navCss, navHoverCss, statsCss, statsCollapseCss, statsHoverCss, boxCss, floatingMsgCss, buttonCss, keySettingCss, autoloadSettingCss);
// add user styles
var userCss = (storeGet('ml-setting-css') || '');
addStyle('user', true, userCss);
// set up return UI object
var UI = {
images: getEl('.ml-images'),
statsContent: getEl('.ml-stats-content'),
statsPages: getEl('.ml-stats-pages'),
statsCollapse: getEl('.ml-stats-collapse'),
btnManualReload: getEl('.ml-manual-reload'),
btnInfo: getEl('.ml-info-button'),
floatingMsg: getEl('.ml-floating-msg'),
btnNextChap: getEl('.ml-chap-next'),
btnPrevChap: getEl('.ml-chap-prev'),
btnExit: getEl('.ml-exit'),
btnSettings: getEl('.ml-settings-button'),
isTyping: false,
ignore: false
};
// message func
var messageId = null;
var showFloatingMsg = function(msg, timeout, html) {
clearTimeout(messageId);
log(msg);
if(html) {
UI.floatingMsg.innerHTML = msg;
} else {
UI.floatingMsg.textContent = msg;
}
UI.floatingMsg.style.display = msg ? '' : 'none';
if(timeout) {
messageId = setTimeout(function() {
showFloatingMsg('');
}, timeout);
}
};
// configure initial state
UI.floatingMsg.style.display = 'none';
// set up listeners
document.addEventListener('click', function(evt) {
if (evt.target.nodeName === 'A') {
if(evt.target.className.indexOf('ml-chap') !== -1) {
log('next chapter will autoload');
storeSet('autoload', 'yes');
} else if(evt.target.className.indexOf('ml-exit') !== -1) {
log('exiting chapter, stop autoload');
storeSet('autoload', 'no');
}
}
});
UI.btnManualReload.addEventListener('click', function(evt) {
var imgClick = function(e) {
var target = e.target;
UI.images.removeEventListener('click', imgClick, false);
UI.images.style.cursor = '';
if(target.nodeName === 'IMG' && target.parentNode.className === 'ml-images') {
showFloatingMsg('');
if(!target.title) {
showFloatingMsg('Reloading "' + target.src + '"', 3000);
if(target.complete) target.onload = null;
target.src = target.src + (target.src.indexOf('?') !== -1 ? '&' : '?') + new Date().getTime();
}
} else {
showFloatingMsg('Cancelled manual reload...', 3000);
}
};
showFloatingMsg('Left click the image you would like to reload.\nClick on the page margin to cancel.');
UI.images.style.cursor = 'pointer';
UI.images.addEventListener('click', imgClick, false);
});
UI.statsCollapse.addEventListener('click', function(evt) {
var test = UI.statsCollapse.textContent === '>>';
UI.statsContent.style.display = test ? 'none' : '';
UI.statsCollapse.textContent = test ? '<<' : '>>';
});
UI.floatingMsg.addEventListener('focus', function(evt) {
var target = evt.target;
if(target.dataset.ignore) UI.ignore = true;
if((target.nodeName === 'INPUT' && target.type === 'text') || target.nodeName === 'TEXTAREA') UI.isTyping = true;
}, true);
UI.floatingMsg.addEventListener('blur', function(evt) {
var target = evt.target;
if(target.dataset.ignore) UI.ignore = false;
if((target.nodeName === 'INPUT' && target.type === 'text') || target.nodeName === 'TEXTAREA') UI.isTyping = false;
}, true);
UI.btnInfo.addEventListener('click', function(evt) {
if(UI.floatingMsg.textContent) {
showFloatingMsg('');
} else {
showFloatingMsg('Information:\n' +
'IMPORTANT: The script has been updated to exclude NSFW sites\n' +
'in order to gain access to that functionality you\'ll have to install the following addon script.\n' +
'https://sleazyfork.org/en/scripts/12657-manga-loader-nsfw\n\n' +
'New feature! You can now define custom CSS in the new settings panel (accessible through the gear icon at the bottom left).\n' +
'The CSS will be saved and reapplied each time the script loads. You can change the background color of the page,\nthe width of the images and pretty much anything else.\n' +
'\n' +
'Keybindings:\n' +
'Z - previous chapter\n' +
'X - exit\n' +
'C - next chapter\n\n' +
'Click the info button again to close this message.');
}
});
UI.btnSettings.addEventListener('click', function() {
if(UI.floatingMsg.textContent) {
showFloatingMsg('');
} else {
var settings = '';
// Custom CSS
settings += 'CSS (custom css for Manga Loader): ' +
'
';
// Keybindings
settings += 'Keybindings:
' +
'
Previous Chapter
' +
'
Exit
' +
'
Next Chapter
' +
'
';
// Autoload
settings += 'Auto-load:
';
// Load all or just N pages
settings += 'Number of pages to load at a time (default is 10): ' +
'Type "all" to load all images at once slow and not recommended ' +
'
';
// Save button
settings += ' ';
showFloatingMsg(settings, null, true);
// handle keybinding detection
getEl('.ml-setting-key').onkeydown = function(e) {
var target = e.target;
if(target.nodeName.toUpperCase() === 'INPUT') {
e.preventDefault();
e.stopPropagation();
target.value = e.keyCode || e.which;
}
};
// handle save button
getEl('.ml-setting-save', UI.floatingMsg).onclick = function() {
// persist css
var css = getEl('.ml-setting-css', UI.floatingMsg).value.trim();
addStyle('user', true, css);
storeSet('ml-setting-css', css);
// keybindings
getEls('.ml-setting-key input').forEach(function(input) {
UI.keys[input.dataset.key] = parseInt(input.value);
});
storeSet('ml-setting-key', UI.keys);
// autoload
storeSet('mAutoload', getEl('.ml-setting-autoload').checked);
// loadnum
var loadnum = getEl('.ml-setting-loadnum').value;
mLoadNum = getEl('.ml-setting-loadnum').value = loadnum.toLowerCase() === 'all' ? 'all' : (parseInt(loadnum) || 10);
storeSet('mLoadNum', mLoadNum);
// flash notify
var flash = getEl('.ml-setting-save-flash');
flash.textContent = 'Saved!';
setTimeout(function() { flash.textContent = ''; }, 1000);
};
}
});
// keybindings
UI.keys = storeGet('ml-setting-key') || {
PREV_CHAP: 90, EXIT: 88, NEXT_CHAP: 67
};
UI._keys = {};
Object.keys(UI.keys).forEach(function(action) {
UI._keys[UI.keys[action]] = action;
});
window.addEventListener('keydown', function(evt) {
// ignore keybindings when text input is focused
if(UI.isTyping) {
if(!UI.ignore) evt.stopPropagation();
return;
}
// perform action
switch(evt.keyCode) {
case UI.keys.PREV_CHAP:
if(UI.btnPrevChap) {
UI.btnPrevChap.click();
}
break;
case UI.keys.EXIT:
UI.btnExit.click();
break;
case UI.keys.NEXT_CHAP:
if(UI.btnNextChap) {
UI.btnNextChap.click();
}
break;
default:
evt.stopPropagation();
break;
}
}, true);
return UI;
};
var getCounter = function(imgNum) {
var counter = document.createElement('div');
counter.classList.add('ml-counter');
counter.textContent = imgNum;
return counter;
};
var addImage = function(src, loc, imgNum, callback) {
var image = new Image(),
counter = getCounter(imgNum);
image.onerror = function() {
log('failed to load ' + src);
image.onload = null;
image.style.backgroundColor = 'white';
image.style.cursor = 'pointer';
image.title = 'Reload?';
image.src = IMAGES.refresh_large;
image.onclick = function() {
image.onload = callback;
image.title = '';
image.style.cursor = '';
image.src = src;
};
};
image.onload = callback;
image.src = src;
loc.appendChild(image);
loc.appendChild(counter);
};
var loadManga = function(imp) {
var ex = extractInfo.bind(imp),
imgUrl = ex('img', imp.imgmod),
nextUrl = ex('next'),
numPages = ex('numpages'),
curPage = ex('curpage', {
type: 'index'
}) || 1,
nextChapter = ex('nextchap', {
type: 'value',
val: (imp.invchap && -1) || 1
}),
prevChapter = ex('prevchap', {
type: 'value',
val: (imp.invchap && 1) || -1
}),
xhr = new XMLHttpRequest(),
d = document.implementation.createHTMLDocument(),
addAndLoad = function(img, next) {
if(!img) throw new Error('failed to retrieve img for page ' + curPage);
updateStats();
addImage(img, UI.images, curPage, function() {
pagesLoaded += 1;
updateStats();
});
if(!next) throw new Error('failed to retrieve next url for page ' + curPage);
loadNextPage(next);
},
updateStats = function() {
UI.statsPages.textContent = ' ' + pagesLoaded + '/' + curPage + ' loaded' + (numPages ? ', ' + numPages + ' total' : '');
},
getPageInfo = function() {
var page = d.body;
d.body.innerHTML = xhr.response;
try {
// find image and link to next page
addAndLoad(ex('img', imp.imgmod, page), ex('next', null, page));
} catch (e) {
log(e);
log('error getting details from next page, assuming end of chapter.');
}
},
loadNextPage = function(url) {
if (mLoadNum !== 'all' && count % mLoadNum === 0) {
if (resumeUrl) {
resumeUrl = null;
} else {
resumeUrl = url;
log('waiting for user to scroll further before loading more images, loaded ' + count + ' pages so far, next url is ' + resumeUrl);
return;
}
}
if (curPage + 1 > numPages) {
log('reached "numPages" ' + numPages + ', assuming end of chapter');
return;
}
if (lastUrl === url) {
log('last url (' + lastUrl + ') is the same as current (' + url + '), assuming end of chapter');
return;
}
curPage += 1;
count += 1;
lastUrl = url;
if (imp.pages) {
imp.pages(url, curPage, addAndLoad, ex, getPageInfo);
} else {
var colonIdx = url.indexOf(':');
if(colonIdx > -1) url = url.slice(colonIdx + 1);
url = location.protocol + url;
xhr.open('get', url);
imp.beforexhr && imp.beforexhr(xhr);
xhr.onload = getPageInfo;
xhr.onerror = function() {
log('failed to load page, aborting', 'error');
};
xhr.send();
}
},
count = 1,
pagesLoaded = curPage - 1,
lastUrl, UI, resumeUrl;
if (!imgUrl || !nextUrl) {
log('failed to retrieve ' + (!imgUrl ? 'image url' : 'next page url'), 'exit');
}
// do some checks on the chapter urls
nextChapter = (nextChapter && nextChapter.trim() === location.href + '#' ? null : nextChapter);
prevChapter = (prevChapter && prevChapter.trim() === location.href + '#' ? null : prevChapter);
UI = getViewer(prevChapter, nextChapter);
UI.statsPages.textContent = ' 0/1 loaded, ' + numPages + ' total';
if (mLoadNum !== 'all') {
window.addEventListener('scroll', throttle(function(e) {
if (!resumeUrl) return; // exit early if we don't have a position to resume at
if(!UI.imageHeight) {
UI.imageHeight = getEl('.ml-images img').clientHeight;
}
var scrollBottom = document.body.scrollHeight - ((document.body.scrollTop || document.documentElement.scrollTop) + window.innerHeight);
if (scrollBottom < UI.imageHeight * 2) {
log('user scroll nearing end, loading more images starting from ' + resumeUrl);
loadNextPage(resumeUrl);
}
}, 100));
}
addAndLoad(imgUrl, nextUrl);
};
W.MLoaderLoadImps = function(imps) {
var success = imps.some(function(imp) {
var intervalId;
var waitAndLoad = function() {
if (typeof imp.wait === 'function') {
log('Waiting for load condition to be fulfilled');
intervalId = setInterval(function() {
if (imp.wait()) {
log('Condition fulfilled, loading');
clearInterval(intervalId);
loadManga(imp);
}
}, 200);
} else if(typeof imp.wait === 'string') {
log('Waiting for load condition to be fulfilled');
intervalId = setInterval(function() {
if (getEl(imp.wait)) {
log('Condition fulfilled, loading');
clearInterval(intervalId);
loadManga(imp);
}
}, 200);
} else {
setTimeout(loadManga.bind(null, imp), imp.wait || 0);
}
};
if (imp.match && (new RegExp(imp.match, 'i')).test(pageUrl)) {
currentImpName = imp.name;
if (autoload !== 'no' && (BM_MODE || mAutoload || autoload)) {
log('autoloading...');
waitAndLoad();
return true;
}
// append button to dom that will trigger the page load
btnLoad = createButton('Load Manga', function(evt) {
waitAndLoad();
this.remove();
}, btnLoadCss);
document.body.appendChild(btnLoad);
return true;
}
});
if (!success) {
log('no implementation for ' + pageUrl, 'error');
}
};
var pageUrl = window.location.href,
btnLoadCss = toStyleStr({
'position': 'fixed',
'bottom': 0,
'right': 0,
'padding': '5px',
'margin': '0 10px 10px 0',
'z-index': '99999'
}),
currentImpName, btnLoad;
// used when switching chapters
var autoload = storeGet('autoload');
// manually set by user in menu
var mAutoload = storeGet('mAutoload') || false;
// should we load less pages at a time?
var mLoadNum = storeGet('mLoadNum') || 10;
// clear autoload
storeDel('autoload');
log('starting...');
W.MLoaderLoadImps(implementations);