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

[Wen Wang]

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