summaryrefslogtreecommitdiff
path: root/js/components/autocomplete.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/components/autocomplete.js')
-rwxr-xr-xjs/components/autocomplete.js334
1 files changed, 0 insertions, 334 deletions
diff --git a/js/components/autocomplete.js b/js/components/autocomplete.js
deleted file mode 100755
index 58a405d..0000000
--- a/js/components/autocomplete.js
+++ /dev/null
@@ -1,334 +0,0 @@
1/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
2(function(addon) {
3
4 var component;
5
6 if (window.UIkit) {
7 component = addon(UIkit);
8 }
9
10 if (typeof define == "function" && define.amd) {
11 define("uikit-autocomplete", ["uikit"], function(){
12 return component || addon(UIkit);
13 });
14 }
15
16})(function(UI){
17
18 "use strict";
19
20 var active;
21
22 UI.component('autocomplete', {
23
24 defaults: {
25 minLength: 3,
26 param: 'search',
27 method: 'post',
28 delay: 300,
29 loadingClass: 'uk-loading',
30 flipDropdown: false,
31 skipClass: 'uk-skip',
32 hoverClass: 'uk-active',
33 source: null,
34 renderer: null,
35
36 // template
37
38 template: '<ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results">{{~items}}<li data-value="{{$item.value}}"><a>{{$item.value}}</a></li>{{/items}}</ul>'
39 },
40
41 visible : false,
42 value : null,
43 selected : null,
44
45 boot: function() {
46
47 // init code
48 UI.$html.on("focus.autocomplete.uikit", "[data-uk-autocomplete]", function(e) {
49
50 var ele = UI.$(this);
51
52 if (!ele.data("autocomplete")) {
53 UI.autocomplete(ele, UI.Utils.options(ele.attr("data-uk-autocomplete")));
54 }
55 });
56
57 // register outer click for autocompletes
58 UI.$html.on("click.autocomplete.uikit", function(e) {
59 if (active && e.target!=active.input[0]) active.hide();
60 });
61 },
62
63 init: function() {
64
65 var $this = this,
66 select = false,
67 trigger = UI.Utils.debounce(function(e) {
68 if(select) {
69 return (select = false);
70 }
71 $this.handle();
72 }, this.options.delay);
73
74
75 this.dropdown = this.find('.uk-dropdown');
76 this.template = this.find('script[type="text/autocomplete"]').html();
77 this.template = UI.Utils.template(this.template || this.options.template);
78 this.input = this.find("input:first").attr("autocomplete", "off");
79
80 if (!this.dropdown.length) {
81 this.dropdown = UI.$('<div class="uk-dropdown"></div>').appendTo(this.element);
82 }
83
84 if (this.options.flipDropdown) {
85 this.dropdown.addClass('uk-dropdown-flip');
86 }
87
88 this.dropdown.attr('aria-expanded', 'false');
89
90 this.input.on({
91 "keydown": function(e) {
92
93 if (e && e.which && !e.shiftKey) {
94
95 switch (e.which) {
96 case 13: // enter
97 select = true;
98
99 if ($this.selected) {
100 e.preventDefault();
101 $this.select();
102 }
103 break;
104 case 38: // up
105 e.preventDefault();
106 $this.pick('prev', true);
107 break;
108 case 40: // down
109 e.preventDefault();
110 $this.pick('next', true);
111 break;
112 case 27:
113 case 9: // esc, tab
114 $this.hide();
115 break;
116 default:
117 break;
118 }
119 }
120
121 },
122 "keyup": trigger
123 });
124
125 this.dropdown.on("click", ".uk-autocomplete-results > *", function(){
126 $this.select();
127 });
128
129 this.dropdown.on("mouseover", ".uk-autocomplete-results > *", function(){
130 $this.pick(UI.$(this));
131 });
132
133 this.triggercomplete = trigger;
134 },
135
136 handle: function() {
137
138 var $this = this, old = this.value;
139
140 this.value = this.input.val();
141
142 if (this.value.length < this.options.minLength) return this.hide();
143
144 if (this.value != old) {
145 $this.request();
146 }
147
148 return this;
149 },
150
151 pick: function(item, scrollinview) {
152
153 var $this = this,
154 items = UI.$(this.dropdown.find('.uk-autocomplete-results').children(':not(.'+this.options.skipClass+')')),
155 selected = false;
156
157 if (typeof item !== "string" && !item.hasClass(this.options.skipClass)) {
158 selected = item;
159 } else if (item == 'next' || item == 'prev') {
160
161 if (this.selected) {
162 var index = items.index(this.selected);
163
164 if (item == 'next') {
165 selected = items.eq(index + 1 < items.length ? index + 1 : 0);
166 } else {
167 selected = items.eq(index - 1 < 0 ? items.length - 1 : index - 1);
168 }
169
170 } else {
171 selected = items[(item == 'next') ? 'first' : 'last']();
172 }
173
174 selected = UI.$(selected);
175 }
176
177 if (selected && selected.length) {
178 this.selected = selected;
179 items.removeClass(this.options.hoverClass);
180 this.selected.addClass(this.options.hoverClass);
181
182 // jump to selected if not in view
183 if (scrollinview) {
184
185 var top = selected.position().top,
186 scrollTop = $this.dropdown.scrollTop(),
187 dpheight = $this.dropdown.height();
188
189 if (top > dpheight || top < 0) {
190 $this.dropdown.scrollTop(scrollTop + top);
191 }
192 }
193 }
194 },
195
196 select: function() {
197
198 if(!this.selected) return;
199
200 var data = this.selected.data();
201
202 this.trigger("selectitem.uk.autocomplete", [data, this]);
203
204 if (data.value) {
205 this.input.val(data.value).trigger('change');
206 }
207
208 this.hide();
209 },
210
211 show: function() {
212 if (this.visible) return;
213 this.visible = true;
214 this.element.addClass("uk-open");
215
216 if (active && active!==this) {
217 active.hide();
218 }
219
220 active = this;
221
222 // Update aria
223 this.dropdown.attr('aria-expanded', 'true');
224
225 return this;
226 },
227
228 hide: function() {
229 if (!this.visible) return;
230 this.visible = false;
231 this.element.removeClass("uk-open");
232
233 if (active === this) {
234 active = false;
235 }
236
237 // Update aria
238 this.dropdown.attr('aria-expanded', 'false');
239
240 return this;
241 },
242
243 request: function() {
244
245 var $this = this,
246 release = function(data) {
247
248 if(data) {
249 $this.render(data);
250 }
251
252 $this.element.removeClass($this.options.loadingClass);
253 };
254
255 this.element.addClass(this.options.loadingClass);
256
257 if (this.options.source) {
258
259 var source = this.options.source;
260
261 switch(typeof(this.options.source)) {
262 case 'function':
263
264 this.options.source.apply(this, [release]);
265
266 break;
267
268 case 'object':
269
270 if(source.length) {
271
272 var items = [];
273
274 source.forEach(function(item){
275 if(item.value && item.value.toLowerCase().indexOf($this.value.toLowerCase())!=-1) {
276 items.push(item);
277 }
278 });
279
280 release(items);
281 }
282
283 break;
284
285 case 'string':
286
287 var params ={};
288
289 params[this.options.param] = this.value;
290
291 UI.$.ajax({
292 url: this.options.source,
293 data: params,
294 type: this.options.method,
295 dataType: 'json'
296 }).done(function(json) {
297 release(json || []);
298 });
299
300 break;
301
302 default:
303 release(null);
304 }
305
306 } else {
307 this.element.removeClass($this.options.loadingClass);
308 }
309 },
310
311 render: function(data) {
312
313 this.dropdown.empty();
314
315 this.selected = false;
316
317 if (this.options.renderer) {
318
319 this.options.renderer.apply(this, [data]);
320
321 } else if(data && data.length) {
322
323 this.dropdown.append(this.template({"items":data}));
324 this.show();
325
326 this.trigger('show.uk.autocomplete');
327 }
328
329 return this;
330 }
331 });
332
333 return UI.autocomplete;
334});