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

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

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.
+        //Hide the elements in all the pages
-        this.pages[this.currentPage].forEach(item => item.style.setProperty("display", "none", "important"));
+        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.element);
-                    template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling);
+
-                } else {
+                template.element.style.setProperty("display", "none", "important");
-                    template.construct(this.element.parentElement, this.element);
-                }
 
                 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) {
+                if (shouldShowLeftDots) {
-                    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) {
                     var page = this.renderCallback(leftSiblingIndex - 1, false, true);
-                    page.construct(parent, this.element);
+                    if (page) {
-                    this.pages.push(page);
-
-                    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);
                     }
-                } 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++) {
+                for (var i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
-                        var page = this.renderCallback(i, i == this.currentPage, false);
+                    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);
+                    if (page) {
-                    this.pages.push(page);
+                        page.construct(parent, this.element);
+                        this.pages.push(page);
+                    }
                 }
             }