[ Index ] |
PHP Cross Reference of Joomla 4.2.2 documentation |
[Summary view] [Print] [Text view]
1 /** 2 * Simple, lightweight, usable local autocomplete library for modern browsers 3 * Because there weren’t enough autocomplete scripts in the world? Because I’m completely insane and have NIH syndrome? Probably both. :P 4 * @author Lea Verou http://leaverou.github.io/awesomplete 5 * MIT license 6 */ 7 8 (function () { 9 10 var _ = function (input, o) { 11 var me = this; 12 13 // Keep track of number of instances for unique IDs 14 _.count = (_.count || 0) + 1; 15 this.count = _.count; 16 17 // Setup 18 19 this.isOpened = false; 20 21 this.input = $(input); 22 this.input.setAttribute("autocomplete", "off"); 23 this.input.setAttribute("aria-expanded", "false"); 24 this.input.setAttribute("aria-owns", "awesomplete_list_" + this.count); 25 this.input.setAttribute("role", "combobox"); 26 27 // store constructor options in case we need to distinguish 28 // between default and customized behavior later on 29 this.options = o = o || {}; 30 31 configure(this, { 32 minChars: 2, 33 maxItems: 10, 34 autoFirst: false, 35 data: _.DATA, 36 filter: _.FILTER_CONTAINS, 37 sort: o.sort === false ? false : _.SORT_BYLENGTH, 38 container: _.CONTAINER, 39 item: _.ITEM, 40 replace: _.REPLACE, 41 tabSelect: false 42 }, o); 43 44 this.index = -1; 45 46 // Create necessary elements 47 48 this.container = this.container(input); 49 50 this.ul = $.create("ul", { 51 hidden: "hidden", 52 role: "listbox", 53 id: "awesomplete_list_" + this.count, 54 inside: this.container 55 }); 56 57 this.status = $.create("span", { 58 className: "visually-hidden", 59 role: "status", 60 "aria-live": "assertive", 61 "aria-atomic": true, 62 inside: this.container, 63 textContent: this.minChars != 0 ? ("Type " + this.minChars + " or more characters for results.") : "Begin typing for results." 64 }); 65 66 // Bind events 67 68 this._events = { 69 input: { 70 "input": this.evaluate.bind(this), 71 "blur": this.close.bind(this, { reason: "blur" }), 72 "keydown": function(evt) { 73 var c = evt.keyCode; 74 75 // If the dropdown `ul` is in view, then act on keydown for the following keys: 76 // Enter / Esc / Up / Down 77 if(me.opened) { 78 if (c === 13 && me.selected) { // Enter 79 evt.preventDefault(); 80 me.select(undefined, undefined, evt); 81 } 82 else if (c === 9 && me.selected && me.tabSelect) { 83 me.select(undefined, undefined, evt); 84 } 85 else if (c === 27) { // Esc 86 me.close({ reason: "esc" }); 87 } 88 else if (c === 38 || c === 40) { // Down/Up arrow 89 evt.preventDefault(); 90 me[c === 38? "previous" : "next"](); 91 } 92 } 93 } 94 }, 95 form: { 96 "submit": this.close.bind(this, { reason: "submit" }) 97 }, 98 ul: { 99 // Prevent the default mousedowm, which ensures the input is not blurred. 100 // The actual selection will happen on click. This also ensures dragging the 101 // cursor away from the list item will cancel the selection 102 "mousedown": function(evt) { 103 evt.preventDefault(); 104 }, 105 // The click event is fired even if the corresponding mousedown event has called preventDefault 106 "click": function(evt) { 107 var li = evt.target; 108 109 if (li !== this) { 110 111 while (li && !/li/i.test(li.nodeName)) { 112 li = li.parentNode; 113 } 114 115 if (li && evt.button === 0) { // Only select on left click 116 evt.preventDefault(); 117 me.select(li, evt.target, evt); 118 } 119 } 120 } 121 } 122 }; 123 124 $.bind(this.input, this._events.input); 125 $.bind(this.input.form, this._events.form); 126 $.bind(this.ul, this._events.ul); 127 128 if (this.input.hasAttribute("list")) { 129 this.list = "#" + this.input.getAttribute("list"); 130 this.input.removeAttribute("list"); 131 } 132 else { 133 this.list = this.input.getAttribute("data-list") || o.list || []; 134 } 135 136 _.all.push(this); 137 }; 138 139 _.prototype = { 140 set list(list) { 141 if (Array.isArray(list)) { 142 this._list = list; 143 } 144 else if (typeof list === "string" && list.indexOf(",") > -1) { 145 this._list = list.split(/\s*,\s*/); 146 } 147 else { // Element or CSS selector 148 list = $(list); 149 150 if (list && list.children) { 151 var items = []; 152 slice.apply(list.children).forEach(function (el) { 153 if (!el.disabled) { 154 var text = el.textContent.trim(); 155 var value = el.value || text; 156 var label = el.label || text; 157 if (value !== "") { 158 items.push({ label: label, value: value }); 159 } 160 } 161 }); 162 this._list = items; 163 } 164 } 165 166 if (document.activeElement === this.input) { 167 this.evaluate(); 168 } 169 }, 170 171 get selected() { 172 return this.index > -1; 173 }, 174 175 get opened() { 176 return this.isOpened; 177 }, 178 179 close: function (o) { 180 if (!this.opened) { 181 return; 182 } 183 184 this.input.setAttribute("aria-expanded", "false"); 185 this.ul.setAttribute("hidden", ""); 186 this.isOpened = false; 187 this.index = -1; 188 189 this.status.setAttribute("hidden", ""); 190 191 $.fire(this.input, "awesomplete-close", o || {}); 192 }, 193 194 open: function () { 195 this.input.setAttribute("aria-expanded", "true"); 196 this.ul.removeAttribute("hidden"); 197 this.isOpened = true; 198 199 this.status.removeAttribute("hidden"); 200 201 if (this.autoFirst && this.index === -1) { 202 this.goto(0); 203 } 204 205 $.fire(this.input, "awesomplete-open"); 206 }, 207 208 destroy: function() { 209 //remove events from the input and its form 210 $.unbind(this.input, this._events.input); 211 $.unbind(this.input.form, this._events.form); 212 213 // cleanup container if it was created by Awesomplete but leave it alone otherwise 214 if (!this.options.container) { 215 //move the input out of the awesomplete container and remove the container and its children 216 var parentNode = this.container.parentNode; 217 218 parentNode.insertBefore(this.input, this.container); 219 parentNode.removeChild(this.container); 220 } 221 222 //remove autocomplete and aria-autocomplete attributes 223 this.input.removeAttribute("autocomplete"); 224 this.input.removeAttribute("aria-autocomplete"); 225 226 //remove this awesomeplete instance from the global array of instances 227 var indexOfAwesomplete = _.all.indexOf(this); 228 229 if (indexOfAwesomplete !== -1) { 230 _.all.splice(indexOfAwesomplete, 1); 231 } 232 }, 233 234 next: function () { 235 var count = this.ul.children.length; 236 this.goto(this.index < count - 1 ? this.index + 1 : (count ? 0 : -1) ); 237 }, 238 239 previous: function () { 240 var count = this.ul.children.length; 241 var pos = this.index - 1; 242 243 this.goto(this.selected && pos !== -1 ? pos : count - 1); 244 }, 245 246 // Should not be used, highlights specific item without any checks! 247 goto: function (i) { 248 var lis = this.ul.children; 249 250 if (this.selected) { 251 lis[this.index].setAttribute("aria-selected", "false"); 252 } 253 254 this.index = i; 255 256 if (i > -1 && lis.length > 0) { 257 lis[i].setAttribute("aria-selected", "true"); 258 259 this.status.textContent = lis[i].textContent + ", list item " + (i + 1) + " of " + lis.length; 260 261 this.input.setAttribute("aria-activedescendant", this.ul.id + "_item_" + this.index); 262 263 // scroll to highlighted element in case parent's height is fixed 264 this.ul.scrollTop = lis[i].offsetTop - this.ul.clientHeight + lis[i].clientHeight; 265 266 $.fire(this.input, "awesomplete-highlight", { 267 text: this.suggestions[this.index] 268 }); 269 } 270 }, 271 272 select: function (selected, origin, originalEvent) { 273 if (selected) { 274 this.index = $.siblingIndex(selected); 275 } else { 276 selected = this.ul.children[this.index]; 277 } 278 279 if (selected) { 280 var suggestion = this.suggestions[this.index]; 281 282 var allowed = $.fire(this.input, "awesomplete-select", { 283 text: suggestion, 284 origin: origin || selected, 285 originalEvent: originalEvent 286 }); 287 288 if (allowed) { 289 this.replace(suggestion); 290 this.close({ reason: "select" }); 291 $.fire(this.input, "awesomplete-selectcomplete", { 292 text: suggestion, 293 originalEvent: originalEvent 294 }); 295 } 296 } 297 }, 298 299 evaluate: function() { 300 var me = this; 301 var value = this.input.value; 302 303 if (value.length >= this.minChars && this._list && this._list.length > 0) { 304 this.index = -1; 305 // Populate list with options that match 306 this.ul.innerHTML = ""; 307 308 this.suggestions = this._list 309 .map(function(item) { 310 return new Suggestion(me.data(item, value)); 311 }) 312 .filter(function(item) { 313 return me.filter(item, value); 314 }); 315 316 if (this.sort !== false) { 317 this.suggestions = this.suggestions.sort(this.sort); 318 } 319 320 this.suggestions = this.suggestions.slice(0, this.maxItems); 321 322 this.suggestions.forEach(function(text, index) { 323 me.ul.appendChild(me.item(text, value, index)); 324 }); 325 326 if (this.ul.children.length === 0) { 327 328 this.status.textContent = "No results found"; 329 330 this.close({ reason: "nomatches" }); 331 332 } else { 333 this.open(); 334 335 this.status.textContent = this.ul.children.length + " results found"; 336 } 337 } 338 else { 339 this.close({ reason: "nomatches" }); 340 341 this.status.textContent = "No results found"; 342 } 343 } 344 }; 345 346 // Static methods/properties 347 348 _.all = []; 349 350 _.FILTER_CONTAINS = function (text, input) { 351 return RegExp($.regExpEscape(input.trim()), "i").test(text); 352 }; 353 354 _.FILTER_STARTSWITH = function (text, input) { 355 return RegExp("^" + $.regExpEscape(input.trim()), "i").test(text); 356 }; 357 358 _.SORT_BYLENGTH = function (a, b) { 359 if (a.length !== b.length) { 360 return a.length - b.length; 361 } 362 363 return a < b? -1 : 1; 364 }; 365 366 _.CONTAINER = function (input) { 367 return $.create("div", { 368 className: "awesomplete", 369 around: input 370 }); 371 } 372 373 _.ITEM = function (text, input, item_id) { 374 var html = input.trim() === "" ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>"); 375 return $.create("li", { 376 innerHTML: html, 377 "role": "option", 378 "aria-selected": "false", 379 "id": "awesomplete_list_" + this.count + "_item_" + item_id 380 }); 381 }; 382 383 _.REPLACE = function (text) { 384 this.input.value = text.value; 385 }; 386 387 _.DATA = function (item/*, input*/) { return item; }; 388 389 // Private functions 390 391 function Suggestion(data) { 392 var o = Array.isArray(data) 393 ? { label: data[0], value: data[1] } 394 : typeof data === "object" && "label" in data && "value" in data ? data : { label: data, value: data }; 395 396 this.label = o.label || o.value; 397 this.value = o.value; 398 } 399 Object.defineProperty(Suggestion.prototype = Object.create(String.prototype), "length", { 400 get: function() { return this.label.length; } 401 }); 402 Suggestion.prototype.toString = Suggestion.prototype.valueOf = function () { 403 return "" + this.label; 404 }; 405 406 function configure(instance, properties, o) { 407 for (var i in properties) { 408 var initial = properties[i], 409 attrValue = instance.input.getAttribute("data-" + i.toLowerCase()); 410 411 if (typeof initial === "number") { 412 instance[i] = parseInt(attrValue); 413 } 414 else if (initial === false) { // Boolean options must be false by default anyway 415 instance[i] = attrValue !== null; 416 } 417 else if (initial instanceof Function) { 418 instance[i] = null; 419 } 420 else { 421 instance[i] = attrValue; 422 } 423 424 if (!instance[i] && instance[i] !== 0) { 425 instance[i] = (i in o)? o[i] : initial; 426 } 427 } 428 } 429 430 // Helpers 431 432 var slice = Array.prototype.slice; 433 434 function $(expr, con) { 435 return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; 436 } 437 438 function $$(expr, con) { 439 return slice.call((con || document).querySelectorAll(expr)); 440 } 441 442 $.create = function(tag, o) { 443 var element = document.createElement(tag); 444 445 for (var i in o) { 446 var val = o[i]; 447 448 if (i === "inside") { 449 $(val).appendChild(element); 450 } 451 else if (i === "around") { 452 var ref = $(val); 453 ref.parentNode.insertBefore(element, ref); 454 element.appendChild(ref); 455 456 if (ref.getAttribute("autofocus") != null) { 457 ref.focus(); 458 } 459 } 460 else if (i in element) { 461 element[i] = val; 462 } 463 else { 464 element.setAttribute(i, val); 465 } 466 } 467 468 return element; 469 }; 470 471 $.bind = function(element, o) { 472 if (element) { 473 for (var event in o) { 474 var callback = o[event]; 475 476 event.split(/\s+/).forEach(function (event) { 477 element.addEventListener(event, callback); 478 }); 479 } 480 } 481 }; 482 483 $.unbind = function(element, o) { 484 if (element) { 485 for (var event in o) { 486 var callback = o[event]; 487 488 event.split(/\s+/).forEach(function(event) { 489 element.removeEventListener(event, callback); 490 }); 491 } 492 } 493 }; 494 495 $.fire = function(target, type, properties) { 496 var evt = document.createEvent("HTMLEvents"); 497 498 evt.initEvent(type, true, true ); 499 500 for (var j in properties) { 501 evt[j] = properties[j]; 502 } 503 504 return target.dispatchEvent(evt); 505 }; 506 507 $.regExpEscape = function (s) { 508 return s.replace(/[-\\^$*+?.()|[\]{}]/g, "\\$&"); 509 }; 510 511 $.siblingIndex = function (el) { 512 /* eslint-disable no-cond-assign */ 513 for (var i = 0; el = el.previousElementSibling; i++); 514 return i; 515 }; 516 517 // Initialization 518 519 function init() { 520 $$("input.awesomplete").forEach(function (input) { 521 new _(input); 522 }); 523 } 524 525 // Make sure to export Awesomplete on self when in a browser 526 if (typeof self !== "undefined") { 527 self.Awesomplete = _; 528 } 529 530 // Are we in a browser? Check for Document constructor 531 if (typeof Document !== "undefined") { 532 // DOM already loaded? 533 if (document.readyState !== "loading") { 534 init(); 535 } 536 else { 537 // Wait for it 538 document.addEventListener("DOMContentLoaded", init); 539 } 540 } 541 542 _.$ = $; 543 _.$$ = $$; 544 545 // Expose Awesomplete as a CJS module 546 if (typeof module === "object" && module.exports) { 547 module.exports = _; 548 } 549 550 return _; 551 552 }());
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Wed Sep 7 05:41:13 2022 | Chilli.vc Blog - For Webmaster,Blog-Writer,System Admin and Domainer |