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(oElm, strTagName, oClassNames){\r
  21    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);\r
  22    var arrReturnElements = new Array();\r
  23    var arrRegExpClassNames = new Array();\r
  24    if(typeof oClassNames == "object"){\r
  25       for(var i=0; i<oClassNames.length; i++){\r
  26          arrRegExpClassNames.push(new RegExp("(^|\s)" + oClassNames[i].replace(/-/g, "\-") + "(\s|$)"));\r
  27       }\r
  28    }\r
  29    else{\r
  30       arrRegExpClassNames.push(new RegExp("(^|\s)" + oClassNames.replace(/-/g, "\-") + "(\s|$)"));\r
  31    }\r
  32    var oElement;\r
  33    var bMatchesAll;\r
  34    for(var j=0; j<arrElements.length; j++){\r
  35       oElement = arrElements[j];\r
  36       bMatchesAll = true;\r
  37       for(var k=0; k<arrRegExpClassNames.length; k++){\r
  38          if(!arrRegExpClassNames[k].test(oElement.className)){\r
  39             bMatchesAll = false;\r
  40             break;\r
  41          }\r
  42       }\r
  43       if(bMatchesAll){\r
  44          arrReturnElements.push(oElement);\r
  45       }\r
  46    }\r
  47    return (arrReturnElements)\r
  48 }\r
  49 /*function WSR_getElementsByClassName(_2,_3,_4){\r
  50 \r
  51    var _5=(_3=="*"&&_2.all)?_2.all:_2.getElementsByTagName(_3);\r
  52          window.alert(_5[0]);\r
  53    var _6=new Array();\r
  54    _4=_4.replace(/\-/g,"\\-");\r
  55    var _7=new RegExp("(^|\\s)"+_4+"(\\s|$)");\r
  56    var _8;\r
  57    for(var i=0;i<_5.length;i++){\r
  58       _8=_5[i];\r
  59       if(_7.test(_8.className)){\r
  60          _6.push(_8);\r
  61       }\r
  62    }\r
  63    return (_6);\r
  64 }*/\r
  65 \r
  66 function bindBubbles(e){\r
  67    lbActions=WSR_getElementsByClassName(document,"img","thumb");\r
  68    for(i=0;i<lbActions.length;i++){\r
  69       if(window.addEventListener){ // Mozilla, Firefox\r
  70          lbActions[i].addEventListener("mouseover",attachBubble,false);\r
  71          lbActions[i].addEventListener("mouseout",detachBubble,false);\r
  72          lbActions[i].addEventListener("click",detachBubble,false);\r
  73       }else if (window.attachEvent) { // IE\r
  74          lbActions[i].attachEvent("onmouseover",attachBubble);\r
  75          lbActions[i].attachEvent("onmouseout",detachBubble);\r
  76          lbActions[i].attachEvent("onclick",detachBubble);\r
  77       } else {\r
  78          // it seems this browser doesn't support any eventhandling\r
  79       }  \r
  80    }\r
  81 }\r
  82 \r
  83 function attachBubble(_b){\r
  84    var _c;\r
  85    if(_b["srcElement"]){ // IE\r
  86       _c=_b["srcElement"];\r
  87    }else{ // Mozilla, Firefox\r
  88       _c=_b["target"];\r
  89    }\r
  90    if (_c.href == undefined){\r
  91       _c=_c.parentNode;\r
  92    }\r
  93 \r
  94    var _d=_c.href;\r
  95 \r
  96    var _10=document.createElement("div");\r
  97    document.getElementsByTagName("body")[0].appendChild(_10);\r
  98    _10.className="bubble";\r
  99 \r
 100    if(BrowserDetect.browser != 'Explorer') {\r
 101 \r
 102       var _e=findPos(_c)[0]+5;\r
 103       var cur_height = findPos(_c)[1]-get_scroll_position() + 283;\r
 104 \r
 105       // should the bubble be displayed above or below the object\r
 106       if(cur_height >= get_page_height()) {\r
 107          var _f=findPos(_c)[1]-363;\r
 108          bubbleImage = bubbleImageUp;\r
 109       }\r
 110       else {\r
 111          var _f=findPos(_c)[1]+17;\r
 112          bubbleImage = bubbleImageDown;\r
 113       }\r
 114    }\r
 115    else {\r
 116          var _e=findPos(_c)[0]+5;\r
 117          var _f=findPos(_c)[1]+129;\r
 118          bubbleImage = bubbleImageDown;\r
 119    }\r
 120    if (BrowserDetect.browser == 'Explorer') {\r
 121       _10.style.width="275px";\r
 122       _10.style.height="275px";\r
 123       _10.style.position="absolute";\r
 124       _10.style.top=_f;\r
 125       _10.style.zIndex=99999;\r
 126       _10.style.left=_e;\r
 127       _10.style.textAlign="left";\r
 128       _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";\r
 129    } else if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {\r
 130       _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
 131    } else {\r
 132       _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
 133    }\r
 134 \r
 135    if(cur_height >= get_page_height()) \r
 136       showBubbleDetails(_10, _c.id, 'up');\r
 137    else\r
 138       showBubbleDetails(_10, _c.id, 'down');\r
 139 \r
 140 }\r
 141 \r
 142 function detachBubble(_12){\r
 143    lbActions=WSR_getElementsByClassName(document,"div","bubble");\r
 144    for(i=0;i<lbActions.length;i++){\r
 145       lbActions[i].parentNode.removeChild(lbActions[i]);\r
 146    }\r
 147 }\r
 148 \r
 149 function findPos(obj){\r
 150    var _14=curtop=0;\r
 151    if(obj.offsetParent){\r
 152       _14=obj.offsetLeft;\r
 153       curtop=obj.offsetTop;\r
 154       while(obj=obj.offsetParent){\r
 155          _14+=obj.offsetLeft;\r
 156          curtop+=obj.offsetTop;\r
 157       }\r
 158    }\r
 159    return [_14,curtop];\r
 160 }\r
 161 \r
 162 var BrowserDetect = {\r
 163         init: function () {\r
 164                 this.browser = this.searchString(this.dataBrowser) || "An unknown browser";\r
 165                 this.version = this.searchVersion(navigator.userAgent)\r
 166                         || this.searchVersion(navigator.appVersion)\r
 167                         || "an unknown version";\r
 168                 this.OS = this.searchString(this.dataOS) || "an unknown OS";\r
 169         },\r
 170         searchString: function (data) {\r
 171                 for (var i=0;i<data.length;i++) {\r
 172                         var dataString = data[i].string;\r
 173                         var dataProp = data[i].prop;\r
 174                         this.versionSearchString = data[i].versionSearch || data[i].identity;\r
 175                         if (dataString) {\r
 176                                 if (dataString.indexOf(data[i].subString) != -1)\r
 177                                         return data[i].identity;\r
 178                         }\r
 179                         else if (dataProp)\r
 180                                 return data[i].identity;\r
 181                 }\r
 182         },\r
 183         searchVersion: function (dataString) {\r
 184                 var index = dataString.indexOf(this.versionSearchString);\r
 185                 if (index == -1) return;\r
 186                 return parseFloat(dataString.substring(index+this.versionSearchString.length+1));\r
 187         },\r
 188         dataBrowser: [\r
 189                 {       string: navigator.userAgent,\r
 190                         subString: "OmniWeb",\r
 191                         versionSearch: "OmniWeb/",\r
 192                         identity: "OmniWeb"\r
 193                 },\r
 194                 {\r
 195                         string: navigator.vendor,\r
 196                         subString: "Apple",\r
 197                         identity: "Safari"\r
 198                 },\r
 199                 {\r
 200                         prop: window.opera,\r
 201                         identity: "Opera"\r
 202                 },\r
 203                 {\r
 204                         string: navigator.vendor,\r
 205                         subString: "iCab",\r
 206                         identity: "iCab"\r
 207                 },\r
 208                 {\r
 209                         string: navigator.vendor,\r
 210                         subString: "KDE",\r
 211                         identity: "Konqueror"\r
 212                 },\r
 213                 {\r
 214                         string: navigator.userAgent,\r
 215                         subString: "Firefox",\r
 216                         identity: "Firefox"\r
 217                 },\r
 218                 {\r
 219                         string: navigator.vendor,\r
 220                         subString: "Camino",\r
 221                         identity: "Camino"\r
 222                 },\r
 223                 {               // for newer Netscapes (6+)\r
 224                         string: navigator.userAgent,\r
 225                         subString: "Netscape",\r
 226                         identity: "Netscape"\r
 227                 },\r
 228                 {\r
 229                         string: navigator.userAgent,\r
 230                         subString: "MSIE",\r
 231                         identity: "Explorer",\r
 232                         versionSearch: "MSIE"\r
 233                 },\r
 234                 {\r
 235                         string: navigator.userAgent,\r
 236                         subString: "Gecko",\r
 237                         identity: "Mozilla",\r
 238                         versionSearch: "rv"\r
 239                 },\r
 240                 {               // for older Netscapes (4-)\r
 241                         string: navigator.userAgent,\r
 242                         subString: "Mozilla",\r
 243                         identity: "Netscape",\r
 244                         versionSearch: "Mozilla"\r
 245                 }\r
 246         ],\r
 247         dataOS : [\r
 248                 {\r
 249                         string: navigator.platform,\r
 250                         subString: "Win",\r
 251                         identity: "Windows"\r
 252                 },\r
 253                 {\r
 254                         string: navigator.platform,\r
 255                         subString: "Mac",\r
 256                         identity: "Mac"\r
 257                 },\r
 258                 {\r
 259                         string: navigator.platform,\r
 260                         subString: "Linux",\r
 261                         identity: "Linux"\r
 262                 }\r
 263         ]\r
 264 \r
 265 };\r
 266 \r
 267 function var_dump(arr,level) {\r
 268    var dumped_text = "";\r
 269    if(!level) level = 0;\r
 270    \r
 271    //The padding given at the beginning of the line.\r
 272    var level_padding = "";\r
 273    for(var j=0;j<level+1;j++) level_padding += "    ";\r
 274    \r
 275    if(typeof(arr) == 'object') { //Array/Hashes/Objects \r
 276       for(var item in arr) {\r
 277          var value = arr[item];\r
 278          \r
 279          if(typeof(value) == 'object') { //If it is an array,\r
 280             dumped_text += level_padding + "'" + item + "' ...\n";\r
 281             dumped_text += dump(value,level+1);\r
 282          } else {\r
 283             dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";\r
 284          }\r
 285       }\r
 286    } else { //Stings/Chars/Numbers etc.\r
 287       dumped_text = "===>"+arr+"<===("+typeof(arr)+")";\r
 288    }\r
 289    return dumped_text;\r
 290 \r
 291 }//end function var_dump\r
 292 \r
 293 function get_page_height()\r
 294 {\r
 295    var myHeight = 0;\r
 296    if( typeof( window.innerHeight ) == 'number' ) {\r
 297       //Non-IE\r
 298       myHeight = window.innerHeight;\r
 299    } else if( document.documentElement && document.documentElement.clientHeight  ) {\r
 300       //IE 6+ in 'standards compliant mode'\r
 301       myHeight = document.documentElement.clientHeight;\r
 302    } else if( document.body &&  document.body.clientHeight ) {\r
 303       //IE 4 compatible\r
 304       myHeight = document.body.clientHeight;\r
 305    }\r
 306 \r
 307    return myHeight;\r
 308 }\r
 309 \r
 310 function get_scroll_position()\r
 311 {\r
 312    if (typeof window.pageYOffset != 'undefined') {\r
 313       return window.pageYOffset;\r
 314    }\r
 315    else {\r
 316       if (typeof document.compatMode != 'undefined' &&\r
 317          document.compatMode != 'BackCompat' &&\r
 318          typeof window.scrollTop != 'undefined')\r
 319          return window.scrollTop;\r
 320       else {\r
 321          if(typeof document.documentElement.scrollTop != 'undefined')\r
 322             return document.documentElement.scrollTop;\r
 323          else {\r
 324             if (typeof document.body.scrollTop != 'undefined')\r
 325                return document.body.scrollTop;\r
 326          }\r
 327       }\r
 328    }\r
 329 \r
 330    return 0;\r
 331 \r
 332 }\r
 333 \r
 334 BrowserDetect.init();\r