added configurator

galleryscript.js

@@ -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="setupbutton" onclick="usersetupflip()">(S)etup</span>';
-           '<span class="menuitem" id="sorttime" onclick="sortlist(\'time\')">time</span>/'+
+           //'<span>Order:</span><span class="menuitem" id="sortalpha" onclick="sortlist(\'alpha\')">name</span>/'+
-           '<span class="menuitem" id="sortrev" onclick="sortlist(\'rev\')">reverse</span>'+
+           //'<span class="menuitem" id="sorttime" onclick="sortlist(\'time\')">time</span>/'+
-           '<span>Original:</span><span class="menuitem" id="originals" onclick="fliporiginals()">'+String(originals)+'</span>'+
+           //'<span class="menuitem" id="sortrev" onclick="sortlist(\'rev\')">reverse</span>'+
-           '<span>Fullscreen:</span><span class="menuitem" id="fullscreen" onclick="flipfullscreen()">'+String(fullscreen)+'</span></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')) { 
+        usersetupflip();
-            usersetupclose();
-        } else {
-            usersetup();
-        }
     }
     // 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. ';
+         '<div><input type="submit" id="configFullscreen" value="Fullscreen" onclick="flipfullscreen();" title="Use maximum area for the image. [f]"/>'+
-    if (location.protocol!='file:') { 
+         '<input type="submit" id="configOriginals" value="Originals" onclick="fliporiginals();" title="Use original images, rather than web optimized JPEGs. [o]"/></div>'+
-        str+='<li/>Example: <a href="'+top.location.origin+top.location.pathname+'?full=1" target="_BLANK">'+
+         '<div><input type="submit" id="configSortName" value="Sort by name" onclick="sortlist(\'alpha\');" title="Sort thumbnail list by image name."/>'+
-            top.location.origin+top.location.pathname+'?full=1</a>';
+         '<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
 }   

gallerystyle.css

@@ -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;