[Kimchi-devel] [PATCH V1 2/2] Add a new jquery filter-select widget

[zhoumeina]

In order to show server target I did a select box in UI, but sometimes
maybe the export path number is large. So I made a filter-select
widget to make user easier to choose the export path he want.
This is the first jquery widget. And let us make all common widget to
jquery widget from now on.
Signed-off-by: zhoumeina <zhoumein at linux.vnet.ibm.com>
---
 ui/js/widgets/filter-select.js |  110 ++++++++++++++++++++++++++++++++++++++++
 1 files changed, 110 insertions(+), 0 deletions(-)
 create mode 100644 ui/js/widgets/filter-select.js

diff --git a/ui/js/widgets/filter-select.js b/ui/js/widgets/filter-select.js
new file mode 100644
index 0000000..f58b208
--- /dev/null
+++ b/ui/js/widgets/filter-select.js
@@ -0,0 +1,110 @@
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2013
+ *
+ * Authors:
+ *  zhoumeina <zhoumein at linux.vnet.ibm.com>
+ *
+ * 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.
+ */
+(function($) {
+    $.widget("kimchi.filterselect", {
+        options: {
+               key: 0,
+               value: 0
+              },
+
+        _create : function() {
+            this.listControl = this.element;
+            this.element.html("");
+            var targetId = this.listControl.data('target');
+            var labelId = this.listControl.data('label');
+            this.target = $('#' + targetId);
+            this.label = $('#' + labelId);
+            this.selectDiv = this.listControl.parent().parent();
+        },
+
+        _setOption : function(key,value) {},
+
+        setData : function (options) {
+            var that = this;
+            var value = this.target.val();
+            var selectedClass = 'active';
+            var itemTag = 'li';
+
+            that.listControl.on('click', itemTag, function() {
+                that.listControl.children().removeClass(selectedClass);
+                that.listControl.addClass(selectedClass);
+                that.target.text($(this).text());
+                var oldValue = that.target.val();
+                var newValue = $(this).data('value');
+                that.target.val(newValue);
+                if(oldValue !== newValue) {
+                    that.target.change();
+                }
+            });
+
+            that.selectDiv.click( function(e) {
+                that.listControl.html("");
+                var items = that._dataList(options);
+                $.each(items, function(index,item){
+                    that.listControl.append(item);
+                })
+                var isOpen = that.selectDiv.hasClass('open');
+                that.selectDiv.removeClass('open');
+                if (!isOpen) {
+                    that.selectDiv.addClass('open');
+                }
+                e.preventDefault();
+                e.stopPropagation();
+            });
+
+            that.target.keyup( function() {
+                that.listControl.html("");
+                var items = that._dataList(options);
+                $.each(items, function(index,item){
+                    if (item.html().indexOf(that.target.val()) != -1) {
+                        that.listControl.append(item);
+                    }
+                });
+                if (that.listControl.html() === ''){
+                    that.listControl.html(i18n['msg.storagepool.unvalid.path']);
+                }
+            });
+        },
+
+        _dataList : function (options) {
+            var item;
+            var itemTag = 'li';
+            var selectedClass = 'active';
+            var items = [];
+            var that = this;
+            $.each(options, function(index, option) {
+                item = $('<' + itemTag + '></' + itemTag + '>');
+                item.text(option.label);
+                item.data('value', option.value);
+                if(option.value === that.target.val()) {
+                    item.addClass(selectedClass);
+                }
+                items.push(item);
+            });
+            return items;
+        },
+
+        destroy : function() {
+            // call the base destroy function
+            $.Widget.prototype.destroy.call(this);
+        }
+    });
+}(jQuery));
\ No newline at end of file
-- 
1.7.1