959 lines
36 KiB
JavaScript
959 lines
36 KiB
JavaScript
/*
|
|
Copyright 2016 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/>.
|
|
|
|
See other included library licenses further down the file.
|
|
|
|
|
|
*/
|
|
|
|
/* ------------ Qalbum functions start here ------------- */
|
|
var maxThumb=10;
|
|
var uagent = navigator.userAgent.toLowerCase();
|
|
var marklist=[]
|
|
var currentimage=-1;
|
|
var currentlist=-1;
|
|
var originals=false;
|
|
var fullscreen=false;
|
|
var zoom=false;
|
|
var preloader;
|
|
var slideshowtimer;
|
|
var slideshowinterval;
|
|
var configupdatetimer;
|
|
var sorttype="";
|
|
|
|
function setup() {
|
|
// Setup run at the load of page.
|
|
if (notsupported()) {
|
|
return;
|
|
}
|
|
document.onkeydown=keypressed;
|
|
slideshowinterval=request('auto');
|
|
if (slideshowinterval!=0) { slidenextrestart(); }
|
|
fullscreen=request('full')==1;
|
|
originals=request('orig')==1;
|
|
request('sort');
|
|
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);
|
|
var dirStr=$('#imagecontainer').data('ID')<i ? '-' : '+';
|
|
var revDirStr=dirStr=='-' ? '+' : '-';
|
|
$('#desccontainer').html(getProgressEl()+currentlink(i)+imagelist[i].desc);
|
|
$('#desccontainer').css('display','block');
|
|
setProgress(i);
|
|
if (slideshowinterval==0) { // Manual image change, no animation
|
|
showbigimage(i);
|
|
preload(i);
|
|
subfoldersmalllist();
|
|
currentimage=i;
|
|
return
|
|
}
|
|
var animateOut=(slideshowinterval!=0 && Math.abs(slideshowinterval)<2) ? 0 : 200;
|
|
var animateIn=animateOut/2;
|
|
$('#imagecontainer').clearQueue();
|
|
$('#imagecontainer').stop();
|
|
$('#imagecontainer').css('margin-left', '0px');
|
|
$('#imagecontainer').css('opacity', '1');
|
|
$('#imagecontainer').animate({
|
|
'marginLeft' : dirStr+"=200px",
|
|
'opacity' : "-=1"
|
|
},animateOut, function() {
|
|
$('#imagecontainer').css('margin-left', revDirStr+'200px');
|
|
showbigimage(i);
|
|
preload(i);
|
|
subfoldersmalllist();
|
|
currentimage=i;
|
|
$('#imagecontainer').animate({
|
|
'marginLeft' : dirStr+"=200px",
|
|
'opacity' : "+=1"
|
|
},animateIn);
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
function showbigimage(i) {
|
|
// The medium version of image in the big image container
|
|
if (i==-1) { return; }
|
|
var dirRight=$('#imagecontainer').data('ID')<i;
|
|
var width=document.body.clientWidth-30;
|
|
var height=document.body.clientHeight-225;
|
|
if (fullscreen) { height=height+200; }
|
|
if (originals) { mediumstr=encodeURIComponent(imagelist[i].name); }
|
|
else { mediumstr='.med/'+encodeURIComponent(imagelist[i].name)+'.jpg'; }
|
|
var linkToBig = '<a class="linktobig" href="'+encodeURIComponent(imagelist[i].name)+'" target="_blank">';
|
|
if (slideshowinterval!=0) {
|
|
linkToBig = '<a class="linktobig" onclick="slidenextrestart()">';
|
|
}
|
|
if (isHTML(imagelist[i].name)) {
|
|
$('#imagecontainer').html('<span id="prevTouch"/><span id="nextTouch"/><div id="imagebig">'+linkToBig+
|
|
'<iframe id="imagesingle" src="'+encodeURIComponent(imagelist[i].name)+'"></a></div>');
|
|
$('#imagesingle').css('width',width);
|
|
$('#imagesingle').css('height',height);
|
|
} else { // is image
|
|
$('#imagecontainer').html('<span id="prevTouch"/><span id="nextTouch"/><div id="imagebig">'+linkToBig+
|
|
'<img id="imagesingle" src="'+mediumstr+'" title="'+titlestring(imagelist[i].desc)+'"></a></div>');
|
|
$('#imagesingle').css('max-width',width);
|
|
$('#imagesingle').css('max-height',height);
|
|
if ($.browser.msie) { // IE does not work with max*
|
|
$('#imagesingle').css('width','auto');
|
|
$('#imagesingle').css('height',height);
|
|
}
|
|
$('#imagesingle').css('background-image','url(".tn/'+encodeURIComponent(imagelist[i].name)+'.jpg")');
|
|
}
|
|
$('#imagecontainer').css('height',height);
|
|
$('#imagecontainer').data('ID',i);
|
|
$('#prevTouch').click(function() {
|
|
currentimage-=1;
|
|
if (currentimage<0) { currentimage=imagelist.length-1; }
|
|
showimage(currentimage);
|
|
});
|
|
$('#nextTouch').click(function() {
|
|
currentimage+=1;
|
|
if (currentimage>(imagelist.length-1)) { currentimage=0; }
|
|
showimage(currentimage);
|
|
});
|
|
if (dirRight) { var $dirEl=$('#nextTouch'); } else { var $dirEl=$('#prevTouch'); }
|
|
$dirEl.css("background-color","rgba(238,238,238,0.5)");
|
|
setTimeout(function(){
|
|
$dirEl.css("background", "");
|
|
}, 100);
|
|
|
|
if (fullscreen) {
|
|
$('#imagecontainer')[0].scrollIntoView(true);
|
|
}
|
|
addswipe('#imagecontainer');
|
|
if (zoom & !isHTML(imagelist[i].name)) {
|
|
$(document).ready(function() {
|
|
|
|
var options = {
|
|
zoomType: 'innerzoom',
|
|
preloadImages: false,
|
|
alwaysOn:true
|
|
};
|
|
$('#imagesingle').css('width',width);
|
|
$('#imagesingle').css('height',height);
|
|
$('#imagesingle').css('display','none');
|
|
// hide the distorted imagesingle
|
|
var bigImg=new Image();
|
|
bigImg.src=encodeURIComponent(imagelist[i].name);
|
|
$('.linktobig').jqzoom(options);
|
|
$(bigImg).load(function() {
|
|
if (bigImg.width < width) {
|
|
var leftoffset=(width - bigImg.width)/2;
|
|
$('.zoompad').css('left',leftoffset);
|
|
$('body').css('overflow-x','hidden');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
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].name)+'">['+String(i+1)+']</a> ';
|
|
return s;
|
|
}
|
|
|
|
function preload(i) {
|
|
// preloads left and right images
|
|
if (imagelist.length==0) { return; }
|
|
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].name)+'" />';
|
|
prestr+='<img src="'+encodeURIComponent(imagelist[right].name)+'" />';
|
|
} else {
|
|
prestr='<img src=".med/'+encodeURIComponent(imagelist[left].name)+'.jpg" />';
|
|
prestr+='<img src=".med/'+encodeURIComponent(imagelist[right].name)+'.jpg" />';
|
|
}
|
|
maxThumb=getmaxthumbs();
|
|
ends=getThumbStartEnd(i+maxThumb,maxThumb);
|
|
for (n=ends.first; n<ends.last; n++) {
|
|
prestr+='<img src=".tn/'+encodeURIComponent(imagelist[n].name)+'.jpg"/>';
|
|
}
|
|
ends=getThumbStartEnd(i-maxThumb,maxThumb);
|
|
for (n=ends.first; n<ends.last; n++) {
|
|
prestr+='<img src=".tn/'+encodeURIComponent(imagelist[n].name)+'.jpg"/>';
|
|
}
|
|
$('#preloadcontainer').html(prestr);
|
|
preloadcheck();
|
|
preloader=setInterval('preloadcheck()',100);
|
|
return;
|
|
}
|
|
function preloadcheck() {
|
|
var imgs=$('#preloadcontainer img');
|
|
var completed=preloadcheckcount();
|
|
var colorValue=32*completed/imgs.length + 223;
|
|
$('#thumbrow').css('background-color',"rgb("+colorValue+","+colorValue+","+colorValue+")");
|
|
if (imgs.length==completed) {
|
|
clearInterval(preloader);
|
|
if ($.browser.msie) {
|
|
$('#thumbrow').css('background-color',"rgb(255,255,255)");
|
|
} else {
|
|
$('#thumbrow').css('background-color',"rgba(255,255,255,0)");
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
function preloadcheckcount() {
|
|
var imgs=$('#preloadcontainer img');
|
|
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; }
|
|
$('#thumbcontainer').css('width',document.body.clientWidth-30);
|
|
ends=getThumbStartEnd(n,maxThumb);
|
|
currentlist=ends.last;
|
|
nright=ends.last-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">('+ends.first+')</div></span>';
|
|
rightstr='<span title="[shift right arrow]" id="arrowright" class="thumbbox" onclick="thumblist('+String(nright)+','+String(curr)+')">→ <div class="arrowtext">('+(imagelist.length-ends.last)+')</div></span>';
|
|
rightstr+='<span title="[a]" id="allthumbs" class="thumbbox arrowtext" onclick="allthumbs()">All</span>';
|
|
menustr='<span id="thumbmenu" class="thumbmenu">'+
|
|
' <span class="menuitem" id="setupbutton" onclick="usersetupflip()">(S)etup</span>';
|
|
thumbstr='<div><span class="headsmall">Images</span>'+menustr+'</div><div id="thumbrow">'+leftstr;
|
|
for (i=ends.first; i<ends.last; i++) {
|
|
if (isHTML(imagelist[i].name)) {
|
|
thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><img class="thumbimage" title="'+titlestring(imagelist[i].desc)+'" onclick="showimage('+String(i)+')" src="'+missingicon+'"><br/><a href="'+encodeURIComponent(imagelist[i].name)+'" target="_blank" title="'+titlestring(imagelist[i].desc)+'">'+nicestring((imagelist[i].name))+'</a></span>';
|
|
} else {
|
|
thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><img class="thumbimage" title="'+titlestring(imagelist[i].desc)+'" onclick="showimage('+String(i)+')" src=".tn/'+encodeURIComponent(imagelist[i].name)+'.jpg"><br/><a href="'+encodeURIComponent(imagelist[i].name)+'" target="_blank" title="'+titlestring(imagelist[i].desc)+'">'+nicestring((imagelist[i].name))+'</a></span>';
|
|
}
|
|
}
|
|
thumbstr+=rightstr+'</div>';
|
|
$('#thumbcontainer').html(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 ($('#n'+marklist[m]).length!=0) {
|
|
$('#n'+marklist[m]).addClass('marked');
|
|
}
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
function getProgressEl() {
|
|
// returns an empty progressbar
|
|
return '<hr id="progressbar"/>'
|
|
}
|
|
|
|
function setProgress(i) {
|
|
// Sets the progess bar width
|
|
if ($('#progressbar').length!=0) {
|
|
$('#progressbar').css('width',parseInt(100*(i+1)/(imagelist.length))+'%');
|
|
}
|
|
return
|
|
}
|
|
|
|
function getThumbStartEnd(n,maxThumb) {
|
|
// Sets the thumbnail list first and last shown item to sensible values
|
|
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);
|
|
return {first: startI, last: endI}
|
|
}
|
|
|
|
function allprogress() {
|
|
var imgs=document.images;
|
|
var completed=0;
|
|
for (i=0;i<imgs.length;i++) {
|
|
if (imgs[i].complete) { completed++; }
|
|
}
|
|
if (imgs.length==completed) {
|
|
$('#imagecontainer').html('');
|
|
$('#imagecontainer').css('height',0);
|
|
clearInterval($('#imagecontainer').data('preloaded'));
|
|
} else {
|
|
setProgress(completed);
|
|
}
|
|
return
|
|
}
|
|
|
|
function allthumbs() {
|
|
// Shows all the thumbnails in the current folder
|
|
thumbstr='<div id="thumbrow">';
|
|
for (i=0; i<imagelist.length; i++) {
|
|
thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><a href="?p='+(i+1)+'"><img title="'+titlestring(imagelist[i].desc)+'" src=".tn/'+(encodeURIComponent(imagelist[i].name))+'.jpg"></a></span>';
|
|
}
|
|
thumbstr+='</div>';
|
|
$('#thumbcontainer').html(thumbstr);
|
|
$('#imagecontainer').html(getProgressEl());
|
|
$('#imagecontainer').css('height',15);
|
|
$('#desccontainer').hide();
|
|
currentimage=-1;
|
|
$('#imagecontainer').data('preloaded',setInterval('allprogress()', 200));
|
|
return;
|
|
}
|
|
|
|
function allmediums() {
|
|
// Shows all the medium sized in the current folder
|
|
thumbstr='<div id="thumbrow">';
|
|
for (i=0; i<imagelist.length; i++) {
|
|
thumbstr+='<span id="n'+i+'" class="medium"><img id="img'+i+'" title="'+titlestring(imagelist[i].desc)+'" onclick="showimage('+String(i)+')" src=".med/'+(encodeURIComponent(imagelist[i].name))+'.jpg"></span>';
|
|
}
|
|
thumbstr+='</div>';
|
|
$('#thumbcontainer').html(thumbstr);
|
|
$('#imagecontainer').html(getProgressEl());
|
|
$('#imagecontainer').css('height',15);
|
|
$('#desccontainer').hide();
|
|
for (i=0; i<imagelist.length; i++) {
|
|
$('#img'+i).css('max-height',document.body.clientHeight);
|
|
$('#img'+i).css('max-width',document.body.clientWidth);
|
|
}
|
|
currentimage=-1;
|
|
$('#imagecontainer').data('preloaded',setInterval('allprogress()', 200));
|
|
return;
|
|
}
|
|
|
|
function subfoldersmalllist() {
|
|
// Shows a small subfolder list
|
|
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].name)+'/index.html">'+
|
|
nicestring(pathlist[p].name)+'</a>('+String(pathlist[p].size)+')/ ';
|
|
}
|
|
pathstr+='</span>';
|
|
if (pathlist.length==0) {
|
|
$('#pathcontainer').html('');
|
|
} else { $('#pathcontainer').html(pathstr); }
|
|
return;
|
|
}
|
|
function subfolderbiglist() {
|
|
// Shows a subfolder list with thumbnails
|
|
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 (pathlist[p].image.length>0) {
|
|
imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url(\''+encodeURI(pathlist[p].image)+'\');">';
|
|
} else { imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url('+missingicon+');">'; }
|
|
pathstr+='<a title="'+pathlist[p].name+'" href="'+encodeURI(pathlist[p].name)+'/index.html">'+imgstr+'<span class="pathlink"><span class="pathlinktext">'+nicestring(pathlist[p].name)+' ('+String(pathlist[p].size)+')</span></span></span></a>';
|
|
}
|
|
if (pathlist.length==0) {
|
|
$('#pathcontainer').html('');
|
|
} else { $('#pathcontainer').html(pathstr); }
|
|
return;
|
|
}
|
|
function subfolderdetaillist() {
|
|
// Shows a subfolder list with thumbnails
|
|
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 (pathlist[p].image.length>0) {
|
|
imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url(\''+encodeURI(pathlist[p].image)+'\');position:relative;top:-35px;" >';
|
|
} else { imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url('+missingicon+');background-attachment:fixed;background-position:center 15;">'; }
|
|
pathstr+='<div class="pathdetailrow"><a title="'+pathlist[p].name+'" href="'+encodeURI(pathlist[p].name)+'/index.html">'+imgstr+'</span><span class="pathdetaillink"><span class="pathdetaillinktext">'+(pathlist[p].name)+' ('+String(pathlist[p].size)+')</span></span></a></div>';
|
|
}
|
|
if (pathlist.length==0) {
|
|
$('#pathcontainer').html('');
|
|
} else { $('#pathcontainer').html(pathstr); }
|
|
return;
|
|
}
|
|
function sortlist(property) {
|
|
// sorts the image list based on time or name, or reverse sort
|
|
if (currentimage!=-1) { var tempcurrent=imagelist[currentimage].name; }
|
|
var templist=imagelist;
|
|
var tempmark=[];
|
|
|
|
for (i in marklist) {
|
|
tempmark.push(imagelist[marklist[i]].name);
|
|
}
|
|
if (property=='time') {
|
|
templist.sort(function(a,b) {
|
|
return a.time-b.time
|
|
})
|
|
}
|
|
if (property=='size') {
|
|
templist.sort(function(a,b) {
|
|
return a.size-b.size
|
|
})
|
|
}
|
|
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();
|
|
}
|
|
|
|
imagelist=templist;
|
|
var markidx=0;
|
|
marklist=[];
|
|
for (i in imagelist) {
|
|
markidx=tempmark.indexOf(imagelist[i].name);
|
|
if (markidx!=-1) {
|
|
marklist.push(parseInt(i));
|
|
}
|
|
}
|
|
if (currentimage!=-1) {
|
|
for (i in imagelist) {
|
|
if (imagelist[i].name == tempcurrent) {
|
|
currentimage=parseInt(i);
|
|
}
|
|
}
|
|
}
|
|
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].name.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=parseFloat(query[1]);
|
|
if (isNaN(retval)) { return 0; }
|
|
return retval;
|
|
}
|
|
}
|
|
if (type=="full") {
|
|
// Fetch ?full=1
|
|
if ((query[0]=="full") && query.length>1 && query[1].length>0) {
|
|
var retval=parseInt(query[1]);
|
|
if (isNaN(retval)) { return 0; }
|
|
return retval;
|
|
}
|
|
}
|
|
if (type=="orig") {
|
|
// Fetch ?orig=1
|
|
if ((query[0]=="orig") && query.length>1 && query[1].length>0) {
|
|
var retval=parseInt(query[1]);
|
|
if (isNaN(retval)) { return 0; }
|
|
return retval;
|
|
}
|
|
}
|
|
if (type=="sort") {
|
|
// Fetch ?sort=n|t|nr|nt
|
|
if ((query[0]=="sort") && query.length>1 && query[1].length>0) {
|
|
var order=query[1].substring(0,1);
|
|
var rev=query[1].substring(1,2)=="r"
|
|
if (order=="n") { sortlist('alpha'); }
|
|
if (order=="t") { sortlist('time'); }
|
|
if (rev) { sortlist('rev'); }
|
|
return 0;
|
|
}
|
|
}
|
|
}
|
|
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; }
|
|
if ($('#listcontainer').html().length<4) {
|
|
$('#listcontainer').html('<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 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]].name+'</span></div>';
|
|
dlstr+=imagelist[marklist[i]].name+'%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>';
|
|
$('#marklist').html(liststr);
|
|
return;
|
|
}
|
|
|
|
function marklisttable() {
|
|
// print out a copy-pastable text box of the selection list
|
|
$('#marklist').html('<form><textarea id="marktable" readonly name="selection">"File"\r\n</textarea></form>');
|
|
var cel=$('#marktable')[0];
|
|
cel.onclick=marklistselect;
|
|
cel.onblur=marklistblur;
|
|
cel.cols=80;
|
|
cel.hasfocus=false;
|
|
for (i in marklist) {
|
|
cel.value=cel.value+'"'+imagelist[marklist[i]].name+'"\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) {
|
|
$('#listcontainer').html('');
|
|
marklist=[];
|
|
showimage(currentimage);
|
|
}
|
|
return
|
|
}
|
|
|
|
function marklistselect() {
|
|
// set focus to selection list text area
|
|
var cel=$('#marktable')[0];
|
|
cel.hasfocus=true;
|
|
cel.select();
|
|
}
|
|
|
|
function marklistblur() {
|
|
// set blur to selection list text area
|
|
var cel=$('#marktable')[0];
|
|
cel.hasfocus=false;
|
|
}
|
|
function ArrayToURL(array) {
|
|
var pairs = [];
|
|
for (var key in array) {
|
|
if (array.hasOwnProperty(key))
|
|
{ pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(array[key])); }
|
|
}
|
|
return pairs.join('&');
|
|
}
|
|
function nicestring(s) {
|
|
// Return a nice version of a string (short)
|
|
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 flipConfigVar(variable) {
|
|
// Flip content of a boolean config variable
|
|
if (variable)
|
|
{ variable=false; }
|
|
else
|
|
{ variable=true; }
|
|
return variable
|
|
}
|
|
|
|
function fliporiginals() {
|
|
// Use original images / medium size jpegs
|
|
originals=flipConfigVar(originals);
|
|
showimage(currentimage);
|
|
}
|
|
|
|
function flipfullscreen() {
|
|
// show thumbrow / not
|
|
fullscreen=flipConfigVar(fullscreen);
|
|
if (fullscreen)
|
|
{ $('#imagecontainer')[0].scrollIntoView(true); }
|
|
else
|
|
{ $('#crumbcontainer')[0].scrollIntoView(true); }
|
|
showimage(currentimage);
|
|
}
|
|
function flipzoom() {
|
|
// show zoomer / not
|
|
zoom=flipConfigVar(zoom);
|
|
showimage(currentimage);
|
|
}
|
|
function getmaxthumbs() {
|
|
maxthumbs=Math.floor((document.body.clientWidth-30)/100)-2;
|
|
// quick fix for larger displays
|
|
maxthumbs=maxthumbs - Math.floor(document.body.clientWidth/1000);
|
|
return maxthumbs;
|
|
}
|
|
|
|
function isHTML(s) {
|
|
return s.match(/htm.?$/i);
|
|
}
|
|
|
|
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=$('#preloadcontainer img').length;
|
|
var completed=preloadcheckcount();
|
|
if (imgs==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 slidenextrestart() {
|
|
if (slideshowinterval==0) { showimage(currentimage); return; }
|
|
if (slideshowtimer) { clearInterval(slideshowtimer); }
|
|
slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
|
|
slidenext();
|
|
}
|
|
function slidesetupfromconfig() {
|
|
var el=$('#configSlideInterval')[0];
|
|
var newinterval=parseFloat(el.value);
|
|
if (isNaN(newinterval)) { newinterval=0; }
|
|
el.value=newinterval;
|
|
slideshowinterval=newinterval;
|
|
if (slideshowtimer) { clearInterval(slideshowtimer); }
|
|
if (slideshowinterval!=0) {
|
|
slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
|
|
}
|
|
return;
|
|
}
|
|
|
|
function keypressed(e) {
|
|
//if ($('#marklist').length!=0) {
|
|
// 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, j: move 1 left
|
|
if ((unicode==37 || unicode==74 ) && shift==0) {
|
|
currentimage-=1;
|
|
if (currentimage<0) { currentimage=imagelist.length-1; }
|
|
showimage(currentimage);
|
|
}
|
|
// shift arrow left, j: move 1 page left
|
|
if ((unicode==37 || unicode==74 ) && shift==1) {
|
|
currentimage-=maxThumb;
|
|
if (currentimage<0) { currentimage=imagelist.length-1; }
|
|
showimage(currentimage);
|
|
}
|
|
// arrow right, k: move 1 right
|
|
if ((unicode==39 || unicode==75) && shift==0) {
|
|
currentimage+=1;
|
|
if (currentimage>(imagelist.length-1)) { currentimage=0; }
|
|
showimage(currentimage);
|
|
}
|
|
// shift arrow right, k: move 1 page right
|
|
if ((unicode==39 || unicode==75) && shift==1) {
|
|
currentimage+=maxThumb;
|
|
if (currentimage>(imagelist.length-1)) { currentimage=0; }
|
|
showimage(currentimage);
|
|
}
|
|
// a: all thumbs
|
|
if (unicode==65) {
|
|
allthumbs();
|
|
}
|
|
// b: boss key
|
|
if (unicode==66) {
|
|
bosskey();
|
|
}
|
|
// f: fullscreen
|
|
if (unicode==70) {
|
|
flipfullscreen();
|
|
}
|
|
// m: mediums
|
|
if (unicode==77) {
|
|
allmediums();
|
|
}
|
|
// o: originals
|
|
if (unicode==79) {
|
|
fliporiginals();
|
|
}
|
|
// s: setup or h: help
|
|
if (unicode==83 || unicode==72) {
|
|
usersetupflip();
|
|
}
|
|
// x: mark image
|
|
if (unicode==88) {
|
|
markitem(currentimage);
|
|
}
|
|
if (slideshowinterval!=0) {
|
|
clearInterval(slideshowtimer);
|
|
slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
|
|
}
|
|
// z: zoomer
|
|
if (unicode==90) {
|
|
flipzoom();
|
|
}
|
|
//Debug:
|
|
//alert(unicode);
|
|
|
|
return;
|
|
}
|
|
function usersetupflip() {
|
|
if ($('#setupcontainer').length!=0) {
|
|
usersetupclose();
|
|
} else {
|
|
usersetup();
|
|
}
|
|
return
|
|
}
|
|
function usersetup() {
|
|
if ($('#setupcontainer').length==0) {
|
|
el=getsetupwindow();
|
|
$('body').append(el);
|
|
// document.body.appendChild(el);
|
|
el.scrollIntoView(true);
|
|
$('#configSlideInterval')[0].value=slideshowinterval;
|
|
usersetupupdate();
|
|
$('#setupcontainer').hide();
|
|
$('#setupcontainer').show(200);
|
|
configupdatetimer=setInterval('usersetupupdate()',500);
|
|
}
|
|
return
|
|
}
|
|
function usersetupclose() {
|
|
if ($('#setupcontainer').length!=0) {
|
|
$('#setupcontainer').hide(200);
|
|
//var el=document.getElementById('setupcontainer')
|
|
//el.parentNode.removeChild(el);
|
|
clearInterval(configupdatetimer);
|
|
setTimeout(function() { $('#setupcontainer').remove(); },200);
|
|
}
|
|
return
|
|
}
|
|
function usersetupupdate() {
|
|
var el=$('#configFullscreen')[0];
|
|
if (fullscreen) { el.value='Fullscreen: True'; }
|
|
else { el.value='Fullscreen: False'; }
|
|
el=$('#configOriginals')[0];
|
|
if (originals) { el.value='Originals: True'; }
|
|
else { el.value='Originals: False'; }
|
|
el=$('#configZoom')[0];
|
|
if (zoom) { el.value='Zoom: True'; }
|
|
else { el.value='Zoom: False'; }
|
|
|
|
var optionArray=[];
|
|
if (fullscreen) { optionArray['full']=1; }
|
|
if (originals) { optionArray['orig']=1; }
|
|
if (slideshowinterval!=0) { optionArray['auto']=slideshowinterval; }
|
|
if (currentimage!=-1) { optionArray['p']=(parseInt(currentimage)+1); }
|
|
var optionstr=ArrayToURL(optionArray);
|
|
if (optionstr.length>0) { optionstr='?'+optionstr; }
|
|
var linkstr=top.location.origin+top.location.pathname+optionstr;
|
|
$('#configExample').html('<a href="'+linkstr+'" title="'+linkstr+'" target="_BLANK">Link to this image and configuration</a>');
|
|
return
|
|
}
|
|
function getsetupwindow() {
|
|
/* Returns an object containing the long help text */
|
|
var el = document.createElement('div');
|
|
el.setAttribute("id", 'setupcontainer');
|
|
var str='<div class="headsmall">Configuration</div> '+
|
|
'<div><input type="submit" id="configFullscreen" value="Fullscreen" onclick="flipfullscreen();" title="Use maximum area for the image. [f]"/>'+
|
|
'<input type="submit" id="configOriginals" value="Originals" onclick="fliporiginals();" title="Use original images, rather than web optimized JPEGs. [o]"/>'+
|
|
'<input type="submit" id="configZoom" value="Zoom" onclick="flipzoom();" title="Use zoomer on images. [z]"/></div>'+
|
|
'<div><input type="submit" id="configSortName" value="Sort by name" onclick="sortlist(\'alpha\');" title="Sort thumbnail list by image name."/>'+
|
|
'<input type="submit" id="configSortTime" value="Sort by time" onclick="sortlist(\'time\');" title="Sort thumbnail list by image modification time."/>'+
|
|
'<input type="submit" id="configSortSize" value="Sort by size" onclick="sortlist(\'size\');" title="Sort thumbnail list by image byte size."/>'+
|
|
'<input type="submit" id="configSortRev" value="Reverse sort" onclick="sortlist(\'rev\');" title="Sort thumbnail list in reverse order."/></div>'+
|
|
'<div><input type="submit" value="All thumbnails" onclick="allthumbs();" title="all thumbnails view. [a]"/>'+
|
|
'<input type="submit" value="All medium images" onclick="allmediums();" title="all medium images view. [m]"/></div>'+
|
|
'<div class="thumbmenu">Slideshow: <input type="text" id="configSlideInterval" size=3 title="Slideshow image change interval. 0 to disable. Use negative number to reverse showing order." onchange="slidesetupfromconfig();"/> seconds</div>'+
|
|
'<div id="configExample" class="thumbmenu"></div>'+
|
|
'<div class="headsmall">Keyboard shortcuts</div>'+
|
|
'<div class="thumbmenu">'+
|
|
'<ul><li/>←, →, j, k : Move to previous / next image'+
|
|
' <li/>Shift ←, → : Jump to next page'+
|
|
' <li/>Shift Home, End : Move to first / last image'+
|
|
' <li/>a : show all thumbnails'+
|
|
' <li/>f : toggle fullscreen'+
|
|
' <li/>m : show all images as medium size'+
|
|
' <li/>o : toggle originals'+
|
|
' <li/>s/h : show setup'+
|
|
' <li/>z : zoom in to image'+
|
|
' <li/>x : mark image (creates a downloadable list of filenames)'+
|
|
'</ul>Further <a href="https://bitbucket.org/MoonQ/qalbum/wiki/Home" target="_BLANK">Help</a></div>'+
|
|
'<div class="thumbmenu"><input type="submit" value="Close" onclick="usersetupclose();" title="Close the setup window. [s]"/></div>';
|
|
el.innerHTML=str;
|
|
return el
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
function addswipe(divname) {
|
|
$(divname).swipe({
|
|
swipe:function(event, direction, distance, duration, fingerCount) {
|
|
if (direction=='right') {
|
|
currentimage-=1;
|
|
if (currentimage<0) { currentimage=imagelist.length-1; }
|
|
showimage(currentimage);
|
|
}
|
|
if (direction=='left') {
|
|
currentimage+=1;
|
|
if (currentimage>(imagelist.length-1)) { currentimage=0; }
|
|
showimage(currentimage);
|
|
}
|
|
if (direction=='up') { flipfullscreen(); }
|
|
if (direction=='down') { usersetupflip(); }
|
|
}
|
|
});
|
|
}
|
|
function bosskey() {
|
|
// bosskey
|
|
|
|
var width=document.body.clientWidth-30;
|
|
var height=document.body.clientHeight-25;
|
|
$('#imagecontainer').html('<div id="imagebig"><textarea id="boss" spellcheck="false"></textarea></div>');
|
|
$('#imagebig').css('width',width);
|
|
$('#imagebig').css('height',height);
|
|
$('#desccontainer').html("");
|
|
$('#desccontainer').css('display','block');
|
|
$('#imagecontainer')[0].scrollIntoView(true);
|
|
$('#thumbcontainer').html("<br><br><br><br><br><br>");
|
|
$('#boss').css('backgroundColor','black');
|
|
$('#boss').css('color','silver'); $('#boss').css('font-family','Mono');
|
|
$('#boss').css('width',width); $('#boss').css('height',height);
|
|
$('#boss').css('text-align','left');
|
|
$("#boss").focus();
|
|
if (navigator.platform.toLowerCase().search('win')==-1) {
|
|
$('#boss').val(
|
|
['user@'+window.location.hostname+':~/Data$ ls -la',
|
|
'total 6148',
|
|
'drwxr-xr-- 13 user 4096 Jan 15 14:00 .',
|
|
'drwxrwxr-x 19 user 4096 Jan 20 19:32 ..',
|
|
'-rw-rw-r-- 1 user 11197 Jan 13 12:34 Article-12.jan.tex',
|
|
'-rw-rw-r-- 1 user 2512962 Jan 13 12:47 Article-12.jan.pdf',
|
|
'drwxr-xr-x 2 user 4096 Sep 20 18:34 articles',
|
|
'-rw-rw-r-- 1 user 3875 Jan 15 14:00 batch1.csv',
|
|
'drwxr-xr-x 3 user 4096 Oct 9 18:30 coe_slide',
|
|
'-rw-r--r-- 1 user 1379502 Jan 17 2012 HTS-introduction.pdf',
|
|
'user@'+window.location.hostname+':~/Data$ '].join('\n') );
|
|
} else {
|
|
$('#boss').html(
|
|
['Mysoft Operating System [Version '+
|
|
[String(Math.floor((Math.random()*10)+1)),
|
|
String(Math.floor((Math.random()*10)+1)),
|
|
String((new Date()).getFullYear())].join(".")+']',
|
|
'(c) '+String((new Date()).getFullYear())+' Mysoft Corporation. All rights reserved.',
|
|
'',
|
|
'C:\\Users\\Administrator\\Data\\>dir',
|
|
'03/01/2010 11:23 AM <DIR> .',
|
|
'03/01/2010 11:23 AM <DIR> ..',
|
|
'05/11/2011 03:45 PM <DIR> Project Financials',
|
|
'14/07/2011 03:47 PM <DIR> Presentations',
|
|
' 0 File(s) 0 bytes',
|
|
' 4 Dir(s) 22,347,864,436 bytes free','',
|
|
'C:\\Users\\Administrator\\Data\\>'].join('\n') );
|
|
}
|
|
|
|
return;
|
|
}
|