war/WEB-INF/classes/jp/sourceforge/manganetwork/page/javascripts/spinelz_lib/slider.js

   1 // script.aculo.us slider.js v1.6.4, Wed Sep 06 11:30:58 CEST 2006\r
   2 \r
   3 // Copyright (c) 2005 Marty Haught, Thomas Fuchs \r
   4 //\r
   5 // See http://script.aculo.us for more info\r
   6 // \r
   7 // Permission is hereby granted, free of charge, to any person obtaining\r
   8 // a copy of this software and associated documentation files (the\r
   9 // "Software"), to deal in the Software without restriction, including\r
  10 // without limitation the rights to use, copy, modify, merge, publish,\r
  11 // distribute, sublicense, and/or sell copies of the Software, and to\r
  12 // permit persons to whom the Software is furnished to do so, subject to\r
  13 // the following conditions:\r
  14 // \r
  15 // The above copyright notice and this permission notice shall be\r
  16 // included in all copies or substantial portions of the Software.\r
  17 //\r
  18 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,\r
  19 // EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\r
  20 // MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\r
  21 // NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\r
  22 // LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\r
  23 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\r
  24 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\r
  25 \r
  26 if(!Control) var Control = {};\r
  27 Control.Slider = Class.create();\r
  28 \r
  29 // options:\r
  30 //  axis: 'vertical', or 'horizontal' (default)\r
  31 //\r
  32 // callbacks:\r
  33 //  onChange(value)\r
  34 //  onSlide(value)\r
  35 Control.Slider.prototype = {\r
  36   initialize: function(handle, track, options) {\r
  37     var slider = this;\r
  38     \r
  39     if(handle instanceof Array) {\r
  40       this.handles = handle.collect( function(e) { return $(e) });\r
  41     } else {\r
  42       this.handles = [$(handle)];\r
  43     }\r
  44     \r
  45     this.track   = $(track);\r
  46     this.options = options || {};\r
  47 \r
  48     this.axis      = this.options.axis || 'horizontal';\r
  49     this.increment = this.options.increment || 1;\r
  50     this.step      = parseInt(this.options.step || '1');\r
  51     this.range     = this.options.range || $R(0,1);\r
  52     \r
  53     this.value     = 0; // assure backwards compat\r
  54     this.values    = this.handles.map( function() { return 0 });\r
  55     this.spans     = this.options.spans ? this.options.spans.map(function(s){ return $(s) }) : false;\r
  56     this.options.startSpan = $(this.options.startSpan || null);\r
  57     this.options.endSpan   = $(this.options.endSpan || null);\r
  58 \r
  59     this.restricted = this.options.restricted || false;\r
  60 \r
  61     this.maximum   = this.options.maximum || this.range.end;\r
  62     this.minimum   = this.options.minimum || this.range.start;\r
  63 \r
  64     // Will be used to align the handle onto the track, if necessary\r
  65     this.alignX = parseInt(this.options.alignX || '0');\r
  66     this.alignY = parseInt(this.options.alignY || '0');\r
  67     \r
  68     this.trackLength = this.maximumOffset() - this.minimumOffset();\r
  69 \r
  70     this.handleLength = this.isVertical() ? \r
  71       (this.handles[0].offsetHeight != 0 ? \r
  72         this.handles[0].offsetHeight : this.handles[0].style.height.replace(/px$/,"")) : \r
  73       (this.handles[0].offsetWidth != 0 ? this.handles[0].offsetWidth : \r
  74         this.handles[0].style.width.replace(/px$/,""));\r
  75 \r
  76     this.active   = false;\r
  77     this.dragging = false;\r
  78     this.disabled = false;\r
  79 \r
  80     if(this.options.disabled) this.setDisabled();\r
  81 \r
  82     // Allowed values array\r
  83     this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false;\r
  84     if(this.allowedValues) {\r
  85       this.minimum = this.allowedValues.min();\r
  86       this.maximum = this.allowedValues.max();\r
  87     }\r
  88 \r
  89     this.eventMouseDown = this.startDrag.bindAsEventListener(this);\r
  90     this.eventMouseUp   = this.endDrag.bindAsEventListener(this);\r
  91     this.eventMouseMove = this.update.bindAsEventListener(this);\r
  92 \r
  93     // Initialize handles in reverse (make sure first handle is active)\r
  94     this.handles.each( function(h,i) {\r
  95       i = slider.handles.length-1-i;\r
  96       slider.setValue(parseFloat(\r
  97         (slider.options.sliderValue instanceof Array ? \r
  98           slider.options.sliderValue[i] : slider.options.sliderValue) || \r
  99          slider.range.start), i);\r
 100       Element.makePositioned(h); // fix IE\r
 101       Event.observe(h, "mousedown", slider.eventMouseDown);\r
 102     });\r
 103     \r
 104     Event.observe(this.track, "mousedown", this.eventMouseDown);\r
 105     Event.observe(document, "mouseup", this.eventMouseUp);\r
 106     Event.observe(document, "mousemove", this.eventMouseMove);\r
 107     \r
 108     this.initialized = true;\r
 109   },\r
 110   dispose: function() {\r
 111     var slider = this;    \r
 112     Event.stopObserving(this.track, "mousedown", this.eventMouseDown);\r
 113     Event.stopObserving(document, "mouseup", this.eventMouseUp);\r
 114     Event.stopObserving(document, "mousemove", this.eventMouseMove);\r
 115     this.handles.each( function(h) {\r
 116       Event.stopObserving(h, "mousedown", slider.eventMouseDown);\r
 117     });\r
 118   },\r
 119   setDisabled: function(){\r
 120     this.disabled = true;\r
 121   },\r
 122   setEnabled: function(){\r
 123     this.disabled = false;\r
 124   },  \r
 125   getNearestValue: function(value){\r
 126     if(this.allowedValues){\r
 127       if(value >= this.allowedValues.max()) return(this.allowedValues.max());\r
 128       if(value <= this.allowedValues.min()) return(this.allowedValues.min());\r
 129       \r
 130       var offset = Math.abs(this.allowedValues[0] - value);\r
 131       var newValue = this.allowedValues[0];\r
 132       this.allowedValues.each( function(v) {\r
 133         var currentOffset = Math.abs(v - value);\r
 134         if(currentOffset <= offset){\r
 135           newValue = v;\r
 136           offset = currentOffset;\r
 137         } \r
 138       });\r
 139       return newValue;\r
 140     }\r
 141     if(value > this.range.end) return this.range.end;\r
 142     if(value < this.range.start) return this.range.start;\r
 143     return value;\r
 144   },\r
 145   setValue: function(sliderValue, handleIdx){\r
 146     if(!this.active) {\r
 147       this.activeHandleIdx = handleIdx || 0;\r
 148       this.activeHandle    = this.handles[this.activeHandleIdx];\r
 149       this.updateStyles();\r
 150     }\r
 151     handleIdx = handleIdx || this.activeHandleIdx || 0;\r
 152     if(this.initialized && this.restricted) {\r
 153       if((handleIdx>0) && (sliderValue<this.values[handleIdx-1]))\r
 154         sliderValue = this.values[handleIdx-1];\r
 155       if((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1]))\r
 156         sliderValue = this.values[handleIdx+1];\r
 157     }\r
 158     sliderValue = this.getNearestValue(sliderValue);\r
 159     this.values[handleIdx] = sliderValue;\r
 160     this.value = this.values[0]; // assure backwards compat\r
 161     \r
 162     this.handles[handleIdx].style[this.isVertical() ? 'top' : 'left'] = \r
 163       this.translateToPx(sliderValue);\r
 164     \r
 165     this.drawSpans();\r
 166     if(!this.dragging || !this.event) this.updateFinished();\r
 167   },\r
 168   setValueBy: function(delta, handleIdx) {\r
 169     this.setValue(this.values[handleIdx || this.activeHandleIdx || 0] + delta, \r
 170       handleIdx || this.activeHandleIdx || 0);\r
 171   },\r
 172   translateToPx: function(value) {\r
 173     return Math.round(\r
 174       ((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) * \r
 175       (value - this.range.start)) + "px";\r
 176   },\r
 177   translateToValue: function(offset) {\r
 178     return ((offset/(this.trackLength-this.handleLength) * \r
 179       (this.range.end-this.range.start)) + this.range.start);\r
 180   },\r
 181   getRange: function(range) {\r
 182     var v = this.values.sortBy(Prototype.K); \r
 183     range = range || 0;\r
 184     return $R(v[range],v[range+1]);\r
 185   },\r
 186   minimumOffset: function(){\r
 187     return(this.isVertical() ? this.alignY : this.alignX);\r
 188   },\r
 189   maximumOffset: function(){\r
 190     return(this.isVertical() ? \r
 191       (this.track.offsetHeight != 0 ? this.track.offsetHeight :\r
 192         this.track.style.height.replace(/px$/,"")) - this.alignY : \r
 193       (this.track.offsetWidth != 0 ? this.track.offsetWidth : \r
 194         this.track.style.width.replace(/px$/,"")) - this.alignY);\r
 195   },  \r
 196   isVertical:  function(){\r
 197     return (this.axis == 'vertical');\r
 198   },\r
 199   drawSpans: function() {\r
 200     var slider = this;\r
 201     if(this.spans)\r
 202       $R(0, this.spans.length-1).each(function(r) { slider.setSpan(slider.spans[r], slider.getRange(r)) });\r
 203     if(this.options.startSpan)\r
 204       this.setSpan(this.options.startSpan,\r
 205         $R(0, this.values.length>1 ? this.getRange(0).min() : this.value ));\r
 206     if(this.options.endSpan)\r
 207       this.setSpan(this.options.endSpan, \r
 208         $R(this.values.length>1 ? this.getRange(this.spans.length-1).max() : this.value, this.maximum));\r
 209   },\r
 210   setSpan: function(span, range) {\r
 211     if(this.isVertical()) {\r
 212       span.style.top = this.translateToPx(range.start);\r
 213       span.style.height = this.translateToPx(range.end - range.start + this.range.start);\r
 214     } else {\r
 215       span.style.left = this.translateToPx(range.start);\r
 216       span.style.width = this.translateToPx(range.end - range.start + this.range.start);\r
 217     }\r
 218   },\r
 219   updateStyles: function() {\r
 220     this.handles.each( function(h){ Element.removeClassName(h, 'selected') });\r
 221     Element.addClassName(this.activeHandle, 'selected');\r
 222   },\r
 223   startDrag: function(event) {\r
 224     if(Event.isLeftClick(event)) {\r
 225       if(!this.disabled){\r
 226         this.active = true;\r
 227         \r
 228         var handle = Event.element(event);\r
 229         var pointer  = [Event.pointerX(event), Event.pointerY(event)];\r
 230         var track = handle;\r
 231         if(track==this.track) {\r
 232           var offsets  = Position.cumulativeOffset(this.track); \r
 233           this.event = event;\r
 234           this.setValue(this.translateToValue( \r
 235            (this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)\r
 236           ));\r
 237           var offsets  = Position.cumulativeOffset(this.activeHandle);\r
 238           this.offsetX = (pointer[0] - offsets[0]);\r
 239           this.offsetY = (pointer[1] - offsets[1]);\r
 240         } else {\r
 241           // find the handle (prevents issues with Safari)\r
 242           while((this.handles.indexOf(handle) == -1) && handle.parentNode) \r
 243             handle = handle.parentNode;\r
 244         \r
 245           this.activeHandle    = handle;\r
 246           this.activeHandleIdx = this.handles.indexOf(this.activeHandle);\r
 247           this.updateStyles();\r
 248         \r
 249           var offsets  = Position.cumulativeOffset(this.activeHandle);\r
 250           this.offsetX = (pointer[0] - offsets[0]);\r
 251           this.offsetY = (pointer[1] - offsets[1]);\r
 252         }\r
 253       }\r
 254       Event.stop(event);\r
 255     }\r
 256   },\r
 257   update: function(event) {\r
 258    if(this.active) {\r
 259       if(!this.dragging) this.dragging = true;\r
 260       this.draw(event);\r
 261       // fix AppleWebKit rendering\r
 262       if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);\r
 263       Event.stop(event);\r
 264    }\r
 265   },\r
 266   draw: function(event) {\r
 267     var pointer = [Event.pointerX(event), Event.pointerY(event)];\r
 268     var offsets = Position.cumulativeOffset(this.track);\r
 269     pointer[0] -= this.offsetX + offsets[0];\r
 270     pointer[1] -= this.offsetY + offsets[1];\r
 271     this.event = event;\r
 272     this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));\r
 273     if(this.initialized && this.options.onSlide)\r
 274       this.options.onSlide(this.values.length>1 ? this.values : this.value, this);\r
 275   },\r
 276   endDrag: function(event) {\r
 277     if(this.active && this.dragging) {\r
 278       this.finishDrag(event, true);\r
 279       Event.stop(event);\r
 280     }\r
 281     this.active = false;\r
 282     this.dragging = false;\r
 283   },  \r
 284   finishDrag: function(event, success) {\r
 285     this.active = false;\r
 286     this.dragging = false;\r
 287     this.updateFinished();\r
 288   },\r
 289   updateFinished: function() {\r
 290     if(this.initialized && this.options.onChange) \r
 291       this.options.onChange(this.values.length>1 ? this.values : this.value, this);\r
 292     this.event = null;\r
 293   }\r
 294 }