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