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 | }); | ||
