| /* |
| Copyright (c) 2004-2006, The Dojo Foundation |
| All Rights Reserved. |
| |
| Licensed under the Academic Free License version 2.1 or above OR the |
| modified BSD license. For more information on Dojo licensing, see: |
| |
| http://dojotoolkit.org/community/licensing.shtml |
| */ |
| |
| dojo.provide("dojo.widget.Slider"); |
| |
| // load dependencies |
| dojo.require("dojo.event.*"); |
| dojo.require("dojo.dnd.*"); |
| // dojo.dnd.* doesn't include this package, because it's not in __package__.js |
| dojo.require("dojo.dnd.HtmlDragMove"); |
| dojo.require("dojo.widget.*"); |
| dojo.require("dojo.html.layout"); |
| |
| |
| dojo.widget.defineWidget ( |
| "dojo.widget.Slider", |
| dojo.widget.HtmlWidget, |
| { |
| // summary |
| // Slider Widget. |
| // |
| // The slider widget comes in three forms: |
| // 1. Base Slider widget which supports movement in x and y dimensions |
| // 2. Vertical Slider (SliderVertical) widget which supports movement |
| // only in the y dimension. |
| // 3. Horizontal Slider (SliderHorizontal) widget which supports movement |
| // only in the x dimension. |
| // |
| // The key objects in the widget are: |
| // - a container div which displays a bar in the background (Slider object) |
| // - a handle inside the container div, which represents the value |
| // (sliderHandle DOM node) |
| // - the object which moves the handle (_handleMove is of type |
| // SliderDragMoveSource) |
| // |
| // The values for the slider are calculated by grouping pixels together, |
| // based on the number of values to be represented by the slider. |
| // The number of pixels in a group is called the _valueSize |
| // e.g. if slider is 150 pixels long, and is representing the values |
| // 0,1,...10 then pixels are grouped into lots of 15 (_valueSize), where: |
| // value 0 maps to pixels 0 - 7 |
| // 1 8 - 22 |
| // 2 23 - 37 etc. |
| // The accuracy of the slider is limited to the number of pixels |
| // (i.e tiles > pixels will result in the slider not being able to |
| // represent some values). |
| |
| // minimumX: Number |
| // minimum value to be represented by slider in the horizontal direction |
| minimumX: 0, |
| |
| // minimumY: Number |
| // minimum value to be represented by slider in the vertical direction |
| minimumY: 0, |
| |
| // maximumX: Number |
| // maximum value to be represented by slider in the horizontal direction |
| maximumX: 10, |
| |
| // maximumY: Number |
| // maximum value to be represented by slider in the vertical direction |
| maximumY: 10, |
| |
| // snapValuesX: Number |
| // number of values to be represented by slider in the horizontal direction |
| // =0 means no snapping |
| snapValuesX: 0, |
| |
| // snapValuesY: Number |
| // number of values to be represented by slider in the vertical direction |
| // =0 means no snapping |
| snapValuesY: 0, |
| |
| // should the handle snap to the grid or remain where it was dragged to? |
| // FIXME: snapToGrid=false is logically in conflict with setting snapValuesX and snapValuesY |
| _snapToGrid: true, |
| |
| // isEnableX: Boolean |
| // enables (disables) sliding in the horizontal direction |
| isEnableX: true, |
| |
| // isEnableY: Boolean |
| // enables (disables) sliding in the vertical direction |
| isEnableY: true, |
| |
| // value size (pixels) in the x dimension |
| _valueSizeX: 0.0, |
| // value size (pixels) in the y dimension |
| _valueSizeY: 0.0, |
| // left most edge of constraining container (pixels) in the X dimension |
| _minX: 0, |
| // top most edge of constraining container (pixels) in the Y dimension |
| _minY: 0, |
| // constrained slider size (pixels) in the x dimension |
| _constraintWidth: 0, |
| // constrained slider size (pixels) in the y dimension |
| _constraintHeight: 0, |
| // progress image right clip value (pixels) in the X dimension |
| _clipLeft: 0, |
| // progress image left clip value (pixels) in the X dimension |
| _clipRight: 0, |
| // progress image top clip value (pixels) in the Y dimension |
| _clipTop: 0, |
| // progress image bottom clip value (pixels) in the Y dimension |
| _clipBottom: 0, |
| // half the size of the slider handle (pixels) in the X dimension |
| _clipXdelta: 0, |
| // half the size of the slider handle (pixels) in the Y dimension |
| _clipYdelta: 0, |
| |
| // initialValueX: Number |
| // initial value in the x dimension |
| initialValueX: 0, |
| |
| // initialValueY: Number |
| // initial value in the y dimension |
| initialValueY: 0, |
| |
| // flipX: Boolean |
| // values decrease in the X dimension |
| flipX: false, |
| |
| // flipY: Boolean |
| // values decrease in the Y dimension |
| flipY: false, |
| |
| // clickSelect: Boolean |
| // enables (disables) the user to click on the slider to set the position |
| clickSelect: true, |
| |
| // activeDrag: Boolean |
| // disables (enables) the value to change while you are dragging, or just after drag finishes |
| activeDrag: false, |
| |
| templateCssPath: dojo.uri.dojoUri ("src/widget/templates/Slider.css"), |
| templatePath: dojo.uri.dojoUri ("src/widget/templates/Slider.html"), |
| |
| // This is set to true when a drag is started, so that it is not confused |
| // with a click |
| _isDragInProgress: false, |
| |
| // default user style attributes |
| |
| // bottomButtonSrc: String |
| // down arrow graphic URL |
| bottomButtonSrc: dojo.uri.dojoUri("src/widget/templates/images/slider_down_arrow.png"), |
| |
| // topButtonSrc: String |
| // up arrow graphic URL |
| topButtonSrc: dojo.uri.dojoUri("src/widget/templates/images/slider_up_arrow.png"), |
| |
| // leftButtonSrc: String |
| // left arrow graphic URL |
| leftButtonSrc: dojo.uri.dojoUri("src/widget/templates/images/slider_left_arrow.png"), |
| |
| // rightButtonSrc: String |
| // right arrow graphic URL |
| rightButtonSrc: dojo.uri.dojoUri("src/widget/templates/images/slider_right_arrow.png"), |
| |
| // backgroundSrc: String |
| // slider background graphic URL |
| backgroundSrc: dojo.uri.dojoUri("src/widget/templates/images/blank.gif"), |
| |
| // progressBackgroundSrc: String |
| // slider background graphic URL to overlay the normal background to show progress |
| progressBackgroundSrc: dojo.uri.dojoUri("src/widget/templates/images/blank.gif"), |
| |
| // backgroundSize: String |
| // sizing style attributes for the background image |
| backgroundSize: "width:200px;height:200px;", |
| |
| // backgroundStyle: String |
| // style attributes (other than sizing) for the background image |
| backgroundStyle: "", |
| |
| // buttonStyleX: String |
| // style attributes for the left and right arrow images |
| buttonStyleX: "", |
| |
| // buttonStyleY: String |
| // style attributes for the up and down arrow images |
| buttonStyleY: "", |
| |
| // handleStyle: String |
| // style attributes for the moveable slider image |
| handleStyle: "", |
| |
| // handleSrc: String |
| // moveable slider graphic URL |
| handleSrc: dojo.uri.dojoUri("src/widget/templates/images/slider-button.png"), |
| |
| // showButtons: Boolean |
| // show (don't show) the arrow buttons |
| showButtons: true, |
| |
| _eventCount: 0, |
| _typamaticTimer: null, |
| _typamaticFunction: null, |
| |
| // defaultTimeout: Number |
| // number of milliseconds before a held key or button becomes typematic |
| defaultTimeout: 500, |
| |
| // timeoutChangeRate: Number |
| // fraction of time used to change the typematic timer between events |
| // 1.0 means that each typematic event fires at defaultTimeout intervals |
| // < 1.0 means that each typematic event fires at an increasing faster rate |
| timeoutChangeRate: 0.90, |
| |
| _currentTimeout: this.defaultTimeout, |
| |
| // does the keyboard related stuff |
| _handleKeyEvents: function(/*Event*/ evt){ |
| if(!evt.key){ return; } |
| |
| if(!evt.ctrlKey && !evt.altKey){ |
| switch(evt.key){ |
| case evt.KEY_LEFT_ARROW: |
| dojo.event.browser.stopEvent(evt); |
| this._leftButtonPressed(evt); |
| return; |
| case evt.KEY_RIGHT_ARROW: |
| dojo.event.browser.stopEvent(evt); |
| this._rightButtonPressed(evt); |
| return; |
| case evt.KEY_DOWN_ARROW: |
| dojo.event.browser.stopEvent(evt); |
| this._bottomButtonPressed(evt); |
| return; |
| case evt.KEY_UP_ARROW: |
| dojo.event.browser.stopEvent(evt); |
| this._topButtonPressed(evt); |
| return; |
| } |
| } |
| this._eventCount++; |
| |
| }, |
| |
| _pressButton: function(/*DomNode*/ buttonNode){ |
| buttonNode.className = buttonNode.className.replace("Outset","Inset"); |
| }, |
| |
| _releaseButton: function(/*DomNode*/ buttonNode){ |
| buttonNode.className = buttonNode.className.replace("Inset","Outset"); |
| }, |
| |
| _buttonPressed: function(/*Event*/ evt, /*DomNode*/ buttonNode){ |
| this._setFocus(); |
| if(typeof evt == "object"){ |
| if(this._typamaticTimer != null){ |
| if(this._typamaticNode == buttonNode){ |
| return; |
| } |
| clearTimeout(this._typamaticTimer); |
| } |
| this._buttonReleased(null); |
| this._eventCount++; |
| this._typamaticTimer = null; |
| this._currentTimeout = this.defaultTimeout; |
| dojo.event.browser.stopEvent(evt); |
| }else if (evt != this._eventCount){ |
| this._buttonReleased(null); |
| return false; |
| } |
| if (buttonNode == this.leftButtonNode && this.isEnableX){ |
| this._snapX(dojo.html.getPixelValue (this.sliderHandleNode,"left") - this._valueSizeX); |
| } |
| else if (buttonNode == this.rightButtonNode && this.isEnableX){ |
| this._snapX(dojo.html.getPixelValue (this.sliderHandleNode,"left") + this._valueSizeX); |
| } |
| else if (buttonNode == this.topButtonNode && this.isEnableY){ |
| this._snapY(dojo.html.getPixelValue (this.sliderHandleNode,"top") - this._valueSizeY); |
| } |
| else if (buttonNode == this.bottomButtonNode && this.isEnableY){ |
| this._snapY(dojo.html.getPixelValue (this.sliderHandleNode,"top") + this._valueSizeY); |
| } |
| else { |
| return false; |
| } |
| this._pressButton(buttonNode); |
| this.notifyListeners(); |
| this._typamaticNode = buttonNode; |
| this._typamaticTimer = dojo.lang.setTimeout(this, "_buttonPressed", this._currentTimeout, this._eventCount, buttonNode); |
| this._currentTimeout = Math.round(this._currentTimeout * this.timeoutChangeRate); |
| return false; |
| }, |
| |
| _bottomButtonPressed: function(/*Event*/ evt){ |
| return this._buttonPressed(evt,this.bottomButtonNode); |
| }, |
| |
| // IE sends these events when rapid clicking, mimic an extra single click |
| _bottomButtonDoubleClicked: function(/*Event*/ evt){ |
| var rc = this._bottomButtonPressed(evt); |
| dojo.lang.setTimeout( this, "_buttonReleased", 50, null); |
| return rc; |
| }, |
| |
| _topButtonPressed: function(/*Event*/ evt){ |
| return this._buttonPressed(evt,this.topButtonNode); |
| }, |
| |
| // IE sends these events when rapid clicking, mimic an extra single click |
| _topButtonDoubleClicked: function(/*Event*/ evt){ |
| var rc = this._topButtonPressed(evt); |
| dojo.lang.setTimeout( this, "_buttonReleased", 50, null); |
| return rc; |
| }, |
| |
| _leftButtonPressed: function(/*Event*/ evt){ |
| return this._buttonPressed(evt,this.leftButtonNode); |
| }, |
| |
| // IE sends these events when rapid clicking, mimic an extra single click |
| _leftButtonDoubleClicked: function(/*Event*/ evt){ |
| var rc = this._leftButtonPressed(evt); |
| dojo.lang.setTimeout( this, "_buttonReleased", 50, null); |
| return rc; |
| }, |
| |
| _rightButtonPressed: function(/*Event*/ evt){ |
| return this._buttonPressed(evt,this.rightButtonNode); |
| }, |
| |
| // IE sends these events when rapid clicking, mimic an extra single click |
| _rightButtonDoubleClicked: function(/*Event*/ evt){ |
| var rc = this._rightButtonPressed(evt); |
| dojo.lang.setTimeout( this, "_buttonReleased", 50, null); |
| return rc; |
| }, |
| |
| _buttonReleased: function(/*Event*/ evt){ |
| if(typeof evt == "object" && evt != null && typeof evt.keyCode != "undefined" && evt.keyCode != null){ |
| var keyCode = evt.keyCode; |
| |
| switch(keyCode){ |
| case evt.KEY_LEFT_ARROW: |
| case evt.KEY_RIGHT_ARROW: |
| case evt.KEY_DOWN_ARROW: |
| case evt.KEY_UP_ARROW: |
| dojo.event.browser.stopEvent(evt); |
| break; |
| } |
| } |
| this._releaseButton(this.topButtonNode); |
| this._releaseButton(this.bottomButtonNode); |
| this._releaseButton(this.leftButtonNode); |
| this._releaseButton(this.rightButtonNode); |
| this._eventCount++; |
| if(this._typamaticTimer != null){ |
| clearTimeout(this._typamaticTimer); |
| } |
| this._typamaticTimer = null; |
| this._currentTimeout = this.defaultTimeout; |
| }, |
| |
| _mouseWheeled: function(/*Event*/ evt){ |
| var scrollAmount = 0; |
| if(typeof evt.wheelDelta == 'number'){ // IE |
| scrollAmount = evt.wheelDelta; |
| }else if (typeof evt.detail == 'number'){ // Mozilla+Firefox |
| scrollAmount = -evt.detail; |
| } |
| if (this.isEnableY){ |
| if(scrollAmount > 0){ |
| this._topButtonPressed(evt); |
| this._buttonReleased(evt); |
| }else if (scrollAmount < 0){ |
| this._bottomButtonPressed(evt); |
| this._buttonReleased(evt); |
| } |
| } else if (this.isEnableX){ |
| if(scrollAmount > 0){ |
| this._rightButtonPressed(evt); |
| this._buttonReleased(evt); |
| }else if (scrollAmount < 0){ |
| this._leftButtonPressed(evt); |
| this._buttonReleased(evt); |
| } |
| } |
| }, |
| |
| _discardEvent: function(/*Event*/ evt){ |
| dojo.event.browser.stopEvent(evt); |
| }, |
| |
| _setFocus: function(){ |
| if (this.focusNode.focus){ |
| this.focusNode.focus(); |
| } |
| }, |
| |
| // This function is called when the template is loaded |
| fillInTemplate: function (/*Object*/ args, /*Object*/ frag) |
| { |
| var source = this.getFragNodeRef(frag); |
| dojo.html.copyStyle(this.domNode, source); |
| // the user's style for the widget might include border and padding |
| // unfortunately, border isn't supported for inline elements |
| // so I get to fake everyone out by setting the border and padding |
| // of the outer table cells |
| var padding = this.domNode.style.padding; |
| if (dojo.lang.isString(padding) && padding != "" && padding != "0px" && padding != "0px 0px 0px 0px"){ |
| this.topBorderNode.style.padding = |
| this.bottomBorderNode.style.padding = padding; |
| this.topBorderNode.style.paddingBottom = "0px"; |
| this.bottomBorderNode.style.paddingTop = "0px"; |
| this.rightBorderNode.style.paddingRight = this.domNode.style.paddingRight; |
| this.leftBorderNode.style.paddingLeft= this.domNode.style.paddingLeft; |
| this.domNode.style.padding = "0px 0px 0px 0px"; |
| } |
| var borderWidth = this.domNode.style.borderWidth; |
| if (dojo.lang.isString(borderWidth) && borderWidth != "" && borderWidth != "0px" && borderWidth != "0px 0px 0px 0px"){ |
| this.topBorderNode.style.borderStyle = |
| this.rightBorderNode.style.borderStyle = |
| this.bottomBorderNode.style.borderStyle = |
| this.leftBorderNode.style.borderStyle = |
| this.domNode.style.borderStyle; |
| this.topBorderNode.style.borderColor = |
| this.rightBorderNode.style.borderColor = |
| this.bottomBorderNode.style.borderColor = |
| this.leftBorderNode.style.borderColor = |
| this.domNode.style.borderColor; |
| this.topBorderNode.style.borderWidth = |
| this.bottomBorderNode.style.borderWidth = borderWidth; |
| this.topBorderNode.style.borderBottomWidth = "0px"; |
| this.bottomBorderNode.style.borderTopWidth = "0px"; |
| this.rightBorderNode.style.borderRightWidth = this.domNode.style.borderRightWidth; |
| this.leftBorderNode.style.borderLeftWidth = this.domNode.style.borderLeftWidth; |
| this.domNode.style.borderWidth = "0px 0px 0px 0px"; |
| } |
| |
| // dojo.debug ("fillInTemplate - className = " + this.domNode.className); |
| |
| // setup drag-n-drop for the sliderHandle |
| this._handleMove = new dojo.widget._SliderDragMoveSource (this.sliderHandleNode); |
| this._handleMove.setParent (this); |
| |
| if (this.clickSelect){ |
| dojo.event.connect (this.constrainingContainerNode, "onmousedown", this, "_onClick"); |
| } |
| |
| if (this.isEnableX){ |
| this.setValueX (!isNaN(this.initialValueX) ? this.initialValueX : (!isNaN(this.minimumX) ? this.minimumX : 0)); |
| } |
| if (!this.isEnableX || !this.showButtons){ |
| this.rightButtonNode.style.width = "1px"; // allow the border to show |
| this.rightButtonNode.style.visibility = "hidden"; |
| this.leftButtonNode.style.width = "1px"; // allow the border to show |
| this.leftButtonNode.style.visibility = "hidden"; |
| } |
| if (this.isEnableY){ |
| this.setValueY (!isNaN(this.initialValueY) ? this.initialValueY : (!isNaN(this.minimumY) ? this.minimumY : 0)); |
| } |
| if (!this.isEnableY || !this.showButtons){ |
| this.bottomButtonNode.style.width = "1px"; // allow the border to show |
| this.bottomButtonNode.style.visibility = "hidden"; |
| this.topButtonNode.style.width = "1px"; // allow the border to show |
| this.topButtonNode.style.visibility = "hidden"; |
| } |
| if(this.focusNode.addEventListener){ |
| // dojo.event.connect() doesn't seem to work with DOMMouseScroll |
| this.focusNode.addEventListener('DOMMouseScroll', dojo.lang.hitch(this, "_mouseWheeled"), false); // Mozilla + Firefox + Netscape |
| } |
| }, |
| |
| // move the X value to the closest allowable value |
| _snapX: function(/*Number*/ x){ |
| if (x < 0){ x = 0; } |
| else if (x > this._constraintWidth){ x = this._constraintWidth; } |
| else { |
| var selectedValue = Math.round (x / this._valueSizeX); |
| x = Math.round (selectedValue * this._valueSizeX); |
| } |
| this.sliderHandleNode.style.left = x + "px"; |
| if (this.flipX){ |
| this._clipLeft = x + this._clipXdelta; |
| } else { |
| this._clipRight = x + this._clipXdelta; |
| } |
| this.progressBackgroundNode.style.clip = "rect("+this._clipTop+"px,"+this._clipRight+"px,"+this._clipBottom+"px,"+this._clipLeft+"px)"; |
| }, |
| |
| // compute _valueSizeX & _constraintWidth & default snapValuesX |
| _calc_valueSizeX: function (){ |
| var constrainingCtrBox = dojo.html.getContentBox(this.constrainingContainerNode); |
| var sliderHandleBox = dojo.html.getContentBox(this.sliderHandleNode); |
| if (isNaN(constrainingCtrBox.width) || isNaN(sliderHandleBox.width) || constrainingCtrBox.width <= 0 || sliderHandleBox.width <= 0){ |
| return false; |
| } |
| |
| this._constraintWidth = constrainingCtrBox.width |
| + dojo.html.getPadding(this.constrainingContainerNode).width |
| - sliderHandleBox.width; |
| |
| if (this.flipX){ |
| this._clipLeft = this._clipRight = constrainingCtrBox.width; |
| } else { |
| this._clipLeft = this._clipRight = 0; |
| } |
| this._clipXdelta = sliderHandleBox.width >> 1; |
| if (!this.isEnableY){ |
| this._clipTop = 0; |
| this._clipBottom = constrainingCtrBox.height; |
| } |
| |
| if (this._constraintWidth <= 0){ return false; } |
| if (this.snapValuesX == 0){ |
| this.snapValuesX = this._constraintWidth + 1; |
| } |
| |
| this._valueSizeX = this._constraintWidth / (this.snapValuesX - 1); |
| return true; |
| }, |
| |
| // summary |
| // move the handle horizontally to the specified value |
| setValueX: function (/*Number*/ value){ |
| if (0.0 == this._valueSizeX){ |
| if (this._calc_valueSizeX () == false){ |
| dojo.lang.setTimeout(this, "setValueX", 100, value); |
| return; |
| } |
| } |
| if (isNaN(value)){ |
| value = 0; |
| } |
| if (value > this.maximumX){ |
| value = this.maximumX; |
| } |
| else if (value < this.minimumX){ |
| value = this.minimumX; |
| } |
| var pixelPercent = (value-this.minimumX) / (this.maximumX-this.minimumX); |
| if (this.flipX){ |
| pixelPercent = 1.0 - pixelPercent; |
| } |
| this._snapX (pixelPercent * this._constraintWidth); |
| this.notifyListeners(); |
| }, |
| |
| |
| // summary |
| // return the X value that the matches the position of the handle |
| getValueX: function (){ |
| var pixelPercent = dojo.html.getPixelValue (this.sliderHandleNode,"left") / this._constraintWidth; |
| if (this.flipX){ |
| pixelPercent = 1.0 - pixelPercent; |
| } |
| return Math.round (pixelPercent * (this.snapValuesX-1)) * ((this.maximumX-this.minimumX) / (this.snapValuesX-1)) + this.minimumX; |
| }, |
| |
| // move the Y value to the closest allowable value |
| _snapY: function (/*Number*/ y){ |
| if (y < 0){ y = 0; } |
| else if (y > this._constraintHeight){ y = this._constraintHeight; } |
| else { |
| var selectedValue = Math.round (y / this._valueSizeY); |
| y = Math.round (selectedValue * this._valueSizeY); |
| } |
| this.sliderHandleNode.style.top = y + "px"; |
| if (this.flipY){ |
| this._clipTop = y + this._clipYdelta; |
| } else { |
| this._clipBottom = y + this._clipYdelta; |
| } |
| this.progressBackgroundNode.style.clip = "rect("+this._clipTop+"px,"+this._clipRight+"px,"+this._clipBottom+"px,"+this._clipLeft+"px)"; |
| }, |
| // compute _valueSizeY & _constraintHeight & default snapValuesY |
| _calc_valueSizeY: function (){ |
| var constrainingCtrBox = dojo.html.getContentBox(this.constrainingContainerNode); |
| var sliderHandleBox = dojo.html.getContentBox(this.sliderHandleNode); |
| if (isNaN(constrainingCtrBox.height) || isNaN(sliderHandleBox.height) || constrainingCtrBox.height <= 0 || sliderHandleBox.height <= 0){ |
| return false; |
| } |
| |
| this._constraintHeight = constrainingCtrBox.height |
| + dojo.html.getPadding(this.constrainingContainerNode).height |
| - sliderHandleBox.height; |
| |
| if (this.flipY){ |
| this._clipTop = this._clipBottom = constrainingCtrBox.height; |
| } else { |
| this._clipTop = this._clipBottom = 0; |
| } |
| this._clipYdelta = sliderHandleBox.height >> 1; |
| if (!this.isEnableX){ |
| this._clipLeft = 0; |
| this._clipRight = constrainingCtrBox.width; |
| } |
| |
| if (this._constraintHeight <= 0){ return false; } |
| if (this.snapValuesY == 0){ |
| this.snapValuesY = this._constraintHeight + 1; |
| } |
| |
| this._valueSizeY = this._constraintHeight / (this.snapValuesY - 1); |
| return true; |
| }, |
| |
| // summary |
| // move the handle vertically to the specified value |
| setValueY: function (/*Number*/ value){ |
| if (0.0 == this._valueSizeY){ |
| if (this._calc_valueSizeY () == false){ |
| dojo.lang.setTimeout(this, "setValueY", 100, value); |
| return; |
| } |
| } |
| if (isNaN(value)){ |
| value = 0; |
| } |
| if (value > this.maximumY){ |
| value = this.maximumY; |
| } |
| else if (value < this.minimumY){ |
| value = this.minimumY; |
| } |
| var pixelPercent = (value-this.minimumY) / (this.maximumY-this.minimumY); |
| if (this.flipY){ |
| pixelPercent = 1.0 - pixelPercent; |
| } |
| this._snapY (pixelPercent * this._constraintHeight); |
| this.notifyListeners(); |
| }, |
| |
| // summary |
| // return the Y value that the matches the position of the handle |
| getValueY: function (){ |
| var pixelPercent = dojo.html.getPixelValue (this.sliderHandleNode,"top") / this._constraintHeight; |
| if (this.flipY){ |
| pixelPercent = 1.0 - pixelPercent; |
| } |
| return Math.round (pixelPercent * (this.snapValuesY-1)) * ((this.maximumY-this.minimumY) / (this.snapValuesY-1)) + this.minimumY; |
| }, |
| |
| // set the position of the handle |
| _onClick: function(/*Event*/ evt){ |
| if (this._isDragInProgress){ |
| return; |
| } |
| |
| var parent = dojo.html.getAbsolutePosition(this.constrainingContainerNode, true, dojo.html.boxSizing.MARGIN_BOX); |
| var content = dojo.html.getContentBox(this._handleMove.domNode); |
| if (this.isEnableX){ |
| var x = evt.pageX - parent.x - (content.width >> 1); |
| this._snapX(x); |
| } |
| if (this.isEnableY){ |
| var y = evt.pageY - parent.y - (content.height >> 1); |
| this._snapY(y); |
| } |
| this.notifyListeners(); |
| }, |
| |
| // summary |
| // method to invoke user's onValueChanged method |
| notifyListeners: function(){ |
| this.onValueChanged(this.getValueX(), this.getValueY()); |
| }, |
| |
| // summary |
| // empty method to be overridden by user |
| onValueChanged: function(/*Number*/ x, /*Number*/ y){ |
| } |
| } |
| ); |
| |
| |
| |
| dojo.widget.defineWidget ( |
| "dojo.widget.SliderHorizontal", |
| dojo.widget.Slider, |
| { |
| // summary |
| // the horizontal slider widget subclass |
| |
| isEnableX: true, |
| isEnableY: false, |
| |
| // initialValue: Number |
| // sets initialValueX. |
| // TODO: should be called "value". Also, common attributes between SliderHorizontal/SliderVertical |
| // should be consolidated to Slider1D base class |
| initialValue: "", |
| |
| // snapValues: Number |
| // sets snapValuesX |
| snapValues: "", |
| |
| // minimum: Number |
| // sets minimumX |
| minimum: "", |
| |
| // maximum: Number |
| // sets maximumX |
| maximum: "", |
| |
| // buttonStyle: String |
| // sets buttonStyleX |
| buttonStyle: "", |
| |
| backgroundSize: "height:10px;width:200px;", |
| backgroundSrc: dojo.uri.dojoUri("src/widget/templates/images/slider-bg.gif"), |
| |
| // flip: Boolean |
| // sets flipX |
| flip: false, |
| |
| postMixInProperties: function(){ |
| dojo.widget.SliderHorizontal.superclass.postMixInProperties.apply(this, arguments); |
| if (!isNaN(parseFloat(this.initialValue))){ |
| this.initialValueX = parseFloat(this.initialValue); |
| } |
| if (!isNaN(parseFloat(this.minimum))){ |
| this.minimumX = parseFloat(this.minimum); |
| } |
| if (!isNaN(parseFloat(this.maximum))){ |
| this.maximumX = parseFloat(this.maximum); |
| } |
| if (!isNaN(parseInt(this.snapValues))){ |
| this.snapValuesX = parseInt(this.snapValues); |
| } |
| if (dojo.lang.isString(this.buttonStyle) && this.buttonStyle != ""){ |
| this.buttonStyleX = this.buttonStyle; |
| } |
| if (dojo.lang.isBoolean(this.flip)){ |
| this.flipX = this.flip; |
| } |
| }, |
| |
| notifyListeners: function(){ |
| this.onValueChanged(this.getValueX()); |
| }, |
| |
| // summary |
| // wrapper for getValueX() |
| getValue: function (){ |
| return this.getValueX (); |
| }, |
| |
| // summary |
| // wrapper for setValueX() |
| setValue: function (/*Number*/ value){ |
| this.setValueX (value); |
| }, |
| |
| onValueChanged: function(/*Number*/ value){ |
| } |
| } |
| ); |
| |
| |
| /* ------------------------------------------------------------------------- */ |
| |
| |
| dojo.widget.defineWidget ( |
| "dojo.widget.SliderVertical", |
| dojo.widget.Slider, |
| { |
| // summary |
| // the vertical slider widget subclass |
| |
| isEnableX: false, |
| isEnableY: true, |
| |
| // initialValue: Number |
| // sets initialValueY |
| initialValue: "", |
| |
| // snapValues: Number |
| // sets snapValuesY |
| snapValues: "", |
| |
| // minimum: Number |
| // sets minimumY |
| minimum: "", |
| |
| // Number |
| // maximum: sets maximumY |
| maximum: "", |
| |
| // buttonStyle: String |
| // sets buttonStyleY |
| buttonStyle: "", |
| |
| backgroundSize: "width:10px;height:200px;", |
| backgroundSrc: dojo.uri.dojoUri("src/widget/templates/images/slider-bg-vert.gif"), |
| |
| // flip: Boolean |
| // sets flipY |
| flip: false, |
| |
| postMixInProperties: function(){ |
| dojo.widget.SliderVertical.superclass.postMixInProperties.apply(this, arguments); |
| if (!isNaN(parseFloat(this.initialValue))){ |
| this.initialValueY = parseFloat(this.initialValue); |
| } |
| if (!isNaN(parseFloat(this.minimum))){ |
| this.minimumY = parseFloat(this.minimum); |
| } |
| if (!isNaN(parseFloat(this.maximum))){ |
| this.maximumY = parseFloat(this.maximum); |
| } |
| if (!isNaN(parseInt(this.snapValues))){ |
| this.snapValuesY = parseInt(this.snapValues); |
| } |
| if (dojo.lang.isString(this.buttonStyle) && this.buttonStyle != ""){ |
| this.buttonStyleY = this.buttonStyle; |
| } |
| if (dojo.lang.isBoolean(this.flip)){ |
| this.flipY = this.flip; |
| } |
| }, |
| |
| notifyListeners: function(){ |
| this.onValueChanged(this.getValueY()); |
| }, |
| |
| // summary |
| // wrapper for getValueY() |
| getValue: function (){ |
| return this.getValueY (); |
| }, |
| |
| // summary |
| // wrapper for setValueY() |
| setValue: function (/*Number*/ value){ |
| this.setValueY (value); |
| }, |
| |
| onValueChanged: function(/*Number*/ value){ |
| } |
| } |
| ); |
| |
| |
| /* ------------------------------------------------------------------------- */ |
| |
| |
| /** |
| * This class extends the HtmlDragMoveSource class to provide |
| * features for the slider handle. |
| */ |
| dojo.declare ( |
| "dojo.widget._SliderDragMoveSource", |
| dojo.dnd.HtmlDragMoveSource, |
| { |
| slider: null, |
| |
| /** Setup the handle for drag |
| * Extends dojo.dnd.HtmlDragMoveSource by creating a SliderDragMoveSource */ |
| onDragStart: function(/*Event*/ evt){ |
| this.slider._isDragInProgress = true; |
| var dragObj = this.createDragMoveObject (); |
| |
| this.slider.notifyListeners(); |
| return dragObj; |
| }, |
| |
| onDragEnd: function(/*Event*/ evt){ |
| this.slider._isDragInProgress = false; |
| this.slider.notifyListeners(); |
| }, |
| |
| createDragMoveObject: function (){ |
| //dojo.debug ("SliderDragMoveSource#createDragMoveObject - " + this.slider); |
| var dragObj = new dojo.widget._SliderDragMoveObject (this.dragObject, this.type); |
| dragObj.slider = this.slider; |
| |
| // this code copied from dojo.dnd.HtmlDragSource#onDragStart |
| if (this.dragClass){ |
| dragObj.dragClass = this.dragClass; |
| } |
| |
| return dragObj; |
| }, |
| |
| |
| setParent: function (/*Widget*/ slider){ |
| this.slider = slider; |
| } |
| }); |
| |
| |
| /* ------------------------------------------------------------------------- */ |
| |
| |
| /** |
| * This class extends the HtmlDragMoveObject class to provide |
| * features for the slider handle. |
| */ |
| dojo.declare ( |
| "dojo.widget._SliderDragMoveObject", |
| dojo.dnd.HtmlDragMoveObject, |
| { |
| // reference to dojo.widget.Slider |
| slider: null, |
| |
| /** Moves the node to follow the mouse. |
| * Extends functon HtmlDragObject by adding functionality to snap handle |
| * to a discrete value */ |
| onDragMove: function(/*Event*/ evt){ |
| this.updateDragOffset (); |
| |
| if (this.slider.isEnableX){ |
| var x = this.dragOffset.x + evt.pageX; |
| this.slider._snapX(x); |
| } |
| |
| if (this.slider.isEnableY){ |
| var y = this.dragOffset.y + evt.pageY; |
| this.slider._snapY(y); |
| } |
| if(this.slider.activeDrag){ |
| this.slider.notifyListeners(); |
| } |
| } |
| }); |
