6:21 p.m.
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 | 45 +++++++++++++++
ui/js/widgets/gauge-flat.js | 110 ++++++++++++++++++++++++++++++++++++
2 files changed, 155 insertions(+)
create mode 100755 ui/css/theme-default/gauge-flat.css
create mode 100755 ui/js/widgets/gauge-flat.js
diff --git a/ui/css/theme-default/gauge-flat.css b/ui/css/theme-default/gauge-flat.css
new file mode 100755
index 0000000..569350e
--- /dev/null
+++ b/ui/css/theme-default/gauge-flat.css
@@ -0,0 +1,45 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013-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;
+ text-align: left;
+ overflow: hidden;
+ background: #E6E7E8;
+}
+
+.ui-gauge-flat .ui-gauge-flat-value {
+ margin: -1px;
+ height: 100%;
+}
+
+.ui-gauge-flat .red {
+ background: #D9182D;
+}
+
+.ui-gauge-flat .blue {
+ background: #008ABF;
+}
+
+.ui-gauge-flat .yellow {
+ background: #FDB813;
+}
+
+.ui-gauge-flat .purple {
+ background: #7F1C7D;
+}
diff --git a/ui/js/widgets/gauge-flat.js b/ui/js/widgets/gauge-flat.js
new file mode 100755
index 0000000..7d4039b
--- /dev/null
+++ b/ui/js/widgets/gauge-flat.js
@@ -0,0 +1,110 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013-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.
+ */
+
+
+(function( $ ) {
+
+return $.widget( "ui.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;
+
+ 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);
--
2.1.0