Skip to content

Commit a3e67b9

Browse files
mateusmirandaalmeidamateusmirandaalmeida
committed
Implementado buscas assincrona/
1 parent 63c9d31 commit a3e67b9

File tree

10 files changed

+254
-101
lines changed

10 files changed

+254
-101
lines changed

‎bower.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-ui-multi-select",
3-
"version": "1.1.0",
3+
"version": "1.2.0",
44
"description": "ng-ui-multi-select",
55
"main": "./src/index.js",
66
"authors": [

‎dist/ng-ui-multi-select.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,3 +166,49 @@ ui-multi-select > div > ul li:hover{
166166
background: rgb(238,238,238);
167167
cursor: pointer;
168168
}
169+
170+
ui-multi-select .progress {
171+
max-width: 100%;
172+
overflow: hidden;
173+
background: #ddd;
174+
left: 0;
175+
width: 100%;
176+
border-radius: 0;
177+
height: 2px;
178+
bottom: 0;
179+
margin: 0;
180+
padding: 0;
181+
}
182+
183+
ui-multi-select .indeterminate {
184+
position: absolute;
185+
width: 100%;
186+
height: 2px;
187+
transform: translateZ(0);
188+
}
189+
ui-multi-select .indeterminate:before, .indeterminate:after {
190+
content: '';
191+
position: absolute;
192+
background-color: #6639B6;
193+
top: 0;
194+
left: 0;
195+
width: 100%;
196+
height: 100%;
197+
}
198+
ui-multi-select .indeterminate:before {
199+
animation: indeterminate 3s cubic-bezier(0.195, 0.36, 0.945, 1.65) infinite;
200+
}
201+
ui-multi-select .indeterminate:after {
202+
animation: indeterminate 3s cubic-bezier(0.9, -0.59, 0.715, 1.045) infinite;
203+
}
204+
205+
@keyframes indeterminate {
206+
0% {
207+
width: 0%;
208+
transform: translateX(-100%);
209+
}
210+
100% {
211+
width: 100%;
212+
transform: translateX(100%);
213+
}
214+
}

‎dist/ng-ui-multi-select.js‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ var MultiSelectItem = {
153153
};
154154

155155
document.addEventListener('keydown', function (evt) {
156-
if (ctrl.ngValue && $element.find('div.item-container').hasClass('item-focused')) {
156+
if (evt.target.nodeName != 'INPUT' && ctrl.ngValue && $element.find('div.item-container').hasClass('item-focused')) {
157157
switch (evt.keyCode) {
158158
case 8:
159159
ctrl.uiMultiSelectCtrl.handlingBackspace(evt);
@@ -252,19 +252,34 @@ var MultiSelect = {
252252
'options': '?uiMultiSelectOption',
253253
'items': '?uiMultiSelectItem'
254254
},
255-
template: '\n <div>\n <div ng-transclude="items"></div>\n <input placeholder="{{$ctrl.placeholder}}"\n data-ng-model="$ctrl.inputValue"\n tabindex="0"\n ng-class="{\'item-disabled\' : $ctrl.ngDisabled}"\n data-ng-click="$ctrl.open($event)"\n data-ng-disabled="$ctrl.ngDisabled"\n data-ng-focus="$ctrl.removeFocusedItems();"\n data-ng-keyup="$ctrl.keyPress($event)"\n style="{{$ctrl.ngModel.length == 0 ? \'width: 100%\' : \'\'}}" />\n <ul ng-transclude="options" class="options">\n </ul>\n <span class="select-clearfix"></span>\n </div>\n ',
255+
template: '\n <div>\n <div ng-transclude="items"></div>\n <input placeholder="{{$ctrl.placeholder}}"\n data-ng-model="$ctrl.inputValue"\n data-ng-model-options="{debounce: 1000}"\n data-ng-change="$ctrl.changeModel($ctrl.inputValue)"\n tabindex="0"\n ng-class="{\'item-disabled\' : $ctrl.ngDisabled}"\n data-ng-click="$ctrl.open($event)"\n data-ng-disabled="$ctrl.ngDisabled"\n data-ng-focus="$ctrl.removeFocusedItems();"\n data-ng-keyup="$ctrl.keyPress($event)"\n style="{{$ctrl.ngModel.length == 0 ? \'width: 100%\' : \'\'}}" />\n <div class="progress indeterminate" ng-show="$ctrl.loading"></div>\n <ul ng-transclude="options" class="options">\n </ul>\n <span class="select-clearfix"></span>\n </div>\n ',
256256
bindings: {
257257
ngModel: '=',
258258
ngDisabled: '=?',
259259
closeOnSelectItem: '=?',
260260
placeholder: '@?',
261261
searchField: '@?',
262262
tagging: '&?',
263-
taggingModel: '=?'
263+
taggingModel: '=?',
264+
searchOptions: '&?', //metodo de buscar novas opções
265+
onSelected: '&?', //evento ao selecionar um item
266+
onRemove: '&?' //evento ao remover um item
264267
},
265268
controller: ['$scope', '$attrs', '$timeout', '$element', function ($scope, $attrs, $timeout, $element) {
266269
var ctrl = this;
267270

271+
ctrl.changeModel = function (value) {
272+
if (ctrl.searchOptions) {
273+
ctrl.loading = true;
274+
if (value == undefined || value == null) value = '';
275+
ctrl.searchOptions({ value: value }).then(function (resp) {
276+
ctrl.loading = false;
277+
}, function (err) {
278+
ctrl.loading = false;
279+
});
280+
}
281+
};
282+
268283
ctrl.open = function (evt) {
269284
if (evt) evt.stopPropagation();
270285
var ul = $element.find('ul');
@@ -287,6 +302,9 @@ var MultiSelect = {
287302
};
288303

289304
ctrl.removeFocusedItems = function () {
305+
if ($element.find('ui-multi-select-option').find('li.option-container').length == 0) {
306+
ctrl.changeModel();
307+
}
290308
angular.forEach($element.find('ui-multi-select-item div.item-container'), function (itemContainer) {
291309
angular.element(itemContainer).removeClass('item-focused');
292310
});
@@ -488,7 +506,7 @@ var MultiSelect = {
488506
if (result != null && result != undefined) {
489507
ctrl.addTagging(result);
490508
ctrl.addItem(result, evt);
491-
delete ctrl.inputValue;
509+
ctrl.inputValue = '';
492510
}
493511
}
494512
}
@@ -545,6 +563,9 @@ var MultiSelect = {
545563
if (ctrl.closeOnSelectItem == undefined || !ctrl.closeOnSelectItem) {
546564
evt.stopPropagation();
547565
}
566+
if (ctrl.onSelected) {
567+
ctrl.onSelected({ value: value });
568+
}
548569
};
549570

550571
ctrl.removeItem = function (value, evt) {
@@ -558,6 +579,9 @@ var MultiSelect = {
558579
if ((ctrl.closeOnSelectItem == undefined || !ctrl.closeOnSelectItem) && evt) {
559580
evt.stopPropagation();
560581
}
582+
if (ctrl.onRemove) {
583+
ctrl.onRemove({ value: value });
584+
}
561585
};
562586

563587
ctrl.itemIsSelect = function (item) {

‎dist/ng-ui-multi-select.min.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,3 +166,49 @@ ui-multi-select > div > ul li:hover{
166166
background: rgb(238,238,238);
167167
cursor: pointer;
168168
}
169+
170+
ui-multi-select .progress {
171+
max-width: 100%;
172+
overflow: hidden;
173+
background: #ddd;
174+
left: 0;
175+
width: 100%;
176+
border-radius: 0;
177+
height: 2px;
178+
bottom: 0;
179+
margin: 0;
180+
padding: 0;
181+
}
182+
183+
ui-multi-select .indeterminate {
184+
position: absolute;
185+
width: 100%;
186+
height: 2px;
187+
transform: translateZ(0);
188+
}
189+
ui-multi-select .indeterminate:before, .indeterminate:after {
190+
content: '';
191+
position: absolute;
192+
background-color: #6639B6;
193+
top: 0;
194+
left: 0;
195+
width: 100%;
196+
height: 100%;
197+
}
198+
ui-multi-select .indeterminate:before {
199+
animation: indeterminate 3s cubic-bezier(0.195, 0.36, 0.945, 1.65) infinite;
200+
}
201+
ui-multi-select .indeterminate:after {
202+
animation: indeterminate 3s cubic-bezier(0.9, -0.59, 0.715, 1.045) infinite;
203+
}
204+
205+
@keyframes indeterminate {
206+
0% {
207+
width: 0%;
208+
transform: translateX(-100%);
209+
}
210+
100% {
211+
width: 100%;
212+
transform: translateX(100%);
213+
}
214+
}

‎dist/ng-ui-multi-select.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 55 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -16,33 +16,38 @@
1616
<main>
1717
<div class="container">
1818

19-
<div class="panel panel-default">
20-
<div class="panel-body">
21-
<h3>Instalação Bower: </h3>
22-
<div class="row">
23-
<div class="col-xs-12">
24-
<label>bower install ng-ui-multi-select --save</label> <br>
25-
Importe o arquivo JavaScript: <br>
26-
<code class="prettyprint">&lt;script src="bower_components/ng-ui-multi-select/dist/ng-ui-multi-select.min.js"&gt;&lt;/script&gt;</code> <br>
27-
E também o arquivo CSS: <br>
28-
<code class="prettyprint">&lt;link rel="stylesheet" href="bower_components/ng-ui-multi-select/dist/ng-ui-multi-select.min.css"/&gt;</code>
19+
<div class="row">
20+
<div class="col-md-6">
21+
<div class="panel panel-default">
22+
<div class="panel-body">
23+
<h3>Instalação Bower: </h3>
24+
<div class="row">
25+
<div class="col-xs-12">
26+
<label>bower install ng-ui-multi-select --save</label> <br>
27+
Importe o arquivo JavaScript: <br>
28+
<code class="prettyprint">&lt;script src="bower_components/ng-ui-multi-select/dist/ng-ui-multi-select.min.js"&gt;&lt;/script&gt;</code> <br>
29+
E também o arquivo CSS: <br>
30+
<code class="prettyprint">&lt;link rel="stylesheet" href="bower_components/ng-ui-multi-select/dist/ng-ui-multi-select.min.css"/&gt;</code>
31+
</div>
32+
</div> <br>
2933
</div>
30-
</div> <br>
34+
</div>
3135
</div>
32-
</div>
33-
34-
<div class="panel panel-default">
35-
<div class="panel-body">
36-
<h3>Instalação NPM: </h3>
37-
<div class="row">
38-
<div class="col-xs-12">
39-
<label>npm install ng-ui-multi-select --save</label> <br>
40-
Importe o arquivo JavaScript: <br>
41-
<code class="prettyprint">&lt;script src="node_modules/ng-ui-multi-select/dist/ng-ui-multi-select.min.js"&gt;&lt;/script&gt;</code> <br>
42-
E também o arquivo CSS: <br>
43-
<code class="prettyprint">&lt;link rel="stylesheet" href="node_modules/ng-ui-multi-select/dist/ng-ui-multi-select.min.css"/&gt;</code>
36+
<div class="col-md-6">
37+
<div class="panel panel-default">
38+
<div class="panel-body">
39+
<h3>Instalação NPM: </h3>
40+
<div class="row">
41+
<div class="col-xs-12">
42+
<label>npm install ng-ui-multi-select --save</label> <br>
43+
Importe o arquivo JavaScript: <br>
44+
<code class="prettyprint">&lt;script src="node_modules/ng-ui-multi-select/dist/ng-ui-multi-select.min.js"&gt;&lt;/script&gt;</code> <br>
45+
E também o arquivo CSS: <br>
46+
<code class="prettyprint">&lt;link rel="stylesheet" href="node_modules/ng-ui-multi-select/dist/ng-ui-multi-select.min.css"/&gt;</code>
47+
</div>
48+
</div> <br>
4449
</div>
45-
</div> <br>
50+
</div>
4651
</div>
4752
</div>
4853

@@ -60,72 +65,16 @@ <h3>Importação do módulo:</h3>
6065

6166
<div class="row">
6267
<div class="col-md-12">
63-
<div class="form-group">
64-
<label>Funcionarios: </label>
65-
66-
<ui-multi-select placeholder="Buscar..."
67-
ng-model="funcionarios"
68-
close-on-select-item="false"
69-
tagging="addItem(value)"
70-
tagging-model="items"
71-
ng-disabled="disabled">
72-
<ui-multi-select-item ng-repeat="item in funcionarios" ng-value="item">
73-
{{item.nome}}
74-
</ui-multi-select-item>
75-
<ui-multi-select-option ng-repeat="option in items" ng-value="option">
76-
{{option.nome}}
77-
</ui-multi-select-option>
78-
</ui-multi-select>
79-
80-
</div>
81-
82-
</div>
83-
84-
<div class="col-md-8">
85-
<label>Model: </label>
86-
<pre>{{funcionarios|json}}</pre>
87-
</div>
88-
</div>
89-
90-
<div class="row" ng-non-bindable>
91-
<div class="col-md-6">
92-
<h3>HTML</h3>
93-
<pre><code style="font-size: 10px;" class="prettyprint">&lt;div class="form-group"&gt;
94-
&lt;label&gt;Funcionarios: &lt;/label&gt;
95-
&lt;ui-multi-select placeholder="Buscar..."
96-
close-on-select-item="false"
97-
ng-model="funcionarios"
98-
tagging="addItem(value)"
99-
tagging-model="items"&gt;
100-
&lt;ui-multi-select-item ng-repeat="item in funcionarios"
101-
ng-value="item"&gt;
102-
{{item.nome}}
103-
&lt;/ui-multi-select-item&gt;
104-
&lt;ui-multi-select-option ng-repeat="option in items"
105-
ng-value="option"&gt;
106-
{{option.nome}}
107-
&lt;/ui-multi-select-option&gt;
108-
&lt;/ui-multi-select&gt;
109-
&lt;/div&gt;</code></pre>
110-
</div>
111-
<div class="col-md-6">
112-
<h3>JavaScript</h3>
113-
<pre><code style="font-size: 10px;" class="prettyprint">angular.module('app', ['ngUiMultiSelect'])
114-
.controller('ctrl', function($scope, $timeout){
115-
$scope.selectedItems = [];
116-
117-
$scope.items = [
118-
{ nome: 'Mateus', idade: 20},
119-
{ nome: 'Thalita', idade: 19},
120-
{ nome: 'Willian', idade: 25},
121-
{ nome: 'Felipe', idade: 25},
122-
{ nome: 'Munif', idade: 50}
123-
];
124-
125-
$scope.addItem = function(value){
126-
return { nome: value }
127-
};
128-
})</code></pre>
68+
<div class="panel panel-default">
69+
<div class="panel-body">
70+
<h3>Exemplos:</h3>
71+
<ul class="">
72+
<li><a href="simple-array.html">Array</a> - Opções de um array simples</li>
73+
<li><a href="tagging.html">Tagging</a> - Possibilitar que o usuário adicione items.</li>
74+
<li><a href="async.html">Array Async</a> - Possibilitar que as opções sejam assíncronas.</li>
75+
</ul>
76+
</div>
77+
</div>
12978
</div>
13079
</div>
13180

@@ -177,6 +126,22 @@ <h1>ui-multi-select</h1>
177126
[Boolean] - Atributo que decide se vai fechar ou não a caixa de opções.
178127
</td>
179128
</tr>
129+
<tr>
130+
<td>
131+
on-selected
132+
</td>
133+
<td>
134+
[Function] - Função executada ao selecionar um novo item. Ex: minhafuncao(value);
135+
</td>
136+
</tr>
137+
<tr>
138+
<td>
139+
on-remove
140+
</td>
141+
<td>
142+
[Function] - Função executada ao remover um item. Ex: minhafuncao(value);
143+
</td>
144+
</tr>
180145
<tr>
181146
<td>
182147
tagging
@@ -289,7 +254,6 @@ <h1>ui-multi-select-option</h1>
289254

290255
$scope.items = [
291256
{ nome: 'Mateus', idade: 20},
292-
{ nome: 'Thalita', idade: 19},
293257
{ nome: 'Willian', idade: 25},
294258
{ nome: 'Felipe', idade: 25},
295259
{ nome: 'Munif', idade: 50}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ng-ui-multi-select",
3-
"version": "1.1.0",
3+
"version": "1.2.0",
44
"description": "ng-ui-multi-select",
55
"main": "./src/index.js",
66
"directories": {

‎src/multi-select-item.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ const MultiSelectItem = {
8484
}
8585

8686
document.addEventListener('keydown', evt => {
87-
if(ctrl.ngValue && $element.find('div.item-container').hasClass('item-focused')){
87+
if(evt.target.nodeName != 'INPUT' && ctrl.ngValue && $element.find('div.item-container').hasClass('item-focused')){
8888
switch (evt.keyCode) {
8989
case 8:
9090
ctrl.uiMultiSelectCtrl.handlingBackspace(evt);

0 commit comments

Comments
 (0)