diff options
Diffstat (limited to 'js/dojo/dojox/mobile/Slider.js')
| -rw-r--r-- | js/dojo/dojox/mobile/Slider.js | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/js/dojo/dojox/mobile/Slider.js b/js/dojo/dojox/mobile/Slider.js new file mode 100644 index 0000000..29616db --- /dev/null +++ b/js/dojo/dojox/mobile/Slider.js @@ -0,0 +1,164 @@ +//>>built +define("dojox/mobile/Slider", [ + "dojo/_base/array", + "dojo/_base/connect", + "dojo/_base/declare", + "dojo/_base/lang", + "dojo/_base/window", + "dojo/dom-class", + "dojo/dom-construct", + "dojo/dom-geometry", + "dojo/dom-style", + "dijit/_WidgetBase", + "dijit/form/_FormValueMixin" +], + function(array, connect, declare, lang, win, domClass, domConstruct, domGeometry, domStyle, WidgetBase, FormValueMixin){ + + /*===== + WidgetBase = dijit._WidgetBase; + FormValueMixin = dijit.form._FormValueMixin; + =====*/ + return declare("dojox.mobile.Slider", [WidgetBase, FormValueMixin], { + // summary: + // A non-templated Slider widget similar to the HTML5 INPUT type=range. + // + + // value: [const] Number + // The current slider value. + value: 0, + + // min: [const] Number + // The first value the slider can be set to. + min: 0, + + // max: [const] Number + // The last value the slider can be set to. + max: 100, + + // step: [const] Number + // The delta from 1 value to another. + // This causes the slider handle to snap/jump to the closest possible value. + // A value of 0 means continuous (as much as allowed by pixel resolution). + step: 1, + + baseClass: "mblSlider", + + // flip: [const] Boolean + // Specifies if the slider should change its default: ascending <--> descending. + flip: false, + + // orientation: [const] String + // The slider direction. + // "H": horizontal + // "V": vertical + // "auto": use width/height comparison at instantiation time (default is "H" if width/height are 0) + orientation: "auto", + + // halo: Number + // Size of the boundary that extends beyond the edges of the slider + // to make it easier to touch. + halo: "8pt", + + buildRendering: function(){ + this.focusNode = this.domNode = domConstruct.create("div", {}); + this.valueNode = domConstruct.create("input", (this.srcNodeRef && this.srcNodeRef.name) ? { type: "hidden", name: this.srcNodeRef.name } : { type: "hidden" }, this.domNode, "last"); + var relativeParent = domConstruct.create("div", { style: { position:"relative", height:"100%", width:"100%" } }, this.domNode, "last"); + this.progressBar = domConstruct.create("div", { style:{ position:"absolute" }, "class":"mblSliderProgressBar" }, relativeParent, "last"); + this.touchBox = domConstruct.create("div", { style:{ position:"absolute" }, "class":"mblSliderTouchBox" }, relativeParent, "last"); + this.handle = domConstruct.create("div", { style:{ position:"absolute" }, "class":"mblSliderHandle" }, relativeParent, "last"); + this.inherited(arguments); + }, + + _setValueAttr: function(/*Number*/ value, /*Boolean?*/ priorityChange){ + // summary: + // Hook so set('value', value) works. + var fromPercent = (this.value - this.min) * 100 / (this.max - this.min); + this.valueNode.value = value; + this.inherited(arguments); + if(!this._started){ return; } // don't move images until all the properties are set + this.focusNode.setAttribute("aria-valuenow", value); + var toPercent = (value - this.min) * 100 / (this.max - this.min); + // now perform visual slide + var horizontal = this.orientation != "V"; + if(priorityChange === true){ + domClass.add(this.handle, "mblSliderTransition"); + domClass.add(this.progressBar, "mblSliderTransition"); + }else{ + domClass.remove(this.handle, "mblSliderTransition"); + domClass.remove(this.progressBar, "mblSliderTransition"); + } + domStyle.set(this.handle, this._attrs.handleLeft, (this._reversed ? (100-toPercent) : toPercent) + "%"); + domStyle.set(this.progressBar, this._attrs.width, toPercent + "%"); + }, + + postCreate: function(){ + this.inherited(arguments); + + function beginDrag(e){ + function getEventData(e){ + point = isMouse ? e[this._attrs.pageX] : (e.touches ? e.touches[0][this._attrs.pageX] : e[this._attrs.clientX]); + pixelValue = point - startPixel; + pixelValue = Math.min(Math.max(pixelValue, 0), maxPixels); + var discreteValues = this.step ? ((this.max - this.min) / this.step) : maxPixels; + if(discreteValues <= 1 || discreteValues == Infinity ){ discreteValues = maxPixels; } + var wholeIncrements = Math.round(pixelValue * discreteValues / maxPixels); + value = (this.max - this.min) * wholeIncrements / discreteValues; + value = this._reversed ? (this.max - value) : (this.min + value); + } + function continueDrag(e){ + e.preventDefault(); + lang.hitch(this, getEventData)(e); + this.set('value', value, false); + } + + function endDrag(e){ + e.preventDefault(); + array.forEach(actionHandles, lang.hitch(this, "disconnect")); + actionHandles = []; + this.set('value', this.value, true); + } + + e.preventDefault(); + var isMouse = e.type == "mousedown"; + var box = domGeometry.position(node, false); // can't use true since the added docScroll and the returned x are body-zoom incompatibile + var bodyZoom = domStyle.get(win.body(), "zoom") || 1; + if(isNaN(bodyZoom)){ bodyZoom = 1; } + var nodeZoom = domStyle.get(node, "zoom") || 1; + if(isNaN(nodeZoom)){ nodeZoom = 1; } + var startPixel = box[this._attrs.x] * nodeZoom * bodyZoom + domGeometry.docScroll()[this._attrs.x]; + var maxPixels = box[this._attrs.w] * nodeZoom * bodyZoom; + lang.hitch(this, getEventData)(e); + if(e.target == this.touchBox){ + this.set('value', value, true); + } + array.forEach(actionHandles, connect.disconnect); + var root = win.doc.documentElement; + var actionHandles = [ + this.connect(root, isMouse ? "onmousemove" : "ontouchmove", continueDrag), + this.connect(root, isMouse ? "onmouseup" : "ontouchend", endDrag) + ]; + } + + var point, pixelValue, value; + var node = this.domNode; + if(this.orientation == "auto"){ + this.orientation = node.offsetHeight <= node.offsetWidth ? "H" : "V"; + } + // add V or H suffix to baseClass for styling purposes + domClass.add(this.domNode, array.map(this.baseClass.split(" "), lang.hitch(this, function(c){ return c+this.orientation; }))); + var horizontal = this.orientation != "V"; + var ltr = horizontal ? this.isLeftToRight() : false; + var flip = this.flip; + // _reversed is complicated since you can have flipped right-to-left and vertical is upside down by default + this._reversed = !(horizontal && ((ltr && !flip) || (!ltr && flip))) || (!horizontal && !flip); + this._attrs = horizontal ? { x:'x', w:'w', l:'l', r:'r', pageX:'pageX', clientX:'clientX', handleLeft:"left", left:this._reversed ? "right" : "left", width:"width" } : { x:'y', w:'h', l:'t', r:'b', pageX:'pageY', clientX:'clientY', handleLeft:"top", left:this._reversed ? "bottom" : "top", width:"height" }; + this.progressBar.style[this._attrs.left] = "0px"; + this.connect(this.touchBox, "touchstart", beginDrag); + this.connect(this.touchBox, "onmousedown", beginDrag); // in case this works + this.connect(this.handle, "touchstart", beginDrag); + this.connect(this.handle, "onmousedown", beginDrag); // in case this works + this.startup(); + this.set('value', this.value); + } + }); +}); |