diff options
Diffstat (limited to 'js/dojo/dojox/gauges/_Indicator.js')
| -rw-r--r-- | js/dojo/dojox/gauges/_Indicator.js | 261 |
1 files changed, 261 insertions, 0 deletions
diff --git a/js/dojo/dojox/gauges/_Indicator.js b/js/dojo/dojox/gauges/_Indicator.js new file mode 100644 index 0000000..6e614d4 --- /dev/null +++ b/js/dojo/dojox/gauges/_Indicator.js @@ -0,0 +1,261 @@ +//>>built +define("dojox/gauges/_Indicator", ["dojo/_base/lang","dojo/_base/declare","dojo/_base/fx","dojo/_base/html","dojo/_base/connect","dijit/_Widget","dojo/dom-construct", "dojo/dom-class"], +function(lang,declare,fx,html,connect,Widget,dom,domClass) { + +/*===== + Widget = dijit._Widget; +=====*/ + +return declare("dojox.gauges._Indicator",[Widget],{ + // summary: + // An indicator to be used in a gauge + // + // description: + // An indicator widget, which has given properties. drawn by a gauge. + // + // example: + // | <script type="text/javascript"> + // | require(["dojox/gauges/AnalogGauge","dojox/gauges/Indicator"]); + // | </script> + // | ... + // | <div dojoType="dojox.gauges.AnalogGauge" + // | id="testGauge" + // | width="300" + // | height="200" + // | cx=150 + // | cy=175 + // | radius=125 + // | image="gaugeOverlay.png" + // | imageOverlay="false" + // | imageWidth="280" + // | imageHeight="155" + // | imageX="12" + // | imageY="38"> + // | <div dojoType="dojox.gauges.Indicator" + // | value=17 + // | type="arrow" + // | length=135 + // | width=3 + // | hover="Value: 17" + // | onDragMove="handleDragMove"> + // | </div> + // | </div> + + // value: Number + // The value (on the gauge) that this indicator should be placed at + value: 0, + + // type: String + // The type of indicator to draw. Varies by gauge type. Some examples include + // "line", "arrow", and "bar" + type: '', + + // color: String + // The color of the indicator. + color: 'black', + + // strokeColor: String + // The color to stroke the outline of the indicator. + strokeColor: '', + + // label: String + // The text label for the indicator. + label: '', + + // font: Object + // The font for the indicator. The font is enerally in a format similar to: + // {family: "Helvetica", weight: "bold", style: "italic", size: "18pt", rotated: true} + font: {family: "sans-serif", size: "12px"}, + + // length: Number + // The length of the indicator. In the above example, the radius of the AnalogGauge + // is 125, but the length of the indicator is 135, meaning it would project beyond + // the edge of the AnalogGauge + length: 0, + + // width: Number + // The width of the indicator. + width: 0, + + // offset: Number + // The offset of the indicator + offset: 0, + + // hover: String + // The string to put in the tooltip when this indicator is hovered over. + hover: '', + + // front: boolean + // Keep this indicator at the front + front: false, + + // onDragMove: String + // The function to call when this indicator is moved by dragging. + // onDragMove: '', + + // easing: String|Object + // indicates the easing function to be used when animating the of an indicator. + easing: fx._defaultEasing, + + // duration: Number + // indicates how long an animation of the indicator should take + duration: 1000, + + // hideValues: Boolean + // Indicates whether the text boxes showing the value of the indicator (as text + // content) should be hidden or shown. Default is not hidden, aka shown. + hideValue: false, + + // noChange: Boolean + // Indicates whether the indicator's value can be changed. Useful for + // a static target indicator. Default is false (that the value can be changed). + noChange: false, + + // interactionMode: String + // The interactionMode can have two values: "indicator" (the default) or "gauge". + // When the value is "indicator", the user must click on the indicator to change the value. + // When the value is "gauge", the user can click on the gauge to change the indicator value. + // If a gauge contains several indicators with the indicatorMode property set to "gauge", then + // only the first indicator will be moved when clicking the gauge. + interactionMode: "indicator", + + _gauge: null, + + // title: String + // The title of the indicator, to be displayed next to it's input box for the text-representation. + title: "", + + startup: function(){ + if(this.onDragMove){ + this.onDragMove = lang.hitch(this.onDragMove); + } + if (this.strokeColor === ""){ + this.strokeColor = undefined; + } + }, + + postCreate: function(){ + if(this.title === ""){ + html.style(this.domNode, "display", "none"); + } + if(lang.isString(this.easing)){ + this.easing = lang.getObject(this.easing); + } + }, + + buildRendering: function(){ + // summary: + // Overrides _Widget.buildRendering + + var n = this.domNode = this.srcNodeRef ? this.srcNodeRef: dom.create("div"); + domClass.add(n, "dojoxGaugeIndicatorDiv"); + var title = dom.create("label"); + if (this.title) title.innerHTML = this.title + ":"; + dom.place(title, n); + this.valueNode = dom.create("input", { + className: "dojoxGaugeIndicatorInput", + size: 5, + value: this.value + }); + + dom.place(this.valueNode, n); + connect.connect(this.valueNode, "onchange", this, this._update); + }, + + _update: function(){ + // summary: + // A private function, handling the updating of the gauge + + this._updateValue(true); + }, + + _updateValue: function(animate){ + // summary: + // A private function, handling the updating of the gauge + var value = this.valueNode.value; + if(value === ''){ + this.value = null; + }else{ + this.value = Number(value); + this.hover = this.title+': '+value; + } + if(this._gauge){ + this.draw(this._gauge._indicatorsGroup, animate || animate==undefined ? false: true); + this.valueNode.value = this.value; + if((this.title == 'Target' || this.front) && this._gauge.moveIndicator){ + // if re-drawing value, make sure target is still on top + this._gauge.moveIndicatorToFront(this); + } + this.valueChanged(); + } + }, + + valueChanged: function(){ + // summary: + // Invoked every time the value of the indicator changes. + + }, + + update: function(value, animate){ + // summary: + // Updates the value of the indicator, including moving/re-drawing at it's new location and + // updating the text box + if(!this.noChange){ + this.valueNode.value = value; + this._updateValue(animate); + } + }, + + handleMouseOver: function(e){ + // summary: + // Handles mouse-over events in the indicator. + this._gauge._handleMouseOverIndicator(this, e); + }, + + handleMouseOut: function(e){ + // summary: + // Handles mouse-out events in the indicator. + this._gauge._handleMouseOutIndicator(this,e); + this._gauge.gaugeContent.style.cursor = ''; + }, + + handleMouseDown: function(e){ + // summary: + // Handles mouse-down events in the indicator. + this._gauge._handleMouseDownIndicator(this,e); + }, + + handleTouchStart: function(e){ + // summary: + // Handles touch start events in the indicator. + this._gauge.handleTouchStartIndicator(this, e); + }, + + onDragMove: function(){ + // summary: + // Handles updating the text box and the hover text while dragging an indicator + this.value = Math.floor(this.value); + this.valueNode.value = this.value; + this.hover = this.title+': '+this.value; + }, + + draw: function(/* Boolean? */ dontAnimate){ + // summary: + // Performs the initial drawing of the indicator. + // dontAnimate: Boolean + // Indicates if the drawing should not be animated (rather than teh default, to animate) + }, + + remove: function(){ + // summary: + // Removes the indicator's shape from the gauge surface. + if (this.shape) + this.shape.parent.remove(this.shape); + this.shape = null; + if(this.text){ + this.text.parent.remove(this.text); + } + this.text = null; + } +}); +}); |
