testMultiSelect = { const Data = { "name": "multipleSelection", "category": "2. Strings", "type": "char", "shape": "row", "domain": ["a","multi","set","to","select","EvenIfAnEntryIsVeryLong","and","theTotal","length","isCrazy!"], "value": ["a", "multi"], "readOnly": false, "hidden": false }; const Data2 = { "name": "multipleSelection2", "category": "2. Strings", "type": "char", "shape": "row", "domain": ["a","multi","set","to","select","EvenIfAnEntryIsVeryLong","and","theTotal","length","isCrazy!"], "value": ["a", "set"], "readOnly": false, "hidden": false }; /* TODO: * Make the dropdown box "float" over everything like the builtin dropdown boxes. It is currently clipped by the viewport. Maybe this isnt needed, but I may need to change the position depending on where the cell is relative to the html boundary. * Hook up search filter (onInput method) to only show the entries containing the text */ class MSel { constructor({container,data,id}={}) { this._uniqueId = id || 'sel'; this._parent = container || DOM.element('div'); this._parent.id = "multiselect-parent"; this._shadow = this._parent.attachShadow({mode:"open"}); this._shadow.innerHTML = ``; // set data this._selectionCount = 0; this._data = data || {}; this.parse(); // construct the ui this.createUi(); this.bind(); // set the initial view this.update(); // initialize list showing status this._isListShowing = false; } // Render render() { return this._parent; } // Parser parse() { if (!this.isReady) return; var value = this._data.value; this._optionCount = this._data.domain.length; // Items are ordered as they are presented. this._items = this._data.domain.map((name,idx) => { if (~Array.isArray(value)) value = Array.from(value); const isChecked = value.length ? value.some((d) => d === name ) : false; let item = { id: name, index: idx, text: humanize(name), element: MSel.createItem("li",name,humanize(name),isChecked), get selected() { let input = this.element.input; return input.checked; }, set selected(bool) { // allow setting selected to be the mechanism for checking/unchecking // the checkbox this.element.input.checked = bool; } }; return item; }); } // Create UI createUi() { if (!this.isReady) return; // create the input field const wrap = DOM.element("div"); wrap.classList.add("multiselect-input-div"); const input = DOM.element("input"); input.id = this.InputFieldId; input.classList.add("multiselect-input"); input.setAttribute("autocomplete","off"); input.setAttribute("type","text"); const counter = DOM.element("label"); counter.id = this.InputBadgeId; counter.classList.add("multiselect-count"); counter.setAttribute("for",this.InputFieldId); counter.innerHTML = 0; const arrow = DOM.element("label"); arrow.classList.add("multiselect-dropdown-arrow"); arrow.setAttribute("for",this.InputFieldId); wrap.appendChild(input); wrap.appendChild(counter); wrap.appendChild(arrow); // store the input handles this._input = {wrap:wrap,text:input,counter:counter,arrow:arrow}; // create the itemslist const itemwrap = DOM.element("div"); itemwrap.id = this.ItemListId; itemwrap.classList.add("multiselect-list"); var list = DOM.element("ul"); this._items.forEach( (item) => { list.appendChild(item.element.wrap); }); let selectall = MSel.createItem("span",-1,"Select All",false); itemwrap.appendChild(selectall.wrap); let hrule = DOM.element("hr"); itemwrap.appendChild(hrule); itemwrap.appendChild(list); // store the items list handles this._itemList = {wrap:itemwrap,elems:list,rule:hrule,all:selectall}; } // Bind elements and listeners bind() { if (!this.isReady) return; const self = this; // add listener to open the dropdown. this._input.wrap.addEventListener("click", (evt) => {evt.stopPropagation}); // bind listeners to the input text field /* OPEN UI */ //this._input.text.addEventListener("focus", (evt) => self.onInputFocus(evt)); this._input.text.addEventListener("click", (evt) => self.onInputFocus(evt)); this._input.text.addEventListener("dblclick", (evt) => self.onHideList(evt)); /* Capture keystrokes */ this._input.text.addEventListener("input", (evt) => self.onInput(evt)); // bind listeners to the itemlist container div //this._itemList.wrap.addEventListener("mouseover",(evt) => self.onInputFocus(evt)); // add listener to the checkboxes this._itemList.all.input.addEventListener("change", (evt) => { self.onSelectAllChanged(evt); }); this._items.forEach( (item) => { let box = item.element.input; box.addEventListener("change", (evt) => { self.onSelectionChanged(item,evt); }); }); // bind elements to the wrapper this._shadow.appendChild(this._input.wrap); this._shadow.appendChild(this._itemList.wrap); // Capture window onclick to blur the dropdown /* window.onclick = (event) => { let p = self._parent; let obj = self; (event.target !== p && !p.contains(event.target)) ? obj.onHideList(event) : null; }; */ } /* ---------------- DOM Manipulation ----------------*/ // show the dropdown list showList() { this._itemList.wrap.classList.add('active'); this._input.arrow.classList.add('up'); this._isListShowing = true; } // hide the dropdown list, unfilter text hideList() { this._itemList.wrap.classList.remove('active'); this._input.arrow.classList.remove('up'); // make sure on next click all filters are removed this.show(this._itemList.all.wrap); this.show(this._itemList.rule); this._itemList.elems.childNodes.forEach(this.show); // update the text field from selected this.update(); this._isListShowing = false; } update() { // update the text in the input box and the counter label let Ids = this.selectedIds; let idCount = Ids.length; this._selectionCount = idCount; // text this._input.text.value = idCount === this._optionCount ? "All Selected" : Ids.join(","); // update the counter this._input.counter.innerHTML = idCount; // update data selection this._data.value = Ids; } // Helper functions show(elem) { elem.style.display = "block"; } hide(elem) { elem.style.display = "none"; } /* -------------------- Callbacks --------------------*/ onHideList(event) { this.hideList(); if (event) event.stopPropagation(); } onInputFocus(event) { // show the item list console.log("event:",event) console.log("arrow:",this._input.arrow.offsetLeft) if (!this._isListShowing) { this.showList(); // erase the current text string this._input.text.value = ""; } else if(event.offsetX >= this._input.arrow.offsetLeft) { this.hideList(); } } onSelectionChanged(source,event) { // synchronize the selection and update the text if (event) event.stopPropagation(); this.update(); } onSelectAllChanged(event) { // toggle each item to to the new status of the selectAll const status = event.target.checked; this._items.forEach( (item) => MSel.setStatus(item,status) ); if (event) event.stopPropagation(); this.update(); } onInput(event) { // filter selections as matches to typed text. When typing, drop the selectAll option. let currentText = this._input.text.value; console.log(currentText); } /* -------------------- SET/GET --------------------*/ get isReady() { let obj = this._data; return !(!!obj && Object.keys(obj).length === 0 && obj.constructor === Object); } get Id() { return `${this._uniqueId}_multiselect`; } get InputFieldId() { return `${this._uniqueId}_input`; } get ItemListId() { return `${this._uniqueId}_itemList`; } get InputBadgeId() { return `${this._uniqueId}_inputCount`; } get itemIds() { if (!this.isReady) return []; return this._items.map( (v) => v.id ); } get itemNames() { if (!this.isReady) return []; return this._items.map( (v) => humanize(v.id) ); } get selectedIndices() { if (!this.isReady) return []; return this._items.reduce( (inds,elem,loc) => { if(elem.selected) inds.push(loc); return inds; }, []); } get selectedIds() { if (!this.isReady) return []; return this._items.reduce( (ids,elem) => { if(elem.selected) ids.push(elem.id); return ids }, []); } /* -------------------- Static --------------------*/ static createItem(type,value,text,isSelected) { // create a checkbox and wrap it in a element of type let box = DOM.element("input"); box.type = "checkbox"; box.classList.add("multiselect-checkbox"); box.dataset.val = value; // set checked status box.checked = isSelected; let textBox = DOM.element("span"); textBox.classList.add("multiselect-text"); textBox.innerHTML = text; let wrap = DOM.element(type); let label = DOM.element("label"); label.appendChild(box); label.appendChild(textBox); wrap.appendChild(label); return {wrap:wrap,input:box}; } static setStatus(item,status) { item.selected = status; } } //--- SETUP ---// const m = new MSel({data:Data}); const m2 = new MSel({data:Data2}); const tab = DOM.element('table'); tab.id = "testOuter"; const body = DOM.element('tbody'); body.innerHTML = `leftright`; const row = DOM.element('tr'); row.appendChild(html`propname`); const cell = DOM.element('td'); cell.classList.add("right","show-overflow"); cell.appendChild(m.render()); row.appendChild(cell); const row2 = DOM.element('tr'); row2.appendChild(html`propname2`); const cell2 = DOM.element('td'); cell2.classList.add("right","show-overflow"); cell2.appendChild(m2.render()); row2.appendChild(cell2); body.appendChild(row); body.appendChild(row2); tab.appendChild(body); const out = DOM.element('div'); out.id = "table-wrap"; out.style.height = "500px"; out.appendChild(tab); /* const but = DOM.element('input'); but.type = "button"; but.onclick = (evt) => { //let vals = m._items.map() }; */ return out; }