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

V3 -> V4: 1) Add comments of how to use the widget. 2) Minor style changes. V2 -> V3: Adding Samples of gauge. V1 -> V2: Change the time of the copyright. 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(a)linux.vnet.ibm.com&gt; --- ui/css/theme-default/gauge-flat.css | 52 +++++++++++++ ui/js/widgets/gauge-flat.js | 127 ++++++++++++++++++++++++++++++++ ui/js/widgets/samples/gauge-sample.html | 34 +++++++++ 3 files changed, 213 insertions(+) create mode 100755 ui/css/theme-default/gauge-flat.css create mode 100755 ui/js/widgets/gauge-flat.js create mode 100644 ui/js/widgets/samples/gauge-sample.html diff --git a/ui/css/theme-default/gauge-flat.css b/ui/css/theme-default/gauge-flat.css new file mode 100755 index 0000000..f5b52e5 --- /dev/null +++ b/ui/css/theme-default/gauge-flat.css @@ -0,0 +1,52 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 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; + width: 100px; + text-align: left; + overflow: hidden; + background: #E6E7E8; + border: 0 none; + border-radius: 0; +} + +.ui-gauge-flat .ui-gauge-flat-value { + margin: -1px; + height: 100%; + border-radius: 0; +} + +.ui-gauge-flat .red { + background: #D9182D; + border:1px solid #D9182D; +} + +.ui-gauge-flat .blue { + background: #008ABF; + border:1px solid #008ABF; +} + +.ui-gauge-flat .yellow { + background: #FDB813; + border:1px solid #FDB813; +} + +.ui-gauge-flat .purple { + background: #7F1C7D; + border:1px solid #7F1C7D; +} \ No newline at end of file diff --git a/ui/js/widgets/gauge-flat.js b/ui/js/widgets/gauge-flat.js new file mode 100755 index 0000000..c073a2f --- /dev/null +++ b/ui/js/widgets/gauge-flat.js @@ -0,0 +1,127 @@ +/* + * Project Kimchi + * + * Copyright IBM, Corp. 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. + */ + +/* + * How to use: + * $(".selector").gaugeFlat({ + * value: 25, // Value that you the gauge is going to show, varies from 0 to 100. + * color: "red" // Color showed, currently only "red", "yellow", "blue" and "purple" are supported. + * }); + * + * Set value: + * $(".selector").gaugeFlat("value", <value>); // Replace <value> with the value that is going to be showed. + * + * Get value: + * $(".selector").gaugeFlat("value"); // This returns the value of gauge. + * + */ + +(function( $ ) { + +return $.widget( "kimchi.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; + if(color != "red" && color != "yellow" && color != "blue" && color != "purple") { + color = "red"; + } + + + 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); diff --git a/ui/js/widgets/samples/gauge-sample.html b/ui/js/widgets/samples/gauge-sample.html new file mode 100644 index 0000000..971d9a8 --- /dev/null +++ b/ui/js/widgets/samples/gauge-sample.html @@ -0,0 +1,34 @@ +<!--Sample code of gauge--> +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Gauge Demo</title> + <script src="../../../libs/jquery-1.10.0.min.js"></script> + <script src="../../../libs/jquery-ui.min.js"></script> + <script src="../gauge-flat.js"></script> + <link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css"> + <link rel="stylesheet" href="../../../css/theme-default/gauge-flat.css"> + </head> + <body> + <div class="gauge-demo"></div> + <script> + $(document).ready(function() { + console.log("test started1"); + var gauged = $(".gauge-demo"); + gauged.gaugeFlat({ + value: 25, + color: "red" + }); + var gaugeAdd = function() { + var gaugeValue = gauged.gaugeFlat("value"); + gauged.gaugeFlat("value", gaugeValue + 1); + if (gaugeValue < 99) { + setTimeout(gaugeAdd, 300); + } + } + gaugeAdd(); + }); + </script> + </body> +</html> \ No newline at end of file