Skip to content
This repository was archived by the owner on Oct 2, 2019. It is now read-only.

Commit f0b7d9a

Browse files
dimircdimirc
dimirc
authored and
dimirc
committed
Use select2.css styles as starting point
1 parent 293561f commit f0b7d9a

File tree

5 files changed

+658
-15
lines changed

5 files changed

+658
-15
lines changed

‎demo/index.html

+14-5
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,17 @@
1212
<script src="../src/select.js"></script>
1313
<script src="demo.js"></script>
1414

15-
<link rel="stylesheet" href="../src/select.css"/>
15+
<!-- <link rel="stylesheet" href="../src/select.css"/> -->
16+
<link rel="stylesheet" href="../src/select2.css"/>
17+
18+
<style>
19+
body {
20+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
21+
font-size: 14px;
22+
line-height: 20px;
23+
color: #333;
24+
}
25+
</style>
1626

1727
</head>
1828
<body ng-controller="MainCtrl">
@@ -21,16 +31,15 @@
2131
Selected: {{data.custom}}
2232
</p>
2333

24-
<ui-select ng-model="data.custom">
34+
<ui-select ng-model="data.custom" style="width:300px">
2535
<li
2636
ng-repeat="item in data.items | filter : $select.search"
27-
ng-class="{highlight:$select.index==$index}"
37+
ng-class="{'ui-select-highlighted':$select.index==$index}"
2838
ng-click="$select(item)"
2939
ng-mouseover="$select.index=$index">
30-
<h4>{{item.title}}</h4>
40+
<div class="ui-select-result-label">{{item.title}}</div>
3141
</li>
3242
</ui-select>
3343

34-
3544
</body>
3645
</html>

‎src/select.js

+16-10
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,16 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
33
restrict: 'E',
44
/* jshint multistr: true */
55
template:
6-
'<div class="select" ng-class="{open:open}"> \
7-
<button type="button" ng-click="activate()">{{$select.selected.title || \'Select Me \' }}</button> \
8-
<div class="ui-select-drop"> \
9-
<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"> \
10-
<ul class="ui-select-choices" /> \
6+
'<div class="ui-select-container" ng-class="{\'ui-select-container-active ui-select-dropdown-open\':open}"> \
7+
<a href="javascript:void(0)" class="ui-select-choice" ng-click="activate()"> \
8+
<span class="select2-chosen">{{$select.selected.title || \'Select Me \' }}</span> \
9+
<span class="ui-select-arrow"><b></b></span> \
10+
</a> \
11+
<div ng-class="{\'ui-select-display-none\':!open}" class="ui-select-drop ui-select-with-searchbox ui-select-drop-active"> \
12+
<div class="ui-select-search"> \
13+
<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"> \
14+
</div> \
15+
<ul class="ui-select-results" /> \
1116
</div> \
1217
</div>',
1318
replace: true,
@@ -18,6 +23,8 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
1823
return function($scope, $elm, $attrs, ngModel){
1924
transcludeFn($scope, function(clone) {
2025

26+
$scope.open = false;
27+
2128
var getElementsByClassName = (function() {
2229
//To support IE8
2330
return document.getElementsByClassdName ?
@@ -29,9 +36,7 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
2936
};
3037
})();
3138

32-
var dropDiv = getElementsByClassName(tElement[0],'ui-select-drop');
33-
var choices = getElementsByClassName(tElement[0],'ui-select-choices').append(clone);
34-
dropDiv.append(choices);
39+
getElementsByClassName(tElement[0],'ui-select-results').append(clone);
3540

3641
var input = $elm.find('input');
3742
$scope.activate = function(){
@@ -66,9 +71,10 @@ angular.module('ui.select', ['ui.keypress']).directive('uiSelect', function($doc
6671
$scope.open = false;
6772
$scope.$select.search = "";
6873
};
74+
var choiceArrow = getElementsByClassName(tElement[0],'ui-select-arrow');
75+
var searchDiv = getElementsByClassName(tElement[0],'ui-select-search');
6976
var dismissClickHandler = function (evt) {
70-
//FIXME
71-
if ($elm[0] !== evt.target.parentElement) {
77+
if ($elm[0] !== evt.target.parentElement && choiceArrow[0] !== evt.target.parentElement && searchDiv[0] !== evt.target.parentElement) {
7278
$scope.close();
7379
$scope.$digest();
7480
}

0 commit comments

Comments
 (0)