Fixed issues with the chip list and editable label. Added initial collapsable-region and icon tabs code.
This commit is contained in:
parent
84bb64a8a8
commit
7217f2bd9e
37
chip-list.js
37
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)) {
|
||||
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 = [];
|
||||
}
|
||||
|
||||
47
collapsable-region.js
Normal file
47
collapsable-region.js
Normal file
@ -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
|
||||
};
|
||||
@ -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(`<i class="fas fa-check"></i>`)
|
||||
@ -93,22 +94,41 @@ class EditableLabel extends IgniteElement {
|
||||
}
|
||||
}
|
||||
|
||||
onClick() {
|
||||
if (this.editOnClick) {
|
||||
this.editing = true;
|
||||
this.input.focus();
|
||||
}
|
||||
}
|
||||
|
||||
onBlur() {
|
||||
if (this.editing) {
|
||||
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 {
|
||||
|
||||
50
icon-tabs.js
Normal file
50
icon-tabs.js
Normal file
@ -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
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user