1 files changed, 568 insertions, 0 deletions
diff --git a/js/dojo/dojox/gauges/GlossyHorizontalGauge.js b/js/dojo/dojox/gauges/GlossyHorizontalGauge.js
new file mode 100644
index 0000000..5a7bba6
--- /dev/null
+++ b/js/dojo/dojox/gauges/GlossyHorizontalGauge.js
@@ -0,0 +1,568 @@
+//>>built
+define("dojox/gauges/GlossyHorizontalGauge", ["dojo/_base/declare","dojo/_base/connect","dojo/_base/lang","dojo/_base/Color","dojox/gfx","./BarGauge","./BarCircleIndicator","./GlossyHorizontalGaugeMarker"],
+  function(declare, connect, lang, Color, gfx, BarGauge, BarCircleIndicator, GlossyHorizontalGaugeMarker) {
+
+
+var NumberUtils
+
+/*=====
+	BarGauge = dojox.gauges.BarGauge;
+=====*/
+
+return declare("dojox.gauges.GlossyHorizontalGauge", [BarGauge], {
+	// summary:
+	//		Represents an horizontal bar gauge with a glossy appearance.
+	//
+	// example:
+	//	|	<div dojoType="dojox.gauges.GlossyHorizontalGauge"
+	//	|		id="testGauge"
+	//	|		width="500"
+	//	|		height="100"
+	//	|		min="0"
+	//	|		max="100"
+	//	|		value="0" 
+	//	|		majorTicksInterval="10"
+	//	|		majorTicksColor="#c4c4c4"
+	//	|		minorTicksInterval="5"
+	//	|		minorTicksColor="#c4c4c4"
+	//	|		color="black" 
+	//	|		markerColor="#c4c4c4"
+	//	|		font="normal normal normal 10pt sans-serif"
+	//	|		noChange="true"
+	//	|		title="title"
+	//	|		scalePrecision="0"
+	//	|	>
+	//	|	</div>
+
+
+	// the type of default indicator to create
+	_defaultIndicator: BarCircleIndicator,
+	
+	// color: String
+	// 		The main color of the gauge.
+	color: 'black',
+	
+	// needleColor: Color
+	// 		The main color of the needle.
+	markerColor: 'black',
+	
+	// majorTicksInterval: Number
+	// 		Interval between major ticks
+	majorTicksInterval: 10,
+	
+	// _majorTicksLength: Number
+	// 		Major tick size, at design
+	_majorTicksLength: 10,
+	
+	// majorTicksColor: Color
+	// 		Color of major tick marks
+	majorTicksColor: '#c4c4c4',
+	
+	// minorTicksInterval: Number
+	// 		Interval between minor ticks
+	minorTicksInterval: 5,
+	
+	// _minorTicksLength: Number
+	// 		Minor tick size, at design
+	_minorTicksLength: 6,
+	
+	// minorTicksColor: Color
+	// 		Color of minor tick marks
+	minorTicksColor: '#c4c4c4',
+	
+	// value: Number
+	// 		The value of the gauge.
+	value: 0,
+	
+	// noChange: Boolean
+	// 		Indicates if the gauge reacts to touch events
+	noChange: false,
+	
+	// title: String
+	// 		The title displayed in the needle's tooltip
+	title: "",
+	
+	// font: Object
+	// 		The font of the gauge
+	font: "normal normal normal 10pt serif",
+	
+	// scalePrecision: Number
+	// 		The precision for the formatting of numbers in the scale (default is 0)
+	scalePrecision: 0,
+	
+	_font: null,
+	
+	_margin: 2,
+	_minBorderWidth: 2,
+	_maxBorderWidth: 6,
+	_tickLabelOffset: 5,
+	_designHeight: 100,
+	
+	constructor: function(){
+		this.min = 0;
+		this.max = 100;
+	},
+	
+	startup: function(){
+		this.inherited(arguments);
+		
+		if (this._gaugeStarted) return;
+		
+		this._gaugeStarted = true;
+		
+		var scale = this.height / this._designHeight;
+		
+		this._minorTicksLength = this._minorTicksLength * scale;
+		this._majorTicksLength = this._majorTicksLength * scale;
+		
+		var font = this._font;
+		this._computeDataRectangle();
+		
+		// computing scale height
+		
+		var th = gfx.normalizedLength(font.size);
+		var scaleHeight = th + this._tickLabelOffset + Math.max(this._majorTicksLength, this._minorTicksLength);
+		// indicator in the middle of the gauge
+		var yOffset = Math.max(0, (this.height - scaleHeight) / 2);
+		
+		this.addRange({
+			low: this.min ? this.min : 0,
+			high: this.max ? this.max : 100,
+			color: [0, 0, 0, 0]
+		});
+		
+		this.setMajorTicks({
+			fixedPrecision: true,
+			precision: this.scalePrecision,
+			font: font,
+			labelPlacement: 'inside',
+			offset: yOffset - this._majorTicksLength / 2,
+			interval: this.majorTicksInterval,
+			length: this._majorTicksLength,
+			color: this.majorTicksColor
+		
+		});
+		
+		this.setMinorTicks({
+			labelPlacement: 'inside',
+			offset: yOffset - this._minorTicksLength / 2,
+			interval: this.minorTicksInterval,
+			length: this._minorTicksLength,
+			color: this.minorTicksColor
+		
+		});
+		this._needle = new GlossyHorizontalGaugeMarker({
+			hideValue: true,
+			title: this.title,
+			noChange: this.noChange,
+			offset: yOffset,
+			color: this.markerColor,
+			value: this.value
+		});
+		this.addIndicator(this._needle);
+		
+		connect.connect(this._needle, "valueChanged", lang.hitch(this, function(){
+			this.value = this._needle.value;
+			this.onValueChanged();
+		}));
+	},
+	
+	_layoutGauge: function(){
+		// summary: 
+		//		Layout the gauge elements depending on the various parameters (size, font, tick length..)
+		
+		if (!this._gaugeStarted) 
+			return;
+		
+		var font = this._font;
+		this._computeDataRectangle();
+		var th = gfx.normalizedLength(font.size);
+		var scaleHeight = th + this._tickLabelOffset + Math.max(this._majorTicksLength, this._minorTicksLength);
+		// indicator in the middle of the gauge
+		var yOffset = Math.max(0, (this.height - scaleHeight) / 2);
+		
+		
+		this._setMajorTicksProperty({
+			fixedPrecision: true,
+			precision: this.scalePrecision,
+			font: font,
+			offset: yOffset - this._majorTicksLength / 2,
+			interval: this.majorTicksInterval,
+			length: this._majorTicksLength
+		});
+		
+		this._setMinorTicksProperty({
+			offset: yOffset - this._minorTicksLength / 2,
+			interval: this.minorTicksInterval,
+			length: this._minorTicksLength
+		});
+		
+		this.removeIndicator(this._needle);
+		this._needle.offset = yOffset;
+		this.addIndicator(this._needle);
+	},
+	
+	_formatNumber: function(val){
+	    var NumberUtils = this._getNumberModule();
+		if(NumberUtils){ // use internationalization if loaded
+			return NumberUtils.format(val, {
+				places: this.scalePrecision
+			});
+		}else{
+			return val.toFixed(this.scalePrecision);
+		}
+	},
+	
+	_computeDataRectangle: function(){
+		// summary: 
+		//		Computes the rectangle that defines the data area of the gauge.
+		
+		
+		if (!this._gaugeStarted) 
+			return;
+		
+		var font = this._font;
+		var leftTextMargin = this._getTextWidth(this._formatNumber(this.min), font) / 2;
+		var rightTextMargin = this._getTextWidth(this._formatNumber(this.max), font) / 2;
+		var textMargin = Math.max(leftTextMargin, rightTextMargin);
+		
+		var margin = this._getBorderWidth() + Math.max(this._majorTicksLength, this._majorTicksLength) / 2 + textMargin;
+		this.dataHeight = this.height;
+		this.dataY = 0;
+		this.dataX = margin + this._margin;
+		this.dataWidth = Math.max(0, this.width - 2 * this.dataX);
+	},
+	
+	_getTextWidth: function(s, font){
+		return gfx._base._getTextBox(s, {
+			font: gfx.makeFontString(gfx.makeParameters(gfx.defaultFont, font))
+		}).w ||
+		0;
+	},
+	
+	_getBorderWidth: function(){
+		// summary: 
+		//		Computes the width of the border surrounding the gauge
+		return Math.max(this._minBorderWidth, Math.min(this._maxBorderWidth, this._maxBorderWidth * this.height / this._designHeight));
+	},
+	
+	drawBackground: function(group){
+		// summary: 
+		//		Draws the background of the gauge
+		// group: dojox.gfx.Group
+		//		The GFX group where the background must be drawn
+		if (this._gaugeBackground){
+			return;
+		}
+		
+		var lighterColor = Color.blendColors(new Color(this.color), new Color('white'), 0.4);
+		this._gaugeBackground = group.createGroup();
+
+		var borderWidth = this._getBorderWidth();
+		var margin = this._margin;
+		var w = this.width;
+		var h = this.height;
+		var radius = Math.min(h / 4, 23);
+		this._gaugeBackground.createRect({
+			x: margin,
+			y: margin,
+			width: Math.max(0, w - 2 * margin),
+			height: Math.max(0, h - 2 * margin),
+			r: radius
+		}).setFill(this.color);
+		
+		var left = margin + borderWidth;
+		var right = w - borderWidth - margin;
+		var top = margin + borderWidth;
+		var w2 = w - 2 * borderWidth - 2 * margin;
+		var h2 = h - 2 * borderWidth - 2 * margin;
+		if (w2 <= 0 || h2 <= 0) 
+			return;
+		radius = Math.min(radius, w2 / 2);
+		radius = Math.min(radius, h2 / 2);
+		this._gaugeBackground.createRect({
+			x: left,
+			y: top,
+			width: w2,
+			height: h2,
+			r: radius
+		}).setFill({
+			type: "linear",
+			x1: left,
+			y1: 0,
+			x2: left,
+			y2: h - borderWidth - margin,
+			colors: [{
+				offset: 0,
+				color: lighterColor
+			}, {
+				offset: .2,
+				color: this.color
+			}, {
+				offset: .8,
+				color: this.color
+			}, {
+				offset: 1,
+				color: lighterColor
+			}]
+		});
+		
+		var f = 4 * (Math.sqrt(2) - 1) / 3 * radius;
+		this._gaugeBackground.createPath({
+			path: 'M' + left + ' ' + (top + radius) +
+			'C' +
+			left +
+			' ' +
+			(top + radius - f) +
+			' ' +
+			(left + radius - f) +
+			' ' +
+			top +
+			' ' +
+			(left + radius) +
+			' ' +
+			top +
+			'L' +
+			(right - radius) +
+			' ' +
+			top +
+			'C' +
+			(right - radius + f) +
+			' ' +
+			top +
+			' ' +
+			right +
+			' ' +
+			(top + radius - f) +
+			' ' +
+			right +
+			' ' +
+			(top + radius) +
+			'L' +
+			right +
+			' ' +
+			(top + h / 2) +
+			'L' +
+			left +
+			' ' +
+			(top + h / 3) +
+			'Z'
+		}).setFill({
+			type: "linear",
+			x1: left,
+			y1: top,
+			x2: left,
+			y2: top + this.height / 2,
+			colors: [{
+				offset: 0,
+				color: lighterColor
+			}, {
+				offset: 1,
+				color: Color.blendColors(new Color(this.color), new Color('white'), 0.2)
+			}]
+		});
+	},
+	
+	onValueChanged: function(){
+		// summary:
+		//		Callback when the value of the gauge has changed.
+	
+	},
+	
+	//*******************************************************************************************
+	//* Property getters and setters
+	//*******************************************************************************************
+	
+	_setColorAttr: function(color){
+		// summary: 
+		//		Sets the main color of the gauge
+		// color: String
+		//      The color		
+		this.color = color ? color : 'black';
+		if (this._gaugeBackground && this._gaugeBackground.parent) 
+			this._gaugeBackground.parent.remove(this._gaugeBackground);
+		
+		this._gaugeBackground = null;
+		this.draw();
+	},
+	
+	_setMarkerColorAttr: function(color){
+		// summary: 
+		//		Sets the main color of the marker
+		// color: String
+		//      The color
+		this.markerColor = color;
+		if (this._needle){
+			this.removeIndicator(this._needle);
+			this._needle.color = color;
+			this._needle.shape = null;
+			this.addIndicator(this._needle);
+		}
+	},
+	
+	_setMajorTicksIntervalAttr: function(interval){
+		// summary: 
+		//		Sets the interval between major ticks
+		this.majorTicksInterval = interval;
+		this._setMajorTicksProperty({
+			'interval': this.majorTicksInterval
+		});
+	},
+	
+	setMajorTicksLength: function(length){
+		// summary: 
+		//		Sets the size of the major ticks.
+		this._majorTicksLength = length;
+		this._layoutGauge();
+		return this;
+		
+	},
+	
+	getMajorTicksLength: function(){
+		// summary: 
+		//		Returns the size of the major ticks.
+		return this._majorTicksLength;
+	},
+	
+	_setMajorTicksColorAttr: function(color){
+		// summary: 
+		//		Sets the color of the major ticks.
+		this.majorTicksColor = color;
+		this._setMajorTicksProperty({
+			'color': this.majorTicksColor
+		});
+	},
+	
+	_setMajorTicksProperty: function(prop){
+		if (this.majorTicks == null){
+			return;
+		}
+		lang.mixin(this.majorTicks, prop);
+		this.setMajorTicks(this.majorTicks);
+	},
+	
+	_setMinorTicksIntervalAttr: function(interval){
+		// summary: 
+		//		Sets the interval between minor ticks
+		this.minorTicksInterval = interval;
+		this._setMinorTicksProperty({
+			'interval': this.minorTicksInterval
+		});
+	},
+	
+	setMinorTicksLength: function(length){
+		// summary: 
+		//		Sets the size of the minor ticks.
+		this._minorTicksLength = length;
+		this._layoutGauge();
+		return this;
+	},
+	
+	getMinorTicksLength: function(){
+		// summary: 
+		//		Gets the size of the minor ticks.
+		return this._minorTicksLength;
+	},
+	
+	_setMinorTicksColorAttr: function(color){
+		// summary: 
+		//		Sets the color of the minor ticks.
+		this.minorTicksColor = color;
+		this._setMinorTicksProperty({
+			'color': this.minorTicksColor
+		});
+	},
+	
+	_setMinorTicksProperty: function(prop){
+		if (this.minorTicks == null){
+			return;
+		}
+		lang.mixin(this.minorTicks, prop);
+		this.setMinorTicks(this.minorTicks);
+	},
+	
+	_setMinAttr: function(min){
+		this.min = min;
+		this._computeDataRectangle();
+		if (this.majorTicks != null) 
+			this.setMajorTicks(this.majorTicks);
+		if (this.minorTicks != null) 
+			this.setMinorTicks(this.minorTicks);
+		this.draw();
+	},
+	
+	_setMaxAttr: function(max){
+		this.max = max;
+		this._computeDataRectangle();
+		if (this.majorTicks != null) 
+			this.setMajorTicks(this.majorTicks);
+		if (this.minorTicks != null) 
+			this.setMinorTicks(this.minorTicks);
+		this.draw();
+	},
+	
+	_setValueAttr: function(value){
+		// summary: 
+		//		Changes the value of the gauge
+		// value: Number
+		//		The new value for the gauge.			
+		
+		value = Math.min(this.max, value);
+		value = Math.max(this.min, value);
+		this.value = value;
+		if (this._needle){
+			// update will not work if noChange is true.
+			var noChange = this._needle.noChange;
+			this._needle.noChange = false;
+			this._needle.update(value);
+			this._needle.noChange = noChange;
+		}
+	},
+	
+	_setScalePrecisionAttr: function(value){
+		// summary: 
+		//		Changes precision of the numbers in the scale of the gauge
+		// value: Number
+		//		The new value
+		this.scalePrecision = value;
+		this._layoutGauge();
+	},
+	
+	_setNoChangeAttr: function(value){
+		// summary: 
+		//		Indicates if the value of the gauge can be changed or not
+		// value: boolean
+		//		true indicates that the gauge's value cannot be changed	
+		this.noChange = value;
+		if (this._needle) 
+			this._needle.noChange = this.noChange;
+	},
+	
+	_setTitleAttr: function(value){
+		// summary: 
+		//		Sets the title displayed by the needle's tooltip .
+		// value: String
+		//		the title
+		
+		this.title = value;
+		if (this._needle){
+			this._needle.title = this.title;
+		}
+	},
+	
+	_setFontAttr: function(font){
+		// summary: 
+		//		Sets the font of the gauge
+		// summary: 
+		//		Sets the font of the gauge
+		// font: String
+		//		An string representing the font such as 'normal normal normal 10pt Helvetica,Arial,sans-serif'	
+		// 
+		
+		this.font = font;
+		this._font = gfx.splitFontString(font);
+		this._layoutGauge();
+	}
+});
+});
+