From: Wen Wang <wenwang(a)linux.vnet.ibm.com&gt; V4 -> V5: 1) Change all the tabs into 4 spaces 2) Adding the license to the header of the sample 3) Change the sample file name the same as the widget 4) Deleted white spaces 5) Specify Sample independently 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 | 126 ++++++++++++++++++++++++++++++++++ ui/js/widgets/samples/gauge-flat.html | 53 ++++++++++++++ 3 files changed, 231 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-flat.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..2b807ae --- /dev/null +++ b/ui/js/widgets/gauge-flat.js @@ -0,0 +1,126 @@ +/* + * 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-flat.html b/ui/js/widgets/samples/gauge-flat.html new file mode 100644 index 0000000..92ce07a --- /dev/null +++ b/ui/js/widgets/samples/gauge-flat.html @@ -0,0 +1,53 @@ +<!--Sample code of gauge--> +<!-- +/* + * 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. + */ + --> +<!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 -- 2.1.0