From 7217f2bd9e04126fcc9f62f4d88f0550cdcc135f Mon Sep 17 00:00:00 2001 From: Matt Mo Date: Mon, 26 Oct 2020 15:27:43 -0700 Subject: [PATCH] Fixed issues with the chip list and editable label. Added initial collapsable-region and icon tabs code. --- chip-list.js | 45 +++++++++++++++++++++++++++----------- collapsable-region.js | 47 ++++++++++++++++++++++++++++++++++++++++ editable-label.js | 40 +++++++++++++++++++++++++--------- icon-tabs.js | 50 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 159 insertions(+), 23 deletions(-) create mode 100644 collapsable-region.js create mode 100644 icon-tabs.js diff --git a/chip-list.js b/chip-list.js index 780ef7b..33f2a0b 100644 --- a/chip-list.js +++ b/chip-list.js @@ -61,6 +61,7 @@ class ChipList extends IgniteElement { items: [], itemsMax: Number.MAX_SAFE_INTEGER, placeholder: null, + stopEditingOnBlur: true, editing: false, input: null, searchBox: null, @@ -82,6 +83,8 @@ class ChipList extends IgniteElement { return this.template .style("position", "relative") .class(this.editing, value => { return value ? "editing" : null }) + .attribute("tabindex", "0") + .onFocus((e) => this.onFocus()) .class([this.editing, this.items], (editing, items) => { return !editing && (items == null || items.length == 0) ? "placeholder" : null; }) @@ -137,6 +140,14 @@ class ChipList extends IgniteElement { return; } + //Reset the searching and input if we get a tab, since the browser + //will focus the next avaiable element. + if (e.key == "Tab") { + this.searching = false; + this.input.innerHTML = ""; + return; + } + //If we are not searching and a key was pressed, open the search box. if (!this.searching && this.search && (e.key !== "Backspace" || (e.key == "Backspace" && e.target.textContent.length > 1)) && (this.items == null || this.items.length < this.itemsMax)) { this.searching = true; @@ -151,8 +162,10 @@ class ChipList extends IgniteElement { .property("show", this.searching) .child( new div() - .class("shadow d-flex flex-column justify-content-center p-2") + .class("d-flex flex-column justify-content-center p-2") .style("background-color", "#fff") + .style("border-radius", "0.4em") + .style("box-shadow", "rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px") .child( new span(this.searchPlaceholder).class("mt-2").hide([this.searchResults, this.showSearchResults], (searchResults, showSearchResults) => { //Dont show the placeholder if we have search results, or if we are not showing search results. @@ -165,41 +178,47 @@ class ChipList extends IgniteElement { ) ), ) - .onClick((e) => { - this.focus(); //Focus our element if we are not already. - }) + } ready() { //Add a listener to the document click to blur our element. - this.documentListener = (e) => this.blur(e); + this.documentListener = (e) => this.onBlur(e); window.document.addEventListener("click", this.documentListener); - } cleanup() { window.document.removeEventListener("click", this.documentListener); } - focus() { + onFocus() { + console.log("ChpiList, focus called"); + if (!this.editing) { this.editing = true; this.input.focus(); this.input.textContent = " "; + } else { + this.input.focus(); } } - blur(e) { + onBlur(e) { //Only blur if we are editing and the target is not ourself or any of our children. - if (this.editing && e.target != this && !this.contains(e.target)) { - this.editing = false; - this.searching = false; - this.input.blur(); - this.input.innerHTML = ""; + if (this.editing) { + if (e.target != this && !this.contains(e.target)) { + if (this.stopEditingOnBlur) { + this.editing = false; + } + this.searching = false; + this.input.blur(); + this.input.innerHTML = ""; + } } } searchResultClick(item) { + console.log("Search result click"); if (this.items == null) { this.items = []; } diff --git a/collapsable-region.js b/collapsable-region.js new file mode 100644 index 0000000..88661a4 --- /dev/null +++ b/collapsable-region.js @@ -0,0 +1,47 @@ +import { IgniteElement } from "../ignite-html/ignite-element.js"; +import { IgniteTemplate, div, slot } from "../ignite-html/ignite-template.js"; + +class CollapsableRegion extends IgniteElement { + constructor() { + super(); + } + + get styles() { + return ` + mt-collapsable-region .title:hover { + cursor: pointer; + } + `; + } + + get properties() { + return { + collapse: true, + title: "Placeholder" + }; + } + + render() { + return this.template.child( + new div() + .class("title") + .onClick(() => this.collapse = !this.collapse) + .child(this.title), + new div().hide(this.collapse).child( + new slot(this) + ) + ); + } +} + +class CollapsableRegionTemplate extends IgniteTemplate { + constructor(...children) { + super("mt-collapsable-region", children); + } +} + +customElements.define("mt-collapsable-region", CollapsableRegion); + +export { + CollapsableRegionTemplate as CollapsableRegion +}; \ No newline at end of file diff --git a/editable-label.js b/editable-label.js index 33fef1f..ddfaaa2 100644 --- a/editable-label.js +++ b/editable-label.js @@ -54,12 +54,12 @@ class EditableLabel extends IgniteElement { get properties() { return { + stopEditingOnBlur: true, editing: false, value: new IgniteProperty(null, () => { //Emulate a change event to support value reflection. this.dispatchEvent(new Event("change")); }), - editOnClick: true, multiLine: false, saveButton: true, input: null, @@ -69,6 +69,8 @@ class EditableLabel extends IgniteElement { render() { return this.template + .attribute("tabindex", "0") + .onFocus(e => this.onFocus()) .child( new div() .innerHTML(this.value) @@ -76,7 +78,6 @@ class EditableLabel extends IgniteElement { .attribute("contenteditable", this.editing) .data("placeholder", this.placeholder) .ref(this.input) - .onClick(() => this.onClick()) .onBlur(() => this.onBlur()) .on("keydown", (e) => this.onKeyDown(e)), new button(``) @@ -93,22 +94,41 @@ class EditableLabel extends IgniteElement { } } - onClick() { - if (this.editOnClick) { - this.editing = true; - this.input.focus(); - } - } - onBlur() { if (this.editing) { - this.editing = false; + if (this.stopEditingOnBlur) { + this.editing = false; + } if (this.input.innerHTML !== this.value) { this.value = this.input.innerHTML; } } } + + onFocus() { + this.editing = true; + this.input.focus(); + this.placeCaretAtEnd(this.input); + } + + placeCaretAtEnd(el) { + el.focus(); + if (typeof window.getSelection != "undefined" + && typeof document.createRange != "undefined") { + var range = document.createRange(); + range.selectNodeContents(el); + range.collapse(false); + var sel = window.getSelection(); + sel.removeAllRanges(); + sel.addRange(range); + } else if (typeof document.body.createTextRange != "undefined") { + var textRange = document.body.createTextRange(); + textRange.moveToElementText(el); + textRange.collapse(false); + textRange.select(); + } + } } class EditableLabelTemplate extends IgniteTemplate { diff --git a/icon-tabs.js b/icon-tabs.js new file mode 100644 index 0000000..1606bb1 --- /dev/null +++ b/icon-tabs.js @@ -0,0 +1,50 @@ +import { IgniteElement } from "../ignite-html/ignite-element.js"; +import { IgniteTemplate, slot, list, div } from "../ignite-html/ignite-template.js"; +import { IgniteProperty } from "../ignite-html/ignite-html.js"; + +class IconTabs extends IgniteElement { + constructor() { + super(); + } + + get styles() { + return ` + mt-icon-tabs > .icons { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 1em; + } + `; + } + + get properties() { + return { + icons: [] + }; + } + + render() { + return this.template.child( + new div().class("icons").child( + new list(this.icons, icon => { + return new div(icon); + }) + ), + new slot(this) + ) + } +} + +class IconTabsTemplate extends IgniteTemplate { + constructor(...children) { + super("mt-icon-tabs", children); + } +} + +customElements.define("mt-icon-tabs", IconTabs); + +export { + IconTabsTemplate as IconTabs +}; \ No newline at end of file