543 lines
19 KiB
JavaScript
543 lines
19 KiB
JavaScript
/*
|
|
Copyright 2011 Ville Rantanen
|
|
|
|
This program is free software: you can redistribute it and/or modify it
|
|
under the terms of the GNU Lesser General Public License as published
|
|
by the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Lesser General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Lesser General Public License
|
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
var maxThumb=10;
|
|
var uagent = navigator.userAgent.toLowerCase();
|
|
var pathlist=[];
|
|
var pathimage=[];
|
|
var imagelist=[];
|
|
var filelist=[];
|
|
var imagedesc=[];
|
|
var imagetime=[];
|
|
var marklist=[]
|
|
var currentimage=-1;
|
|
var currentlist=-1;
|
|
var originals=false;
|
|
var preloader;
|
|
var slideshowtimer;
|
|
var slideshowinterval;
|
|
|
|
function setup() {
|
|
// Setup run at the load of page.
|
|
if (notsupported()) {
|
|
return;
|
|
}
|
|
//hidethumbs();
|
|
document.onkeydown=keypressed;
|
|
slideshowinterval=request('auto');
|
|
if (slideshowinterval!=0) {
|
|
slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
|
|
}
|
|
var req=request('p');
|
|
if (req==-1) { req=request('q'); }
|
|
if (req!=-1) {
|
|
showimage(req);
|
|
} else {
|
|
thumblist(0,-1);
|
|
subfolderbiglist();
|
|
}
|
|
return;
|
|
}
|
|
|
|
function showimage(i) {
|
|
// Main function to show a single image
|
|
if (i>imagelist.length-1 || i<0) { return; }
|
|
thumblist(i,i);
|
|
showbigimage(i);
|
|
preload(i);
|
|
subfoldersmalllist();
|
|
currentimage=i;
|
|
return;
|
|
}
|
|
|
|
function showbigimage(i) {
|
|
// The medium version of image in the big image container
|
|
if (i==-1) { return; }
|
|
ob=document.getElementById('imagecontainer');
|
|
width=document.body.clientWidth-30;
|
|
height=document.body.clientHeight-225;
|
|
if (originals) { mediumstr=encodeURIComponent(imagelist[i]); }
|
|
else { mediumstr='_med/med_'+encodeURIComponent(imagelist[i])+'.jpg'; }
|
|
ob.innerHTML='<div class="imagebig"><a href="'+encodeURIComponent(imagelist[i])+'" target="_blank"><img id="imagesingle" src="'+mediumstr+'"></a></div>';
|
|
document.getElementById('imagesingle').style.maxWidth=width;
|
|
ob.style.height=height;
|
|
document.getElementById('imagesingle').style.maxHeight=height;
|
|
dc=document.getElementById('desccontainer');
|
|
dc.innerHTML=currentlink(i)+imagedesc[i];
|
|
dc.style.display='block';
|
|
return;
|
|
}
|
|
|
|
function currentlink(i) {
|
|
// gets the search term for this image
|
|
index = location.href.split("?");
|
|
s='<a title="Link to this page" href="'+index[0]+'?q='+escape(imagelist[i])+'">['+String(i+1)+']</a> ';
|
|
return s;
|
|
}
|
|
|
|
function preload(i) {
|
|
// preloads left and right images
|
|
if (imagelist.length==0) { return; }
|
|
ob=document.getElementById('preloadcontainer');
|
|
right=Math.max(0,i+1);
|
|
right=Math.min(right,imagelist.length-1);
|
|
left=Math.max(0,i-1);
|
|
left=Math.min(left,imagelist.length-1);
|
|
if (originals) {
|
|
prestr='<img src="'+encodeURIComponent(imagelist[left])+'" />';
|
|
prestr+='<img src="'+encodeURIComponent(imagelist[right])+'" />';
|
|
} else {
|
|
prestr='<img src="_med/med_'+encodeURIComponent(imagelist[left])+'.jpg" />';
|
|
prestr+='<img src="_med/med_'+encodeURIComponent(imagelist[right])+'.jpg" />';
|
|
}
|
|
ob.innerHTML=prestr;
|
|
preloadcheck();
|
|
preloader=setInterval('preloadcheck()',100);
|
|
return;
|
|
}
|
|
function preloadcheck() {
|
|
var imgs=document.getElementById('preloadcontainer').childNodes;
|
|
var tob=document.getElementById('desccontainer');
|
|
var completed=preloadcheckcount();
|
|
var colorValue=32*completed/imgs.length + 223;
|
|
tob.style.backgroundColor="rgb("+colorValue+","+colorValue+","+colorValue+")";
|
|
if (imgs.length==completed) { clearInterval(preloader); tob.style.backgroundColor="rgb(255,255,255)"; }
|
|
return;
|
|
}
|
|
function preloadcheckcount() {
|
|
var imgs=document.getElementById('preloadcontainer').childNodes;
|
|
var completed=0;
|
|
for (i=0;i<imgs.length;i++) {
|
|
if (imgs[i].complete) { completed++; }
|
|
}
|
|
return completed;
|
|
}
|
|
|
|
function thumblist(n,curr) {
|
|
// creates the short thumbnail list
|
|
maxThumb=getmaxthumbs();
|
|
if (imagelist.length==0) { return; }
|
|
ob=document.getElementById('thumbcontainer');
|
|
ob.style.width=document.body.clientWidth-30;
|
|
startI=Math.max(0,n+1-Math.round((maxThumb/2)));
|
|
startI=Math.min(startI,imagelist.length-maxThumb);
|
|
startI=Math.max(0,startI);
|
|
endI=Math.min(startI+maxThumb,imagelist.length);
|
|
currentlist=endI;
|
|
nright=endI-Math.round((maxThumb/2))+maxThumb-1;
|
|
nleft=nright-maxThumb-maxThumb;
|
|
if (maxThumb%2==1) { nright+=1; nleft+=1; }
|
|
leftstr='<span title="[shift left arrow]" id="arrowleft" class="thumbbox" onclick="thumblist('+String(nleft)+','+String(curr)+')">← <div class="arrowtext">('+startI+')</div></span>';
|
|
rightstr='<span title="[shift right arrow]" id="arrowright" class="thumbbox" onclick="thumblist('+String(nright)+','+String(curr)+')">→ <div class="arrowtext">('+(imagelist.length-endI)+')</div></span>';
|
|
menustr='<span id="thumbmenu" class="thumbmenu"><span id="allthumbs" class="menuitem" onclick="allthumbs()" title="show all thumbs">all thumbnails</span>'+
|
|
'<span>Order:</span><span class="menuitem" id="sortalpha" onclick="sortlist(\'alpha\')">name</span>/'+
|
|
'<span class="menuitem" id="sorttime" onclick="sortlist(\'time\')">time</span>/'+
|
|
'<span class="menuitem" id="sortrev" onclick="sortlist(\'rev\')">reverse</span>'+
|
|
'<span>Original:</span><span class="menuitem" id="originals" onclick="fliporiginals()">'+String(originals)+'</span></span>';
|
|
thumbstr='<div><span class="headsmall">Images</span>'+menustr+'</div><div id="thumbrow">'+leftstr;
|
|
for (i=startI; i<endI; i++) {
|
|
thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><img class="thumbimage" title="'+titlestring(imagedesc[i])+'" onclick="showimage('+String(i)+')" src="_tn/tn_'+encodeURIComponent(imagelist[i])+'.jpg"><br/><a href="'+encodeURIComponent(imagelist[i])+'" target="_blank">'+nicestring((imagelist[i]))+'</a></span>';
|
|
}
|
|
thumbstr+=rightstr+'</div>';
|
|
ob.innerHTML=thumbstr;
|
|
if (curr>-1) {
|
|
c=document.getElementById('n'+curr);
|
|
if (c) {c.className="imagebox thumbbox rounded"; }
|
|
}
|
|
if (marklist.length>0) {
|
|
for (m in marklist) {
|
|
var mth=document.getElementById('n'+marklist[m])
|
|
if (mth!=null) {
|
|
mth.className+=" marked";
|
|
}
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
function allthumbs() {
|
|
// Shows all the thumbnails in the current folder
|
|
ob=document.getElementById('thumbcontainer');
|
|
thumbstr='<h2>Images</h2><div id="thumbrow">';
|
|
for (i=0; i<imagelist.length; i++) {
|
|
thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><img title="'+titlestring(imagedesc[i])+'" onclick="showimage('+String(i)+')" src="_tn/tn_'+(encodeURIComponent(imagelist[i]))+'.jpg"><br/><a href="'+(encodeURIComponent(imagelist[i]))+'" target="_blank">'+nicestring(imagelist[i])+'</a></span>';
|
|
}
|
|
thumbstr+='</div>';
|
|
ob.innerHTML=thumbstr;
|
|
ic=document.getElementById('imagecontainer');
|
|
ic.innerHTML='';
|
|
ic.style.height=0;
|
|
dc=document.getElementById('desccontainer');
|
|
dc.style.display='none';
|
|
currentimage=-1;
|
|
return;
|
|
}
|
|
|
|
function subfoldersmalllist() {
|
|
// Shows a small subfolder list
|
|
ob=document.getElementById('pathcontainer');
|
|
pathstr='<span class="pathsmalllink">Subfolders: ';
|
|
pathstr+='<span class="pathsmalllink">(<a href="javascript:void(0);" onclick="subfoldersmalllist();">text</a> <a href="javascript:void(0);" onclick="subfolderbiglist();">icon</a> <a href="javascript:void(0);" onclick="subfolderdetaillist();">list</a>)</span> ';
|
|
for (p=0; p<pathlist.length; p++) {
|
|
pathstr+='<a href="'+encodeURI(pathlist[p][0])+'/index.html">'+nicestring(pathlist[p][0])+'</a>('+String(pathlist[p][1])+')/ ';
|
|
}
|
|
pathstr+='</span>';
|
|
if (pathlist.length==0) {
|
|
ob.innerHTML='';
|
|
} else { ob.innerHTML=pathstr; }
|
|
return;
|
|
}
|
|
function subfolderbiglist() {
|
|
// Shows a subfolder list with thumbnails
|
|
ob=document.getElementById('pathcontainer');
|
|
pathstr='<h2>Subfolders: <span class="pathsmalllink">(<a href="javascript:void(0);" onclick="subfoldersmalllist();">text</a> <a href="javascript:void(0);" onclick="subfolderbiglist();">icon</a> <a href="javascript:void(0);" onclick="subfolderdetaillist();">list</a>)</span></h2>';
|
|
for (p=0; p<pathlist.length; p++) {
|
|
if (pathimage[p].length>0) {
|
|
imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url(\''+encodeURI(pathimage[p])+'\');">';
|
|
} else { imgstr='<span class="pathbox" id="p'+p+'">'; }
|
|
pathstr+='<a title="'+pathlist[p][0]+'" href="'+encodeURI(pathlist[p][0])+'/index.html">'+imgstr+'<span class="pathlink"><span class="pathlinktext">'+nicestring(pathlist[p][0])+' ('+String(pathlist[p][1])+')</span></span></span></a>';
|
|
}
|
|
if (pathlist.length==0) {
|
|
ob.innerHTML='';
|
|
} else { ob.innerHTML=pathstr; }
|
|
return;
|
|
}
|
|
function subfolderdetaillist() {
|
|
// Shows a subfolder list with thumbnails
|
|
ob=document.getElementById('pathcontainer');
|
|
pathstr='<h2>Subfolders: <span class="pathsmalllink">(<a href="javascript:void(0);" onclick="subfoldersmalllist();">text</a> <a href="javascript:void(0);" onclick="subfolderbiglist();">icon</a> <a href="javascript:void(0);" onclick="subfolderdetaillist();">list</a>)</span></h2>';
|
|
for (p=0; p<pathlist.length; p++) {
|
|
|
|
if (pathimage[p].length>0) {
|
|
imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url(\''+encodeURI(pathimage[p])+'\');" >';
|
|
} else { imgstr='<span class="pathbox" id="p'+p+'">'; }
|
|
pathstr+='<div class="pathdetailrow"><a title="'+pathlist[p][0]+'" href="'+encodeURI(pathlist[p][0])+'/index.html">'+imgstr+'</span><span class="pathdetaillink"><span class="pathdetaillinktext">'+(pathlist[p][0])+' ('+String(pathlist[p][1])+')</span></span></a></div>';
|
|
|
|
}
|
|
if (pathlist.length==0) {
|
|
ob.innerHTML='';
|
|
} else { ob.innerHTML=pathstr; }
|
|
return;
|
|
}
|
|
function sortlist(property) {
|
|
// sorts the image list based on time or name, or reverse sort
|
|
var templist=[]
|
|
var tempmark=[]
|
|
var tempcurrent=imagelist[currentimage];
|
|
for (i in imagelist) {
|
|
templist.push({name:imagelist[i], time:imagetime[i], desc:imagedesc[i]});
|
|
}
|
|
for (i in marklist) {
|
|
tempmark.push(imagelist[marklist[i]]);
|
|
}
|
|
if (property=='time') {
|
|
templist.sort(function(a,b) {
|
|
return a.time-b.time
|
|
})
|
|
}
|
|
if (property=='alpha') {
|
|
templist.sort(function(a, b){
|
|
if (a.name < b.name)
|
|
return -1
|
|
if (a.name > b.name)
|
|
return 1
|
|
return 0
|
|
})
|
|
}
|
|
if (property=='rev') {
|
|
templist.reverse();
|
|
}
|
|
for (i in imagelist) {
|
|
imagelist[i]=templist[i].name;
|
|
imagetime[i]=templist[i].time;
|
|
imagedesc[i]=templist[i].desc;
|
|
if (imagelist[i] == tempcurrent) {
|
|
currentimage=i;
|
|
}
|
|
}
|
|
var markidx=0;
|
|
marklist=[];
|
|
for (i in tempmark) {
|
|
markidx=imagelist.indexOf(tempmark[i]);
|
|
if (markidx!=-1) {
|
|
marklist.push(markidx);
|
|
}
|
|
}
|
|
thumblist(currentimage,currentimage);
|
|
return;
|
|
}
|
|
|
|
function request(type) {
|
|
// Check for URL queries
|
|
var queries = location.search.substr(1).split("&");
|
|
for (que=0;que<queries.length;que++) {
|
|
var query = queries[que].split("=");
|
|
if (type=="q") {
|
|
// Fetch ?q=search request and present first match.
|
|
if ((query[0]=="q") && query.length>1 && query[1].length>0) {
|
|
for (imname in imagelist) {
|
|
if (imagelist[imname].indexOf(unescape(query[1])) != -1) {
|
|
return parseInt(imname);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (type=="p") {
|
|
// Fetch ?p=position request and return the integer
|
|
if ((query[0]=="p") && query.length>1 && query[1].length>0) {
|
|
var retval=parseInt(query[1]);
|
|
if (isNaN(retval)) { return -1; }
|
|
retval=Math.max(1,retval);
|
|
retval=Math.min(retval,imagelist.length);
|
|
return retval-1;
|
|
}
|
|
}
|
|
if (type=="auto") {
|
|
// Fetch ?auto=num seconds request and return the boolean
|
|
if ((query[0]=="auto") && query.length>1 && query[1].length>0) {
|
|
var retval=parseInt(query[1]);
|
|
if (isNaN(retval)) { return 0; }
|
|
return retval;
|
|
}
|
|
}
|
|
}
|
|
if (type=="auto") { return 0; }
|
|
return -1;
|
|
}
|
|
|
|
function markitem(i) {
|
|
// Adds an item in a list of selected images
|
|
if (imagelist.length==0) { return; }
|
|
if (i==-1) { return; }
|
|
var lel=document.getElementById('listcontainer');
|
|
if (lel.innerHTML.length<4) {
|
|
lel.innerHTML='<div><div id="markmenu" class="thumbmenu"><span>Marked:</span>'+
|
|
'<span class="menuitem" id="markeditbutton" onclick="marklisteditor();">edit</span>'+
|
|
'<span class="menuitem" id="marktablebutton" onclick="marklisttable();">copy</span>'+
|
|
'</div><div id="marklist"></div></div>';
|
|
}
|
|
var existidx=marklist.indexOf(i);
|
|
if (existidx==-1) {
|
|
marklist.push(i);
|
|
} else {
|
|
marklist.splice(existidx,1);
|
|
}
|
|
marklisteditor();
|
|
showimage(i);
|
|
return;
|
|
}
|
|
|
|
function unmarkitem(i) {
|
|
// remove an item from selection list
|
|
marklist.splice(i,1);
|
|
marklisteditor();
|
|
showimage(currentimage);
|
|
return;
|
|
}
|
|
|
|
function marklisteditor() {
|
|
// print out an editor view of the selection list
|
|
var mel=document.getElementById('marklist');
|
|
var liststr='';
|
|
var dlstr='<a href="data:text/csv,File%0A';
|
|
for (i in marklist) {
|
|
liststr+='<div><span class="menuitem thumbmenu" onclick="unmarkitem('+i+');">X</span>'+
|
|
'<span class="thumbmenu markedtext" onclick="showimage('+marklist[i]+');">'+imagelist[marklist[i]]+'</span></div>';
|
|
dlstr+=imagelist[marklist[i]]+'%0A';
|
|
}
|
|
dlstr+='">Download as file</a>';
|
|
liststr+='<div class="thumbmenu">'+
|
|
'<span class="menuitem" id="markdeletebutton" onclick="deletemarklist();">delete list</span>'+
|
|
'<span class="menuitem"></span>'+
|
|
'<span class="menuitem" id="markdownloadbutton">'+dlstr+'</span>'+
|
|
'</div>';
|
|
|
|
|
|
mel.innerHTML=liststr;
|
|
return;
|
|
}
|
|
|
|
function marklisttable() {
|
|
// print out a copy-pastable text box of the selection list
|
|
var mel=document.getElementById('marklist');
|
|
mel.innerHTML='<form><textarea id="marktable" readonly name="selection">"File"\r\n</textarea></form>';
|
|
var cel=document.getElementById('marktable');
|
|
cel.onclick=marklistselect;
|
|
cel.onblur=marklistblur;
|
|
cel.cols=80;
|
|
cel.hasfocus=false;
|
|
for (i in marklist) {
|
|
cel.value=cel.value+'"'+imagelist[marklist[i]]+'"\r\n';
|
|
}
|
|
var rows=cel.value.split(/\r?\n|\r/).length + 1;
|
|
cel.rows=rows;
|
|
marklistselect();
|
|
return;
|
|
}
|
|
|
|
function deletemarklist() {
|
|
// delete the selection list
|
|
var answer = confirm("Delete your selection list?")
|
|
if (answer) {
|
|
var lel=document.getElementById('listcontainer');
|
|
lel.innerHTML='';
|
|
marklist=[];
|
|
showimage(currentimage);
|
|
}
|
|
return
|
|
}
|
|
|
|
function marklistselect() {
|
|
// set focus to selection list text area
|
|
var cel=document.getElementById('marktable');
|
|
cel.hasfocus=true;
|
|
cel.select();
|
|
}
|
|
|
|
function marklistblur() {
|
|
// set blur to selection list text area
|
|
var cel=document.getElementById('marktable');
|
|
cel.hasfocus=false;
|
|
}
|
|
|
|
function nicestring(s) {
|
|
// Return a nice version of a string
|
|
s=String(s);
|
|
if (s.length<20) {
|
|
return s;
|
|
}
|
|
s=s.replace(/_/g,' ');
|
|
s=s.replace(/-/g,' ');
|
|
if (s.length>30) {
|
|
s=s.substring(0,26)+'..'+s.substring(s.length-4);
|
|
}
|
|
return s;
|
|
}
|
|
|
|
function titlestring(s) {
|
|
// Return a nice version of a string for title attribute
|
|
s=s.replace(/"/g,""");
|
|
s=s.replace(/<\/?[^>]+(>|$)/g, "");
|
|
return s;
|
|
}
|
|
|
|
function fliporiginals() {
|
|
// Use original images / medium size jpegs
|
|
if (originals)
|
|
{ originals=false; }
|
|
else
|
|
{ originals=true; }
|
|
showimage(currentimage);
|
|
}
|
|
|
|
function getmaxthumbs() {
|
|
return Math.floor((document.body.clientWidth-30)/100)-2;
|
|
}
|
|
|
|
function hidethumbs() {
|
|
// hide all thumbnails (obsolete)
|
|
if (notsupported()) {
|
|
return;
|
|
}
|
|
for (n=0; n<imagelist.length; n++) {
|
|
document.getElementById('n'+n).style.display="none";
|
|
}
|
|
return;
|
|
}
|
|
|
|
function slidenext() {
|
|
var imgs=document.getElementById('preloadcontainer').childNodes;
|
|
var completed=preloadcheckcount();
|
|
if (imgs.length==completed) {
|
|
if (slideshowinterval<0) {
|
|
currentimage-=1;
|
|
if (currentimage<0) { currentimage=imagelist.length-1; }
|
|
} else {
|
|
currentimage+=1;
|
|
if (currentimage>(imagelist.length-1)) { currentimage=0; }
|
|
}
|
|
showimage(currentimage);
|
|
}
|
|
}
|
|
|
|
function keypressed(e) {
|
|
//if (currentimage==-1) { return; }
|
|
if (document.getElementById('marklist')!=null) {
|
|
if (document.getElementById('marklist').hasfocus) { return; } }
|
|
var evtobj=window.event? event : e; //distinguish between IE's explicit event object (window.event) and Firefox's implicit.
|
|
var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode;
|
|
maxThumb=getmaxthumbs();
|
|
var shift=evtobj.shiftKey;
|
|
// shift end: move to last image
|
|
if (unicode==35 && shift==1) {
|
|
currentimage=imagelist.length-1;
|
|
showimage(currentimage);
|
|
}
|
|
// shift home: move to first item
|
|
if (unicode==36 && shift==1) {
|
|
currentimage=0;
|
|
showimage(currentimage);
|
|
}
|
|
// arrow left: move 1 left
|
|
if (unicode==37 && shift==0) {
|
|
currentimage-=1;
|
|
if (currentimage<0) { currentimage=imagelist.length-1; }
|
|
showimage(currentimage);
|
|
}
|
|
// shift arrow left: move 1 page left
|
|
if (unicode==37 && shift==1) {
|
|
currentimage-=maxThumb;
|
|
if (currentimage<0) { currentimage=imagelist.length-1; }
|
|
showimage(currentimage);
|
|
}
|
|
// arrow right: move 1 right
|
|
if (unicode==39 && shift==0) {
|
|
currentimage+=1;
|
|
if (currentimage>(imagelist.length-1)) { currentimage=0; }
|
|
showimage(currentimage);
|
|
}
|
|
// shift arrow right: move 1 page right
|
|
if (unicode==39 && shift==1) {
|
|
currentimage+=maxThumb;
|
|
if (currentimage>(imagelist.length-1)) { currentimage=0; }
|
|
showimage(currentimage);
|
|
}
|
|
// x: mark image
|
|
if (unicode==88) {
|
|
markitem(currentimage);
|
|
}
|
|
if (slideshowinterval!=0) {
|
|
clearInterval(slideshowtimer);
|
|
slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
|
|
}
|
|
//Debug:
|
|
//alert(unicode);
|
|
|
|
return;
|
|
}
|
|
|
|
function notsupported() {
|
|
// not supported devices (i.e. the javascript doesnt work properly )
|
|
if (uagent.search('series60')>-1) {
|
|
return true;
|
|
}
|
|
if (uagent.search('opera mobi')>-1) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|