10:26 p.m.
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>
---
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
--
2.1.0