Use select2.css styles as starting point

angular-ui · Nov 14, 2013 · f0b7d9a · f0b7d9a · ProLoser · Nov 17, 2013
1 parent 293561f
commit f0b7d9a
Show file tree

Hide file tree

Showing 5 changed files with 658 additions and 15 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -12,7 +12,17 @@
     <script src="../src/select.js"></script>
     <script src="demo.js"></script>
 
-    <link rel="stylesheet" href="../src/select.css"/>
+    <!-- <link rel="stylesheet" href="../src/select.css"/> -->
+    <link rel="stylesheet" href="../src/select2.css"/>
+
+    <style>
+        body {
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            color: #333;
+        }
+    </style>
 
 </head>
 <body ng-controller="MainCtrl">
@@ -21,16 +31,15 @@
     Selected: {{data.custom}}
     </p>
 
-    <ui-select ng-model="data.custom">
+    <ui-select ng-model="data.custom" style="width:300px">
       <li 
         ng-repeat="item in data.items | filter : $select.search" 
-        ng-class="{highlight:$select.index==$index}" 
+        ng-class="{'ui-select-highlighted':$select.index==$index}" 
         ng-click="$select(item)" 
         ng-mouseover="$select.index=$index">
-        <h4>{{item.title}}</h4>
+        <div class="ui-select-result-label">{{item.title}}</div>
       </li>
     </ui-select>
 
-
 </body>
 </html>
diff --git a/src/select.js b/src/select.js
@@ -3,11 +3,16 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
     restrict: 'E',
     /* jshint multistr: true */
     template:
-    '<div class="select" ng-class="{open:open}"> \
-      <button type="button" ng-click="activate()">{{$select.selected.title || \'Select Me \' }}</button> \
-      <div class="ui-select-drop"> \
-        <input class="ui-select-search" type="text" ui-keydown="{up: \'up()\', down: \'down()\', esc: \'close()\', enter: \'$select((data.items|filter: $select.search)[$select.index])\'}" ng-model="$select.search"> \
-        <ul class="ui-select-choices" /> \
+    '<div class="ui-select-container" ng-class="{\'ui-select-container-active ui-select-dropdown-open\':open}"> \
+      <a href="javascript:void(0)" class="ui-select-choice" ng-click="activate()"> \
+        <span class="select2-chosen">{{$select.selected.title || \'Select Me \' }}</span> \
+        <span class="ui-select-arrow"><b></b></span> \
+      </a> \
+      <div ng-class="{\'ui-select-display-none\':!open}" class="ui-select-drop ui-select-with-searchbox ui-select-drop-active"> \
+        <div class="ui-select-search"> \
+          <input class="ui-select-input" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ui-keydown="{up: \'up()\', down: \'down()\', esc: \'close()\', enter: \'$select((data.items|filter: $select.search)[$select.index])\'}" ng-model="$select.search"> \
+        </div> \
+        <ul class="ui-select-results" /> \
       </div> \
     </div>',
     replace: true,
@@ -18,6 +23,8 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
       return function($scope, $elm, $attrs, ngModel){
         transcludeFn($scope, function(clone) {
 
+          $scope.open = false;
+
           var getElementsByClassName = (function() {
             //To support IE8
             return document.getElementsByClassdName ?
@@ -29,9 +36,7 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
               };
           })();
 
-          var dropDiv = getElementsByClassName(tElement[0],'ui-select-drop');
-          var choices = getElementsByClassName(tElement[0],'ui-select-choices').append(clone);
-          dropDiv.append(choices);
+          getElementsByClassName(tElement[0],'ui-select-results').append(clone);
 
           var input = $elm.find('input');
           $scope.activate = function(){
@@ -66,9 +71,10 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
             $scope.open = false;
             $scope.$select.search = "";
           };
+          var choiceArrow = getElementsByClassName(tElement[0],'ui-select-arrow');
+          var searchDiv = getElementsByClassName(tElement[0],'ui-select-search');
           var dismissClickHandler = function (evt) {
-            //FIXME
-            if ($elm[0] !== evt.target.parentElement) {
+            if ($elm[0] !== evt.target.parentElement && choiceArrow[0] !== evt.target.parentElement && searchDiv[0] !== evt.target.parentElement) {
               $scope.close();
               $scope.$digest();
             }