Local Image Viewer

View images in local directories. Use left and right arrow keys to navigate. \ key to go back to the main directory.
当前为 2016-05-09 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Local Image Viewer
// @description View images in local directories. Use left and right arrow keys to navigate. \ key to go back to the main directory.
// @namespace   localimgviewer
// @include     file:///*
// @version     4
// @grant       none
// ==/UserScript==

var fileLinks;
var fileList = [];
var addr = [
	location.href, // full addr
	location.href.substring(location.href.lastIndexOf('/') + 1) // file name
];
var curPos = 0;
var nextPos = 0, prevPos = 0;
var nextFile, prevFile;
var div = null;

if(!isAnImage(addr[1])) { // folder
	addr[0] = addr[0][addr[0].length - 1] == '/' ? addr[0] : addr[0] + '/';
	console.log('Viewing folder ' + addr[0]);
	fileLinks = document.getElementsByClassName('file');
	for(var i=0, f='', c=0; i<fileLinks.length; i++) {
		f = fileLinks[i].getAttribute('href');
		if(f.indexOf('/') != -1) f = f.substring(f.lastIndexOf('/') + 1);
		if(isAnImage(f)) { fileList.push(f); c++; }
	}
	if(c) hookKeys();
	sessionStorage.setItem('files', JSON.stringify(fileList));
	sessionStorage.setItem('curpos', curPos);
}
else { // file
	if(!isAnImage(addr[1])) return;
	document.getElementsByTagName('img')[0].click();
	fileList = JSON.parse(sessionStorage.getItem('files'));
	curPos = fileList.indexOf(addr[1]);
	sessionStorage.setItem('curpos', curPos);
	if(curPos >= fileList.length - 1) nextPos = 0; else nextPos = curPos + 1;
	if(curPos <= 0) prevPos = fileList.length - 1; else prevPos = curPos - 1;
	hookKeys();
	createInfoBox();
}

function createInfoBox() {
	div = document.createElement('div');
	div.id = 'imgViewer';
	div.style = 'margin: 10px; padding: 10px 20px; border: 1px solid #555; border-radius: 10px; top: 0; left: 0; position: fixed; display: inline-block; opacity: 1.0; background-color: #111; color: #AAA; font-family: Georgia';
	document.body.appendChild(div);
	div.innerHTML += '<span style="font-weight: bold; color: #FFF;">Image ' + (curPos+1) + '/' + fileList.length + '</span> <br><span style="color: #AF3;">' + decodeURIComponent(addr[1]) + '</span>';
	div.innerHTML += '<br><br><span style="font-size: 75%;">Prev: ' + decodeURIComponent(fileList[prevPos]) + '<br>Next: ' + decodeURIComponent(fileList[nextPos]) + '</span>';
	div.style.opacity = sessionStorage.getItem('imgViewerOpacity');
	div.addEventListener("click", function() {
		var opac = parseFloat(this.style.opacity);
		if(opac >= 1.0) opac = 0.0; else opac += 0.2;
		this.style.opacity = opac;
		sessionStorage.setItem('imgViewerOpacity', opac);
	});
}

function hookKeys() {
	document.onkeydown = function(e) {
		var key = e.keyCode || e.which;
		// console.log('pressed key ' + key);
		if(!e.altKey && !e.ctrlKey && !e.shiftKey) {
			if(key == 39) { if(fileList[nextPos]) location.assign(fileList[nextPos]); }
			else if(key == 37) { if(fileList[prevPos]) location.assign(fileList[prevPos]); }
			else if(key == 220) location.assign(location.href.substring(0, location.href.lastIndexOf('/')));
		}
	};
}

function isAnImage(x) {
	var ext = x.split('.').pop();
	if(ext == 'jpg' || ext == 'jpeg' || ext == 'bmp' || ext == 'png' || ext == 'gif' || ext == 'tga') return true;
	else return false;
	return false;
}