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

Commit 6625fbc

Browse files
dimircdimirc
committed
chore(refactor): split code into multiple files
1 parent bacb9d0 commit 6625fbc

18 files changed

+1598
-1424
lines changed

‎examples/demo-multi-select.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,8 @@ <h3>Array of strings</h3>
121121
</ui-select>
122122
<p>Selected: {{multipleDemo.colors}}</p>
123123
<hr>
124-
<h3>Array of objects</h3>
125-
<ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;">
124+
<h3>Array of objects (sorting enabled)</h3>
125+
<ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" sortable="true" close-on-select="false" style="width: 800px;">
126126
<ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
127127
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
128128
<div ng-bind-html="person.name | highlight: $select.search"></div>

‎examples/demo-tagging.html

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@
6565
<h1>Tagging Demos</h1>
6666

6767
<h3>Simple String Tags</h3>
68-
<h4>(With Custom Tag Label)</h4>
69-
<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
68+
<h4>(With Custom Tag Label / Sort Enabled)</h4>
69+
<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" sortable="true" ng-disabled="disabled" style="width: 300px;" title="Choose a color">
7070
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
7171
<ui-select-choices repeat="color in availableColors | filter:$select.search">
7272
{{color}}
@@ -116,31 +116,7 @@ <h3>Object Tags with Tokenization (Space, Forward Slash, Comma)</h3>
116116
</ui-select>
117117
<p>Selected: {{multipleDemo.selectedPeople2}}</p>
118118

119-
<h3>Tagging without multiple</h3>
120-
<ui-select tagging="tagTransform" ng-model="person.selected" theme="bootstrap" ng-disabled="disabled" style="width: 800px;" title="Choose a person">
121-
<ui-select-match placeholder="Select person...">{{$select.selected.name}} &lt;{{$select.selected.email}}&gt;</ui-select-match>
122-
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
123-
<div ng-if="person.isTag" ng-bind-html="person.name +' <small>(new)</small>'| highlight: $select.search"></div>
124-
<div ng-if="!person.isTag" ng-bind-html="person.name + person.isTag| highlight: $select.search"></div>
125-
<small>
126-
email: {{person.email}}
127-
age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
128-
</small>
129-
</ui-select-choices>
130-
</ui-select>
131-
<p>Selected: {{person.selected}}</p>
132-
133-
<h3>Tagging without multiple, with simple strings</h3>
134-
<ui-select tagging tagging-label="('new')" ng-model="singleDemo.color" theme="bootstrap" style="width: 800px;" title="Choose a color">
135-
<ui-select-match placeholder="Select color...">{{$select.selected}}</ui-select-match>
136-
<ui-select-choices repeat="color in availableColors | filter: $select.search">
137-
<div ng-bind-html="color | highlight: $select.search"></div>
138-
</ui-select-choices>
139-
</ui-select>
140-
<p>Selected: {{singleDemo.color}}</p>
141-
142-
143119
<div style="height:500px"></div>
144120

145121
</body>
146-
</html>
122+
</html>

‎examples/select2-bootstrap3.html

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,21 @@
6464
</div>
6565
</div>
6666

67+
<div class="form-group">
68+
<label class="col-sm-3 control-label">Multiple</label>
69+
<div class="col-sm-6">
70+
71+
<ui-select multiple sortable="true" ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
72+
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
73+
<ui-select-choices repeat="item in people | filter: $select.search">
74+
<div ng-bind-html="item.name | highlight: $select.search"></div>
75+
<small ng-bind-html="item.email | highlight: $select.search"></small>
76+
</ui-select-choices>
77+
</ui-select>
78+
79+
</div>
80+
</div>
81+
6782
<div class="form-group">
6883
<label class="col-sm-3 control-label">Grouped</label>
6984
<div class="col-sm-6">
@@ -121,4 +136,4 @@
121136
</form>
122137

123138
</body>
124-
</html>
139+
</html>

‎gulpfile.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ var karma = require('karma').server;
44
var concat = require('gulp-concat');
55
var jshint = require('gulp-jshint');
66
var header = require('gulp-header');
7+
var footer = require('gulp-footer');
78
var rename = require('gulp-rename');
89
var es = require('event-stream');
910
var del = require('del');
@@ -50,10 +51,13 @@ gulp.task('scripts', ['clean'], function() {
5051
};
5152

5253
var buildLib = function(){
53-
return gulp.src('src/select.js')
54+
return gulp.src(['src/common.js','src/*.js'])
5455
.pipe(plumber({
5556
errorHandler: handleError
5657
}))
58+
.pipe(concat('select_without_templates.js'))
59+
.pipe(header('(function () { \n"use strict";\n'))
60+
.pipe(footer('\n}());'))
5761
.pipe(jshint())
5862
.pipe(jshint.reporter('jshint-stylish'))
5963
.pipe(jshint.reporter('fail'));
@@ -76,10 +80,11 @@ gulp.task('scripts', ['clean'], function() {
7680

7781
gulp.task('styles', ['clean'], function() {
7882

79-
return gulp.src('src/select.css')
83+
return gulp.src('src/common.css')
8084
.pipe(header(config.banner, {
8185
timestamp: (new Date()).toISOString(), pkg: config.pkg
8286
}))
87+
.pipe(rename('select.css'))
8388
.pipe(gulp.dest('dist'))
8489
.pipe(minifyCSS())
8590
.pipe(rename({ext:'.min.css'}))

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"gulp-angular-templatecache": "~1.2.1",
1616
"gulp-concat": "~2.1.7",
1717
"gulp-header": "~1.0.2",
18+
"gulp-footer": "~1.0.5",
1819
"gulp-jshint": "1.6.4",
1920
"gulp-minify-css": "~0.3.6",
2021
"gulp-minify-html": "~0.1.0",

‎src/RepeatParserService.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Parses "repeat" attribute.
3+
*
4+
* Taken from AngularJS ngRepeat source code
5+
* See https://github.com/angular/angular.js/blob/v1.2.15/src/ng/directive/ngRepeat.js#L211
6+
*
7+
* Original discussion about parsing "repeat" attribute instead of fully relying on ng-repeat:
8+
* https://github.com/angular-ui/ui-select/commit/5dd63ad#commitcomment-5504697
9+
*/
10+
11+
uis.service('RepeatParser', ['uiSelectMinErr','$parse', function(uiSelectMinErr, $parse) {
12+
var self = this;
13+
14+
/**
15+
* Example:
16+
* expression = "address in addresses | filter: {street: $select.search} track by $index"
17+
* itemName = "address",
18+
* source = "addresses | filter: {street: $select.search}",
19+
* trackByExp = "$index",
20+
*/
21+
self.parse = function(expression) {
22+
23+
var match = expression.match(/^\s*(?:([\s\S]+?)\s+as\s+)?([\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);
24+
25+
if (!match) {
26+
throw uiSelectMinErr('iexp', "Expected expression in form of '_item_ in _collection_[ track by _id_]' but got '{0}'.",
27+
expression);
28+
}
29+
30+
return {
31+
itemName: match[2], // (lhs) Left-hand side,
32+
source: $parse(match[3]),
33+
trackByExp: match[4],
34+
modelMapper: $parse(match[1] || match[2])
35+
};
36+
37+
};
38+
39+
self.getGroupNgRepeatExpression = function() {
40+
return '$group in $select.groups';
41+
};
42+
43+
self.getNgRepeatExpression = function(itemName, source, trackByExp, grouped) {
44+
var expression = itemName + ' in ' + (grouped ? '$group.items' : source);
45+
if (trackByExp) {
46+
expression += ' track by ' + trackByExp;
47+
}
48+
return expression;
49+
};
50+
}]);

‎src/bootstrap/match-multiple.tpl.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<span class="ui-select-match">
22
<span ng-repeat="$item in $select.selected">
33
<span
4-
style="margin-right: 3px;"
54
class="ui-select-match-item btn btn-default btn-xs"
65
tabindex="-1"
76
type="button"
87
ng-disabled="$select.disabled"
98
ng-click="$select.activeMatchIndex = $index;"
10-
ng-class="{'btn-primary':$select.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}">
9+
ng-class="{'btn-primary':$select.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}"
10+
ui-select-sort="$select.selected">
1111
<span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$select.removeChoice($index)">&nbsp;&times;</span>
1212
<span uis-transclude-append></span>
1313
</span>
1414
</span>
15-
</span>
15+
</span>

‎src/bootstrap/select-multiple.tpl.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
ng-click="$select.activate()"
1414
ng-model="$select.search"
1515
role="combobox"
16-
aria-label="{{ $select.baseTitle }}">
16+
aria-label="{{ $select.baseTitle }}"
17+
ondrop="return false;">
1718
</div>
1819
<div class="ui-select-choices"></div>
19-
</div>
20+
</div>

‎src/select.css renamed to ‎src/common.css

Lines changed: 44 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
/*!
2+
* ui-select
3+
* http://github.com/angular-ui/ui-select
4+
* Version: 0.9.5 - 2014-12-12T16:07:20.859Z
5+
* License: MIT
6+
*/
7+
8+
19
/* Style when highlighting a search. */
210
.ui-select-highlight {
311
font-weight: bold;
@@ -74,14 +82,11 @@
7482

7583
.ui-select-bootstrap .ui-select-toggle {
7684
position: relative;
77-
78-
/* Instead of center because of .btn */
79-
text-align: left;
8085
}
8186

8287
.ui-select-bootstrap .ui-select-toggle > .caret {
8388
position: absolute;
84-
height: 10px;
89+
height: 100%;
8590
top: 50%;
8691
right: 10px;
8792
margin-top: -2px;
@@ -99,6 +104,11 @@
99104
border-bottom-right-radius: 0;
100105
}
101106

107+
.ui-select-bootstrap > .ui-select-match {
108+
/* Instead of center because of .btn */
109+
text-align: left;
110+
}
111+
102112
.ui-select-bootstrap > .ui-select-match > .caret {
103113
position: absolute;
104114
top: 45%;
@@ -111,27 +121,54 @@
111121
height: auto;
112122
max-height: 200px;
113123
overflow-x: hidden;
124+
margin-top: -1px;
114125
}
115126

116127
.ui-select-multiple.ui-select-bootstrap {
117128
height: auto;
118-
padding: .3em;
129+
padding: 3px 3px 0 3px;
119130
}
120131

121132
.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
122133
background-color: transparent !important; /* To prevent double background when disabled */
123134
border: none;
124135
outline: none;
125136
height: 1.666666em;
137+
margin-bottom: 3px;
126138
}
127139

128140
.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
129141
font-size: 1.6em;
130142
line-height: 0.75;
131143
}
132144

133-
.ui-select-multiple.ui-select-bootstrap .ui-select-match-item{
145+
.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
134146
outline: 0;
147+
margin: 0 3px 3px 0;
148+
}
149+
150+
.ui-select-multiple .ui-select-match-item {
151+
position: relative;
152+
}
153+
154+
.ui-select-multiple .ui-select-match-item.dropping-before:before {
155+
content: "";
156+
position: absolute;
157+
top: 0;
158+
right: 100%;
159+
height: 100%;
160+
margin-right: 2px;
161+
border-left: 1px solid #428bca;
162+
}
163+
164+
.ui-select-multiple .ui-select-match-item.dropping-after:after {
165+
content: "";
166+
position: absolute;
167+
top: 0;
168+
left: 100%;
169+
height: 100%;
170+
margin-left: 2px;
171+
border-right: 1px solid #428bca;
135172
}
136173

137174
.ui-select-bootstrap .ui-select-choices-row>a {
@@ -173,4 +210,4 @@
173210
/* Mark invalid Bootstrap */
174211
.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
175212
border-color: #D44950;
176-
}
213+
}

0 commit comments

Comments
 (0)