bubble.js

   1 /*\r
   2     WebSnapr - Preview Bubble Javascript\r
   3     Written by Juan Xavier Larrea \r
   4     http://www.websnapr.com - xavier@websnapr.com   \r
   5     \r
   6 */\r
   7 \r
   8 // Point this variable to the correct location of the bg.png file\r
   9 var bubbleImageUp = 'resources/bubble_up.png';\r
  10 var bubbleImageDown = 'resources/bubble_down.png';\r
  11 \r
  12 if(typeof Array.prototype.push!="function"){\r
  13    Array.prototype.push=ArrayPush;\r
  14 \r
  15    function ArrayPush(_1){\r
  16       this[this.length]=_1;\r
  17    }\r
  18 }\r
  19 \r
  20 function WSR_getElementsByClassName(_2,_3,_4){\r
  21 \r
  22    var _5=(_3=="*"&&_2.all)?_2.all:_2.getElementsByTagName(_3);\r
  23    var _6=new Array();\r
  24    _4=_4.replace(/\-/g,"\\-");\r
  25    var _7=new RegExp("(^|\\s)"+_4+"(\\s|$)");\r
  26    var _8;\r
  27    for(var i=0;i<_5.length;i++){\r
  28       _8=_5[i];\r
  29       if(_7.test(_8.className)){\r
  30          _6.push(_8);\r
  31       }\r
  32    }\r
  33    return (_6);\r
  34 }\r
  35 \r
  36 function bindBubbles(e){\r
  37    lbActions=WSR_getElementsByClassName(document,"a","bubble");\r
  38    for(i=0;i<lbActions.length;i++){\r
  39       if(window.addEventListener){\r
  40          lbActions[i].addEventListener("mouseover",attachBubble,false);\r
  41          lbActions[i].addEventListener("mouseout",detachBubble,false);\r
  42          lbActions[i].addEventListener("click",detachBubble,false);\r
  43       }else{\r
  44          lbActions[i].attachEvent("onmouseover",attachBubble);\r
  45          lbActions[i].attachEvent("onmouseout",detachBubble);\r
  46          lbActions[i].attachEvent("onclick",detachBubble);\r
  47       }\r
  48    }\r
  49 }\r
  50 \r
  51 function attachBubble(_b){\r
  52    var _c;\r
  53    if(_b["srcElement"]){\r
  54       _c=_b["srcElement"];\r
  55    }else{\r
  56       _c=_b["target"];\r
  57    }\r
  58    if (_c.href == undefined){\r
  59       _c=_c.parentNode;\r
  60    }\r
  61 \r
  62    var _d=_c.href;\r
  63    var _10=document.createElement("div");\r
  64    document.getElementsByTagName("body")[0].appendChild(_10);\r
  65    _10.className="bubble";\r
  66 \r
  67    var _e=findPos(_c)[0]+5;\r
  68    var cur_height = findPos(_c)[1]-get_scroll_position() + 283;\r
  69 \r
  70    // should the bubble be displayed above or below the object\r
  71    if(cur_height >= get_page_height()) {\r
  72       var _f=findPos(_c)[1]-363;\r
  73       var _mL=2;\r
  74       var _mT=39;\r
  75       bubbleImage = bubbleImageUp;\r
  76    }\r
  77    else {\r
  78       var _f=findPos(_c)[1]+17;\r
  79       var _mL=2;\r
  80       var _mT=34;\r
  81       bubbleImage = bubbleImageDown;\r
  82    }\r
  83 \r
  84    if (BrowserDetect.browser == 'Explorer') {\r
  85       _10.style.width="275px";\r
  86       _10.style.position="absolute";\r
  87       _10.style.top=_f;\r
  88       _10.style.zIndex=99999;\r
  89       _10.style.left=_e;\r
  90       _10.style.textAlign="left";\r
  91       _10.style.height="275px";\r
  92       _10.style.paddingTop="0";\r
  93       _10.style.paddingLeft="0";\r
  94       _10.style.paddingBottom="0";\r
  95       _10.style.paddingRight="0";\r
  96       _10.style.marginTop="0";\r
  97       _10.style.marginLeft="0";\r
  98       _10.style.marginBottom="0";\r
  99       _10.style.marginRight="0";\r
 100       _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";\r
 101    } else {\r
 102       _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+_f+"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 275px; height: 275px; padding: 0; margin: 0;");\r
 103    }\r
 104 \r
 105    if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {\r
 106 \r
 107       var _height = _f;\r
 108     \r
 109       _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+ _height +"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 275px; height: 275px; padding: 0; margin: 0;");\r
 110     \r
 111    }\r
 112 \r
 113    if(cur_height >= get_page_height()) \r
 114       showBubbleDetails(_10, _c.id, 'up');\r
 115    else\r
 116       showBubbleDetails(_10, _c.id, 'down');\r
 117 \r
 118    return;\r
 119 \r
 120    var img=document.createElement("img");\r
 121    _10.appendChild(img);\r
 122 \r
 123    if (BrowserDetect.browser == 'Explorer') {\r
 124       img.style.paddingTop="0";\r
 125       img.style.paddingLeft="0";\r
 126       img.style.paddingBottom="0";\r
 127       img.style.paddingRight="0";\r
 128       img.style.margin="auto";\r
 129       img.style.marginTop=_mT;\r
 130       img.style.marginLeft=_mL;\r
 131       img.style.marginBottom="0";\r
 132       img.style.marginRight="0";\r
 133       img.style.borderTop="0";\r
 134       img.style.borderLeft="0";\r
 135       img.style.borderBottom="0";\r
 136       img.style.borderRight="0";\r
 137    } else {\r
 138       img.setAttribute("style","padding-top: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-top: " + _mT +"px; margin-left: " + _mL +"px; margin-bottom: 0; margin-right: 0; border: 0");\r
 139    }\r
 140    img.setAttribute("src","phpfspot_img.php?idx=" + _c.id + "&width=200");\r
 141    img.setAttribute("width",202);\r
 142    img.setAttribute("height",152);\r
 143    img.setAttribute("alt","Snapshot");\r
 144 }\r
 145 \r
 146 function detachBubble(_12){\r
 147    lbActions=WSR_getElementsByClassName(document,"div","bubble");\r
 148    for(i=0;i<lbActions.length;i++){\r
 149       lbActions[i].parentNode.removeChild(lbActions[i]);\r
 150    }\r
 151 }\r
 152 \r
 153 function findPos(obj){\r
 154    var _14=curtop=0;\r
 155    if(obj.offsetParent){\r
 156       _14=obj.offsetLeft;\r
 157       curtop=obj.offsetTop;\r
 158       while(obj=obj.offsetParent){\r
 159          _14+=obj.offsetLeft;\r
 160          curtop+=obj.offsetTop;\r
 161       }\r
 162    }\r
 163    return [_14,curtop];\r
 164 }\r
 165 \r
 166 var BrowserDetect = {\r
 167         init: function () {\r
 168                 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";\r
 169                 this.version = this.searchVersion(navigator.userAgent)\r
 170                         || this.searchVersion(navigator.appVersion)\r
 171                         || "an unknown version";\r
 172                 this.OS = this.searchString(this.dataOS) || "an unknown OS";\r
 173         },\r
 174         searchString: function (data) {\r
 175                 for (var i=0;i<data.length;i++) {\r
 176                         var dataString = data[i].string;\r
 177                         var dataProp = data[i].prop;\r
 178                         this.versionSearchString = data[i].versionSearch || data[i].identity;\r
 179                         if (dataString) {\r
 180                                 if (dataString.indexOf(data[i].subString) != -1)\r
 181                                         return data[i].identity;\r
 182                         }\r
 183                         else if (dataProp)\r
 184                                 return data[i].identity;\r
 185                 }\r
 186         },\r
 187         searchVersion: function (dataString) {\r
 188                 var index = dataString.indexOf(this.versionSearchString);\r
 189                 if (index == -1) return;\r
 190                 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));\r
 191         },\r
 192         dataBrowser: [\r
 193                 {       string: navigator.userAgent,\r
 194                         subString: "OmniWeb",\r
 195                         versionSearch: "OmniWeb/",\r
 196                         identity: "OmniWeb"\r
 197                 },\r
 198                 {\r
 199                         string: navigator.vendor,\r
 200                         subString: "Apple",\r
 201                         identity: "Safari"\r
 202                 },\r
 203                 {\r
 204                         prop: window.opera,\r
 205                         identity: "Opera"\r
 206                 },\r
 207                 {\r
 208                         string: navigator.vendor,\r
 209                         subString: "iCab",\r
 210                         identity: "iCab"\r
 211                 },\r
 212                 {\r
 213                         string: navigator.vendor,\r
 214                         subString: "KDE",\r
 215                         identity: "Konqueror"\r
 216                 },\r
 217                 {\r
 218                         string: navigator.userAgent,\r
 219                         subString: "Firefox",\r
 220                         identity: "Firefox"\r
 221                 },\r
 222                 {\r
 223                         string: navigator.vendor,\r
 224                         subString: "Camino",\r
 225                         identity: "Camino"\r
 226                 },\r
 227                 {               // for newer Netscapes (6+)\r
 228                         string: navigator.userAgent,\r
 229                         subString: "Netscape",\r
 230                         identity: "Netscape"\r
 231                 },\r
 232                 {\r
 233                         string: navigator.userAgent,\r
 234                         subString: "MSIE",\r
 235                         identity: "Explorer",\r
 236                         versionSearch: "MSIE"\r
 237                 },\r
 238                 {\r
 239                         string: navigator.userAgent,\r
 240                         subString: "Gecko",\r
 241                         identity: "Mozilla",\r
 242                         versionSearch: "rv"\r
 243                 },\r
 244                 {               // for older Netscapes (4-)\r
 245                         string: navigator.userAgent,\r
 246                         subString: "Mozilla",\r
 247                         identity: "Netscape",\r
 248                         versionSearch: "Mozilla"\r
 249                 }\r
 250         ],\r
 251         dataOS : [\r
 252                 {\r
 253                         string: navigator.platform,\r
 254                         subString: "Win",\r
 255                         identity: "Windows"\r
 256                 },\r
 257                 {\r
 258                         string: navigator.platform,\r
 259                         subString: "Mac",\r
 260                         identity: "Mac"\r
 261                 },\r
 262                 {\r
 263                         string: navigator.platform,\r
 264                         subString: "Linux",\r
 265                         identity: "Linux"\r
 266                 }\r
 267         ]\r
 268 \r
 269 };\r
 270 \r
 271 function var_dump(obj) {\r
 272    if(typeof obj == "object") {\r
 273       return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;\r
 274    } else {\r
 275       return "Type: "+typeof(obj)+"\nValue: "+obj;\r
 276    }\r
 277 }//end function var_dump\r
 278 \r
 279 function get_page_height()\r
 280 {\r
 281    var myHeight = 0;\r
 282    if( typeof( window.innerHeight ) == 'number' ) {\r
 283       //Non-IE\r
 284       myHeight = window.innerHeight;\r
 285    } else if( document.documentElement && document.documentElement.clientHeight  ) {\r
 286       //IE 6+ in 'standards compliant mode'\r
 287       myHeight = document.documentElement.clientHeight;\r
 288    } else if( document.body &&  document.body.clientHeight ) {\r
 289       //IE 4 compatible\r
 290       myHeight = document.body.clientHeight;\r
 291    }\r
 292 \r
 293    return myHeight;\r
 294 }\r
 295 \r
 296 function get_scroll_position()\r
 297 {\r
 298 \r
 299   if (typeof window.pageYOffset != 'undefined')\r
 300     return window.pageYOffset;\r
 301   else\r
 302     if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')\r
 303       return window.scrollTop;\r
 304     else\r
 305       if (typeof document.body != 'undefined')\r
 306         return document.body.scrollTop;\r
 307 \r
 308 }\r
 309 \r
 310 BrowserDetect.init();\r