NP_gallery/tags/v0.95/gallery/NP_gallery.js

   1 // Detect if the browser is IE or not.\r
   2 // If it is not IE, we assume that the browser is NS/mozilla.\r
   3 var IE = document.all?true:false\r
   4 \r
   5 // If NS -- that is, !IE -- then set up for mouse movement and click capture\r
   6 if (!IE) document.captureEvents(Event.MOUSEMOVE)\r
   7 if (!IE) document.captureEvents(Event.MOUSEDOWN)\r
   8 \r
   9 // Temporary variables to hold mouse x-y pos.s\r
  10 var tempX = 0\r
  11 var tempY = 0\r
  12 var check = 0\r
  13 var Pos1x = 0\r
  14 var Pos1y = 0\r
  15 var Pos2x = 0\r
  16 var Pos2y = 0\r
  17 var RelX = 0\r
  18 var RelY = 0\r
  19 \r
  20 //start is the trigger that starts the box creation.\r
  21 function start() {\r
  22         //assign click as the event handler if there is a click.\r
  23         document.onmousedown = click\r
  24         return true\r
  25 }\r
  26 \r
  27 function click(e){\r
  28                         if (check == 2){return;//prevent multiple box drawing, or catching a third click.\r
  29                                 }\r
  30                         if (check == 0) { //first click\r
  31                                 if (IE) { // grab the x-y pos.s if browser is IE\r
  32                                                 // have to use document.documentElement instead of document.body \r
  33                                                 // because for some reason IE6 reassigns when in standards complient mode\r
  34                                                 // http://www.quirksmode.org/js/doctypes.html\r
  35                                    tempX = event.clientX + document.documentElement.scrollLeft\r
  36                                    tempY = event.clientY + document.documentElement.scrollTop\r
  37                                   } else {  // grab the x-y pos.s if browser is NS/mozilla\r
  38                                    tempX = e.pageX\r
  39                                    tempY = e.pageY\r
  40                                  }  \r
  41                                  //write temporary position 1(top left corner)\r
  42                                 Pos1x = tempX\r
  43                                 Pos1y = tempY\r
  44                                 //getting the check variable ready for the second click\r
  45                                 check = check + 1 \r
  46                                 //create the drawingbox and insert it into the DOM tree at the first mouse click location\r
  47                                 createbox()\r
  48                                 //run the function that updates the mouse postion and update the box size on mousemove\r
  49                                 document.onmousemove = getMouseXY\r
  50                                 return false;\r
  51                         }\r
  52                         //second click\r
  53                         if (check == 1) {\r
  54                                 //save second click location(bottem right) to submit to php for calculation\r
  55                                 Pos2x = tempX\r
  56                                 Pos2y = tempY\r
  57                                 check = check + 1 // makes check = 2 to prevent additional boxes being drawn, or variables being written\r
  58                                 //disable mouseevents\r
  59                                 document.onmousedown = null\r
  60                                 document.onmousemove = null\r
  61                                 //create the box for the caption\r
  62                                 createcaptionbox()\r
  63                                 return false;\r
  64                         }               \r
  65         return false;\r
  66 }\r
  67 \r
  68 // Main function to retrieve mouse x-y pos.s and update box size.\r
  69 function getMouseXY(e) {\r
  70   if (IE) { // grab the x-y pos.s if browser is IE\r
  71     // have to use document.documentElement instead of document.body \r
  72         // because for some reason IE6 reassigns when in standards complient mode\r
  73         // http://www.quirksmode.org/js/doctypes.html\r
  74         tempX = event.clientX + document.documentElement.scrollLeft\r
  75         tempY = event.clientY + document.documentElement.scrollTop\r
  76   } else {  // grab the x-y pos.s if browser is NS/mozilla\r
  77     tempX = e.pageX\r
  78     tempY = e.pageY\r
  79   }  \r
  80   // catch possible negative values in NS4\r
  81   if (tempX < 0){tempX = 0}\r
  82   if (tempY < 0){tempY = 0}  \r
  83   //while the mouse is moving,create and update the size of the drawingbox\r
  84   var box = document.getElementById('drawingbox')\r
  85   //update the size of the box everytime the mouse moves a pixel\r
  86   boxwidth =(tempX - Pos1x) //these calculations have to be \r
  87   boxheight = (tempY - Pos1y) //seperate because IE chokes\r
  88   box.style.width = boxwidth + 'px' //update box width and height\r
  89   box.style.height = boxheight + 'px'\r
  90   return true;\r
  91 }\r
  92 \r
  93 function createcaptionbox() {\r
  94         //the insert caption box is really a form inside a div\r
  95         //these lines generate a form, and puts in inputs \r
  96         //Pos1x,Pos1y,Po2x,Pos2y,RelX,RelY,pictureid,description\r
  97         //the form has to be created here because IE can not accept\r
  98         //two forms with the same name (firefox does)\r
  99         //otherwise it would be easier to generate the \r
 100         //form from the nucleus template\r
 101         var captionformdiv = document.createElement('div')\r
 102         var captionform = document.createElement('form')\r
 103         captionform.setAttribute('name','Show')\r
 104         captionform.setAttribute('method','POST')\r
 105         captionform.setAttribute('action','/action.php?action=plugin&name=gallery&type=tagaccept')\r
 106         captionform.style.border\r
 107         captionform.style.font\r
 108         captionform.style.padding\r
 109         var inputPos1x = document.createElement('input')\r
 110         inputPos1x.setAttribute('name','Pos1x')\r
 111         inputPos1x.setAttribute('value',Pos1x)\r
 112         inputPos1x.setAttribute('type','hidden')\r
 113         captionform.appendChild(inputPos1x)\r
 114         var inputPos1y = document.createElement('input')\r
 115         inputPos1y.setAttribute('name','Pos1y')\r
 116         inputPos1y.setAttribute('value',Pos1y)\r
 117         inputPos1y.setAttribute('type','hidden')\r
 118         captionform.appendChild(inputPos1y)\r
 119         var inputPos2x = document.createElement('input')\r
 120         inputPos2x.setAttribute('name','Pos2x')\r
 121         inputPos2x.setAttribute('value',Pos2x)\r
 122         inputPos2x.setAttribute('type','hidden')\r
 123         captionform.appendChild(inputPos2x)\r
 124         var inputPos2y = document.createElement('input')\r
 125         inputPos2y.setAttribute('name','Pos2y')\r
 126         inputPos2y.setAttribute('value',Pos2y)\r
 127         inputPos2y.setAttribute('type','hidden')\r
 128         captionform.appendChild(inputPos2y)\r
 129         var inputRelX = document.createElement('input')\r
 130         inputRelX.setAttribute('name','RelX')\r
 131         inputRelX.setAttribute('value',RelX)\r
 132         inputRelX.setAttribute('type','hidden')\r
 133         captionform.appendChild(inputRelX)\r
 134         var inputRelY = document.createElement('input')\r
 135         inputRelY.setAttribute('name','RelY')\r
 136         inputRelY.setAttribute('value',RelY)\r
 137         inputRelY.setAttribute('type','hidden')\r
 138         captionform.appendChild(inputRelY)\r
 139         var inputdesc = document.createElement('input')\r
 140         inputdesc.setAttribute('name','desc')\r
 141         inputdesc.setAttribute('value','enter caption')\r
 142         inputdesc.setAttribute('size','30')\r
 143         inputdesc.style.fontSize = '10px'\r
 144         inputdesc.style.border = '0px'\r
 145         inputdesc.setAttribute('onClick','erasedesc();')\r
 146         captionform.appendChild(inputdesc)\r
 147         var inputpictureid = document.createElement('input')\r
 148         inputpictureid.setAttribute('name','pictureid')\r
 149         inputpictureid.setAttribute('value',pictureid )\r
 150         inputpictureid.setAttribute('type','hidden')\r
 151         captionform.appendChild(inputpictureid)\r
 152         var inputsubmit = document.createElement('input')\r
 153         inputsubmit.setAttribute('name','Submit')\r
 154         inputsubmit.setAttribute('type','submit')\r
 155         inputsubmit.style.fontFamily = 'Verdana'\r
 156         inputsubmit.style.fontSize = '10px'\r
 157         inputsubmit.style.backgroundColor = '#cccccc'\r
 158         inputsubmit.style.border ='1px'\r
 159         inputsubmit.setAttribute('value','Tagit!')\r
 160         captionform.appendChild(inputsubmit)\r
 161         //give the div that wraps the form some attributes.\r
 162         captionformdiv.style.position = 'absolute'\r
 163         captionformdiv.style.left = Pos1x  +'px'\r
 164         captionformdiv.style.top = Pos2y  +'px'\r
 165         captionformdiv.style.width =  tempX - Pos1x - 5 +'px'\r
 166         captionformdiv.style.backgroundColor = '#FFFFFF'\r
 167         captionformdiv.style.display = 'block'\r
 168         captionformdiv.style.borderStyle = 'solid'\r
 169         captionformdiv.style.borderColor = '#FFFFFF'\r
 170         //put the captionform into the captionbox into the wrapper div\r
 171         captionformdiv.appendChild(captionform)\r
 172         document.getElementById('container').appendChild(captionformdiv)\r
 173 \r
 174 \r
 175 }\r
 176 \r
 177 function createbox(){\r
 178         // initialize the box with zero width and height, inserted at the first mouse click location (tempX,tempY)\r
 179         var drawingbox = document.createElement('div')\r
 180                                 drawingboxwidth = Pos2x - RelX\r
 181                                 drawingbox.style.position = 'absolute'\r
 182                                 drawingbox.setAttribute('id','drawingbox')\r
 183                                 drawingbox.setAttribute('class','drawingbox')\r
 184                                 drawingbox.style.borderStyle = 'solid'\r
 185                                 drawingbox.style.borderColor = '#FFFFFF'\r
 186                                 drawingbox.style.borderWidth = '1px'\r
 187                                 drawingbox.style.left = tempX  +'px'\r
 188                                 drawingbox.style.top = tempY  +'px'\r
 189                                 drawingbox.style.height = "0px"\r
 190                                 drawingbox.style.width = "0px"\r
 191                                 drawingbox.style.display = 'block'\r
 192                                 drawingbox.style.zIndex = '5'\r
 193                                 //where to insert the box in the DOM tree.\r
 194                                 document.getElementById('container').appendChild(drawingbox);\r
 195         }\r
 196 \r
 197 //find actual location of an element in the DOM tree(in this case the image). \r
 198 //this function is called as a onMouseover event from the browser. code from quirksmode.org\r
 199 function findPosX(obj)\r
 200 {\r
 201         var curleft = 0;\r
 202         if (obj.offsetParent)\r
 203         {\r
 204                 while (obj.offsetParent)\r
 205                 {\r
 206                         curleft += obj.offsetLeft\r
 207                         obj = obj.offsetParent;\r
 208                 }\r
 209         }\r
 210         else if (obj.x)\r
 211                 curleft += obj.x;\r
 212         return curleft;\r
 213 }\r
 214 \r
 215 function findPosY(obj)\r
 216 {\r
 217         var curtop = 0;\r
 218         var printstring = '';\r
 219         if (obj.offsetParent)\r
 220         {\r
 221                 while (obj.offsetParent)\r
 222                 {\r
 223                         printstring += ' element ' + obj.tagName + ' has ' + obj.offsetTop;\r
 224                         curtop += obj.offsetTop\r
 225                         obj = obj.offsetParent;\r
 226                 }\r
 227         }\r
 228         else if (obj.y)\r
 229                 curtop += obj.y;\r
 230         window.status = printstring;\r
 231         return curtop;\r
 232 }\r
 233 \r
 234 // on mouseover the image, executes this to assign its absolute position and save it(RelX,RelY)\r
 235 // for relative div position calculating purposes in the php tagaccept file.\r
 236 function setLyr(obj,lyr)\r
 237 {\r
 238         RelX = findPosX(obj);\r
 239         RelY = findPosY(obj);\r
 240 \r
 241 }\r
 242 \r
 243 //on mouseout (NS) or mouseleave (IE), hide the tooltip boxes\r
 244 function hidetipdivs() {\r
 245         \r
 246         navRoot = document.getElementById("tooltip2");\r
 247         for (i=0; i<navRoot.childNodes.length; i++) {\r
 248                 navRoot.childNodes[i].style.display = 'none' ;\r
 249    }\r
 250   }\r
 251 \r
 252 //on mouseover (NS) or on mouseenter (IE) show tipdivs\r
 253 function showtipdivs() {\r
 254 navRoot = document.getElementById("tooltip2");\r
 255 for (i=0; i<navRoot.childNodes.length; i++) {\r
 256   navRoot.childNodes[i].style.display = '' ;\r
 257    }\r
 258   }\r
 259   \r
 260 function erasedesc(){\r
 261         document.Show.desc.value=null\r
 262         document.Show.desc.value=''\r
 263         }\r
 264   \r
 265 \r
 266 //hide the boxes initially, to avoid confusion where the mouse is initially in the image, or not in the image.\r
 267 //hidetipdivs(); \r
 268 // this had to be moved to after the picture loads, because for some reason\r
 269 // if you insert javascript from an external file, IE6 loads the file AFTER everything else is loaded\r
 270 // if it is a relative URL, and BEFORE everything is loaded if it is a absolute URL containing http://\r
 271 // so IE6 tries to remove the hover captions but there are no hover captions to remove so IE6 crashes.\r
 272 \r
 273 function startList() {\r
 274 if (document.all && document.getElementById) { //check if its IE\r
 275 navRoot = document.getElementById("tooltip2");\r
 276 for (i=0; i<navRoot.childNodes.length; i++) {\r
 277   node = navRoot.childNodes[i];\r
 278   if (node.nodeName=="DIV") {\r
 279   node.onmouseover=function() {\r
 280   this.className+=" over";\r
 281     }\r
 282   node.onmouseout=function() {\r
 283   this.className=this.className.replace\r
 284       (" over", "");\r
 285    }\r
 286    }\r
 287   }\r
 288  }\r
 289 }\r
 290 window.onload=startList;\r
 291 \r
 292 \r
 293 \r
 294 \r