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

[Wen Wang]

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
-- 
2.1.0