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

   1 /**\r
   2  * Interface Elements for jQuery\r
   3  * Slider\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 jQuery.iSlider = {\r
  15         tabindex : 1,\r
  16         set : function (values)\r
  17         {\r
  18                 var values = values;\r
  19                 return this.each(\r
  20                         function()\r
  21                         {\r
  22                                 this.slideCfg.sliders.each(\r
  23                                         function (key) \r
  24                                         { \r
  25                                                 jQuery.iSlider.dragmoveBy(this,values[key]);\r
  26                                         }\r
  27                                 );\r
  28                         }\r
  29                 );\r
  30         },\r
  31         \r
  32         get : function()\r
  33         {\r
  34                 var values = [];\r
  35                 this.each(\r
  36                         function(slider)\r
  37                         {\r
  38                                 if (this.isSlider) {\r
  39                                         values[slider] = [];\r
  40                                         var elm = this;\r
  41                                         var sizes = jQuery.iUtil.getSize(this);\r
  42                                         this.slideCfg.sliders.each(\r
  43                                                 function (key) \r
  44                                                 {\r
  45                                                         var x = this.offsetLeft;\r
  46                                                         var y = this.offsetTop;\r
  47                                                         xproc = parseInt(x * 100 / (sizes.w - this.offsetWidth));\r
  48                                                         yproc = parseInt(y * 100 / (sizes.h - this.offsetHeight));\r
  49                                                         values[slider][key] = [xproc||0, yproc||0, x||0, y||0];\r
  50                                                 }\r
  51                                         );\r
  52                                 }\r
  53                         }\r
  54                 );\r
  55                 return values;\r
  56         },\r
  57         \r
  58         modifyContainer : function (elm)\r
  59         {\r
  60                 elm.dragCfg.containerMaxx = elm.dragCfg.cont.w - elm.dragCfg.oC.wb;\r
  61                 elm.dragCfg.containerMaxy = elm.dragCfg.cont.h - elm.dragCfg.oC.hb;\r
  62                 if (elm.SliderContainer.slideCfg.restricted ) {\r
  63                         next = elm.SliderContainer.slideCfg.sliders.get(elm.SliderIteration+1);\r
  64                         if (next) {\r
  65                                 elm.dragCfg.cont.w = (parseInt(jQuery(next).css('left'))||0) + elm.dragCfg.oC.wb;\r
  66                                 elm.dragCfg.cont.h = (parseInt(jQuery(next).css('top'))||0) + elm.dragCfg.oC.hb;\r
  67                         }\r
  68                         prev = elm.SliderContainer.slideCfg.sliders.get(elm.SliderIteration-1);\r
  69                         if (prev) {\r
  70                                 var prevLeft = parseInt(jQuery(prev).css('left'))||0;\r
  71                                 var prevTop = parseInt(jQuery(prev).css('left'))||0;\r
  72                                 elm.dragCfg.cont.x += prevLeft;\r
  73                                 elm.dragCfg.cont.y += prevTop;\r
  74                                 elm.dragCfg.cont.w -= prevLeft;\r
  75                                 elm.dragCfg.cont.h -= prevTop;\r
  76                         }\r
  77                 }\r
  78                 elm.dragCfg.maxx = elm.dragCfg.cont.w - elm.dragCfg.oC.wb;\r
  79                 elm.dragCfg.maxy = elm.dragCfg.cont.h - elm.dragCfg.oC.hb;\r
  80                 if(elm.dragCfg.fractions) {\r
  81                         elm.dragCfg.gx = ((elm.dragCfg.cont.w - elm.dragCfg.oC.wb)/elm.dragCfg.fractions) || 1;\r
  82                         elm.dragCfg.gy = ((elm.dragCfg.cont.h - elm.dragCfg.oC.hb)/elm.dragCfg.fractions) || 1;\r
  83                         elm.dragCfg.fracW = elm.dragCfg.maxx / elm.dragCfg.fractions;\r
  84                         elm.dragCfg.fracH = elm.dragCfg.maxy / elm.dragCfg.fractions;\r
  85                 }\r
  86                 \r
  87                 elm.dragCfg.cont.dx = elm.dragCfg.cont.x - elm.dragCfg.oR.x;\r
  88                 elm.dragCfg.cont.dy = elm.dragCfg.cont.y - elm.dragCfg.oR.y;\r
  89                 \r
  90                 jQuery.iDrag.helper.css('cursor', 'default');\r
  91         },\r
  92         \r
  93         onSlide : function(elm, x, y)\r
  94         {\r
  95                 if (elm.dragCfg.fractions) {\r
  96                                 xfrac = parseInt(x/elm.dragCfg.fracW);\r
  97                                 xproc = xfrac * 100 / elm.dragCfg.fractions;\r
  98                                 yfrac = parseInt(y/elm.dragCfg.fracH);\r
  99                                 yproc = yfrac * 100 / elm.dragCfg.fractions;\r
 100                 } else {\r
 101                         xproc = parseInt(x * 100 / elm.dragCfg.containerMaxx);\r
 102                         yproc = parseInt(y * 100 / elm.dragCfg.containerMaxy);\r
 103                 }\r
 104                 elm.dragCfg.lastSi = [xproc||0, yproc||0, x||0, y||0];\r
 105                 if (elm.dragCfg.onSlide)\r
 106                         elm.dragCfg.onSlide.apply(elm, elm.dragCfg.lastSi);\r
 107         },\r
 108         \r
 109         dragmoveByKey : function (event)\r
 110         {\r
 111                 pressedKey = event.charCode || event.keyCode || -1;\r
 112                 \r
 113                 switch (pressedKey)\r
 114                 {\r
 115                         //end\r
 116                         case 35:\r
 117                                 jQuery.iSlider.dragmoveBy(this.dragElem, [2000, 2000] );\r
 118                         break;\r
 119                         //home\r
 120                         case 36:\r
 121                                 jQuery.iSlider.dragmoveBy(this.dragElem, [-2000, -2000] );\r
 122                         break;\r
 123                         //left\r
 124                         case 37:\r
 125                                 jQuery.iSlider.dragmoveBy(this.dragElem, [-this.dragElem.dragCfg.gx||-1, 0] );\r
 126                         break;\r
 127                         //up\r
 128                         case 38:\r
 129                                 jQuery.iSlider.dragmoveBy(this.dragElem, [0, -this.dragElem.dragCfg.gy||-1] );\r
 130                         break;\r
 131                         //right\r
 132                         case 39:\r
 133                                 jQuery.iSlider.dragmoveBy(this.dragElem, [this.dragElem.dragCfg.gx||1, 0] );\r
 134                         break;\r
 135                         //down;\r
 136                         case 40:\r
 137                                 jQuery.iDrag.dragmoveBy(this.dragElem, [0, this.dragElem.dragCfg.gy||1] );\r
 138                         break;\r
 139                 }\r
 140         },\r
 141         \r
 142         dragmoveBy : function (elm, position) \r
 143         {\r
 144                 if (!elm.dragCfg) {\r
 145                         return;\r
 146                 }\r
 147                 \r
 148                 elm.dragCfg.oC = jQuery.extend(\r
 149                         jQuery.iUtil.getPosition(elm),\r
 150                         jQuery.iUtil.getSize(elm)\r
 151                 );\r
 152                 \r
 153                 elm.dragCfg.oR = {\r
 154                         x : parseInt(jQuery.css(elm, 'left'))||0,\r
 155                         y : parseInt(jQuery.css(elm, 'top'))||0\r
 156                 };\r
 157                 \r
 158                 elm.dragCfg.oP = jQuery.css(elm, 'position');\r
 159                 if (elm.dragCfg.oP != 'relative' && elm.dragCfg.oP != 'absolute') {\r
 160                         elm.style.position = 'relative';\r
 161                 }\r
 162                 \r
 163                 jQuery.iDrag.getContainment(elm);\r
 164                 jQuery.iSlider.modifyContainer(elm);            \r
 165                 \r
 166                 dx = parseInt(position[0]) || 0;\r
 167                 dy = parseInt(position[1]) || 0;\r
 168                 \r
 169                 nx = elm.dragCfg.oR.x + dx;\r
 170                 ny = elm.dragCfg.oR.y + dy;\r
 171                 if(elm.dragCfg.fractions) {\r
 172                         newCoords = jQuery.iDrag.snapToGrid.apply(elm, [nx, ny, dx, dy]);\r
 173                         if (newCoords.constructor == Object) {\r
 174                                 dx = newCoords.dx;\r
 175                                 dy = newCoords.dy;\r
 176                         }\r
 177                         nx = elm.dragCfg.oR.x + dx;\r
 178                         ny = elm.dragCfg.oR.y + dy;\r
 179                 }\r
 180                 \r
 181                 newCoords = jQuery.iDrag.fitToContainer.apply(elm, [nx, ny, dx, dy]);\r
 182                 if (newCoords && newCoords.constructor == Object) {\r
 183                         dx = newCoords.dx;\r
 184                         dy = newCoords.dy;\r
 185                 }\r
 186                 \r
 187                 nx = elm.dragCfg.oR.x + dx;\r
 188                 ny = elm.dragCfg.oR.y + dy;\r
 189                 \r
 190                 if (elm.dragCfg.si && (elm.dragCfg.onSlide || elm.dragCfg.onChange)) {\r
 191                         jQuery.iSlider.onSlide(elm, nx, ny);\r
 192                 }\r
 193                 nx = !elm.dragCfg.axis || elm.dragCfg.axis == 'horizontally' ? nx : elm.dragCfg.oR.x||0;\r
 194                 ny = !elm.dragCfg.axis || elm.dragCfg.axis == 'vertically' ? ny : elm.dragCfg.oR.y||0;\r
 195                 elm.style.left = nx + 'px';\r
 196                 elm.style.top = ny + 'px';\r
 197         },\r
 198         \r
 199         build : function(o) {\r
 200                 return this.each(\r
 201                         function()\r
 202                         {\r
 203                                 if (this.isSlider == true || !o.accept || !jQuery.iUtil || !jQuery.iDrag || !jQuery.iDrop){\r
 204                                         return;\r
 205                                 }\r
 206                                 toDrag = jQuery(o.accept, this);\r
 207                                 if (toDrag.size() == 0) {\r
 208                                         return;\r
 209                                 }\r
 210                                 var params = {\r
 211                                         containment: 'parent',\r
 212                                         si : true,\r
 213                                         onSlide : o.onSlide && o.onSlide.constructor == Function ? o.onSlide : null,\r
 214                                         onChange : o.onChange && o.onChange.constructor == Function ? o.onChange : null,\r
 215                                         handle: this,\r
 216                                         opacity: o.opacity||false\r
 217                                 };\r
 218                                 if (o.fractions && parseInt(o.fractions)) {\r
 219                                         params.fractions = parseInt(o.fractions)||1;\r
 220                                         params.fractions = params.fractions > 0 ? params.fractions : 1;\r
 221                                 }\r
 222                                 if (toDrag.size() == 1)\r
 223                                         toDrag.Draggable(params);\r
 224                                 else {\r
 225                                         jQuery(toDrag.get(0)).Draggable(params);\r
 226                                         params.handle = null;\r
 227                                         toDrag.Draggable(params);\r
 228                                 }\r
 229                                 toDrag.keydown(jQuery.iSlider.dragmoveByKey);\r
 230                                 toDrag.attr('tabindex',jQuery.iSlider.tabindex++);      \r
 231                                 \r
 232                                 this.isSlider = true;\r
 233                                 this.slideCfg = {};\r
 234                                 this.slideCfg.onslide = params.onslide;\r
 235                                 this.slideCfg.fractions = params.fractions;\r
 236                                 this.slideCfg.sliders = toDrag;\r
 237                                 this.slideCfg.restricted = o.restricted ? true : false;\r
 238                                 sliderEl = this;\r
 239                                 sliderEl.slideCfg.sliders.each(\r
 240                                         function(nr)\r
 241                                         {\r
 242                                                 this.SliderIteration = nr;\r
 243                                                 this.SliderContainer = sliderEl;\r
 244                                         }\r
 245                                 );\r
 246                                 if (o.values && o.values.constructor == Array) {\r
 247                                         for (i = o.values.length -1; i>=0;i--) {\r
 248                                                 if (o.values[i].constructor == Array && o.values[i].length == 2) {\r
 249                                                         el = this.slideCfg.sliders.get(i);\r
 250                                                         if (el.tagName) {\r
 251                                                                 jQuery.iSlider.dragmoveBy(el, o.values[i]);\r
 252                                                         }\r
 253                                                 }\r
 254                                         }\r
 255                                 }\r
 256                         }\r
 257                 );\r
 258         }\r
 259 };\r
 260 jQuery.fn.extend(\r
 261         {\r
 262                 /**\r
 263                  * Create a slider width options\r
 264                  * \r
 265                  * @name Slider\r
 266                  * @description Create a slider width options\r
 267                  * @param Hash hash A hash of parameters. All parameters are optional.\r
 268                  * @option Mixed accepts string to select slider indicators or DOMElement slider indicator\r
 269                  * @option Integer factions (optional) number of sgments to divide and snap slider\r
 270                  * @option Function onSlide (optional) A function to be executed whenever slider indicator it is moved\r
 271                  * @option Function onChanged (optional) A function to be executed whenever slider indicator was moved\r
 272                  * @option Array values (optional) Initial values for slider indicators\r
 273                  * @option Boolean restricted (optional) if true the slider indicator can not be moved beyond adjacent indicators\r
 274                  * @type jQuery\r
 275                  * @cat Plugins/Interface\r
 276                  * @author Stefan Petre\r
 277                  */\r
 278                 Slider : jQuery.iSlider.build,\r
 279                 /**\r
 280                  * Set value/position for slider indicators\r
 281                  * \r
 282                  * @name SliderSetValues\r
 283                  * @description Set value/position for slider indicators\r
 284                  * @param Array values array width values for each indicator\r
 285                  * @type jQuery\r
 286                  * @cat Plugins/Interface\r
 287                  * @author Stefan Petre\r
 288                  */\r
 289                 SliderSetValues : jQuery.iSlider.set,\r
 290                 /**\r
 291                  * Get value/position for slider indicators\r
 292                  * \r
 293                  * @name SliderSetValues\r
 294                  * @description Get value/position for slider indicators\r
 295                  * @type jQuery\r
 296                  * @cat Plugins/Interface\r
 297                  * @author Stefan Petre\r
 298                  */\r
 299                 SliderGetValues : jQuery.iSlider.get\r
 300         }\r
 301 );