From c172cb55991bfd1e57fb2c7ef0b2931e4b283b37 Mon Sep 17 00:00:00 2001 From: Matt Mo Date: Tue, 20 Oct 2020 13:18:26 -0700 Subject: [PATCH] Added pagination template and population template to help create pagination components. Allowed the use of non properties in property arrays for class, style ect. --- src/ignite-html.js | 16 +- src/ignite-template.js | 444 +++++++++++++++++++++++++++++++++++++++-- 2 files changed, 443 insertions(+), 17 deletions(-) diff --git a/src/ignite-html.js b/src/ignite-html.js index 64ae704..aca86d5 100644 --- a/src/ignite-html.js +++ b/src/ignite-html.js @@ -152,7 +152,7 @@ class IgniteProperty { this.onSpliceCallbacks = this.onSpliceCallbacks.filter(slice => slice != callback); } } - + if (Array.isArray(this._value) && this._value.onPushCallbacks) { //This array has already been patched but attach to it so we get callbacks. this.arrayCallbacks.push(this._value.attachOnPush((items) => this.invokeOnPush(items))); @@ -261,7 +261,13 @@ IgniteProperty.prototype.toString = function () { */ Array.prototype.getPropertyValues = function () { var ret = []; - this.forEach(prop => ret.push(prop.value)); + this.forEach(prop => { + if (prop instanceof IgniteProperty) { + ret.push(prop.value); + } else { + ret.push(prop); + } + }); return ret; } @@ -274,7 +280,11 @@ Array.prototype.getOldPropertyValues = function (property, oldValue) { if (prop == property) { ret.push(oldValue); } else { - ret.push(prop.value); + if (prop instanceof IgniteProperty) { + ret.push(prop.value); + } else { + ret.push(prop); + } } }); return ret; diff --git a/src/ignite-template.js b/src/ignite-template.js index 0a7652e..a0ee5e1 100644 --- a/src/ignite-template.js +++ b/src/ignite-template.js @@ -83,12 +83,14 @@ class IgniteTemplate { //Attack a callback for all the properties name.forEach(prop => { - this.callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, oldValue)), converter(...name.getPropertyValues())))); - this.callbacks.push(prop.attachOnPush((list, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); - this.callbacks.push(prop.attachOnUnshift((list, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); - this.callbacks.push(prop.attachOnPop((list) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); - this.callbacks.push(prop.attachOnShift((list) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); - this.callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + if (prop instanceof IgniteProperty) { + this.callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, oldValue)), converter(...name.getPropertyValues())))); + this.callbacks.push(prop.attachOnPush((list, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + this.callbacks.push(prop.attachOnUnshift((list, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + this.callbacks.push(prop.attachOnPop((list) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + this.callbacks.push(prop.attachOnShift((list) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + this.callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onClassChanged(converter(...name.getOldPropertyValues(prop, list)), converter(...name.getPropertyValues())))); + } }); var value = converter(...name.getPropertyValues()); @@ -467,12 +469,14 @@ class IgniteTemplate { //Attack a callback for all the properties value.forEach(prop => { - this.callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); - this.callbacks.push(prop.attachOnPush((list, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); - this.callbacks.push(prop.attachOnUnshift((list, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); - this.callbacks.push(prop.attachOnPop((list) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); - this.callbacks.push(prop.attachOnShift((list) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); - this.callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + if (prop instanceof IgniteProperty) { + this.callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this.callbacks.push(prop.attachOnPush((list, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this.callbacks.push(prop.attachOnUnshift((list, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this.callbacks.push(prop.attachOnPop((list) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this.callbacks.push(prop.attachOnShift((list) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + this.callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onStyleChanged(name, converter(...value.getPropertyValues())))); + } }); this.styles[name] = { name: name, value: converter(...value.getPropertyValues()), priority: priority }; @@ -487,7 +491,7 @@ class IgniteTemplate { /** * Hides the element this template is constructing if the value is true. - * @param {Boolean} value If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this. + * @param {Boolean|IgniteProperty} value If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this. * @param {Function} converter An optional function to convert the value if needed. */ hide(value, converter = null) { @@ -496,6 +500,17 @@ class IgniteTemplate { }); } + /** + * Shows the element this template is constructing if the value is true. + * @param {Boolean|IgniteProperty} value + * @param {Function} converter + */ + show(value, converter = null) { + return this.style("display", value, true, (...params) => { + return ((converter != null && converter(...params)) || (converter == null && params[0])) ? null : "none"; + }); + } + /** * Sets the id attribute of the element to be constructed by this template. * @param {String|IgniteProperty} value The value to set for the id attribute of the element this template will construct. @@ -1623,6 +1638,405 @@ class slot extends IgniteTemplate { } } +/** + * A pagination is a template that segments a list of items into pages based + * on the items, page size, current page. + */ +class pagination extends IgniteTemplate { + constructor(list, pageSize, currentPage, forEach) { + super(); + + if (list instanceof IgniteProperty) { + this.callbacks.push(list.attachOnChange((oldValue, newValue) => this.onListChanged(oldValue, newValue))); + this.callbacks.push(list.attachOnPush((list, items) => this.onListPush(list, items))); + this.callbacks.push(list.attachOnUnshift((list, items) => this.onListUnshift(list, items))); + this.callbacks.push(list.attachOnPop(list => this.onListPop(list))); + this.callbacks.push(list.attachOnShift(list => this.onListShift(list))); + this.callbacks.push(list.attachOnSplice((list, start, deleteCount, items) => this.onListSplice(list, start, deleteCount, items))); + + this.list = list.value; + } else { + this.list = list; + } + + if (pageSize instanceof IgniteProperty) { + this.callbacks.push(pageSize.attachOnChange((oldValue, newValue) => this.onPageSizeChanged(newValue))); + this.pageSize = pageSize.value; + } else { + this.pageSize = pageSize; + } + + if (currentPage instanceof IgniteProperty) { + this.callbacks.push(currentPage.attachOnChange((oldValue, newValue) => this.onCurrentPageChanged(newValue))); + this.currentPage = currentPage.value; + } else { + this.currentPage = currentPage; + } + + this.forEach = forEach; + this.elements = []; + this.tagName = "shadow pagination"; + this.pages = []; + } + + recalculate() { + //Hide the elements in the current page. + this.pages[this.currentPage].forEach(item => item.style.setProperty("display", "none", "important")); + + //Recreate the pages. + var pages = parseInt((this.list.length / this.pageSize)) + (this.list.length % this.pageSize > 0 ? 1 : 0); + this.pages = []; + for (var i = 0; i < pages; i++) { + this.pages.push([]); + } + + //Add the elements to the correct pages. + for (var i = 0; i < this.elements.length; i++) { + var page = parseInt(i / this.pageSize); + this.pages[page].push(this.elements[i]); + } + + //Adjust the current page if it's now incorrect. + if (this.currentPage >= pages) { + this.currentPage = pages - 1; + } + + //Show the elements in the current page + this.pages[this.currentPage].forEach(item => item.style.removeProperty("display")); + } + + construct(parent, sibling) { + //Don't construct if we have no parent, no sibling and no element. + if (!parent && !sibling && !this.element) { + return; + } + + if (!this.element) { + this.element = window.document.createTextNode(""); //Use a textnode as our placeholder + + if (sibling) { + sibling.parentElement.insertBefore(this.element, sibling); + } else { + parent.appendChild(this.element); + } + } else { + parent = this.element.parentElement; + } + + //If we already have elements we created, destroy them. + if (this.elements.length > 0) { + for (var i = 0; i < this.elements.length; i++) { + this.elements[i].remove(); + } + this.elements = []; + } + + //If we already have children elements, deconstruct them. + //(Because we are about to recreate them) + if (this.children.length > 0) { + for (var i = 0; i < this.children.length; i++) { + this.children[i].deconstruct(); + } + this.children = []; + } + + //Init our pages to put elements into. + var pages = parseInt((this.list.length / this.pageSize)) + (this.list.length % this.pageSize > 0 ? 1 : 0); + this.pages = []; + for (var i = 0; i < pages; i++) { + this.pages.push([]); + } + + //Construct all the items in our list and use the container + if (this.list) { + for (var i = 0; i < this.list.length; i++) { + var template = this.forEach(this.list[i]); + template.construct(parent, this.element); + + var page = parseInt(i / this.pageSize); + if (page != this.currentPage) { + template.element.style.setProperty("display", "none", "important"); + } else { + template.element.style.removeProperty("display"); + } + + this.pages[page].push(template.element); + this.children.push(template); + this.elements.push(template.element); + } + } + } + + onPageSizeChanged(newValue) { + //Set the new page size + this.pageSize = newValue; + + //Recalculate the pagination. + this.recalculate(); + } + + onCurrentPageChanged(newValue) { + //If the new page is invalid don't do this. + if (newValue >= this.pages.length) { + return; + } else if (newValue < 0) { + return; + } + + //Hide all the elements in the current page + this.pages[this.currentPage].forEach(item => item.style.setProperty("display", "none", "important")); + + //Set the new current page. + this.currentPage = newValue; + + //Show the elements in the next page + this.pages[this.currentPage].forEach(item => item.style.removeProperty("display")); + } + + onListChanged(oldValue, newValue) { + this.list = newValue; + + IgniteRenderingContext.enter(); + + try { + this.construct(null); //The list changed, reconstruct this template. + } catch (error) { + console.error("An error occurred during onListChanged:", error); + } + + IgniteRenderingContext.leave(); + } + + onListPush(list, items) { + IgniteRenderingContext.enter(); + + try { + items.forEach(item => { + var template = this.forEach(item); + + if (this.elements.length > 0) { + template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling); + } else { + template.construct(this.element.parentElement, this.element); + } + + this.children.push(template); + this.elements.push(template.element); + }); + + //Recalculate the pagination. + this.recalculate(); + } catch (error) { + console.error("An error occurred during onListPush:", error); + } + + IgniteRenderingContext.leave(); + } + + onListUnshift(list, items) { + IgniteRenderingContext.enter(); + + try { + items.reverse(); + items.forEach(item => { + var template = this.forEach(item); + + if (this.elements.length > 0) { + template.construct(this.element.parentElement, this.elements[0]); + } else { + template.construct(this.element.parentElement, this.element); + } + + this.children.unshift(template); + this.elements.unshift(template.element); + }); + + //Recalculate the pagination. + this.recalculate(); + } catch (error) { + console.error("An error occurred during onListUnshift:", error); + } + + IgniteRenderingContext.leave(); + } + + onListPop(list) { + if (this.children.length > 0) { + this.children[this.children.length - 1].deconstruct(); + this.children.pop(); + this.elements.pop(); + } + + //Recalculate the pagination. + this.recalculate(); + } + + onListShift(list) { + if (this.children.length > 0) { + this.children[0].deconstruct(); + this.children.shift(); + this.elements.shift(); + } + + //Recalculate the pagination. + this.recalculate(); + } + + onListSplice(list, start, deleteCount, items) { + IgniteRenderingContext.enter(); + + //Remove any items that are needed. + if (deleteCount > 0 && this.children.length > 0) { + for (var i = start; i < Math.min(this.children.length, start + deleteCount); i++) { + this.children[i].deconstruct(); + } + + this.children.splice(start, deleteCount); + this.elements.splice(start, deleteCount); + } + + //If the start is greater than the length of the items adjust it. + if (start > this.children.length) { + start = Math.max(this.children.length - 1, 0); + } + + //Append any new items if there are any. + if (items) { + items.forEach(item => { + var template = this.forEach(item); + + if (this.elements.length > 0) { + template.construct(this.element.parentElement, this.elements[start]); + } else { + template.construct(this.element.parentElement, this.element); + } + + this.children.splice(start, 0, template); + this.elements.splice(start, 0, template.element); + + start += 1; + }); + } + + //Recalculate the pagination. + this.recalculate(); + + IgniteRenderingContext.leave(); + } +} + +/** + * An ignite template that can construct a population of items + * based on a count. + */ +class population extends IgniteTemplate { + /** + * Creates a new population with the number of items in it, a converter if needed, and a foreach function. + * @param {Number|IgniteProperty} count The number of items in this population. + * @param {Function} forEach A function to generate items in the population. + * @param {Function?} converter A converter to be used to convert the count if needed. + */ + constructor(count, forEach, converter = null) { + super(); + + if (count instanceof IgniteProperty) { + this.callbacks.push(count.attachOnChange((oldValue, newValue) => this.onCountChange(converter != null ? converter(newValue) : newValue))); + this.count = count.value; + } else if (Array.isArray(count) && count.length > 0 && count[0] instanceof IgniteProperty) { + //There must be a converter for this to work correctly + if (!converter) { + throw "Cannot pass an array of properties without using a converter!"; + } + + //Attack a callback for all the properties + count.forEach(prop => { + if (prop instanceof IgniteProperty) { + this.callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onCountChange(converter(...count.getPropertyValues())))); + this.callbacks.push(prop.attachOnPush((list, items) => this.onCountChange(converter(...count.getPropertyValues())))); + this.callbacks.push(prop.attachOnUnshift((list, items) => this.onCountChange(converter(...count.getPropertyValues())))); + this.callbacks.push(prop.attachOnPop((list) => this.onCountChange(converter(...count.getPropertyValues())))); + this.callbacks.push(prop.attachOnShift((list) => this.onCountChange(converter(...count.getPropertyValues())))); + this.callbacks.push(prop.attachOnSplice((list, start, deleteCount, items) => this.onCountChange(converter(...count.getPropertyValues())))); + } + }); + + this.count = converter(...count.getPropertyValues()); + } else { + this.count = (converter != null ? converter(count) : count); + } + + this.forEach = forEach; + this.elements = []; + this.tagName = "shadow population"; + } + + construct(parent, sibling) { + //Don't construct if we have no parent, no sibling and no element. + if (!parent && !sibling && !this.element) { + return; + } + + if (!this.element) { + this.element = window.document.createTextNode(""); //Use a textnode as our placeholder + + if (sibling) { + sibling.parentElement.insertBefore(this.element, sibling); + } else { + parent.appendChild(this.element); + } + } else { + parent = this.element.parentElement; + } + + //If we already have elements we created, destroy them. + if (this.elements.length > 0) { + this.elements.forEach(item => item.remove()); + this.elements = []; + } + + //Construct all the elements for this population. + for (var i = 0; i < this.count; i++) { + var template = this.forEach(i); + + if (this.elements.length > 0) { + template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling); + } else { + template.construct(this.element.parentElement, this.element); + } + + this.elements.push(template.element); + } + } + + onCountChange(newValue) { + IgniteRenderingContext.enter(); + + if (newValue != this.elements.length) { + //Remove all our existing elements. + this.elements.forEach(item => item.remove()); + this.elements = []; + + //Create new elements. + for (var i = 0; i < newValue; i++) { + var template = this.forEach(i); + + if (this.elements.length > 0) { + template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling); + } else { + template.construct(this.element.parentElement, this.element); + } + + this.elements.push(template.element); + } + + //Set the new count + this.count = newValue; + } + + IgniteRenderingContext.leave(); + } +} + export { IgniteTemplate, div, @@ -1650,5 +2064,7 @@ export { select, option, script, - slot + slot, + pagination, + population }; \ No newline at end of file