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

   1 /**\r
   2  * Interface Elements for jQuery\r
   3  * Sortables\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  * Allows you to resort elements within a container by dragging and dropping. Requires\r
  16  * the Draggables and Droppables plugins. The container and each item inside the container\r
  17  * must have an ID. Sortables are especially useful for lists.\r
  18  * \r
  19  * @see Plugins/Interface/Draggable\r
  20  * @see Plugins/Interface/Droppable\r
  21  * @author Stefan Petre\r
  22  * @name Sortable\r
  23  * @cat Plugins/Interface\r
  24  * @param Hash options        A hash of options\r
  25  * @option String accept      The class name for items inside the container (mandatory)\r
  26  * @option String activeclass The class for the container when one of its items has started to move\r
  27  * @option String hoverclass  The class for the container when an acceptable item is inside it\r
  28  * @option String helperclass The helper is used to point to the place where the item will be \r
  29  *                            moved. This is the class for the helper.\r
  30  * @option Float opacity      Opacity (between 0 and 1) of the item while being dragged\r
  31  * @option Boolean ghosting   When true, the sortable is ghosted when dragged\r
  32  * @option String tolerance   Either 'pointer', 'intersect', or 'fit'. See Droppable for more details\r
  33  * @option Boolean fit        When true, sortable must be inside the container in order to drop\r
  34  * @option Integer fx         Duration for the effect applied to the sortable\r
  35  * @option Function onchange  Callback that gets called when the sortable list changed. It takes\r
  36  *                            an array of serialized elements\r
  37  * @option Boolean floats     True if the sorted elements are floated\r
  38  * @option String containment Use 'parent' to constrain the drag to the container\r
  39  * @option String axis        Use 'horizontally' or 'vertically' to constrain dragging to an axis\r
  40  * @option String handle      The jQuery selector that indicates the draggable handle\r
  41  * @option DOMElement handle  The node that indicates the draggable handle\r
  42  * @option Function onHover   Callback that is called when an acceptable item is dragged over the\r
  43  *                            container. Gets the hovering DOMElement as a parameter\r
  44  * @option Function onOut     Callback that is called when an acceptable item leaves the container.\r
  45  *                            Gets the leaving DOMElement as a parameter\r
  46  * @option Object cursorAt    The mouse cursor will be moved to the offset on the dragged item\r
  47  *                            indicated by the object, which takes "top", "bottom", "left", and\r
  48  *                            "right" keys\r
  49  * @option Function onStart   Callback function triggered when the dragging starts\r
  50  * @option Function onStop    Callback function triggered when the dragging stops\r
  51  * @example                   $('ul').Sortable(\r
  52  *                              {\r
  53  *                                      accept : 'sortableitem',\r
  54  *                                      activeclass : 'sortableactive',\r
  55  *                                      hoverclass : 'sortablehover',\r
  56  *                                      helperclass : 'sorthelper',\r
  57  *                                      opacity:        0.5,\r
  58  *                                      fit :   false\r
  59  *                              }\r
  60  *                             )\r
  61  */\r
  62 \r
  63 jQuery.iSort = {\r
  64         changed : [],\r
  65         collected : {},\r
  66         helper : false,\r
  67         inFrontOf: null,\r
  68         \r
  69         start : function ()\r
  70         {\r
  71                 if (jQuery.iDrag.dragged == null) {\r
  72                         return;\r
  73                 }\r
  74                 var shs, margins,c, cs;\r
  75                 \r
  76                 jQuery.iSort.helper.get(0).className = jQuery.iDrag.dragged.dragCfg.hpc;\r
  77                 shs = jQuery.iSort.helper.get(0).style;\r
  78                 shs.display = 'block';\r
  79                 jQuery.iSort.helper.oC = jQuery.extend(\r
  80                         jQuery.iUtil.getPosition(jQuery.iSort.helper.get(0)),\r
  81                         jQuery.iUtil.getSize(jQuery.iSort.helper.get(0))\r
  82                 );\r
  83                 \r
  84                 shs.width = jQuery.iDrag.dragged.dragCfg.oC.wb + 'px';\r
  85                 shs.height = jQuery.iDrag.dragged.dragCfg.oC.hb + 'px';\r
  86                 //shs.cssFloat = jQuery.iDrag.dragged.dragCfg.oF;\r
  87                 margins = jQuery.iUtil.getMargins(jQuery.iDrag.dragged);\r
  88                 shs.marginTop = margins.t;\r
  89                 shs.marginRight = margins.r;\r
  90                 shs.marginBottom = margins.b;\r
  91                 shs.marginLeft = margins.l;\r
  92                 if (jQuery.iDrag.dragged.dragCfg.ghosting == true) {\r
  93                         c = jQuery.iDrag.dragged.cloneNode(true);\r
  94                         cs = c.style;\r
  95                         cs.marginTop = '0px';\r
  96                         cs.marginRight = '0px';\r
  97                         cs.marginBottom = '0px';\r
  98                         cs.marginLeft = '0px';\r
  99                         cs.display = 'block';\r
 100                         jQuery.iSort.helper.empty().append(c);\r
 101                 }\r
 102                 jQuery(jQuery.iDrag.dragged).after(jQuery.iSort.helper.get(0));\r
 103                 jQuery.iDrag.dragged.style.display = 'none';\r
 104         },\r
 105         \r
 106         check : function (e)\r
 107         {\r
 108                 if (!e.dragCfg.so && jQuery.iDrop.overzone.sortable) {\r
 109                         if (e.dragCfg.onStop)\r
 110                                 e.dragCfg.onStop.apply(dragged);\r
 111                         jQuery(e).css('position', e.dragCfg.initialPosition || e.dragCfg.oP);\r
 112                         jQuery(e).DraggableDestroy();\r
 113                         jQuery(jQuery.iDrop.overzone).SortableAddItem(e);\r
 114                 }\r
 115                 jQuery.iSort.helper.removeClass(e.dragCfg.hpc).html('&nbsp;');\r
 116                 jQuery.iSort.inFrontOf = null;\r
 117                 var shs = jQuery.iSort.helper.get(0).style;\r
 118                 shs.display = 'none';\r
 119                 jQuery.iSort.helper.after(e);\r
 120                 if (e.dragCfg.fx > 0) {\r
 121                         jQuery(e).fadeIn(e.dragCfg.fx);\r
 122                 }\r
 123                 jQuery('body').append(jQuery.iSort.helper.get(0));\r
 124                 var ts = [];\r
 125                 var fnc = false;\r
 126                 for(var i=0; i<jQuery.iSort.changed.length; i++){\r
 127                         var iEL = jQuery.iDrop.zones[jQuery.iSort.changed[i]].get(0);\r
 128                         var id = jQuery.attr(iEL, 'id');\r
 129                         var ser = jQuery.iSort.serialize(id);\r
 130                         if (iEL.dropCfg.os != ser.hash) {\r
 131                                 iEL.dropCfg.os = ser.hash;\r
 132                                 if (fnc == false && iEL.dropCfg.onChange) {\r
 133                                         fnc = iEL.dropCfg.onChange;\r
 134                                 }\r
 135                                 ser.id = id;\r
 136                                 ts[ts.length] = ser;\r
 137                         }\r
 138                 }\r
 139                 jQuery.iSort.changed = [];\r
 140                 if (fnc != false && ts.length > 0) {\r
 141                         fnc(ts);\r
 142                 }\r
 143         },\r
 144         \r
 145         checkhover : function(e,o)\r
 146         {\r
 147                 if (!jQuery.iDrag.dragged)\r
 148                         return;\r
 149                 var cur = false;\r
 150                 var i = 0;\r
 151                 if ( e.dropCfg.el.size() > 0) {\r
 152                         for (i = e.dropCfg.el.size(); i >0; i--) {\r
 153                                 if (e.dropCfg.el.get(i-1) != jQuery.iDrag.dragged) {\r
 154                                         if (!e.sortCfg.floats) {\r
 155                                                 if ( \r
 156                                                 (e.dropCfg.el.get(i-1).pos.y + e.dropCfg.el.get(i-1).pos.hb/2) > jQuery.iDrag.dragged.dragCfg.ny  \r
 157                                                 ) {\r
 158                                                         cur = e.dropCfg.el.get(i-1);\r
 159                                                 } else {\r
 160                                                         break;\r
 161                                                 }\r
 162                                         } else {\r
 163                                                 if (\r
 164                                                 (e.dropCfg.el.get(i-1).pos.x + e.dropCfg.el.get(i-1).pos.wb/2) > jQuery.iDrag.dragged.dragCfg.nx && \r
 165                                                 (e.dropCfg.el.get(i-1).pos.y + e.dropCfg.el.get(i-1).pos.hb/2) > jQuery.iDrag.dragged.dragCfg.ny  \r
 166                                                 ) {\r
 167                                                         cur = e.dropCfg.el.get(i-1);\r
 168                                                 }\r
 169                                         }\r
 170                                 }\r
 171                         }\r
 172                 }\r
 173                 //helpos = jQuery.iUtil.getPos(jQuery.iSort.helper.get(0));\r
 174                 if (cur && jQuery.iSort.inFrontOf != cur) {\r
 175                         jQuery.iSort.inFrontOf = cur;\r
 176                         jQuery(cur).before(jQuery.iSort.helper.get(0));\r
 177                 } else if(!cur && (jQuery.iSort.inFrontOf != null || jQuery.iSort.helper.get(0).parentNode != e) ) {\r
 178                         jQuery.iSort.inFrontOf = null;\r
 179                         jQuery(e).append(jQuery.iSort.helper.get(0));\r
 180                 }\r
 181                 jQuery.iSort.helper.get(0).style.display = 'block';\r
 182         },\r
 183         \r
 184         measure : function (e)\r
 185         {\r
 186                 if (jQuery.iDrag.dragged == null) {\r
 187                         return;\r
 188                 }\r
 189                 e.dropCfg.el.each (\r
 190                         function ()\r
 191                         {\r
 192                                 this.pos = jQuery.extend(\r
 193                                         jQuery.iUtil.getSizeLite(this),\r
 194                                         jQuery.iUtil.getPositionLite(this)\r
 195                                 );\r
 196                         }\r
 197                 );\r
 198         },\r
 199         \r
 200         serialize : function(s)\r
 201         {\r
 202                 var i;\r
 203                 var h = '';\r
 204                 var o = {};\r
 205                 if (s) {\r
 206                         if (jQuery.iSort.collected[s] ) {\r
 207                                 o[s] = [];\r
 208                                 jQuery('#' + s + ' .' + jQuery.iSort.collected[s]).each(\r
 209                                         function ()\r
 210                                         {\r
 211                                                 if (h.length > 0) {\r
 212                                                         h += '&';\r
 213                                                 }\r
 214                                                 h += s + '[]=' + jQuery.attr(this,'id');\r
 215                                                 o[s][o[s].length] = jQuery.attr(this,'id');\r
 216                                         }\r
 217                                 );\r
 218                         } else {\r
 219                                 for ( a in s) {\r
 220                                         if (jQuery.iSort.collected[s[a]] ) {\r
 221                                                 o[s[a]] = [];                   \r
 222                                                 jQuery('#' + s[a] + ' .' + jQuery.iSort.collected[s[a]]).each(\r
 223                                                         function ()\r
 224                                                         {\r
 225                                                                 if (h.length > 0) {\r
 226                                                                         h += '&';\r
 227                                                                 }\r
 228                                                                 h += s[a] + '[]=' + jQuery.attr(this,'id');\r
 229                                                                 o[s[a]][o[s[a]].length] = jQuery.attr(this,'id');\r
 230                                                         }\r
 231                                                 );\r
 232                                         }\r
 233                                 }\r
 234                         }\r
 235                 } else {\r
 236                         for ( i in jQuery.iSort.collected){\r
 237                                 o[i] = [];\r
 238                                 jQuery('#' + i + ' .' + jQuery.iSort.collected[i]).each(\r
 239                                         function ()\r
 240                                         {\r
 241                                                 if (h.length > 0) {\r
 242                                                         h += '&';\r
 243                                                 }\r
 244                                                 h += i + '[]=' + jQuery.attr(this,'id');\r
 245                                                 o[i][o[i].length] = jQuery.attr(this,'id');\r
 246                                         }\r
 247                                 );\r
 248                         }\r
 249                 }\r
 250                 return {hash:h, o:o};\r
 251         },\r
 252         \r
 253         addItem : function (e)\r
 254         {\r
 255                 if ( !e.childNodes ) {\r
 256                         return;\r
 257                 }\r
 258                 return this.each(\r
 259                         function ()\r
 260                         {\r
 261                                 if(!this.sortCfg || !jQuery(e).is('.' +  this.sortCfg.accept))\r
 262                                         jQuery(e).addClass(this.sortCfg.accept);\r
 263                                 jQuery(e).Draggable(this.sortCfg.dragCfg);\r
 264                         }\r
 265                 );\r
 266         },\r
 267         \r
 268         destroy: function()\r
 269         {\r
 270                 return this.each(\r
 271                         function()\r
 272                         {\r
 273                                 jQuery('.' + this.sortCfg.accept).DraggableDestroy();\r
 274                                 jQuery(this).DroppableDestroy();\r
 275                                 this.sortCfg = null;\r
 276                                 this.isSortable = null;\r
 277                         }\r
 278                 );\r
 279         },\r
 280         \r
 281         build : function (o)\r
 282         {\r
 283                 if (o.accept && jQuery.iUtil && jQuery.iDrag && jQuery.iDrop) {\r
 284                         if (!jQuery.iSort.helper) {\r
 285                                 jQuery('body',document).append('<div id="sortHelper">&nbsp;</div>');\r
 286                                 jQuery.iSort.helper = jQuery('#sortHelper');\r
 287                                 jQuery.iSort.helper.get(0).style.display = 'none';\r
 288                         }\r
 289                         this.Droppable(\r
 290                                 {\r
 291                                         accept :  o.accept,\r
 292                                         activeclass : o.activeclass ? o.activeclass : false,\r
 293                                         hoverclass : o.hoverclass ? o.hoverclass : false,\r
 294                                         helperclass : o.helperclass ? o.helperclass : false,\r
 295                                         /*onDrop: function (drag, fx) \r
 296                                                         {\r
 297                                                                 jQuery.iSort.helper.after(drag);\r
 298                                                                 if (fx > 0) {\r
 299                                                                         jQuery(drag).fadeIn(fx);\r
 300                                                                 }\r
 301                                                         },*/\r
 302                                         onHover: o.onHover||o.onhover,\r
 303                                         onOut: o.onOut||o.onout,\r
 304                                         sortable : true,\r
 305                                         onChange :      o.onChange||o.onchange,\r
 306                                         fx : o.fx ? o.fx : false,\r
 307                                         ghosting : o.ghosting ? true : false,\r
 308                                         tolerance: o.tolerance ? o.tolerance : 'intersect'\r
 309                                 }\r
 310                         );\r
 311                         \r
 312                         return this.each(\r
 313                                 function()\r
 314                                 {\r
 315                                         var dragCfg = {\r
 316                                                 revert : o.revert? true : false,\r
 317                                                 zindex : 3000,\r
 318                                                 opacity : o.opacity ? parseFloat(o.opacity) : false,\r
 319                                                 hpc : o.helperclass ? o.helperclass : false,\r
 320                                                 fx : o.fx ? o.fx : false,\r
 321                                                 so : true,\r
 322                                                 ghosting : o.ghosting ? true : false,\r
 323                                                 handle: o.handle ? o.handle : null,\r
 324                                                 containment: o.containment ? o.containment : null,\r
 325                                                 onStart : o.onStart && o.onStart.constructor == Function ? o.onStart : false,\r
 326                                                 onDrag : o.onDrag && o.onDrag.constructor == Function ? o.onDrag : false,\r
 327                                                 onStop : o.onStop && o.onStop.constructor == Function ? o.onStop : false,\r
 328                                                 axis : /vertically|horizontally/.test(o.axis) ? o.axis : false,\r
 329                                                 snapDistance : o.snapDistance ? parseInt(o.snapDistance)||0 : false,\r
 330                                                 cursorAt: o.cursorAt ? o.cursorAt : false\r
 331                                         };\r
 332                                         jQuery('.' + o.accept, this).Draggable(dragCfg);\r
 333                                         this.isSortable = true;\r
 334                                         this.sortCfg = {\r
 335                                                 accept :  o.accept,\r
 336                                                 revert : o.revert? true : false,\r
 337                                                 zindex : 3000,\r
 338                                                 opacity : o.opacity ? parseFloat(o.opacity) : false,\r
 339                                                 hpc : o.helperclass ? o.helperclass : false,\r
 340                                                 fx : o.fx ? o.fx : false,\r
 341                                                 so : true,\r
 342                                                 ghosting : o.ghosting ? true : false,\r
 343                                                 handle: o.handle ? o.handle : null,\r
 344                                                 containment: o.containment ? o.containment : null,\r
 345                                                 floats: o.floats ? true : false,\r
 346                                                 dragCfg : dragCfg\r
 347                                         }\r
 348                                 }\r
 349                         );\r
 350                 }\r
 351         }\r
 352 };\r
 353 \r
 354 jQuery.fn.extend(\r
 355         {\r
 356                 Sortable : jQuery.iSort.build,\r
 357                 /**\r
 358                  * A new item can be added to a sortable by adding it to the DOM and then adding it via\r
 359                  * SortableAddItem. \r
 360                  *\r
 361                  * @name SortableAddItem\r
 362                  * @param DOMElement elem A DOM Element to add to the sortable list\r
 363                  * @example $('#sortable1').append('<li id="newitem">new item</li>')\r
 364                  *                         .SortableAddItem($("#new_item")[0])\r
 365                  * @type jQuery\r
 366                  * @cat Plugins/Interface\r
 367                  */\r
 368                 SortableAddItem : jQuery.iSort.addItem,\r
 369                 /**\r
 370                  * Destroy a sortable\r
 371                  *\r
 372                  * @name SortableDestroy\r
 373                  * @example $('#sortable1').SortableDestroy();\r
 374                  * @type jQuery\r
 375                  * @cat Plugins/Interface\r
 376                  */\r
 377                 SortableDestroy: jQuery.iSort.destroy\r
 378         }\r
 379 );\r
 380 \r
 381 /**\r
 382  * This function returns the hash and an object (can be used as arguments for $.post) for every \r
 383  * sortable in the page or specific sortables. The hash is based on the 'id' attributes of \r
 384  * container and items.\r
 385  *\r
 386  * @params String sortable The id of the sortable to serialize\r
 387  * @name $.SortSerialize\r
 388  * @type String\r
 389  * @cat Plugins/Interface\r
 390  */\r
 391 \r
 392 jQuery.SortSerialize = jQuery.iSort.serialize;