[Kimchi-devel] [PATCH] UI: Adding widget of gauge

[Wen Wang]

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 at 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);
>