[Kimchi-devel] [PATCH] UI: Adding new checkbox widget to new kimchi UI

[Aline Manera]

Please, add the sample

Also how does this checkbox widget is different from that create in the 
button widget ([PATCH] UI Add widget button to new kimchi UI) ?

On 23/01/2015 05:48, Wen Wang wrote:
> Signed-off-by: Wen Wang <wenwang at linux.vnet.ibm.com>
> ---
>   ui/css/theme-default/checkbox-flat.css | 25 ++++++++++
>   ui/js/widgets/checkbox-flat.js         | 86 ++++++++++++++++++++++++++++++++++
>   2 files changed, 111 insertions(+)
>   create mode 100644 ui/css/theme-default/checkbox-flat.css
>   create mode 100644 ui/js/widgets/checkbox-flat.js
>
> diff --git a/ui/css/theme-default/checkbox-flat.css b/ui/css/theme-default/checkbox-flat.css
> new file mode 100644
> index 0000000..b8712b3
> --- /dev/null
> +++ b/ui/css/theme-default/checkbox-flat.css
> @@ -0,0 +1,25 @@
> +/*
> + * 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.
> + */
> +
> + .checkbox-item {
> +    cursor: pointer;
> + }
> +
> + .checkbox-inline {
> +    display: inline-block;
> + }
> \ No newline at end of file
> diff --git a/ui/js/widgets/checkbox-flat.js b/ui/js/widgets/checkbox-flat.js
> new file mode 100644
> index 0000000..877a52d
> --- /dev/null
> +++ b/ui/js/widgets/checkbox-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").checkboxFlat({
> +//         id: "t",  //Checkbox base id.
> +//         name: "test",  //Checkbox name.
> +//         content: ["apple", "banana", "orange", "cherry"],  //Contents of the checkbox set.
> +//         checked: [1,3]  //Set the checked item, which starts with number 1.
> +//     });
> +//     $(".selector").click(function() {
> +//         console.log($(".selector").checkboxFlat("value"));  //Get value of the checked checkbox.
> +//     });
> +
> + (function($) {
> +    $.widget("kimchi.checkboxFlat", {
> +        options: {
> +            id: "",
> +            name: "",
> +            content: [],
> +            checked: []
> +        },
> +
> +        _create: function() {
> +            var that = this;
> +            var idBase = that.options.id;
> +            var name = that.options.name;
> +            var checked = that.options.checked;
> +            var content = that.options.content;
> +            var html = "";
> +            for (var i=1;i<content.length+1;i++) {
> +                if($.inArray(i,checked) < 0) {
> +                    html += "<div class='checkbox-item checkbox-inline icon-check-empty-1' id='" + idBase + i + "' name='" + name + "'></div>" +
> +                            "<label class='checkbox-label checkbox-inline' for='" + idBase + i + "'>" + content[i-1] + "</label>";
> +                } else {
> +                    html += "<div class='checkbox-item checkbox-inline icon-ok-squared' id='" + idBase + i + "' name='" + name + "'></div>" +
> +                            "<label class='checkbox-label checkbox-inline' for='" + idBase + i + "'>" + content[i-1] + "</label>";
> +                }
> +            }
> +            $(html).appendTo(that.element);
> +            $(".checkbox-item").on("click", function() {
> +                var tickID = $(this).attr("id");
> +                var tick = tickID.substring(idBase.length,tickID.length);
> +                if($(this).hasClass("icon-check-empty-1")) {
> +                    $(this).removeClass("icon-check-empty-1");
> +                    $(this).addClass("icon-ok-squared");
> +                    checked.push(Number(tick));
> +                } else {
> +                    $(this).removeClass("icon-ok-squared");
> +                    $(this).addClass("icon-check-empty-1");
> +                    checked.splice($.inArray(Number(tick),checked),1);
> +                }
> +            });
> +        },
> +
> +        value: function() {
> +            var value = new Array();
> +            var vContent = this.options.content;
> +            var vChencked = this.options.checked;
> +            for(var i=0;i<vChencked.length;i++) {
> +                value.push(vContent[vChencked[i]-1]);
> +            }
> +            return value;
> +        },
> +
> +        _destroy: function() {
> +            this.element.remove();
> +        }
> +    });
> + })(jQuery);
> \ No newline at end of file