[Kimchi-devel] [PATCH V4] UI: Adding widget of gauge
Wen Wang
wenwang at linux.vnet.ibm.com
Mon Feb 2 10:05:45 UTC 2015
ACK, new patch has been sent
On 1/27/2015 8:32 PM, Aline Manera wrote:
>
> The widget looks good.
>
> Just some comments:
>
> - Use 4 spaces instead of tab for indentation
> - Remember to add the license header to the new files (It is missing
> in ui/js/widgets/samples/gauge-sample.html)
> - Name the sample file as the css/js file (ie, gauge-flat.html)
> - There are also some whitespaces in the sample file.
>
> On 20/01/2015 01:26, Wen Wang wrote:
>> 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 | 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
>
More information about the Kimchi-devel
mailing list