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

Fixed a bug where the browser will call onConnected and onDisconnected for an IgniteElement if it is moved to another location in the DOM. The element instance is the same but it triggers a disconnect and then a connect, to combat this I added code to mitigate this and detect it. Slots now apply classes, styles, attributes to children in the slot. And a few other minor changes.

Browse Source
This commit is contained in:
Matt Mo 2020-09-09 08:24:18 -07:00
parent 3072bb2f7c
commit 780f70188e
2 changed files with 205 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/ignite-element.js
View File

@ -50,6 +50,7 @@ class IgniteElement extends HTMLElement {
constructor() {
super();
this.connected = false;
this.onDisconnected = null;
this.template = null;
this.elements = [];
@ -156,6 +157,15 @@ class IgniteElement extends HTMLElement {
* @ignore
*/
connectedCallback() {
//Only run this if we haven't been connected before.
//If this element is moved the instance will be the same but it will call this again
//and we want to trap this and not run the code below twice.
if (this.connected) {
return;
} else {
this.connected = true;
}
//See if a styling sheet has been created for this element if it's needed.
if (this.styles !== null && this.styles !== "") {
if (document.getElementsByClassName(`_${this.tagName}_styling_`).length == 0) {
@ -205,6 +215,15 @@ class IgniteElement extends HTMLElement {
* @ignore
*/
disconnectedCallback() {
//Run a test here, if the element was moved but not removed it will have a disconnect
//get called but then be reconnected, so use a timer to see if this is what happened.
setTimeout(() => {
//If the element is connected then don't do this, more than likely
//the element was moved or something.
if (this.isConnected) {
return;
}
//If we still have a reference to our template, deconstruct it.
if (this.template) {
this.template.deconstruct();
@ -215,6 +234,7 @@ class IgniteElement extends HTMLElement {
this.onDisconnected();
this.onDisconnected = null;
}
}, 1);
}
/**

194
src/ignite-template.js
View File

@ -349,6 +349,16 @@ class IgniteTemplate {
return this.attribute("src", value, converter);
}
/**
* Sets the value attribute of the element to be constructed by this template.
* @param {String|IgniteProeprty} value The value to set for the href attribute of the element to be constructed by this template.
* @param {Function} converter An optional function that can convert the value if needed.
* @returns This ignite template so function calls can be chained.
*/
href(value, converter = null) {
return this.attribute("href", value, converter);
}
/**
* Sets the name attribute of the element to be constructed by this template.
* @param {String|IgniteProperty} value The value to set for the name attribute of the element to be constructed by this template.
@ -514,6 +524,7 @@ class IgniteTemplate {
* on the template's element.
* @param {any} oldValue
* @param {any} newValue
* @param {Function} converter Optional converter for the value if needed.
* @ignore
*/
onClassChanged(oldValue, newValue, converter) {
@ -522,21 +533,12 @@ class IgniteTemplate {
newValue = converter(newValue);
}
var oldClasses = (oldValue != null ? oldValue.toString().split(" ") : []);
var newClasses = (newValue != null ? newValue.toString().split(" ") : []);
var oldClasses = (oldValue != null && oldValue != "" ? oldValue.toString().split(" ") : []);
var newClasses = (newValue != null && newValue != "" ? newValue.toString().split(" ") : []);
if (this.element) {
oldClasses.forEach((cl) => {
if (cl.length > 0) {
this.element.classList.remove(cl);
}
});
newClasses.forEach((cl) => {
if (cl.length > 0) {
this.element.classList.add(cl);
}
});
oldClasses.forEach((cl) => this.element.classList.remove(cl));
newClasses.forEach((cl) => this.element.classList.add(cl));
}
//Remove the old values from the template, but only remove one copy.
@ -611,6 +613,7 @@ class IgniteTemplate {
* @param {any} oldValue
* @param {any} newValue
* @param {string} propertyName
* @param {Function} converter
* @ignore
*/
onPropertyChanged(oldValue, newValue, propertyName, converter) {
@ -675,14 +678,19 @@ class IgniteTemplate {
* @param {any} oldValue
* @param {any} newValue
* @param {any} style
* @param {Function} converter
* @ignore
*/
onCssValueChanged(oldValue, newValue, name, converter) {
if (this.element) {
this.element.style.setProperty(name, (converter != null ? converter(newValue) : newValue), this.styles[name].priority);
if (converter != null) {
newValue = converter(newValue);
}
this.styles[name].value = (converter != null ? converter(newValue) : newValue);
if (this.element) {
this.element.style.setProperty(name, newValue, this.styles[name].priority);
}
this.styles[name].value = newValue;
}
}
@ -806,6 +814,30 @@ class p extends IgniteTemplate {
}
}
/**
* An ignite template that can be used to construct a ul element.
*/
class ul extends IgniteTemplate {
/**
* @param {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
*/
constructor(...children) {
super("ul", children);
}
}
/**
* An ignite template that can be used to construct a li element.
*/
class li extends IgniteTemplate {
/**
* @param {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
*/
constructor(...children) {
super("li", children);
}
}
/**
* An ignite template that can be used to construct a span element.
*/
@ -1056,10 +1088,20 @@ class list extends IgniteTemplate {
/**
* A slot template that mimicks the functionality of a slot element in Web Components. This can
* be used to place children of a IgniteElement anywhere in the DOM. Slots don't actually construct an element,
* they simply just place children in place where the slot was used.
* they simply just place children in place where the slot was used. If classes, styles, or attributes are applied
* to the slot they will be applied to the children of the slot.
*
* @example
* //You must pass the ignite element who owns the slot of the first param.
* new slot(this)
*
* @example
* //Slots can apply classes, attributes, and styles to children within the slot
* new slot(this).class("active") //< Would apply .active to all children
*
* @example
* //You can also use properties to have dynamic classes, styles, or attributes on slot children
* new slot(this).class(this.someClass)
*/
class slot extends IgniteTemplate {
/**
@ -1071,6 +1113,12 @@ class slot extends IgniteTemplate {
this.parent = element;
}
/**
* Constructs this slot from this template.
* @param {HTMLElement} parent
* @param {HTMLElement} sibling
* @ignore
*/
construct(parent, sibling) {
//Don't construct if we have no parent, no sibling and no element.
if (!parent && !sibling && !this.element) {
@ -1087,9 +1135,117 @@ class slot extends IgniteTemplate {
}
//Add any slot elements after this element.
this.parent.elements.forEach((item) => this.element.parentElement.insertBefore(item, this.element));
this.parent.elements.forEach((item) => {
this.element.parentElement.insertBefore(item, this.element);
//Set the classes on the item
for (var i = 0; i < this.classes.length; i++) {
if (this.classes[i] !== null && this.classes[i] !== undefined && this.classes[i] !== "") {
item.classList.add(this.classes[i]);
}
}
//Set the attributes on the item
var keys = Object.keys(this.attributes);
for (var i = 0; i < keys.length; i++) {
if (this.attributes[keys[i]] !== null && this.attributes[keys[i]] !== undefined) {
item.setAttribute(keys[i], this.attributes[keys[i]]);
}
}
//Set the styles on the item
var keys = Object.keys(this.styles);
for (var i = 0; i < keys.length; i++) {
var style = this.styles[keys[i]];
item.style.setProperty(style.name, style.value, style.priority);
}
});
}
}
/**
* Called when a class on this slot changes and needs to be updated on the
* elements within this slot.
* @param {Any} oldValue
* @param {Any} newValue
* @param {Function} converter
* @ignore
*/
onClassChanged(oldValue, newValue, converter) {
if (converter !== null) {
oldValue = converter(oldValue);
newValue = converter(newValue);
}
var oldClasses = (oldValue != null && oldValue != "" ? oldValue.toString().split(" ") : []);
var newClasses = (newValue != null && newValue != "" ? newValue.toString().split(" ") : []);
//Remove the old values from the template, but only remove one copy.
oldClasses.forEach((cl) => this.classes.splice(this.classes.indexOf(cl), 1));
//Add the new classes to the template.
newClasses.forEach((cl) => this.classes.push(cl));
//Add the classes to the elements
this.parent.elements.forEach((element) => {
//Remove the old ones first.
oldClasses.forEach((cl) => element.classList.remove(cl));
//Add the new ones.
newClasses.forEach((cl) => element.classList.add(cl));
//Add any missing ones
this.classes.forEach((cl) => {
if (!element.classList.contains(cl)) {
element.classList.add(cl);
}
});
});
}
/**
* Called when a attribute on this template was changed and needs to be updated
* on the template's element.
* @param {any} oldValue
* @param {any} newValue
* @param {string} attributeName
* @param {Function} converter Optional converter function for the value if needed.
* @ignore
*/
onAttributeChanged(oldValue, newValue, attributeName, converter) {
if (converter !== null) {
newValue = converter(newValue);
}
this.parent.elements.forEach((element) => {
if (newValue == null || newValue == undefined) {
element.removeAttribute(attributeName);
} else {
element.setAttribute(attributeName, newValue);
}
});
this.attributes[attributeName] = newValue;
}
/**
* Called when a css value was changed and we need to update the styling.
* @param {any} oldValue
* @param {any} newValue
* @param {any} style
* @ignore
*/
onCssValueChanged(oldValue, newValue, name, converter) {
if (converter != null) {
newValue = converter(newValue);
}
this.parent.elements.forEach((element) => {
element.style.setProperty(name, newValue, this.styles[name].priority);
});
this.styles[name].value = newValue;
}
}
export {
@ -1108,6 +1264,8 @@ export {
p,
span,
i,
ul,
li,
br,
img,
label,