From fb15deeef32d80ef922a578d742ff49633d5f94e Mon Sep 17 00:00:00 2001
From: Andreas Unterkircher <unki@netshadow.at>
Date: Thu, 7 Jun 2007 08:48:43 +0000
Subject: [PATCH 1/1] nice bubble preview in photo index view

git-svn-id: file:///var/lib/svn/phpfspot/trunk@33 fa6a889d-dae6-447d-9e79-4ba9a3039384
---
 bubble.js                 | 261 ++++++++++++++++++++++++++++++++++++++
 phpfspot.js               |   6 +-
 resources/bubble_bg.png   | Bin 0 -> 2905 bytes
 templates/header.tpl      |   1 +
 templates/photo_index.tpl |   7 +-
 5 files changed, 272 insertions(+), 3 deletions(-)
 create mode 100644 bubble.js
 create mode 100644 resources/bubble_bg.png

diff --git a/bubble.js b/bubble.js
new file mode 100644
index 0000000..39ae03e
--- /dev/null
+++ b/bubble.js
@@ -0,0 +1,261 @@
+/*
+    WebSnapr - Preview Bubble Javascript
+    Written by Juan Xavier Larrea 
+    http://www.websnapr.com - xavier@websnapr.com   
+    
+*/
+
+// Point this variable to the correct location of the bg.png file
+var bubbleImagePath = 'resources/bubble_bg.png';
+
+if(typeof Array.prototype.push!="function"){
+   Array.prototype.push=ArrayPush;
+
+   function ArrayPush(_1){
+      this[this.length]=_1;
+   }
+}
+
+function WSR_getElementsByClassName(_2,_3,_4){
+
+   var _5=(_3=="*"&&_2.all)?_2.all:_2.getElementsByTagName(_3);
+   var _6=new Array();
+   _4=_4.replace(/\-/g,"\\-");
+   var _7=new RegExp("(^|\\s)"+_4+"(\\s|$)");
+   var _8;
+   for(var i=0;i<_5.length;i++){
+      _8=_5[i];
+      if(_7.test(_8.className)){
+         _6.push(_8);
+      }
+   }
+   return (_6);
+}
+
+function bindBubbles(e){
+   lbActions=WSR_getElementsByClassName(document,"a","bubble");
+   for(i=0;i<lbActions.length;i++){
+      if(window.addEventListener){
+         lbActions[i].addEventListener("mouseover",attachBubble,false);
+         lbActions[i].addEventListener("mouseout",detachBubble,false);
+      }else{
+         lbActions[i].attachEvent("onmouseover",attachBubble);
+         lbActions[i].attachEvent("onmouseout",detachBubble);
+      }
+   }
+}
+
+function attachBubble(_b){
+   var _c;
+   if(_b["srcElement"]){
+      _c=_b["srcElement"];
+   }else{
+      _c=_b["target"];
+   }
+   if (_c.href == undefined){
+      _c=_c.parentNode;
+   }
+
+   var _d=_c.href;
+   var _e=findPos(_c)[0]+5;
+   var _f=findPos(_c)[1]+17;
+   var _10=document.createElement("div");
+   document.getElementsByTagName("body")[0].appendChild(_10);
+   _10.className="bubble";
+
+   if (BrowserDetect.browser == 'Explorer') {
+      _10.style.width="240px";
+      _10.style.position="absolute";
+      _10.style.top=_f;
+      _10.style.zIndex=99999;
+      _10.style.left=_e;
+      _10.style.textAlign="left";
+      _10.style.height="190px";
+      _10.style.paddingTop="0";
+      _10.style.paddingLeft="0";
+      _10.style.paddingBottom="0";
+      _10.style.paddingRight="0";
+      _10.style.marginTop="0";
+      _10.style.marginLeft="0";
+      _10.style.marginBottom="0";
+      _10.style.marginRight="0";
+      _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImagePath + "',sizingMethod='image')";
+   } else {
+      _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+_f+"px ; left: "+_e+"px ; background: url("+ bubbleImagePath +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");
+   }
+
+   if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {
+
+      var _height = _f;
+    
+      _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+ _height +"px ; left: "+_e+"px ; background: url("+ bubbleImagePath +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");
+    
+   }
+
+   var img=document.createElement("img");
+   _10.appendChild(img);
+
+   if (BrowserDetect.browser == 'Explorer') {
+      img.style.paddingTop="0";
+      img.style.paddingLeft="0";
+      img.style.paddingBottom="0";
+      img.style.paddingRight="0";
+      img.style.margin="auto";
+      img.style.marginTop="27px";
+      img.style.marginLeft="25px";
+      img.style.marginBottom="0";
+      img.style.marginRight="0";
+      img.style.borderTop="0";
+      img.style.borderLeft="0";
+      img.style.borderBottom="0";
+      img.style.borderRight="0";
+   } else {
+      img.setAttribute("style","padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: 27px; margin-left: 12px; margin-bottom: 0; margin-right: 0; border: 0");
+   }
+   img.setAttribute("src","phpfspot_img.php?idx=" + _c.id + "&width=200");
+   img.setAttribute("width",202);
+   img.setAttribute("height",152);
+   img.setAttribute("alt","Snapshot");
+}
+
+function detachBubble(_12){
+   lbActions=WSR_getElementsByClassName(document,"div","bubble");
+   for(i=0;i<lbActions.length;i++){
+      lbActions[i].parentNode.removeChild(lbActions[i]);
+   }
+}
+
+/*if(window.addEventListener){
+   addEventListener("load",bindBubbles,false);
+}else{
+   attachEvent("onload",bindBubbles);
+}*/
+
+function findPos(obj){
+   var _14=curtop=0;
+   if(obj.offsetParent){
+      _14=obj.offsetLeft;
+      curtop=obj.offsetTop;
+      while(obj=obj.offsetParent){
+         _14+=obj.offsetLeft;
+         curtop+=obj.offsetTop;
+      }
+   }
+   return [_14,curtop];
+}
+
+var BrowserDetect = {
+	init: function () {
+		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
+		this.version = this.searchVersion(navigator.userAgent)
+			|| this.searchVersion(navigator.appVersion)
+			|| "an unknown version";
+		this.OS = this.searchString(this.dataOS) || "an unknown OS";
+	},
+	searchString: function (data) {
+		for (var i=0;i<data.length;i++)	{
+			var dataString = data[i].string;
+			var dataProp = data[i].prop;
+			this.versionSearchString = data[i].versionSearch || data[i].identity;
+			if (dataString) {
+				if (dataString.indexOf(data[i].subString) != -1)
+					return data[i].identity;
+			}
+			else if (dataProp)
+				return data[i].identity;
+		}
+	},
+	searchVersion: function (dataString) {
+		var index = dataString.indexOf(this.versionSearchString);
+		if (index == -1) return;
+		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
+	},
+	dataBrowser: [
+		{ 	string: navigator.userAgent,
+			subString: "OmniWeb",
+			versionSearch: "OmniWeb/",
+			identity: "OmniWeb"
+		},
+		{
+			string: navigator.vendor,
+			subString: "Apple",
+			identity: "Safari"
+		},
+		{
+			prop: window.opera,
+			identity: "Opera"
+		},
+		{
+			string: navigator.vendor,
+			subString: "iCab",
+			identity: "iCab"
+		},
+		{
+			string: navigator.vendor,
+			subString: "KDE",
+			identity: "Konqueror"
+		},
+		{
+			string: navigator.userAgent,
+			subString: "Firefox",
+			identity: "Firefox"
+		},
+		{
+			string: navigator.vendor,
+			subString: "Camino",
+			identity: "Camino"
+		},
+		{		// for newer Netscapes (6+)
+			string: navigator.userAgent,
+			subString: "Netscape",
+			identity: "Netscape"
+		},
+		{
+			string: navigator.userAgent,
+			subString: "MSIE",
+			identity: "Explorer",
+			versionSearch: "MSIE"
+		},
+		{
+			string: navigator.userAgent,
+			subString: "Gecko",
+			identity: "Mozilla",
+			versionSearch: "rv"
+		},
+		{ 		// for older Netscapes (4-)
+			string: navigator.userAgent,
+			subString: "Mozilla",
+			identity: "Netscape",
+			versionSearch: "Mozilla"
+		}
+	],
+	dataOS : [
+		{
+			string: navigator.platform,
+			subString: "Win",
+			identity: "Windows"
+		},
+		{
+			string: navigator.platform,
+			subString: "Mac",
+			identity: "Mac"
+		},
+		{
+			string: navigator.platform,
+			subString: "Linux",
+			identity: "Linux"
+		}
+	]
+
+};
+
+function var_dump(obj) {
+   if(typeof obj == "object") {
+      return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
+   } else {
+      return "Type: "+typeof(obj)+"\nValue: "+obj;
+   }
+}//end function var_dump
+
+
+BrowserDetect.init();
diff --git a/phpfspot.js b/phpfspot.js
index ce49f35..c2fe0d6 100644
--- a/phpfspot.js
+++ b/phpfspot.js
@@ -39,6 +39,8 @@ function refreshSelectedTags()
 
 function showPhotoIndex()
 {
-   content = document.getElementById("content");
-   content.innerHTML = HTML_AJAX.grab('rpc.php?action=show_photo_index');
+   HTML_AJAX.replace(document.getElementById("content"), 'rpc.php?action=show_photo_index');
+
+//   content = document.getElementById("content");
+//   content.innerHTML = HTML_AJAX.grab('rpc.php?action=show_photo_index');
 }
diff --git a/resources/bubble_bg.png b/resources/bubble_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb0bec2641704684a226d82fefb51f742c15c0a9
GIT binary patch
literal 2905
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
Z018J5>JFDx<oCt^D|1`3@=Ld4{sr-zi^c!|

literal 0
HcmV?d00001

diff --git a/templates/header.tpl b/templates/header.tpl
index 9f1e85a..ce88ff0 100644
--- a/templates/header.tpl
+++ b/templates/header.tpl
@@ -6,4 +6,5 @@
   <link href="stylesheet.css" type="text/css" rel="stylesheet" />
   <script type="text/javascript" src="rpc.php?mode=init&amp;client=all"></script>
   <script type="text/javascript" src="phpfspot.js"></script>
+  <script type="text/javascript" src="bubble.js"></script>
  </head>                                                                                                      
diff --git a/templates/photo_index.tpl b/templates/photo_index.tpl
index 3172547..1647f5a 100644
--- a/templates/photo_index.tpl
+++ b/templates/photo_index.tpl
@@ -21,7 +21,7 @@
       {if $images[row][col] }
       <div id="outter">
       <div id="inner">
-       <a href="javascript:showImage({$images[row][col]});">
+       <a href="javascript:showImage({$images[row][col]});" id="{$images[row][col]}" class="bubble">
         <img class="thumb" src="phpfspot_img.php?idx={$images[row][col]}&amp;width={$width}" />
        </a>
       </div>
@@ -38,4 +38,9 @@
   </td>
  </tr>
 </table>
+<script type="text/javascript">
+<!--
+   bindBubbles();
+-->
+</script>
 <!-- /Image Matrix -->
-- 
2.25.1