diff options
Diffstat (limited to 'js/components/autocomplete.js')
-rwxr-xr-x | js/components/autocomplete.js | 334 |
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 | }); | ||