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

[Aline Manera]

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