git.sur5r.net Git - contagged/blob - scripts/interface/idrop.js

   1 /**\r
   2  * Interface Elements for jQuery\r
   3  * Droppables\r
   4  * \r
   5  * http://interface.eyecon.ro\r
   6  * \r
   7  * Copyright (c) 2006 Stefan Petre\r
   8  * Dual licensed under the MIT (MIT-LICENSE.txt) \r
   9  * and GPL (GPL-LICENSE.txt) licenses.\r
  10  *   \r
  11  *\r
  12  */\r
  13 \r
  14 /**\r
  15  * With the Draggables plugin, Droppable allows you to create drop zones for draggable elements.\r
  16  *\r
  17  * @name Droppable\r
  18  * @cat Plugins/Interface\r
  19  * @param Hash options A hash of options\r
  20  * @option String accept The class name for draggables to get accepted by the droppable (mandatory)\r
  21  * @option String activeclass When an acceptable draggable is moved, the droppable gets this class\r
  22  * @option String hoverclass When an acceptable draggable is inside the droppable, the droppable gets\r
  23  *                           this class\r
  24  * @option String tolerance  Choose from 'pointer', 'intersect', or 'fit'. The pointer options means\r
  25  *                           that the pointer must be inside the droppable in order for the draggable\r
  26  *                           to be dropped. The intersect option means that the draggable must intersect\r
  27  *                           the droppable. The fit option means that the entire draggable must be\r
  28  *                           inside the droppable.\r
  29  * @option Function onDrop   When an acceptable draggable is dropped on a droppable, this callback is\r
  30  *                           called. It passes the draggable DOMElement as a parameter.\r
  31  * @option Function onHover  When an acceptable draggable is hovered over a droppable, this callback\r
  32  *                           is called. It passes the draggable DOMElement as a parameter.\r
  33  * @option Function onOut    When an acceptable draggable leaves a droppable, this callback is called.\r
  34  *                           It passes the draggable DOMElement as a parameter.\r
  35  * @example                  $('#dropzone1').Droppable(\r
  36  *                             {\r
  37  *                               accept : 'dropaccept', \r
  38  *                               activeclass: 'dropzoneactive', \r
  39  *                               hoverclass:    'dropzonehover',\r
  40  *                               ondrop:        function (drag) {\r
  41  *                                              alert(this); //the droppable\r
  42  *                                              alert(drag); //the draggable\r
  43  *                                        },\r
  44  *                               fit: true\r
  45  *                             }\r
  46  *                           )\r
  47  */\r
  48 \r
  49 jQuery.iDrop = {\r
  50         fit : function (zonex, zoney, zonew, zoneh)\r
  51         {\r
  52                 return  zonex <= jQuery.iDrag.dragged.dragCfg.nx && \r
  53                                 (zonex + zonew) >= (jQuery.iDrag.dragged.dragCfg.nx + jQuery.iDrag.dragged.dragCfg.oC.w) &&\r
  54                                 zoney <= jQuery.iDrag.dragged.dragCfg.ny && \r
  55                                 (zoney + zoneh) >= (jQuery.iDrag.dragged.dragCfg.ny + jQuery.iDrag.dragged.dragCfg.oC.h) ? true :false;\r
  56         },\r
  57         intersect : function (zonex, zoney, zonew, zoneh)\r
  58         {\r
  59                 return  ! ( zonex > (jQuery.iDrag.dragged.dragCfg.nx + jQuery.iDrag.dragged.dragCfg.oC.w)\r
  60                                 || (zonex + zonew) < jQuery.iDrag.dragged.dragCfg.nx \r
  61                                 || zoney > (jQuery.iDrag.dragged.dragCfg.ny + jQuery.iDrag.dragged.dragCfg.oC.h) \r
  62                                 || (zoney + zoneh) < jQuery.iDrag.dragged.dragCfg.ny\r
  63                                 ) ? true :false;\r
  64         },\r
  65         pointer : function (zonex, zoney, zonew, zoneh)\r
  66         {\r
  67                 return  zonex < jQuery.iDrag.dragged.dragCfg.currentPointer.x\r
  68                                 && (zonex + zonew) > jQuery.iDrag.dragged.dragCfg.currentPointer.x \r
  69                                 && zoney < jQuery.iDrag.dragged.dragCfg.currentPointer.y \r
  70                                 && (zoney + zoneh) > jQuery.iDrag.dragged.dragCfg.currentPointer.y\r
  71                                 ? true :false;\r
  72         },\r
  73         overzone : false,\r
  74         highlighted : {},\r
  75         count : 0,\r
  76         zones : {},\r
  77         \r
  78         highlight : function (elm)\r
  79         {\r
  80                 if (jQuery.iDrag.dragged == null) {\r
  81                         return;\r
  82                 }\r
  83                 var i;\r
  84                 jQuery.iDrop.highlighted = {};\r
  85                 var oneIsSortable = false;\r
  86                 for (i in jQuery.iDrop.zones) {\r
  87                         if (jQuery.iDrop.zones[i] != null) {\r
  88                                 var iEL = jQuery.iDrop.zones[i].get(0);\r
  89                                 if (jQuery(jQuery.iDrag.dragged).is('.' + iEL.dropCfg.a)) {\r
  90                                         if (iEL.dropCfg.m == false) {\r
  91                                                 iEL.dropCfg.p = jQuery.extend(\r
  92                                                         jQuery.iUtil.getPositionLite(iEL),\r
  93                                                         jQuery.iUtil.getSizeLite(iEL)\r
  94                                                 );//jQuery.iUtil.getPos(iEL);\r
  95                                                 iEL.dropCfg.m = true;\r
  96                                         }\r
  97                                         if (iEL.dropCfg.ac) {\r
  98                                                 jQuery.iDrop.zones[i].addClass(iEL.dropCfg.ac);\r
  99                                         }\r
 100                                         jQuery.iDrop.highlighted[i] = jQuery.iDrop.zones[i];\r
 101                                         //if (jQuery.iSort && jQuery.iDrag.dragged.dragCfg.so) {\r
 102                                         if (jQuery.iSort && iEL.dropCfg.s && jQuery.iDrag.dragged.dragCfg.so) {\r
 103                                                 iEL.dropCfg.el = jQuery('.' + iEL.dropCfg.a, iEL);\r
 104                                                 elm.style.display = 'none';\r
 105                                                 jQuery.iSort.measure(iEL);\r
 106                                                 iEL.dropCfg.os = jQuery.iSort.serialize(jQuery.attr(iEL, 'id')).hash;\r
 107                                                 elm.style.display = elm.dragCfg.oD;\r
 108                                                 oneIsSortable = true;\r
 109                                         }\r
 110                                         if (iEL.dropCfg.onActivate) {\r
 111                                                 iEL.dropCfg.onActivate.apply(jQuery.iDrop.zones[i].get(0), [jQuery.iDrag.dragged]);\r
 112                                         }\r
 113                                 }\r
 114                         }\r
 115                 }\r
 116                 //if (jQuery.iSort && jQuery.iDrag.dragged.dragCfg.so) {\r
 117                 if (oneIsSortable) {\r
 118                         jQuery.iSort.start();\r
 119                 }\r
 120         },\r
 121         /**\r
 122          * remeasure the droppable\r
 123          * \r
 124          * useful when the positions/dimensions for droppables \r
 125          * are changed while dragging a element\r
 126          * \r
 127          * this works for sortables too but with a greate processor \r
 128          * penality because remeasures each sort items too\r
 129          */\r
 130         remeasure : function()\r
 131         {\r
 132                 jQuery.iDrop.highlighted = {};\r
 133                 for (i in jQuery.iDrop.zones) {\r
 134                         if (jQuery.iDrop.zones[i] != null) {\r
 135                                 var iEL = jQuery.iDrop.zones[i].get(0);\r
 136                                 if (jQuery(jQuery.iDrag.dragged).is('.' + iEL.dropCfg.a)) {\r
 137                                         iEL.dropCfg.p = jQuery.extend(\r
 138                                                 jQuery.iUtil.getPositionLite(iEL),\r
 139                                                 jQuery.iUtil.getSizeLite(iEL)\r
 140                                         );\r
 141                                         if (iEL.dropCfg.ac) {\r
 142                                                 jQuery.iDrop.zones[i].addClass(iEL.dropCfg.ac);\r
 143                                         }\r
 144                                         jQuery.iDrop.highlighted[i] = jQuery.iDrop.zones[i];\r
 145                                         \r
 146                                         if (jQuery.iSort && iEL.dropCfg.s && jQuery.iDrag.dragged.dragCfg.so) {\r
 147                                                 iEL.dropCfg.el = jQuery('.' + iEL.dropCfg.a, iEL);\r
 148                                                 elm.style.display = 'none';\r
 149                                                 jQuery.iSort.measure(iEL);\r
 150                                                 elm.style.display = elm.dragCfg.oD;\r
 151                                         }\r
 152                                 }\r
 153                         }\r
 154                 }\r
 155         },\r
 156         \r
 157         checkhover : function (e)\r
 158         {\r
 159                 if (jQuery.iDrag.dragged == null) {\r
 160                         return;\r
 161                 }\r
 162                 jQuery.iDrop.overzone = false;\r
 163                 var i;\r
 164                 var applyOnHover = false;\r
 165                 var hlt = 0;\r
 166                 for (i in jQuery.iDrop.highlighted)\r
 167                 {\r
 168                         var iEL = jQuery.iDrop.highlighted[i].get(0);\r
 169                         if ( \r
 170                                         jQuery.iDrop.overzone == false\r
 171                                          && \r
 172                                         jQuery.iDrop[iEL.dropCfg.t](\r
 173                                                 iEL.dropCfg.p.x, \r
 174                                                 iEL.dropCfg.p.y, \r
 175                                                 iEL.dropCfg.p.wb, \r
 176                                                 iEL.dropCfg.p.hb\r
 177                                         )\r
 178                                          \r
 179                         ) {\r
 180                                 if (iEL.dropCfg.hc && iEL.dropCfg.h == false) {\r
 181                                         jQuery.iDrop.highlighted[i].addClass(iEL.dropCfg.hc);\r
 182                                 }\r
 183                                 //chec if onHover function has to be called\r
 184                                 if (iEL.dropCfg.h == false &&iEL.dropCfg.onHover) {\r
 185                                         applyOnHover = true;\r
 186                                 }\r
 187                                 iEL.dropCfg.h = true;\r
 188                                 jQuery.iDrop.overzone = iEL;\r
 189                                 //if(jQuery.iSort && jQuery.iDrag.dragged.dragCfg.so) {\r
 190                                 if(jQuery.iSort && iEL.dropCfg.s && jQuery.iDrag.dragged.dragCfg.so) {\r
 191                                         jQuery.iSort.helper.get(0).className = iEL.dropCfg.shc;\r
 192                                         jQuery.iSort.checkhover(iEL);\r
 193                                 }\r
 194                                 hlt ++;\r
 195                         } else if(iEL.dropCfg.h == true) {\r
 196                                 //onOut function\r
 197                                 if (iEL.dropCfg.onOut) {\r
 198                                         iEL.dropCfg.onOut.apply(iEL, [e, jQuery.iDrag.helper.get(0).firstChild, iEL.dropCfg.fx]);\r
 199                                 }\r
 200                                 if (iEL.dropCfg.hc) {\r
 201                                         jQuery.iDrop.highlighted[i].removeClass(iEL.dropCfg.hc);\r
 202                                 }\r
 203                                 iEL.dropCfg.h = false;\r
 204                         }\r
 205                 }\r
 206                 if (jQuery.iSort && !jQuery.iDrop.overzone && jQuery.iDrag.dragged.so) {\r
 207                         jQuery.iSort.helper.get(0).style.display = 'none';\r
 208                         //jQuery('body').append(jQuery.iSort.helper.get(0));\r
 209                 }\r
 210                 //call onhover\r
 211                 if(applyOnHover) {\r
 212                         jQuery.iDrop.overzone.dropCfg.onHover.apply(jQuery.iDrop.overzone, [e, jQuery.iDrag.helper.get(0).firstChild]);\r
 213                 }\r
 214         },\r
 215         checkdrop : function (e)\r
 216         {\r
 217                 var i;\r
 218                 for (i in jQuery.iDrop.highlighted) {\r
 219                         var iEL = jQuery.iDrop.highlighted[i].get(0);\r
 220                         if (iEL.dropCfg.ac) {\r
 221                                 jQuery.iDrop.highlighted[i].removeClass(iEL.dropCfg.ac);\r
 222                         }\r
 223                         if (iEL.dropCfg.hc) {\r
 224                                 jQuery.iDrop.highlighted[i].removeClass(iEL.dropCfg.hc);\r
 225                         }\r
 226                         if(iEL.dropCfg.s) {\r
 227                                 jQuery.iSort.changed[jQuery.iSort.changed.length] = i;\r
 228                         }\r
 229                         if (iEL.dropCfg.onDrop && iEL.dropCfg.h == true) {\r
 230                                 iEL.dropCfg.h = false;\r
 231                                 iEL.dropCfg.onDrop.apply(iEL, [e, iEL.dropCfg.fx]);\r
 232                         }\r
 233                         iEL.dropCfg.m = false;\r
 234                         iEL.dropCfg.h  = false;\r
 235                 }\r
 236                 jQuery.iDrop.highlighted = {};\r
 237         },\r
 238         destroy : function()\r
 239         {\r
 240                 return this.each(\r
 241                         function()\r
 242                         {\r
 243                                 if (this.isDroppable) {\r
 244                                         if (this.dropCfg.s) {\r
 245                                                 id = jQuery.attr(this,'id');\r
 246                                                 jQuery.iSort.collected[id] = null;\r
 247                                                 jQuery('.' + this.dropCfg.a, this).DraggableDestroy();\r
 248                                         }\r
 249                                         jQuery.iDrop.zones['d' + this.idsa] = null;\r
 250                                         this.isDroppable = false;\r
 251                                         this.f = null;\r
 252                                 }\r
 253                         }\r
 254                 );\r
 255         },\r
 256         build : function (o)\r
 257         {\r
 258                 return this.each(\r
 259                         function()\r
 260                         {\r
 261                                 if (this.isDroppable == true || !o.accept || !jQuery.iUtil || !jQuery.iDrag){\r
 262                                         return;\r
 263                                 }\r
 264                                 this.dropCfg = {\r
 265                                         a : o.accept,\r
 266                                         ac: o.activeclass||false, \r
 267                                         hc:     o.hoverclass||false,\r
 268                                         shc: o.helperclass||false,\r
 269                                         onDrop: o.ondrop||o.onDrop||false,\r
 270                                         onHover: o.onHover||o.onhover||false,\r
 271                                         onOut: o.onOut||o.onout||false,\r
 272                                         onActivate: o.onActivate||false,\r
 273                                         t: o.tolerance && ( o.tolerance == 'fit' || o.tolerance == 'intersect') ? o.tolerance : 'pointer',\r
 274                                         fx: o.fx ? o.fx : false,\r
 275                                         m: false,\r
 276                                         h: false\r
 277                                 };\r
 278                                 if (o.sortable == true && jQuery.iSort) {\r
 279                                         id = jQuery.attr(this,'id');\r
 280                                         jQuery.iSort.collected[id] = this.dropCfg.a;\r
 281                                         this.dropCfg.s = true;\r
 282                                         if(o.onChange) {\r
 283                                                 this.dropCfg.onChange = o.onChange;\r
 284                                                 this.dropCfg.os = jQuery.iSort.serialize(id).hash;\r
 285                                         }\r
 286                                 }\r
 287                                 this.isDroppable = true;\r
 288                                 this.idsa = parseInt(Math.random() * 10000);\r
 289                                 jQuery.iDrop.zones['d' + this.idsa] = jQuery(this);\r
 290                                 jQuery.iDrop.count ++;\r
 291                         }\r
 292                 );\r
 293         }\r
 294 };\r
 295 \r
 296 /**\r
 297  * Destroy an existing droppable on a collection of elements\r
 298  * \r
 299  * @name DroppableDestroy\r
 300  * @descr Destroy a droppable\r
 301  * @type jQuery\r
 302  * @cat Plugins/Interface\r
 303  * @example $('#drag2').DroppableDestroy();\r
 304  */\r
 305 \r
 306 jQuery.fn.extend(\r
 307         {\r
 308                 DroppableDestroy : jQuery.iDrop.destroy,\r
 309                 Droppable : jQuery.iDrop.build\r
 310         }\r
 311 );\r
 312 \r
 313  \r
 314 /**\r
 315  * Recalculate all Droppables\r
 316  *\r
 317  * @name $.recallDroppables\r
 318  * @type jQuery\r
 319  * @cat Plugins/Interface\r
 320  * @example $.recallDroppable();\r
 321  */\r
 322 \r
 323 jQuery.recallDroppables = jQuery.iDrop.remeasure;