html2slideshow 2.0

data/lib/slideshow_js.rb

@@ -0,0 +1,390 @@
+#encoding: UTF-8
+
+RD = File.expand_path(File.dirname(__FILE__) ) +  File::SEPARATOR if !defined?(RD)
+require RD + '/translating'
+
+def jstrl(s)
+  Translating::trl(s)
+end
+
+
+$JAVASCRIPT = %~ var num = -1;
+var current = num
+var running = false;
+var max = 0;
+var pausing = false;
+
+function addTime() {
+  var dtime = document.getElementById("displayTime").value;
+  if(dtime < 990) {
+    if(dtime < 10 ) {
+      document.getElementById('displayTime').value++;
+    }
+    else if(dtime < 30) {
+      document.getElementById('displayTime').value = parseInt(dtime) + 2 ;
+    }
+    else if (dtime < 60) {
+      document.getElementById('displayTime').value = parseInt(dtime) + 5;
+    }
+    else {
+      document.getElementById('displayTime').value = parseInt(dtime) + 10;
+    }
+  }
+  else {
+    blink("displayTime");
+  }
+}
+
+function reduceTime() {
+  var dtime = document.getElementById("displayTime").value;
+  if(dtime > 0) {
+    if(dtime > 60 ) {
+      document.getElementById('displayTime').value = parseInt(dtime) - 10;
+    }
+    else if(dtime > 30) {
+      document.getElementById('displayTime').value = parseInt(dtime) - 5;
+    }
+    else if (dtime > 10) {
+      document.getElementById('displayTime').value = parseInt(dtime) - 2 ;
+    }
+    else {
+      document.getElementById('displayTime').value--;
+    }
+  }
+  else {
+    blink("displayTime");
+  }
+}
+
+function pushButton(element, toggleIds) {
+  if(toggleIds) {
+	  do {
+		  var b = toggleIds.pop();
+		  releaseButton(document.getElementById(b) );
+	  }while(toggleIds.length > 0);
+  }
+  element.style.borderLeftColor="#0000a0";
+  element.style.borderTopColor="#0000a0";
+  element.style.borderRightColor="#d0d0d0";
+  element.style.borderBottomColor="#d0d0d0";
+  element.style.paddingTop="1px";
+  element.style.paddingBottom="0";
+  element.style.paddingLeft="5px";
+  element.style.paddingRight="3px";
+  element.style.marginRight="0";
+  element.style.marginLeft="1px";
+}
+
+function releaseButton(element) {
+	element.style.borderLeftColor="#d0d0d0";
+	element.style.borderTopColor="#d0d0d0";
+	element.style.borderRightColor="#0000a0";
+	element.style.borderBottomColor="#0000a0";
+	element.style.paddingTop="0";
+	element.style.paddingBottom="1px";
+	element.style.paddingLeft="4px";
+	element.style.paddingRight="4px";
+	element.style.marginRight="1px";
+	element.style.marginLeft="0";
+}
+
+var blinker = null;
+var normalBorder = null;
+function blink(eleName) {
+	if(blinker != null) {
+		blinker.style.border=normalBorder;
+		blinker = null;
+	}
+	else {
+		blinker = document.getElementById(eleName);
+		normalBorder = blinker.style.border;
+		blinker.style.border="2px solid yellow";
+		setTimeout("blink()", 200);
+	}
+}
+
+
+function removeAlert() {
+	var al = document.getElementById("alertMsg");
+	if(al) {
+		al.parentNode.removeChild(al);
+	}
+}
+
+function showAlert(msg) {
+	if(msg) {
+		var ie = document.getElementById("currentImage");
+		var ae = document.getElementById("currentImage").parentNode;
+		var me = document.createElement("p");
+		var mt = document.createTextNode(unescape(msg)); 
+
+		mestyle = document.createAttribute('class');
+		mestyle.nodeValue = 'alert';     
+		me.setAttributeNode(mestyle);
+
+		meid = document.createAttribute('id');
+		meid.nodeValue = 'alertMsg';
+		me.setAttributeNode(meid);
+
+		me.appendChild(mt); 
+		ae.insertBefore(me, ie); 
+		ae.nodeValue=me;
+
+		setTimeout('removeAlert()', 1500);
+	}
+}
+
+
+function next() {
+	resetTime();
+	pausing = false;
+	if(current + 1 < max) {
+		++current;
+		showOne();
+	}
+	else{
+		showAlert("#{jstrl('You have reached the last picture')}");
+	}
+}
+function previous() {
+	resetTime();
+	pausing = false;
+	if(--current >= 0) {
+		showOne();
+	}
+	else{
+		current = 0;
+		showAlert("#{jstrl('You have reached the first picture')}");
+	}
+}
+
+function timeChange() {
+	try{
+		var testTime = document.getElementById("displayTime").value;
+		if(testTime != null && testTime > 0 && num >= 0) {
+			document.getElementById("startControl").setAttribute('disabled', 'disabled');
+			document.getElementById("pauseControl").removeAttribute('disabled');
+			document.getElementById("stopControl").removeAttribute('disabled');
+			if(current == num) {
+				show();
+			}
+		}
+		else {
+			document.getElementById("startControl").removeAttribute('disabled');
+			document.getElementById("pauseControl").setAttribute('disabled', 'disabled');
+			document.getElementById("stopControl").setAttribute('disabled', 'disabled');
+		}
+	}catch(ex){alert(ex);}
+}
+
+function resetTime() {
+	try {
+		var element = document.getElementById("displayTime");
+		if(element.value != 0) {
+			blink("displayTime");
+		}
+		element.value = 0;
+		timeChange();
+	}catch(ex) {}
+}
+function showOne() {
+	try {
+		var imgElement = document.getElementById("currentImage");
+		var imageId = "image" + current;
+		var imgPath = document.getElementById(imageId).firstChild.nodeValue;
+		if(imgElement != null && imgPath != null ) {
+			imgElement.src = imgPath;
+			setHeading(document.getElementById(imageId).title);
+			num = current;
+			document.getElementById("imageNumber").firstChild.nodeValue= "#{jstrl('Image')} " + (current + 1);
+
+			var imageFile = imgPath.substring(imgPath.lastIndexOf('/') + 1, imgPath.lastIndexOf('.') ); 
+			var title = imageFile; 
+			if(imageFile.length > 23) {
+				imageFile = imageFile.substr(0, 20);
+				imageFile += "..."
+			}
+
+			document.getElementById("imageData").firstChild.nodeValue=imageFile;
+			document.getElementById("imageData").title = title;
+
+		}
+	}
+	catch(ex) {
+		alert(ex);
+	}
+}
+
+function setHeading(text) {
+	document.getElementById("heading").firstChild.nodeValue=text;
+}
+
+t = 0;
+function progress() {
+	var testTime = document.getElementById("displayTime").value;
+	if(!pausing && testTime > 0) {
+		unit = 100 / testTime;
+		document.getElementById("progressbar").style.width = (unit * t) + '%';
+
+		if(t >= 0)	{
+			t -= 1;
+		}
+		else {
+			t = testTime;
+		}
+	}
+	if(testTime != null && testTime != 0 && num > 0) {
+		setTimeout("progress()", 1000);
+	}
+	else {
+		t = testTime;
+	}
+}
+
+
+function show() {
+	var showTime = document.getElementById("displayTime").value;
+	if(showTime > 0 && showTime < 999 ) {
+		if(num >= 0 ) {
+			if(pausing) {
+				setTimeout("show()", showTime * 1000 );
+				return;
+			}
+			try {
+				var imgElement = document.getElementById("currentImage");
+				var imageId = "image" + num;
+				var imgPath = document.getElementById(imageId).firstChild.nodeValue;
+				if(imgElement != null && imgPath != null ) {
+					imgElement.src = imgPath;
+					t = showTime;
+					setHeading(document.getElementById(imageId).title);
+					current = num
+						++num;
+					document.getElementById("imageNumber").firstChild.nodeValue= "Image " + (num);
+					var imageFile = imgPath.substring(imgPath.lastIndexOf('/') + 1, imgPath.lastIndexOf('.') ); 
+					var title = imageFile; 
+					if(imageFile.length > 23) {
+						imageFile = imageFile.substr(0, 20);
+						imageFile += "..."
+					}
+					document.getElementById("imageData").firstChild.nodeValue=imageFile;
+					document.getElementById("imageData").title = title;
+
+					if(num < max) {
+						setTimeout("show()", showTime * 1000 );
+					}
+				}
+				else {
+					num = -1;
+				}
+			}
+			catch(ex) {
+				alert(ex);
+			}
+		}
+	}
+	else if(num > 0){
+		--num;
+	}
+}
+
+function stop() {
+	window.location.reload();
+}
+function pause() {
+	pausing = pausing ? false : true;
+	var element = document.getElementById("pauseControl");
+	if(pausing) {
+		element.title="#{jstrl('Continue slideshow')}";
+	}
+	else {
+		element.title="#{jstrl('Stop the automatic slideshow')}";
+	}
+}
+
+function start() {
+	try {
+		document.getElementById("startControl").setAttribute('disabled', 'disabled');
+		document.getElementById("pauseControl").removeAttribute('disabled');
+		document.getElementById("stopControl").removeAttribute('disabled');
+		var dtime = document.getElementById("displayTime");
+		if(dtime.value <= 0) {;
+			dtime.value = "10";
+			blink("displayTime");
+		}
+		t = document.getElementById("displayTime").value;
+	}catch(ex) {alert(ex);}
+	num = 0;
+	pausing = false;
+	show();
+	progress();
+}
+
+var visibleControls = true;
+function toggleControls() {
+	visibleControls = !visibleControls;
+	var tds = document.getElementsByTagName('div');
+	for(var i = 0; i < tds.length; ++i) {
+		var ctd = tds[i]
+			var cl = ctd.getAttribute('class');
+		if("controls" == cl) {
+			ctd.style.width = visibleControls ? '15em' : '1em';
+			ctd.style.paddingRight = visibleControls ? '0.5em' : '0';
+			if(ctd.hasChildNodes() ) {
+				var cnodes = ctd.childNodes;
+				for(ci = 0; ci < cnodes.length; ++ci) {
+					var cn = cnodes[ci];
+					if(1 == cn.nodeType && "toggleControls" != cn.id) {
+						if(! cn.getAttribute('style')) {
+							var displayStyle = document.createAttribute('style');
+							displayStyle.nodeValue = visibleControls ? "display: ;" : "display: none;";
+							cn.setAttributeNode(displayStyle);
+						}
+						else {
+							cn.style.display = visibleControls ? "" : "none";
+						}
+					}
+				}
+			} 
+		}
+	}
+
+	document.getElementById('scaleControls').style.display= visibleControls ? 'block' : 'none';
+	document.getElementById('imageData').style.display= visibleControls ? 'block' : 'none';
+	document.getElementById('controls').style.width = visibleControls ? '15em' : '1.5em';
+	document.getElementById('currentImageBlock').style.left = visibleControls ? '16.5em' : '2em';
+	document.getElementById('currentImageBlock').style.padding = visibleControls ? '0' : '0 0 0 1em ';
+}
+
+
+
+function init() {
+	agent = navigator.userAgent;
+	try{
+		mindex = agent.indexOf("MSIE");
+		if(mindex >= 0){
+			msg = "#{jstrl('In the Internet-Explorer, the slideshow may suffer from display-errors.')} ";
+			msg += "#{jstrl('Please switch to a standard-complient browser until these issues are solved.')} ";
+			en = document.getElementById("noJS");
+			pn = en.parentNode;
+			en.parentNode.removeChild(en);
+			ien = document.createElement('p');
+			ien.style.textAlign="center";
+			ien.style.color="#4040f0";
+			ien.appendChild(document.createTextNode(msg));
+			pn.insertBefore(ien, pn.firstChild);
+		}
+		else {
+			document.getElementById("pageLayout").style.visibility="visible";
+			max = document.getElementById("lastImage").firstChild.nodeValue;
+			document.getElementById("imageCount").firstChild.nodeValue = max;
+			document.getElementById("noJS").style.display="none";
+			document.getElementById("startControl").removeAttribute('disabled');
+		}
+
+	}catch(ex){
+		if(mindex && mindex >= 0) {
+			alert(agent.substring(mindex, mindex + 8));
+		}
+	}
+} ~

data/lib/slideshow_template.rb

@@ -0,0 +1,194 @@
+#encoding: UTF-8
+
+RD = File.expand_path(File.dirname(__FILE__) ) +  File::SEPARATOR if !defined?(RD)
+require_relative 'translating'
+
+def trl(s)
+    Translating::trl(s)
+end
+
+$TEMPLATE = %~<?xml version="1.0" encoding="utf8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <meta name="generator" content=
+  "HTML2Slideshow copyright 2007-2011 michael.uplawski@uplawski.eu, HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
+  <meta http-equiv="Content-Type" content=
+  "text/html; charset=utf8" />
+  <meta http-equiv="Content-Type" content="application/xhtml+xml" />
+  <meta http-equiv="Content-Style-Type" content="text/css" />
+  <meta http-equiv="Content-Script-Type" content="text/javascript" />
+  <title>images</title>
+  <script src="slideshow.js" type="text/javascript">
+</script>
+  <style type="text/css">
+    /*<![CDATA[*/
+      @import url(slideshow.css);
+      /*]]>*/
+  </style>
+</head>
+
+<body onload="init();">
+  <p id="noJS" style="display:block">
+  #{trl("This page will only work, when your browser is configured to use JavaScript.")}
+      <br />
+  #{trl("Click the back-button to return to the previous page or go directly to the")}
+          <a href="%-NoJsUrl-%" title="%-NoJsTitle-%">%-NoJsName-%</a>
+</p>
+  <div id="pageLayout">
+    <div id="controls" class="controls">
+      <div class="imgCount">
+        <span id="imageNumber">#{trl('Image')}
+        0</span><span>&nbsp;/&nbsp;</span><span id=
+        "imageCount">&nbsp;</span>
+      </div>
+
+      <div id="toggleControls" class="toggleControls">
+        <span title="#{trl('toggle controls')}" class=
+        "button" onmouseout="releaseButton(this);" onmouseup=
+        "releaseButton(this);" onmousedown="pushButton(this);" onclick=
+        "javascript:toggleControls()"><img alt="&lt;=&gt;" src=
+        "images/toggle.png" class="button" /></span>
+      </div>
+
+      <div class="heading">
+        <h1 id="heading">images</h1>
+      </div>
+
+      <table summary="controls for automatic slideshow">
+        <colgroup>
+          <col />
+          <col />
+          <col />
+        </colgroup>
+
+        <tr>
+          <td colspan="3" class="waitLabel">
+            <p class="waitLabel">#{trl('forward after')}</p>
+          </td>
+        </tr>
+
+        <tr>
+          <td>
+            <!-- 
+              The following table contains the spinbutton's html & event-handlers. 
+              Two functions addTime() and reduceTime() from the JavaScript section on top
+              are used by the onclick()-handlers.
+              -->
+
+            <table summary="spinbutton" class="spinbutton">
+              <colgroup>
+                <col />
+                <col class="spinbutton" />
+                <col />
+              </colgroup>
+
+              <tr>
+                <td rowspan="2" class="spinvalue"><input type="text"
+                  value="10" maxlength="3" id="displayTime" 
+                  title="#{trl('time span for each picture')}" 
+                  onchange="javascript:timeChange();" /></td>
+
+                <td class="spinup"><img onmousedown="pushButton(this);"
+                  onmouseup="releaseButton(this);" onclick="addTime();"
+                  onmouseout="releaseButton(this);" id=
+                  "increaseTimeControl" class="spinbuttonUp" src=
+                  "images/upCursor.png" alt="+" title="#{trl('more time')}" /></td>
+
+                <td rowspan="2" class="secLabel"><span class=
+                  "secLabel">#{trl('sec')}.</span></td>
+              </tr>
+
+              <tr>
+                <td class="spindown"><img onmousedown=
+                  "pushButton(this);" onmouseup="releaseButton(this);"
+                  onclick="reduceTime();" onmouseout=
+                  "releaseButton(this);" id="reduceTimeControl" class=
+                  "spinbuttonDown" src="images/downCursor.png" alt="-"
+                  title="#{trl('less time')}" /></td>
+              </tr>
+            </table><!-- 
+              END Spinbutton
+              -->
+          </td>
+
+          <td class="autoControls">
+            <div class="autoControls">
+              <span id="startControl" onmousedown="pushButton(this);"
+              onmouseup="releaseButton(this);" onmouseout=
+              "releaseButton(this);" onclick="javascript:start();"
+              class="button"><img src="images/start.png" title="#{trl('Start')}" 
+              alt="#{trl('Start')}"
+              class="button" /></span> <span id="stopControl"
+              onmousedown="pushButton(this);" onmouseup=
+              "releaseButton(this);" onmouseout="releaseButton(this);"
+              onclick="javascript:stop();" class="button"><img src=
+              "images/stop.png" alt="#{trl('Stop')}" title="#{trl('Stop')}" 
+              class="button" /></span>
+              <span id="pauseControl" onmousedown="pushButton(this);"
+              onmouseup="releaseButton(this);" onmouseout=
+              "releaseButton(this);" onclick="javascript:pause();"
+              class="button"><img src="images/pause.png" title="#{trl('Pause')}"
+              alt="#{trl('Pause')}"
+              class="button" /></span>
+            </div>
+          </td>
+        </tr>
+      </table>
+      <hr class="progressbar" />
+      <hr class="progressSlider" id="progressbar" />
+
+      <div id="navigationArrows" class="navigationArrows">
+        <span class="fwbackLabel">#{trl('next/previous')}:&nbsp;&nbsp;</span>
+        <span onclick="javascript:previous();" onmousedown=
+        "pushButton(this);" onmouseup="releaseButton(this);"
+        onmouseout="releaseButton(this);" id="prevControl" class=
+        "button"><img src="images/leftArrow.png" alt="&lt;" 
+        title="#{trl('previous picture (please allow time for loading)')}" 
+        class="button" /></span> <span onmouseup="releaseButton(this);"
+        onmousedown="pushButton(this);" onmouseout=
+        "releaseButton(this);" onclick="javascript:next();" id=
+        "nextControl" class="button"><img src="images/rightArrow.png"
+        alt="&lt;" title="#{trl('next picture (please allow time for loading)')}" 
+        class="button" /></span>
+      </div>
+
+      <div class="loadNote">
+        <span>#{trl('Please allow for longer loading-times during the very first cycle.')}</span>
+      </div>
+    </div>
+
+    <div id="currentImageBlock" class="currentImage"><img src=
+    "images/olive.png" alt="foto" class="currentImage" id=
+    "currentImage" /></div>
+
+    <div class="imageData" id="imageData">&nbsp;</div>
+    <div id="scaleControls" class="">
+     <span title="#{trl('scale to normal size')}" id="scaleAuto" class=
+      "button" onmousedown="pushButton(this, ['scaleMedium', 'scaleSmall']);" onclick=
+      "document.getElementById('currentImage').style.height='auto';"><img alt="100%" src=
+      "images/sizeNormal.png" class="button" /></span>
+
+      <span title="#{trl('scale to alternative large size')}" id="scaleMedium" class=
+      "button" onmousedown="pushButton(this, ['scaleAuto', 'scaleSmall']);" onclick=
+      "document.getElementById('currentImage').style.height='%-pxMedium-%'"><img alt="medium" src=
+      "images/sizeMedium.png" class="button" /></span>
+
+      <span title="#{trl('scale to alternative small size')}" id="scaleSmall" class=
+      "button" onmousedown="pushButton(this, ['scaleAuto', 'scaleMedium']);" onclick=
+      "document.getElementById('currentImage').style.height='%-pxSmall-%'"><img alt="small" src=
+      "images/sizeSmall.png" class="button" /></span>
+    </div>
+
+
+  </div>
+
+  <div>
+      %-ImgReferences-%
+  </div>
+</body>
+</html> ~
+
+