[Kimchi-devel] [PATCH] UI: Adding widget of gauge

[Aline Manera]

Wen Wang, could you also add a HTML sample on how to use the widget?

We can create a new directory widgets/samples/ and put there at least 
one HTML file as example for each widget.
That way we can test it.

Also the copyright date depends on file creation and modification date.
For new files the copyright only contain the creation year.

So if file was created in 2015, the copyright is only 2015 (as it was 
never modified yet)
If it was created in 2013 and modified in 2015, the copyright is 2013-2015.

On 12/01/2015 08:21, Wen Wang wrote:
> New widget accept two options: "value" and "color". value varies from 0
> to 100 and color contains "red", "blue", "yellow" and "purple".
>
> Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/gauge-flat.css |  45 +++++++++++++++
>   ui/js/widgets/gauge-flat.js         | 110 ++++++++++++++++++++++++++++++++++++
>   2 files changed, 155 insertions(+)
>   create mode 100755 ui/css/theme-default/gauge-flat.css
>   create mode 100755 ui/js/widgets/gauge-flat.js
>
> diff --git a/ui/css/theme-default/gauge-flat.css b/ui/css/theme-default/gauge-flat.css
> new file mode 100755
> index 0000000..569350e
> --- /dev/null
> +++ b/ui/css/theme-default/gauge-flat.css
> @@ -0,0 +1,45 @@
> +/*
> + * Project Kimchi
> + *
> + * Copyright IBM, Corp. 2013-2015
> + *
> + * Licensed under the Apache License, Version 2.0 (the 'License');
> + * you may not use this file except in compliance with the License.
> + * You may obtain a copy of the License at
> + *
> + *     http://www.apache.org/licenses/LICENSE-2.0
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an 'AS IS' BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> +
> +.ui-gauge-flat {
> +	height: 15px;
> +	text-align: left;
> +	overflow: hidden;
> +	background: #E6E7E8;
> +}
> +
> +.ui-gauge-flat .ui-gauge-flat-value {
> +	margin: -1px;
> +	height: 100%;
> +}
> +
> +.ui-gauge-flat .red {
> +	background: #D9182D;
> +}
> +
> +.ui-gauge-flat .blue {
> +	background: #008ABF;
> +}
> +
> +.ui-gauge-flat .yellow {
> +	background: #FDB813;
> +}
> +
> +.ui-gauge-flat .purple {
> +	background: #7F1C7D;
> +}
> diff --git a/ui/js/widgets/gauge-flat.js b/ui/js/widgets/gauge-flat.js
> new file mode 100755
> index 0000000..7d4039b
> --- /dev/null
> +++ b/ui/js/widgets/gauge-flat.js
> @@ -0,0 +1,110 @@
> +/*
> + * Project Kimchi
> + *
> + * Copyright IBM, Corp. 2013-2015
> + *
> + * Licensed under the Apache License, Version 2.0 (the 'License');
> + * you may not use this file except in compliance with the License.
> + * You may obtain a copy of the License at
> + *
> + *     http://www.apache.org/licenses/LICENSE-2.0
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an 'AS IS' BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> +
> +
> +(function( $ ) {
> +
> +return $.widget( "ui.gaugeflat", {
> +	version: "@VERSION",
> +	options: {
> +		max: 100,
> +		value: 0,
> +		color: "red"
> +	},
> +
> +	min: 0,
> +
> +	_create: function() {
> +		this.oldValue = this.options.value = this._constrainedValue();
> +
> +		this.element
> +			.addClass( "ui-gauge-flat ui-widget ui-widget-content ui-corner-all" )
> +			.attr({
> +				role: "gaugeflat",
> +				"aria-valuemin": this.min
> +			});
> +
> +		var color = this.options.color;
> +
> +		this.valueDiv = $( "<div class='ui-gauge-flat-value " + color + " ui-widget-header ui-corner-left'></div>" )
> +			.appendTo( this.element );
> +
> +		this._refreshValue();
> +	},
> +
> +	_destroy: function() {
> +		this.element
> +			.removeClass( "ui-gauge-flat ui-widget ui-widget-content ui-corner-all" )
> +			.removeAttr( "role" )
> +			.removeAttr( "aria-valuemin" )
> +			.removeAttr( "aria-valuemax" )
> +			.removeAttr( "aria-valuenow" );
> +
> +		this.valueDiv.remove();
> +	},
> +
> +	value: function( newValue ) {
> +		if ( newValue === undefined ) {
> +			return this.options.value;
> +		}
> +
> +		this.options.value = this._constrainedValue( newValue );
> +		this._refreshValue();
> +	},
> +
> +	_constrainedValue: function( newValue ) {
> +		if ( newValue === undefined ) {
> +			newValue = this.options.value;
> +		}
> +
> +		this.indeterminate = newValue === false;
> +
> +		if ( typeof newValue !== "number" ) {
> +			newValue = 0;
> +		}
> +
> +		return this.indeterminate ? false :
> +			Math.min( this.options.max, Math.max( this.min, newValue ) );
> +	},
> +
> +	_setOptions: function( options ) {
> +		var value = options.value;
> +		delete options.value;
> +
> +		this._super( options );
> +
> +		this.options.value = this._constrainedValue( value );
> +		this._refreshValue();
> +	},
> +
> +	_percentage: function() {
> +		return this.indeterminate ? 100 : 100 * ( this.options.value - this.min ) / ( this.options.max - this.min );
> +	},
> +
> +	_refreshValue: function() {
> +		var value = this.options.value,
> +			percentage = this._percentage();
> +
> +		this.valueDiv
> +			.toggle( this.indeterminate || value > this.min )
> +			.toggleClass( "ui-corner-right", value === this.options.max )
> +			.width( percentage.toFixed(0) + "%" );
> +	}
> +});
> +
> +})(jQuery);