[Kimchi-devel] [PATCH] UI: Adding new radio widget of new kimchi UI

[Wen Wang]

This is just a widget of the radio button in which way I wrote by myself 
instead of changing the button file to save time. It it the same with 
textbox and checkbox widget
On 1/27/2015 8:46 PM, Aline Manera wrote:
>
> Please, add a sample
>
> Also how does this radio widget is different from that create in the 
> button widget ([PATCH] UI Add widget button to new kimchi UI) ?
>
> On 23/01/2015 02:27, Wen Wang wrote:
>> Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
>> ---
>>   ui/css/theme-default/radio-flat.css | 30 +++++++++++++
>>   ui/js/widgets/radio-flat.js         | 86 
>> +++++++++++++++++++++++++++++++++++++
>>   2 files changed, 116 insertions(+)
>>   create mode 100644 ui/css/theme-default/radio-flat.css
>>   create mode 100644 ui/js/widgets/radio-flat.js
>>
>> diff --git a/ui/css/theme-default/radio-flat.css 
>> b/ui/css/theme-default/radio-flat.css
>> new file mode 100644
>> index 0000000..0c03485
>> --- /dev/null
>> +++ b/ui/css/theme-default/radio-flat.css
>> @@ -0,0 +1,30 @@
>> +/*
>> + * 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.
>> + */
>> +
>> + .radio-label {
>> +    position: relative;
>> +    cursor: pointer;
>> + }
>> +
>> + .radio-content {
>> +    margin-right: 10px;
>> + }
>> +
>> + .inline-radio {
>> +    display: inline-block;
>> + }
>> \ No newline at end of file
>> diff --git a/ui/js/widgets/radio-flat.js b/ui/js/widgets/radio-flat.js
>> new file mode 100644
>> index 0000000..7be55f7
>> --- /dev/null
>> +++ b/ui/js/widgets/radio-flat.js
>> @@ -0,0 +1,86 @@
>> +/*
>> + * 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").radioFlat({
>> + *     id: "t",  //Base id of the radio set.
>> + *     name: "test",  //name of the radio.
>> + *     whichChecked: 2,  //First selected position, starts from 1.
>> + *     content: ["apple", "banana", "orange", "cherry"] //set the 
>> content array.
>> + *  });
>> + *
>> + *
>> + *  $(".test-bar").click(function() {
>> + *     console.log($(".test-bar").radioFlat("value"));  //this is 
>> how to get the value of selected radio value
>> + *  });
>> + *
>> + *
>> + *
>> + */
>> +
>> + (function($) {
>> +
>> +    $.widget("kimchi.radioFlat", {
>> +        options: {
>> +            id: "",
>> +            name: "",
>> +            whichChecked: "",
>> +            content:[],
>> +        },
>> +
>> +        _create: function() {
>> +            var that = this;
>> +            var radioName = this.options.name;
>> +            var labelID = this.options.id;
>> +            var checked = this.options.whichChecked;
>> +            var num = Number(this.options.content.length);
>> +            var html ="";
>> +            if(num >0) {
>> +                for(var i=1;i < num+1;i++) {
>> +                    var tmpLabelID = labelID + i;
>> +                    html += "<div class='icon-circle-empty 
>> inline-radio radio-label' id='" + tmpLabelID + "'></div>" +
>> +                            "<label class='radio-content 
>> inline-radio' for='" + tmpLabelID + "'>" + that.options.content[i-1] 
>> + "</label>";
>> +                }
>> +                $(html).appendTo(that.element);
>> +                $("#" + labelID + checked).attr("checked", "true");
>> +                $("#" + labelID + 
>> checked).removeClass("icon-circle-empty");
>> +                $("#" + labelID + 
>> checked).addClass("icon-dot-circled");
>> +            }
>> +            $(".radio-label").on("click", function() {
>> + $(".radio-label").removeClass("icon-dot-circled");
>> + $(".radio-label").addClass("icon-circle-empty");
>> +                $(".radio-label").removeAttr("checked");
>> +                $(this).removeClass("icon-circle-empty");
>> +                $(this).addClass("icon-dot-circled");
>> +                $(this).attr("checked", "true");
>> +                var thisID = $(this).attr("id");
>> +                that.options.whichChecked = 
>> thisID.substring(labelID.length,thisID.length);
>> +            });
>> +        },
>> +
>> +        value: function() {
>> +            var value = Number(this.options.whichChecked) -1;
>> +            return this.options.content[value];
>> +        },
>> +
>> +        _destroy: function() {
>> +            this.element.remove();
>> +        }
>> +    });
>> + })(jQuery);
>> \ No newline at end of file
>