home *** CD-ROM | disk | FTP | other *** search
/ Cricao de Sites - 650 Layouts Prontos / WebMasters.iso / Blogs / wordpress2.6.exe / wordpress2.6 / wp-includes / js / scriptaculous / slider.js < prev    next >
Encoding:
JavaScript  |  2008-03-03  |  10.1 KB  |  276 lines
  1. // script.aculo.us slider.js v1.8.0, Tue Nov 06 15:01:40 +0300 2007
  2.  
  3. // Copyright (c) 2005-2007 Marty Haught, Thomas Fuchs 
  4. //
  5. // script.aculo.us is freely distributable under the terms of an MIT-style license.
  6. // For details, see the script.aculo.us web site: http://script.aculo.us/
  7.  
  8. if (!Control) var Control = { };
  9.  
  10. // options:
  11. //  axis: 'vertical', or 'horizontal' (default)
  12. //
  13. // callbacks:
  14. //  onChange(value)
  15. //  onSlide(value)
  16. Control.Slider = Class.create({
  17.   initialize: function(handle, track, options) {
  18.     var slider = this;
  19.     
  20.     if (Object.isArray(handle)) {
  21.       this.handles = handle.collect( function(e) { return $(e) });
  22.     } else {
  23.       this.handles = [$(handle)];
  24.     }
  25.     
  26.     this.track   = $(track);
  27.     this.options = options || { };
  28.  
  29.     this.axis      = this.options.axis || 'horizontal';
  30.     this.increment = this.options.increment || 1;
  31.     this.step      = parseInt(this.options.step || '1');
  32.     this.range     = this.options.range || $R(0,1);
  33.     
  34.     this.value     = 0; // assure backwards compat
  35.     this.values    = this.handles.map( function() { return 0 });
  36.     this.spans     = this.options.spans ? this.options.spans.map(function(s){ return $(s) }) : false;
  37.     this.options.startSpan = $(this.options.startSpan || null);
  38.     this.options.endSpan   = $(this.options.endSpan || null);
  39.  
  40.     this.restricted = this.options.restricted || false;
  41.  
  42.     this.maximum   = this.options.maximum || this.range.end;
  43.     this.minimum   = this.options.minimum || this.range.start;
  44.  
  45.     // Will be used to align the handle onto the track, if necessary
  46.     this.alignX = parseInt(this.options.alignX || '0');
  47.     this.alignY = parseInt(this.options.alignY || '0');
  48.     
  49.     this.trackLength = this.maximumOffset() - this.minimumOffset();
  50.  
  51.     this.handleLength = this.isVertical() ? 
  52.       (this.handles[0].offsetHeight != 0 ? 
  53.         this.handles[0].offsetHeight : this.handles[0].style.height.replace(/px$/,"")) : 
  54.       (this.handles[0].offsetWidth != 0 ? this.handles[0].offsetWidth : 
  55.         this.handles[0].style.width.replace(/px$/,""));
  56.  
  57.     this.active   = false;
  58.     this.dragging = false;
  59.     this.disabled = false;
  60.  
  61.     if (this.options.disabled) this.setDisabled();
  62.  
  63.     // Allowed values array
  64.     this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false;
  65.     if (this.allowedValues) {
  66.       this.minimum = this.allowedValues.min();
  67.       this.maximum = this.allowedValues.max();
  68.     }
  69.  
  70.     this.eventMouseDown = this.startDrag.bindAsEventListener(this);
  71.     this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
  72.     this.eventMouseMove = this.update.bindAsEventListener(this);
  73.  
  74.     // Initialize handles in reverse (make sure first handle is active)
  75.     this.handles.each( function(h,i) {
  76.       i = slider.handles.length-1-i;
  77.       slider.setValue(parseFloat(
  78.         (Object.isArray(slider.options.sliderValue) ? 
  79.           slider.options.sliderValue[i] : slider.options.sliderValue) || 
  80.          slider.range.start), i);
  81.       h.makePositioned().observe("mousedown", slider.eventMouseDown);
  82.     });
  83.     
  84.     this.track.observe("mousedown", this.eventMouseDown);
  85.     document.observe("mouseup", this.eventMouseUp);
  86.     document.observe("mousemove", this.eventMouseMove);
  87.     
  88.     this.initialized = true;
  89.   },
  90.   dispose: function() {
  91.     var slider = this;    
  92.     Event.stopObserving(this.track, "mousedown", this.eventMouseDown);
  93.     Event.stopObserving(document, "mouseup", this.eventMouseUp);
  94.     Event.stopObserving(document, "mousemove", this.eventMouseMove);
  95.     this.handles.each( function(h) {
  96.       Event.stopObserving(h, "mousedown", slider.eventMouseDown);
  97.     });
  98.   },
  99.   setDisabled: function(){
  100.     this.disabled = true;
  101.   },
  102.   setEnabled: function(){
  103.     this.disabled = false;
  104.   },  
  105.   getNearestValue: function(value){
  106.     if (this.allowedValues){
  107.       if (value >= this.allowedValues.max()) return(this.allowedValues.max());
  108.       if (value <= this.allowedValues.min()) return(this.allowedValues.min());
  109.       
  110.       var offset = Math.abs(this.allowedValues[0] - value);
  111.       var newValue = this.allowedValues[0];
  112.       this.allowedValues.each( function(v) {
  113.         var currentOffset = Math.abs(v - value);
  114.         if (currentOffset <= offset){
  115.           newValue = v;
  116.           offset = currentOffset;
  117.         } 
  118.       });
  119.       return newValue;
  120.     }
  121.     if (value > this.range.end) return this.range.end;
  122.     if (value < this.range.start) return this.range.start;
  123.     return value;
  124.   },
  125.   setValue: function(sliderValue, handleIdx){
  126.     if (!this.active) {
  127.       this.activeHandleIdx = handleIdx || 0;
  128.       this.activeHandle    = this.handles[this.activeHandleIdx];
  129.       this.updateStyles();
  130.     }
  131.     handleIdx = handleIdx || this.activeHandleIdx || 0;
  132.     if (this.initialized && this.restricted) {
  133.       if ((handleIdx>0) && (sliderValue<this.values[handleIdx-1]))
  134.         sliderValue = this.values[handleIdx-1];
  135.       if ((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1]))
  136.         sliderValue = this.values[handleIdx+1];
  137.     }
  138.     sliderValue = this.getNearestValue(sliderValue);
  139.     this.values[handleIdx] = sliderValue;
  140.     this.value = this.values[0]; // assure backwards compat
  141.     
  142.     this.handles[handleIdx].style[this.isVertical() ? 'top' : 'left'] = 
  143.       this.translateToPx(sliderValue);
  144.     
  145.     this.drawSpans();
  146.     if (!this.dragging || !this.event) this.updateFinished();
  147.   },
  148.   setValueBy: function(delta, handleIdx) {
  149.     this.setValue(this.values[handleIdx || this.activeHandleIdx || 0] + delta, 
  150.       handleIdx || this.activeHandleIdx || 0);
  151.   },
  152.   translateToPx: function(value) {
  153.     return Math.round(
  154.       ((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) * 
  155.       (value - this.range.start)) + "px";
  156.   },
  157.   translateToValue: function(offset) {
  158.     return ((offset/(this.trackLength-this.handleLength) * 
  159.       (this.range.end-this.range.start)) + this.range.start);
  160.   },
  161.   getRange: function(range) {
  162.     var v = this.values.sortBy(Prototype.K); 
  163.     range = range || 0;
  164.     return $R(v[range],v[range+1]);
  165.   },
  166.   minimumOffset: function(){
  167.     return(this.isVertical() ? this.alignY : this.alignX);
  168.   },
  169.   maximumOffset: function(){
  170.     return(this.isVertical() ? 
  171.       (this.track.offsetHeight != 0 ? this.track.offsetHeight :
  172.         this.track.style.height.replace(/px$/,"")) - this.alignY : 
  173.       (this.track.offsetWidth != 0 ? this.track.offsetWidth : 
  174.         this.track.style.width.replace(/px$/,"")) - this.alignX);
  175.   },  
  176.   isVertical:  function(){
  177.     return (this.axis == 'vertical');
  178.   },
  179.   drawSpans: function() {
  180.     var slider = this;
  181.     if (this.spans)
  182.       $R(0, this.spans.length-1).each(function(r) { slider.setSpan(slider.spans[r], slider.getRange(r)) });
  183.     if (this.options.startSpan)
  184.       this.setSpan(this.options.startSpan,
  185.         $R(0, this.values.length>1 ? this.getRange(0).min() : this.value ));
  186.     if (this.options.endSpan)
  187.       this.setSpan(this.options.endSpan, 
  188.         $R(this.values.length>1 ? this.getRange(this.spans.length-1).max() : this.value, this.maximum));
  189.   },
  190.   setSpan: function(span, range) {
  191.     if (this.isVertical()) {
  192.       span.style.top = this.translateToPx(range.start);
  193.       span.style.height = this.translateToPx(range.end - range.start + this.range.start);
  194.     } else {
  195.       span.style.left = this.translateToPx(range.start);
  196.       span.style.width = this.translateToPx(range.end - range.start + this.range.start);
  197.     }
  198.   },
  199.   updateStyles: function() {
  200.     this.handles.each( function(h){ Element.removeClassName(h, 'selected') });
  201.     Element.addClassName(this.activeHandle, 'selected');
  202.   },
  203.   startDrag: function(event) {
  204.     if (Event.isLeftClick(event)) {
  205.       if (!this.disabled){
  206.         this.active = true;
  207.         
  208.         var handle = Event.element(event);
  209.         var pointer  = [Event.pointerX(event), Event.pointerY(event)];
  210.         var track = handle;
  211.         if (track==this.track) {
  212.           var offsets  = Position.cumulativeOffset(this.track); 
  213.           this.event = event;
  214.           this.setValue(this.translateToValue( 
  215.            (this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)
  216.           ));
  217.           var offsets  = Position.cumulativeOffset(this.activeHandle);
  218.           this.offsetX = (pointer[0] - offsets[0]);
  219.           this.offsetY = (pointer[1] - offsets[1]);
  220.         } else {
  221.           // find the handle (prevents issues with Safari)
  222.           while((this.handles.indexOf(handle) == -1) && handle.parentNode) 
  223.             handle = handle.parentNode;
  224.             
  225.           if (this.handles.indexOf(handle)!=-1) {
  226.             this.activeHandle    = handle;
  227.             this.activeHandleIdx = this.handles.indexOf(this.activeHandle);
  228.             this.updateStyles();
  229.             
  230.             var offsets  = Position.cumulativeOffset(this.activeHandle);
  231.             this.offsetX = (pointer[0] - offsets[0]);
  232.             this.offsetY = (pointer[1] - offsets[1]);
  233.           }
  234.         }
  235.       }
  236.       Event.stop(event);
  237.     }
  238.   },
  239.   update: function(event) {
  240.    if (this.active) {
  241.       if (!this.dragging) this.dragging = true;
  242.       this.draw(event);
  243.       if (Prototype.Browser.WebKit) window.scrollBy(0,0);
  244.       Event.stop(event);
  245.    }
  246.   },
  247.   draw: function(event) {
  248.     var pointer = [Event.pointerX(event), Event.pointerY(event)];
  249.     var offsets = Position.cumulativeOffset(this.track);
  250.     pointer[0] -= this.offsetX + offsets[0];
  251.     pointer[1] -= this.offsetY + offsets[1];
  252.     this.event = event;
  253.     this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));
  254.     if (this.initialized && this.options.onSlide)
  255.       this.options.onSlide(this.values.length>1 ? this.values : this.value, this);
  256.   },
  257.   endDrag: function(event) {
  258.     if (this.active && this.dragging) {
  259.       this.finishDrag(event, true);
  260.       Event.stop(event);
  261.     }
  262.     this.active = false;
  263.     this.dragging = false;
  264.   },  
  265.   finishDrag: function(event, success) {
  266.     this.active = false;
  267.     this.dragging = false;
  268.     this.updateFinished();
  269.   },
  270.   updateFinished: function() {
  271.     if (this.initialized && this.options.onChange) 
  272.       this.options.onChange(this.values.length>1 ? this.values : this.value, this);
  273.     this.event = null;
  274.   }
  275. });
  276.