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

Added more documentation. Fixed bugs with pagination to better support push, and slice.

Browse Source
This commit is contained in:
MattMo 2023-04-18 15:38:49 -07:00
parent 3383001c3a
commit 4203884aff
2 changed files with 91 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
ignite-html.js
View File

@ -295,62 +295,116 @@ class IgniteProperty {
IgniteRendering.pop();
}
/**
* Attaches a callback function to be invoked when this property value changes.
* @param {Function(oldvalue, newValue)} onChange Callback function to be invoked.
* @returns {IgniteCallback} A new ignite callback.
*/
attachOnChange(onChange) {
var callback = new IgniteCallback(onChange, detach => this.detachOnChange(detach));
this.onChangeCallbacks.push(callback);
return callback;
}
/**
* Attaches a callback function to be invoked when a set of items are pushed to this properties value.
* @param {Function(array, items)} onPush Callback function to be invoked.
* @returns {IgniteCallback} A new ignite callback.
*/
attachOnPush(onPush) {
var callback = new IgniteCallback(onPush, detach => this.detachOnPush(detach));
this.onPushCallbacks.push(callback);
return callback;
}
/**
* Attaches a callback function to be invoked when an item is popped from this properties value.
* @param {Function} onPop Callback function to be invoked.
* @returns {IgniteCallback} A new ignite callback.
*/
attachOnPop(onPop) {
var callback = new IgniteCallback(onPop, detach => this.detachOnPop(detach));
this.onPopCallbacks.push(callback);
return callback;
}
/**
* Attaches a callback function to be invoked when items are shifted from this properties value.
* @param {Function} onShift Callback function to be invoked.
* @returns {IgniteCallback} A new ignite callback.
*/
attachOnShift(onShift) {
var callback = new IgniteCallback(onShift, detach => this.detachOnShift(detach));
this.onShiftCallbacks.push(callback);
return callback;
}
/**
* Attaches a callback function to be invoked when items are unshifted to this properties value.
* @param {Function(array, items)} onUnshift Callback function to be invoked.
* @returns {IgniteCallback} A new ignite callback.
*/
attachOnUnshift(onUnshift) {
var callback = new IgniteCallback(onUnshift, detach => this.detachOnUnshift(detach));
this.onUnshiftCallbacks.push(callback);
return callback;
}
/**
* Attaches a callback function to be invoked when items are spliced on this properties value.
* @param {Function(array, start, deleteCount, items)} onSplice Callback function to be invoked.
* @returns {IgniteCallback} A new ignite callback.
*/
attachOnSplice(onSplice) {
var callback = new IgniteCallback(onSplice, detach => this.detachOnSplice(detach));
this.onSpliceCallbacks.push(callback);
return callback;
}
/**
* Removes an ignite callback for the OnChange event.
* @param {IgniteCallback} callback
*/
detachOnChange(callback) {
this.onChangeCallbacks = this.onChangeCallbacks.filter(change => change != callback);
}
/**
* Removes an ignite callback for the OnPush event.
* @param {Ignitec} callback
*/
detachOnPush(callback) {
this.onPushCallbacks = this.onPushCallbacks.filter(push => push != callback);
}
/**
* Removes an ignite callback for the OnPop event.
* @param {IgniteCallback} callback
*/
detachOnPop(callback) {
this.onPopCallbacks = this.onPopCallbacks.filter(pop => pop != callback);
}
/**
* Removes an ignite callback for the OnShift event.
* @param {IgniteCallback} callback
*/
detachOnShift(callback) {
this.onShiftCallbacks = this.onShiftCallbacks.filter(shift => shift != callback);
}
/**
* Removes an ignite callback for the OnUnshift event.
* @param {IgniteCallback} callback
*/
detachOnUnshift(callback) {
this.onUnshiftCallbacks = this.onUnshiftCallbacks.filter(unshift => unshift != callback);
}
/**
* Removes an ignite callback for the OnSplice event.
* @param {IgniteCallback} callback
*/
detachOnSplice(callback) {
this.onSpliceCallbacks = this.onSpliceCallbacks.filter(slice => slice != callback);
}

63
ignite-template.js
View File

@ -1414,7 +1414,7 @@ class IgniteTemplate {
}
} else if (this.element instanceof HTMLSelectElement) {
if (newValue == null || newValue == undefined || newValue == '') {
this.element.value = this.element.options[0].value;
this.element.value = this.element.options && this.element.options.length > 0 ? this.element.options[0].value : null;
} else if (this.element.value != newValue) {
this.element.value = newValue;
}
@ -2673,8 +2673,8 @@ class pagination extends IgniteTemplate {
}
recalculate() {
//Hide the elements in the current page.
this.pages[this.currentPage].forEach(item => item.style.setProperty("display", "none", "important"));
//Hide the elements in all the pages
this.pages.forEach(page => page.forEach(item => item.style.setProperty("display", "none", "important")));
//Recreate the pages.
var pages = 0;
@ -2815,13 +2815,12 @@ class pagination extends IgniteTemplate {
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);
}
template.element.style.setProperty("display", "none", "important");
this.children.push(template);
this.elements.push(template.element);
});
@ -2848,7 +2847,10 @@ class pagination extends IgniteTemplate {
template.construct(this.element.parentElement, this.element);
}
template.element.style.setProperty("display", "none", "important");
this.children.unshift(template);
this.elements.unshift(template.element);
});
@ -2898,7 +2900,7 @@ class pagination extends IgniteTemplate {
//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);
start = Math.max(this.children.length, 0);
}
//Append any new items if there are any.
@ -2909,10 +2911,13 @@ class pagination extends IgniteTemplate {
if (this.elements.length > 0) {
template.construct(this.element.parentElement, this.elements[start]);
} else {
template.construct(this.element.parentElement, this.element);
template.construct(this.element.parentElement, null);
}
template.element.style.setProperty("display", "none", "important");
this.children.splice(start, 0, template);
this.elements.splice(start, 0, template.element);
start += 1;
@ -3069,50 +3074,46 @@ class pager extends IgniteTemplate {
this.pages.push(page);
}
} else {
var leftSiblingIndex = Math.max(this.currentPage - (this.pageRange - 1), 1);
var leftSiblingIndex = Math.max(this.currentPage - this.pageRange, 1);
var rightSiblingIndex = Math.min(this.currentPage + (this.pageRange - 1) + ((this.pageRange - 1) - (this.currentPage - leftSiblingIndex)), this.pageCount - 2);
var rightSiblingIndex = Math.min(this.currentPage + this.pageRange, this.pageCount - 2);
while (leftSiblingIndex > 1 && (rightSiblingIndex - leftSiblingIndex) < this.pageRange * 2) {
leftSiblingIndex--;
}
while (rightSiblingIndex < this.pageCount - 2 && (rightSiblingIndex - leftSiblingIndex) < this.pageRange * 2) {
rightSiblingIndex++;
}
var shouldShowLeftDots = leftSiblingIndex > 2;
var shouldShowRightDots = rightSiblingIndex < this.pageCount - 2;
if (!shouldShowLeftDots && shouldShowRightDots) {
for (var i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
var page = this.renderCallback(i, i == this.currentPage, false);
page.construct(parent, this.element);
this.pages.push(page);
}
var page = this.renderCallback(rightSiblingIndex + 1, false, true);
page.construct(parent, this.element);
this.pages.push(page);
} else if (shouldShowLeftDots && !shouldShowRightDots) {
if (shouldShowLeftDots) {
var page = this.renderCallback(leftSiblingIndex - 1, false, true);
page.construct(parent, this.element);
this.pages.push(page);
for (var i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
var page = this.renderCallback(i, i == this.currentPage, false);
if (page) {
page.construct(parent, this.element);
this.pages.push(page);
}
} else if (shouldShowLeftDots && shouldShowRightDots) {
var page = this.renderCallback(leftSiblingIndex - 1, false, true);
page.construct(parent, this.element);
this.pages.push(page);
}
for (var i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
var page = this.renderCallback(i, i == this.currentPage, false);
if (page) {
page.construct(parent, this.element);
this.pages.push(page);
}
}
if (shouldShowRightDots) {
var page = this.renderCallback(rightSiblingIndex + 1, false, true);
if (page) {
page.construct(parent, this.element);
this.pages.push(page);
}
}
}
//Construct the last page if we have more than 1 page.
if (this.pageCount > 1) {