moonq/qalbum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added configurator

Browse Source
This commit is contained in:
q
2012-03-05 22:21:56 +02:00
parent 726ae3e305
commit 16e5300795
2 changed files with 82 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
galleryscript.js
View File

@@ -30,6 +30,8 @@ var fullscreen=false;
var preloader;
var slideshowtimer;
var slideshowinterval;
var configupdatetimer;
var sorttype="";
function setup() {
// Setup run at the load of page.
@@ -44,6 +46,7 @@ function setup() {
}
fullscreen=request('full')==1;
originals=request('orig')==1;
request('sort');
var req=request('p');
if (req==-1) { req=request('q'); }
if (req!=-1) {
@@ -153,11 +156,12 @@ function thumblist(n,curr) {
leftstr='<span title="[shift left arrow]" id="arrowleft" class="thumbbox" onclick="thumblist('+String(nleft)+','+String(curr)+')">&larr; <div class="arrowtext">('+ends.first+')</div></span>';
rightstr='<span title="[shift right arrow]" id="arrowright" class="thumbbox" onclick="thumblist('+String(nright)+','+String(curr)+')">&rarr; <div class="arrowtext">('+(imagelist.length-ends.last)+')</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>Fullscreen:</span><span class="menuitem" id="fullscreen" onclick="flipfullscreen()">'+String(fullscreen)+'</span></span>';
' <span class="menuitem" id="setupbutton" onclick="usersetupflip()">(S)etup</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>Fullscreen:</span><span class="menuitem" id="fullscreen" onclick="flipfullscreen()">'+String(fullscreen)+'</span></span>';
thumbstr='<div><span class="headsmall">Images</span>'+menustr+'</div><div id="thumbrow">'+leftstr;
for (i=ends.first; i<ends.last; 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>';
@@ -209,7 +213,7 @@ 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> ';
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])+')/ ';
}
@@ -282,7 +286,7 @@ function sortlist(property) {
imagetime[i]=templist[i].time;
imagedesc[i]=templist[i].desc;
if (imagelist[i] == tempcurrent) {
currentimage=i;
currentimage=parseInt(i);
}
}
var markidx=0;
@@ -347,6 +351,17 @@ function request(type) {
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;
@@ -398,8 +413,6 @@ function marklisteditor() {
'<span class="menuitem"></span>'+
'<span class="menuitem" id="markdownloadbutton">'+dlstr+'</span>'+
'</div>';
mel.innerHTML=liststr;
return;
}
@@ -446,7 +459,14 @@ function marklistblur() {
var cel=document.getElementById('marktable');
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
s=String(s);
@@ -518,6 +538,18 @@ function slidenext() {
showimage(currentimage);
}
}
function slidesetupfromconfig() {
var el=document.getElementById('configSlideInterval');
var newinterval=parseInt(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 (currentimage==-1) { return; }
@@ -571,11 +603,7 @@ function keypressed(e) {
}
// s: setup
if (unicode==83) {
if (document.getElementById('setupcontainer')) {
usersetupclose();
} else {
usersetup();
}
usersetupflip();
}
// x: mark image
if (unicode==88) {
@@ -590,11 +618,21 @@ function keypressed(e) {
return;
}
function usersetupflip() {
if (document.getElementById('setupcontainer')) {
usersetupclose();
} else {
usersetup();
}
return
}
function usersetup() {
if (!document.getElementById('setupcontainer')) {
el=getsetupwindow();
document.body.appendChild(el);
el.scrollIntoView(true);
document.getElementById('configSlideInterval').value=slideshowinterval;
configupdatetimer=setInterval('usersetupupdate()',500);
}
return
}
@@ -602,28 +640,46 @@ function usersetupclose() {
if (document.getElementById('setupcontainer')) {
var el=document.getElementById('setupcontainer')
el.parentNode.removeChild(el);
clearInterval(configupdatetimer);
}
return
}
function usersetupupdate() {
var el=document.getElementById('configFullscreen');
if (fullscreen) { el.value='Fullscreen: True'; }
else { el.value='Fullscreen: False'; }
el=document.getElementById('configOriginals');
if (originals) { el.value='Originals: True'; }
else { el.value='Originals: False'; }
el=document.getElementById('configExample');
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;
el.innerHTML='<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');
//el.setAttribute("class", 'result-help');
var str='<a href="javascript:void(0)" onclick="usersetupclose();">Close</a>';
var str='<input type="submit" value="Close" onclick="usersetupclose();" title="Close the setup window. [s]"/>';
/* Items to setup:
* var currentimage=-1; = offset
* var originals=false;
* var fullscreen=false;
* var slideshowinterval;
* sort name, time, namerev, timerev
*/
str+='<div class="headsmall">Configuration</div> '+
'Your query will be searched in file names. ';
if (location.protocol!='file:') {
str+='<li/>Example: <a href="'+top.location.origin+top.location.pathname+'?full=1" target="_BLANK">'+
top.location.origin+top.location.pathname+'?full=1</a>';
}
'<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]"/></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="configSortRev" value="Reverse sort" onclick="sortlist(\'rev\');" title="Sort thumbnail list in reverse order."/></div>'+
'<div>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>';
str+='<div id="configExample"></div>';
el.innerHTML=str;
return el
}

2
gallerystyle.css
View File

@@ -184,7 +184,7 @@ padding-right: 0px;
text-align: center;
}
input {
width: 5px; height: 5px;
padding: 0px 0px 0px 0px;
}
.rounded {
border: 1px solid #000;