[PATCH] UI: Adding widget of gauge
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@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
Wen Wang, could you also add a HTML sample on how to use the widget? We can create a new directory widgets/samples/ and put there at least one HTML file as example for each widget. That way we can test it. Also the copyright date depends on file creation and modification date. For new files the copyright only contain the creation year. So if file was created in 2015, the copyright is only 2015 (as it was never modified yet) If it was created in 2013 and modified in 2015, the copyright is 2013-2015. On 12/01/2015 08:21, Wen Wang wrote:
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@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);
Thanks Aline, I will create a new directory that contains the html file for testing. Also, thanks for the tips of the copyright, I will have it changed. Best Regards Wang Wen On 1/13/2015 8:38 PM, Aline Manera wrote:
Wen Wang, could you also add a HTML sample on how to use the widget?
We can create a new directory widgets/samples/ and put there at least one HTML file as example for each widget. That way we can test it.
Also the copyright date depends on file creation and modification date. For new files the copyright only contain the creation year.
So if file was created in 2015, the copyright is only 2015 (as it was never modified yet) If it was created in 2013 and modified in 2015, the copyright is 2013-2015.
On 12/01/2015 08:21, Wen Wang wrote:
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@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);
participants (2)
-
Aline Manera -
Wen Wang