From e398b61c0872d07a2106278927f8d61f9055475d Mon Sep 17 00:00:00 2001 From: Matt Mo Date: Sat, 9 Jan 2021 16:24:24 -0800 Subject: [PATCH] Added uuid function to element class to easily allow generating uuid's. May move this later. Added reflect() option to reflect properties once changed via a function or another property. Added onResize function that adds a resize observer to the element constructed by a template and cleans it up nicely. Added onTouch event helper function. Modified reflect callback to allow calling functions or setting the value of a property. --- ignite-element.js | 9 ++++++ ignite-html.js | 2 +- ignite-template.js | 80 ++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 88 insertions(+), 3 deletions(-) diff --git a/ignite-element.js b/ignite-element.js index c4bbd5f..475f482 100644 --- a/ignite-element.js +++ b/ignite-element.js @@ -299,6 +299,15 @@ class IgniteElement extends HTMLElement { cleanup() { } + + /** + * Generates a uuid and returns it. + */ + uuid() { + return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => + (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) + ); + } } export { diff --git a/ignite-html.js b/ignite-html.js index 216d29a..d41a83c 100644 --- a/ignite-html.js +++ b/ignite-html.js @@ -63,7 +63,7 @@ class IgniteProperty { //If we want to reflect the value then bubble it up. if (reflect) { this.ignoreValueChange = true; //Ignore changes incase we are connected to any reflected properties. - this.reflected.forEach(reflect => reflect.value = val); + this.reflected.forEach(reflect => reflect instanceof Function ? reflect(val) : (reflect.value = val)); this.ignoreValueChange = false; } diff --git a/ignite-template.js b/ignite-template.js index 2a45ede..3b38829 100644 --- a/ignite-template.js +++ b/ignite-template.js @@ -30,12 +30,15 @@ class IgniteTemplate { this._attributes = {}; this._classes = []; this._properties = {}; + this._reflecting = {}; this._refs = []; this._callbacks = []; this._events = {}; this._styles = {}; this._elementValue = null; this._elementInnerHTML = null; + this._resizeObserverCallback = null; + this._resizeObserver = null; if (children) { for (var i = 0; i < children.length; i++) { @@ -218,6 +221,29 @@ class IgniteTemplate { return this; } + /** + * Makes a property on this template reflect its value back to the given target. + * (You can reflect a property more than once if it's needed.) + * @param {String} name Name of the property to reflect. + * @param {IgniteProperty|Function} target The target for the value to be reflected to. + */ + reflect(name, target) { + IgniteRenderingContext.push(); + + if (this._reflecting[name] == undefined || this._reflecting[name] == null) { + this._reflecting[name] = []; + } + + if (target instanceof IgniteProperty) { + this._reflecting[name].push(target); + } else if (target instanceof Function) { + this._reflecting[name].push(target); + } + + IgniteRenderingContext.pop(); + return this; + } + /** * Adds a set of properties from an object to be added to this template once it's constructed. * @param {Object} props The object value that property names/values will be pulled from. @@ -303,7 +329,7 @@ class IgniteTemplate { ref(refCallback) { if (refCallback instanceof IgniteProperty) { this._callbacks.push(refCallback.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, refCallback))); - this._refs.push((element) => refCallback.value = element); + this._refs.push(element => refCallback.value = element); } else { this._refs.push(refCallback); } @@ -319,6 +345,8 @@ class IgniteTemplate { * @returns This ignite template so function calls can be chained. */ on(eventName, eventCallback) { + IgniteRenderingContext.push(); + if (!this._events[eventName]) { this._events[eventName] = []; } @@ -330,11 +358,12 @@ class IgniteTemplate { this._events[eventName].push(eventCallback); } + IgniteRenderingContext.pop(); return this; } /** - * Adds an onclick event handler to this template. + * Adds a click event handler to this template. * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires. * @returns This ignite template so function calls can be chained. */ @@ -342,6 +371,15 @@ class IgniteTemplate { return this.on("click", eventCallback); } + /** + * Adds a touch event handler to this template. + * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires. + * @returns This ignite template so function calls can be chained. + */ + onTouch(eventCallback) { + return this.on("touch", eventCallback); + } + /** * Adds a onblur event handler to this template. * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires. @@ -465,6 +503,25 @@ class IgniteTemplate { return this; } + /** + * Adds a special on resize event handler to this template that will + * fire anytime the element is resized by using a resize observer. + * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires. + * @returns This ignite template so function calls can be chained. + */ + onResize(eventCallback) { + IgniteRenderingContext.push(); + + if (eventCallback instanceof IgniteProperty) { + this._resizeObserverCallback = eventCallback.value; + } else if (eventCallback instanceof Function) { + this._resizeObserverCallback = eventCallback; + } + + IgniteRenderingContext.pop(); + return this; + } + /** * Adds a CSS property to this template with a value and priority. * @param {String} name The name of the CSS property to set. @@ -713,6 +770,12 @@ class IgniteTemplate { } } + //Setup any reflecting properties on this element + var keys = Object.keys(this._reflecting); + for (var i = 0; i < keys.length; i++) { + this._reflecting[keys[i]].forEach(value => this.element[keys[i]].reflected.push(value)); + } + //Set the elements inner html if it was set if (this._elementInnerHTML != null) { this.element.innerHTML = this._elementInnerHTML; @@ -734,6 +797,12 @@ class IgniteTemplate { } } + //Setup a resize observer if needed + if (this._resizeObserverCallback !== null) { + this._resizeObserver = new ResizeObserver(e => this._resizeObserverCallback(e)); + this._resizeObserver.observe(this.element); + } + //If our element has not been added to the dom yet, then add it. if (this.element.isConnected == false && this.element.parentElement == null) { if (sibling) { @@ -780,6 +849,13 @@ class IgniteTemplate { this._callbacks = null; } + //Stop observing resize events if we need to. + if (this._resizeObserver != null) { + this._resizeObserver.disconnect(); + this._resizeObserver = null; + this._resizeObserverCallback = null; + } + //Remove any refs if (this._refs) { //Pass null to our refs so that the reference is updated.