MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added placeholder support to editable-label. Implemented a chip list with chips and search/edit functionality. Added a simple popper class to help with pop overs.

Browse Source
This commit is contained in:
Matt Mo 2020-09-24 09:28:14 -07:00
parent a86986b1a3
commit 81acb1f000
4 changed files with 333 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
chip-list.js Normal file
View File

@ -0,0 +1,181 @@
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, list, div, input, button, h4, span } from "../ignite-html/ignite-template.js";
import { Chip } from "./chip.js";
import { Popper } from "./popper.js";
class ChipList extends IgniteElement {
constructor() {
super();
}
get styles() {
return `
mt-chip-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
border: solid 0.13rem transparent;
border-radius: 0.3rem;
padding: 0.2rem;
}
mt-chip-list:hover {
cursor: pointer;
}
mt-chip-list.editing {
border: solid 0.13rem #ced4da;
border-radius: 0.3rem;
}
mt-chip-list > .input-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
mt-chip-list > .input-container > .input {
min-width: 1em;
outline: none;
}
mt-chip-list .search-result:hover {
background-color: #e0e0e0;
border-radius: 0.3em;
}
`;
}
get properties() {
return {
items: null,
editing: false,
input: null,
searchBox: null,
searching: false,
searchResults: [
{ id: 502, corporation: "Starbucks", content: "Starbucks #1, Spokane WA" },
{ id: 503, corporation: "Starbucks", content: "Starbucks #2, Spokane WA" }
],
searchEmpty: "No results found.",
searchFooter: null,
blurTimeout: null,
documentListener: null
};
}
render() {
return this.template
.style("position", "relative")
.class(this.editing, value => { return value ? "editing" : null })
.child(
new list(this.items, (item) => {
return new Chip()
.id(item.id)
.property("onDelete", () => { this.items = this.items.filter(needle => needle != item) })
.child(item.content);
}),
new div()
.class("input-container")
.child(
new div()
.class("input")
.attribute("contenteditable", "true")
.hide(this.editing, value => { return !value; })
.ref(this.input)
.onEnter((e) => {
e.preventDefault();
//Add a new item to the chip list.
this.items.push({ content: this.input.textContent.trim() });
this.input.innerHTML = "";
})
.onBackspace((e) => {
//If the backspace key is pressed and there is no content, try to remove the last item from the list.
if (this.input.textContent.length == 0 || (this.input.textContent.length == 1 && this.input.textContent[0] == " ")) {
e.preventDefault();
this.items.pop();
}
})
.on("keydown", () => {
//If we are not searching and a key was pressed, open the search box.
if (!this.searching) {
this.searching = true;
}
})
.onBlur((e) => {
//Force the input to not lose focus if we are editing.
if (this.editing) {
e.target.focus();
}
})
),
new Popper()
.property("show", this.searching)
.child(
new div()
.class("shadow d-flex flex-column justify-content-center p-2")
.style("background-color", "#fff")
.child(
new span(this.searchEmpty).class("mt-2").hide(this.searchResults, value => { return value != null && value.length > 0; }),
new list(this.searchResults, item => {
return new div(item.content).class("search-result p-2").onClick(() => this.searchResultClick(item));
}),
`<hr />`,
//new button().class("btn btn-primary text-white").child("Add missing location")
this.searchFooter
)
),
)
.onClick((e) => {
e.stopPropagation(); //Stop this from bubbling to the document click.
this.focus(); //Focus our element if we are not already.
})
}
ready() {
//Add a listener to the document click to blur our element.
this.documentListener = () => this.blur();
window.document.addEventListener("click", this.documentListener);
}
cleanup() {
window.document.removeEventListener("click", this.documentListener);
}
focus() {
if (!this.editing) {
this.editing = true;
this.input.focus();
this.input.textContent = " ";
}
}
blur() {
if (this.editing) {
this.editing = false;
this.searching = false;
this.input.blur();
this.input.innerHTML = "";
}
}
searchResultClick(item) {
console.log("Search item was clicked:", item);
this.items.push({ content: item.content });
}
}
class ChipListTemplate extends IgniteTemplate {
constructor(...children) {
super("mt-chip-list", children);
}
}
customElements.define("mt-chip-list", ChipList);
export {
ChipListTemplate as ChipList
}

49
chip.js Normal file
View File

@ -0,0 +1,49 @@
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot, button } from "../ignite-html/ignite-template.js";
class Chip extends IgniteElement {
constructor() {
super();
}
get properties() {
return {
onDelete: () => { }
}
}
get styles() {
return `
mt-chip {
border-radius: 1em;
background-color: #e0e0e0;
padding-top: 0.3em;
padding-bottom: 0.3em;
padding-left: 0.6em;
padding-right: 0.6em;
}
`;
}
render() {
return this.template.child(
new slot(this),
new button()
.class("btn ml-1 p-0")
.child(`<i class="fad fa-times-circle"></i>`)
.onClick(() => this.onDelete())
);
}
}
class ChipTemplate extends IgniteTemplate {
constructor(...children) {
super("mt-chip", children);
}
}
customElements.define("mt-chip", Chip);
export {
ChipTemplate as Chip
}

11
editable-label.js
View File

@ -31,6 +31,11 @@ class EditableLabel extends IgniteElement {
padding: 0.2rem;
}
mt-editable-label>div:empty:before {
content: attr(data-placeholder);
opacity: 0.5;
}
mt-editable-label>button {
margin-left: 0.5em;
background-color: #2196F3;
@ -57,7 +62,8 @@ class EditableLabel extends IgniteElement {
editOnClick: true,
multiLine: false,
saveButton: true,
input: null
input: null,
placeholder: null
};
}
@ -68,6 +74,7 @@ class EditableLabel extends IgniteElement {
.innerHTML(this.value)
.class(this.editing, (value) => { return value ? "focus" : null; })
.attribute("contenteditable", this.editing)
.data("placeholder", this.placeholder)
.ref(this.input)
.onClick(() => this.onClick())
.onBlur(() => this.onBlur())
@ -84,7 +91,6 @@ class EditableLabel extends IgniteElement {
e.preventDefault();
e.stopPropagation();
}
}
onClick() {
@ -101,7 +107,6 @@ class EditableLabel extends IgniteElement {
if (this.input.innerHTML !== this.value) {
this.value = this.input.innerHTML;
}
}
}
}

95
popper.js Normal file
View File

@ -0,0 +1,95 @@
import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, slot } from "../ignite-html/ignite-template.js";
import { IgniteProperty } from "../ignite-html/ignite-html.js";
class Popper extends IgniteElement {
constructor() {
super();
}
get properties() {
return {
position: "bottom",
show: new IgniteProperty(false, () => {
if (this.show) {
this.firstUpdate();
} else {
if (this.updateTimeout) {
clearTimeout(this.updateTimeout);
}
this.updateTimeout = null;
}
}),
updateTimeout: null,
offset: "0.5em"
}
}
render() {
return this.template.child(
new slot(this)
.style("position", "absolute")
.style("top", this.position, true, value => { return value == "bottom" ? "100%" : null; })
.style("bottom", this.position, true, value => { return value == "top" ? "100%" : null; })
.style("margin-top", this.position, true, value => { return this.position == "bottom" ? this.offset : null })
.style("margin-bottom", this.position, true, value => { return this.position == "top" ? this.offset : null })
.style("left", "0")
.style("width", "100%")
.style("z-index", "99999")
.hide(this.show, value => { return !value; })
);
}
ready() {
this.firstUpdate();
}
firstUpdate() {
if (this.show && this.updateTimeout == null) {
this.updateTimeout = setTimeout(() => this.update(), 200);
}
}
update() {
if (this.show) {
this.updateTimeout = setTimeout(() => this.update(), 200);
}
var thisBounds = this.firstChild.getBoundingClientRect();
var parentBounds = this.offsetParent.getBoundingClientRect();
var thisOffset = 0;
if (this.firstChild.offsetTop < 0) {
thisOffset = Math.abs(this.firstChild.offsetTop + thisBounds.height);
} else {
thisOffset = this.firstChild.offsetTop - parentBounds.height;
}
if (thisBounds.y < 0 && this.position != "bottom") {
this.position = "bottom";
} else if (thisBounds.y + thisBounds.height >= window.innerHeight && this.position != "top") {
this.position = "top";
} else if (parentBounds.height + parentBounds.y + thisBounds.height + thisOffset <= window.innerHeight && this.position != "bottom") {
this.position = "bottom";
}
}
cleanup() {
if (this.updateTimeout) {
clearTimeout(this.updateTimeout);
}
}
}
customElements.define("mt-popper", Popper);
class PopperTemplate extends IgniteTemplate {
constructor(...children) {
super("mt-popper", children);
}
}
export {
PopperTemplate as Popper
}