()
| 494 | } |
| 495 | |
| 496 | createDropdown() { |
| 497 | // create dropdown entries |
| 498 | let rootModelList = this.createRootModelList(this.inputModels) |
| 499 | this.modelFilter.insertAdjacentElement("afterend", rootModelList) |
| 500 | this.modelFilter.insertAdjacentElement( |
| 501 | "afterend", |
| 502 | createElement("i", { id: `${this.modelFilter.id}-model-filter-arrow` }, [ |
| 503 | "model-selector-arrow", |
| 504 | "fa-solid", |
| 505 | "fa-angle-down", |
| 506 | ]) |
| 507 | ) |
| 508 | this.modelFilter.classList.add("model-selector") |
| 509 | this.modelFilterArrow = document.querySelector(`#${this.modelFilter.id}-model-filter-arrow`) |
| 510 | if (this.modelFilterArrow) { |
| 511 | this.modelFilterArrow.style.color = this.modelFilter.disabled ? "dimgray" : "" |
| 512 | } |
| 513 | this.modelList = document.querySelector(`#${this.modelFilter.id}-model-list`) |
| 514 | this.modelResult = document.querySelector(`#${this.modelFilter.id}-model-result`) |
| 515 | this.modelNoResult = document.querySelector(`#${this.modelFilter.id}-model-no-result`) |
| 516 | |
| 517 | if (this.modelFilterInitialized !== true) { |
| 518 | this.modelFilter.addEventListener("input", this.bind(this.filterList, this)) |
| 519 | this.modelFilter.addEventListener("focus", this.bind(this.modelListFocus, this)) |
| 520 | this.modelFilter.addEventListener("blur", this.bind(this.hideModelList, this)) |
| 521 | this.modelFilter.addEventListener("click", this.bind(this.showModelList, this)) |
| 522 | this.modelFilter.addEventListener("keydown", this.bind(this.processKey, this)) |
| 523 | |
| 524 | this.modelFilterInitialized = true |
| 525 | } |
| 526 | this.modelFilterArrow.addEventListener("mousedown", this.bind(this.toggleModelList, this)) |
| 527 | this.modelList.addEventListener("mousemove", this.bind(this.highlightModelAtPosition, this)) |
| 528 | this.modelList.addEventListener("mousedown", this.bind(this.processClick, this)) |
| 529 | |
| 530 | let mf = this.modelFilter |
| 531 | this.modelFilter.addEventListener("focus", function () { |
| 532 | let modelFilterStyle = window.getComputedStyle(mf) |
| 533 | rootModelList.style.minWidth = modelFilterStyle.width |
| 534 | }) |
| 535 | |
| 536 | this.selectEntry(this.activeModel, false) |
| 537 | } |
| 538 | |
| 539 | /** |
| 540 | * @param {Array<string | object} modelTree |
no test coverage detected