[Kimchi-devel] [PATCH V5] UI: Adding widget of gauge
Wen Wang
wenwang at linux.vnet.ibm.com
Mon Feb 2 09:59:08 UTC 2015
From: Wen Wang <wenwang at linux.vnet.ibm.com>
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 at linux.vnet.ibm.com>
---
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
More information about the Kimchi-devel
mailing list