The widget looks good. Just some comments: - Use 4 spaces instead of tab for indentation - Remember to add the license header to the new files (It is missing in ui/js/widgets/samples/gauge-sample.html) - Name the sample file as the css/js file (ie, gauge-flat.html) - There are also some whitespaces in the sample file. On 20/01/2015 01:26, Wen Wang wrote: > 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