From 4203884aff2ff8e5820b6341638b52ba4917dab2 Mon Sep 17 00:00:00 2001 From: MattMo Date: Tue, 18 Apr 2023 15:38:49 -0700 Subject: [PATCH] Added more documentation. Fixed bugs with pagination to better support push, and slice. --- ignite-html.js | 54 ++++++++++++++++++++++++++++++++++ ignite-template.js | 73 +++++++++++++++++++++++----------------------- 2 files changed, 91 insertions(+), 36 deletions(-) diff --git a/ignite-html.js b/ignite-html.js index 85af996..a0162a3 100644 --- a/ignite-html.js +++ b/ignite-html.js @@ -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); } diff --git a/ignite-template.js b/ignite-template.js index 91c9300..0678213 100644 --- a/ignite-template.js +++ b/ignite-template.js @@ -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.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,48 +3074,44 @@ 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); + 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); - page.construct(parent, this.element); - this.pages.push(page); + if (page) { + page.construct(parent, this.element); + this.pages.push(page); + } } }