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);
+ }
}
}