Added pagination template and population template to help create pagination components. Allowed the use of non properties in property arrays for class, style ect.
This commit is contained in:
parent
08f4f9006f
commit
c172cb5599
@ -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;
|
||||
|
||||
@ -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
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user