From 2fb53c070518c7c3aed1f44c797e09271cf0d01e Mon Sep 17 00:00:00 2001
From: Chao Liu <chao.c.liu@intel.com>
Date: Tue, 26 Jun 2012 17:41:51 +0800
Subject: [PATCH] [property view] implement a new input for custom icons

 user can set a costom icon name, with suggestions
 from a dropdown list greped by user's input
---
 src/css/builder.css      | 40 ++++++++++++++++++++++++++++++++++
 src/js/views/property.js | 47 ++++++++++++++++++++++++++++++++++++++++
 src/js/widgets.js        |  2 +-
 3 files changed, 88 insertions(+), 1 deletion(-)

diff --git a/src/css/builder.css b/src/css/builder.css
index c9aa4526..3df58d2e 100644
--- a/src/css/builder.css
+++ b/src/css/builder.css
@@ -774,6 +774,46 @@ body.ui-tabs.ui-widget {
     border-radius: 6px;
     text-decoration: none;
 }
+.propertyView .droplist {
+    background: #fff;
+    border-top: 0;
+    top: 27px;
+    left: 0;
+    -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
+    z-index: 999;
+    width: 100%;
+    border-radius: 0 0 5px 5px;
+    padding: 0px 5px;
+}
+.propertyView .droplist li {
+    clear:both;
+    cursor: pointer;
+    line-height: 80%;
+    padding: 7px 0px 8px;
+    margin: 0;
+    list-style: none;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
+    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
+}
+.propertyView .droplist li:hover {
+    background-image: none;
+    background-color:#b0c4de;
+}
+.propertyView .droplist > ul {
+    list-style-type: none ;
+    margin: 0 4px 4px 0;
+    max-height: 200px;
+    padding: 0px;
+    position: relative;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+.propertyView .datalist-input {
+    border-radius: 5px 5px 0px 0px;
+    outline-color: #E59700;
+    outline-style: auto;
+    outline-width: 5px;
+}
 .propertyView .buttonStyle:focus,
 .propertyView .buttonStyle:hover {
     color: #eee;
diff --git a/src/js/views/property.js b/src/js/views/property.js
index 6be0924a..b763b256 100644
--- a/src/js/views/property.js
+++ b/src/js/views/property.js
@@ -294,6 +294,53 @@
                             },
                         });
                         break;
+                    case "datalist":
+                        $('<div class="title"/>')
+                            .append(
+                                $('<input type="text" value=""/>')
+                                    .attr('id', valueId)
+                                    .addClass('labelInput')
+                                    .click({'p': p, 'value': value}, function(e){
+                                        var o, value = e.data.value, p = e.data.p;
+                                        value.find('ul').html("");
+                                        for(o in options[p]) {
+                                            $('<li>' + options[p][o] + '</li>').appendTo(value.find('ul'));
+                                        }
+                                        $(this).toggleClass('datalist-input');
+                                        value.find('.droplist').toggle();
+                                        return false;
+                                    })
+                                    .keyup({ 'p' : p, 'value' : value}, function(e){
+                                        var matchedOptions = [], o,
+                                            inputedText = this.value,
+                                            value = e.data.value;
+                                        matchedOptions = $.grep(options[e.data.p], function(item, i){
+                                            return item.indexOf(inputedText) >= 0;
+                                        });
+                                        value.find('ul').html("");
+
+                                        for (o in matchedOptions) {
+                                            $('<li>' + matchedOptions[o] + '</li>')
+                                                .appendTo(value.find('ul'));
+                                        }
+                                        $(this).addClass('datalist-input');
+                                        value.find('.droplist').show();
+                                    })
+                            )
+                            .append(
+                                $('<div style="display:none"/>')
+                                .addClass('droplist')
+                                .append('<ul/>')
+                            )
+                        .appendTo(value);
+                        value.delegate(".droplist li", "click", {'valueId': valueId, 'value': value}, function(e) {
+                            var value = e.data.value,
+                                valueId = e.data.valueId;
+                            value.find('#'+ valueId).val($(this).text()).change().end()
+                                 .find('.droplist').hide().end();
+                        });
+                        value.find('#'+ valueId).val(valueVal);
+                        break;
                     default:
                         // handle property has options
                         if (options[p]) {
diff --git a/src/js/widgets.js b/src/js/widgets.js
index 97a4b161..c73c94d4 100644
--- a/src/js/widgets.js
+++ b/src/js/widgets.js
@@ -580,7 +580,7 @@ var BWidgetRegistry = {
                 htmlAttribute: "data-rel"
             },
             icon: {
-                type: "string",
+                type: "datalist",
                 options: [ "none", "alert", "arrow-d", "arrow-l", "arrow-r",
                            "arrow-u", "back", "check", "delete", "forward",
                            "gear", "grid", "home", "info", "minus", "plus",