framework7 7.0.9 → 8.0.0-beta.1

package/components/virtual-list/virtual-list-class.js

@@ -3,27 +3,21 @@ import $ from '../../shared/dom7.js';
 import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 import { getDevice } from '../../shared/get-device.js';
-
 class VirtualList extends Framework7Class {
   constructor(app, params) {
     if (params === void 0) {
       params = {};
     }
-
     super(params, [app]);
     const vl = this;
     const device = getDevice();
     const document = getDocument();
     let defaultHeight;
-
     if (app.theme === 'md') {
       defaultHeight = 48;
     } else if (app.theme === 'ios') {
       defaultHeight = 44;
-    } else if (app.theme === 'aurora') {
-      defaultHeight = 38;
     }
-
     const defaults = {
       cols: 1,
       height: defaultHeight,
@@ -37,7 +31,6 @@ class VirtualList extends Framework7Class {
       ul: null,
       createUl: true,
       scrollableParentEl: undefined,
-
       renderItem(item) {
         return `
           <li>
@@ -49,60 +42,51 @@ class VirtualList extends Framework7Class {
           </li>
         `.trim();
       },
-
       on: {}
-    }; // Extend defaults with modules params
+    };
 
+    // Extend defaults with modules params
     vl.useModulesParams(defaults);
     vl.params = extend(defaults, params);
-
     if (vl.params.height === undefined || !vl.params.height) {
       vl.params.height = defaultHeight;
     }
-
     vl.$el = $(params.el);
     vl.el = vl.$el[0];
     if (vl.$el.length === 0) return undefined;
     vl.$el[0].f7VirtualList = vl;
     vl.items = vl.params.items;
-
     if (vl.params.showFilteredItemsOnly) {
       vl.filteredItems = [];
     }
-
     if (vl.params.renderItem) {
       vl.renderItem = vl.params.renderItem;
     }
-
     vl.$pageContentEl = vl.$el.parents('.page-content');
     vl.pageContentEl = vl.$pageContentEl[0];
     vl.$scrollableParentEl = vl.params.scrollableParentEl ? $(vl.params.scrollableParentEl).eq(0) : vl.$pageContentEl;
-
     if (!vl.$scrollableParentEl.length && vl.$pageContentEl.length) {
       vl.$scrollableParentEl = vl.$pageContentEl;
     }
+    vl.scrollableParentEl = vl.$scrollableParentEl[0];
 
-    vl.scrollableParentEl = vl.$scrollableParentEl[0]; // Bad scroll
-
+    // Bad scroll
     if (typeof vl.params.updatableScroll !== 'undefined') {
       vl.updatableScroll = vl.params.updatableScroll;
     } else {
       vl.updatableScroll = true;
-
       if (device.ios && device.osVersion.split('.')[0] < 8) {
         vl.updatableScroll = false;
       }
-    } // Append <ul>
-
+    }
 
+    // Append <ul>
     const ul = vl.params.ul;
     vl.$ul = ul ? $(vl.params.ul) : vl.$el.children('ul');
-
     if (vl.$ul.length === 0 && vl.params.createUl) {
       vl.$el.append('<ul></ul>');
       vl.$ul = vl.$el.children('ul');
     }
-
     vl.ul = vl.$ul[0];
     let $itemsWrapEl;
     if (!vl.ul && !vl.params.createUl) $itemsWrapEl = vl.$el;else $itemsWrapEl = vl.$ul;
@@ -111,7 +95,6 @@ class VirtualList extends Framework7Class {
       itemsWrapEl: $itemsWrapEl[0],
       // DOM cached items
       domCache: {},
-      displayDomCache: {},
       // Temporary DOM Element
       tempDomElement: document.createElement('ul'),
       // Last repain position
@@ -128,17 +111,18 @@ class VirtualList extends Framework7Class {
       listHeight: undefined,
       dynamicHeight: typeof vl.params.height === 'function',
       autoHeight: vl.params.height === 'auto'
-    }); // Install Modules
+    });
 
-    vl.useModules(); // Attach events
+    // Install Modules
+    vl.useModules();
 
+    // Attach events
     const handleScrollBound = vl.handleScroll.bind(vl);
     const handleResizeBound = vl.handleResize.bind(vl);
     let $pageEl;
     let $tabEl;
     let $panelEl;
     let $popupEl;
-
     vl.attachEvents = function attachEvents() {
       $pageEl = vl.$el.parents('.page').eq(0);
       $tabEl = vl.$el.parents('.tab').filter(tabEl => {
@@ -153,7 +137,6 @@ class VirtualList extends Framework7Class {
       if ($popupEl.length) $popupEl.on('popup:open', handleResizeBound);
       app.on('resize', handleResizeBound);
     };
-
     vl.detachEvents = function attachEvents() {
       vl.$scrollableParentEl.off('scroll', handleScrollBound);
       if ($pageEl.length) $pageEl.off('page:reinit', handleResizeBound);
@@ -161,25 +144,20 @@ class VirtualList extends Framework7Class {
       if ($panelEl.length) $panelEl.off('panel:open', handleResizeBound);
       if ($popupEl.length) $popupEl.off('popup:open', handleResizeBound);
       app.off('resize', handleResizeBound);
-    }; // Init
-
-
+    };
+    // Init
     vl.init();
     return vl;
   }
-
   setListSize(autoHeightRerender) {
     const vl = this;
     const items = vl.filteredItems || vl.items;
-
     if (!autoHeightRerender) {
       vl.pageHeight = vl.$scrollableParentEl[0].offsetHeight;
     }
-
     if (vl.dynamicHeight) {
       vl.listHeight = 0;
       vl.heights = [];
-
       for (let i = 0; i < items.length; i += 1) {
         const itemHeight = vl.params.height(items[i]);
         vl.listHeight += itemHeight;
@@ -193,21 +171,17 @@ class VirtualList extends Framework7Class {
       vl.$itemsWrapEl.find(`[data-virtual-list-index]`).forEach(el => {
         renderedItems[parseInt(el.getAttribute('data-virtual-list-index'), 10)] = el;
       });
-
       for (let i = 0; i < items.length; i += 1) {
         const renderedItem = renderedItems[i];
-
         if (renderedItem) {
           if (!vl.heightsCalculated.includes(i)) {
             vl.heights[i] = renderedItem.offsetHeight;
             vl.heightsCalculated.push(i);
           }
         }
-
         if (typeof vl.heights[i] === 'undefined') {
           vl.heights[i] = 40;
         }
-
         vl.listHeight += vl.heights[i];
       }
     } else {
@@ -218,80 +192,65 @@ class VirtualList extends Framework7Class {
       vl.rowsToRender = vl.rowsPerScreen + vl.rowsBefore + vl.rowsAfter;
       vl.maxBufferHeight = vl.rowsBefore / 2 * vl.params.height;
     }
-
     if (vl.updatableScroll || vl.params.setListHeight) {
       vl.$itemsWrapEl.css({
         height: `${vl.listHeight}px`
       });
     }
   }
-
   render(force, forceScrollTop) {
     const vl = this;
     if (force) vl.lastRepaintY = null;
     let scrollTop = -(vl.$el[0].getBoundingClientRect().top - vl.$scrollableParentEl[0].getBoundingClientRect().top);
     if (typeof forceScrollTop !== 'undefined') scrollTop = forceScrollTop;
-
     if (vl.lastRepaintY === null || Math.abs(scrollTop - vl.lastRepaintY) > vl.maxBufferHeight || !vl.updatableScroll && vl.$scrollableParentEl[0].scrollTop + vl.pageHeight >= vl.$scrollableParentEl[0].scrollHeight) {
       vl.lastRepaintY = scrollTop;
     } else {
       return;
     }
-
     const items = vl.filteredItems || vl.items;
     let fromIndex;
     let toIndex;
     let heightBeforeFirstItem = 0;
     let heightBeforeLastItem = 0;
-
     if (vl.dynamicHeight || vl.autoHeight) {
       let itemTop = 0;
       let itemHeight;
       vl.maxBufferHeight = vl.pageHeight;
-
       for (let j = 0; j < vl.heights.length; j += 1) {
         itemHeight = vl.heights[j];
-
         if (typeof fromIndex === 'undefined') {
           if (itemTop + itemHeight >= scrollTop - vl.pageHeight * 2 * vl.params.dynamicHeightBufferSize) fromIndex = j;else heightBeforeFirstItem += itemHeight;
         }
-
         if (typeof toIndex === 'undefined') {
           if (itemTop + itemHeight >= scrollTop + vl.pageHeight * 2 * vl.params.dynamicHeightBufferSize || j === vl.heights.length - 1) toIndex = j + 1;
           heightBeforeLastItem += itemHeight;
         }
-
         itemTop += itemHeight;
       }
-
       toIndex = Math.min(toIndex, items.length);
     } else {
       fromIndex = (parseInt(scrollTop / vl.params.height, 10) - vl.rowsBefore) * vl.params.cols;
-
       if (fromIndex < 0) {
         fromIndex = 0;
       }
-
       toIndex = Math.min(fromIndex + vl.rowsToRender * vl.params.cols, items.length);
     }
-
     let topPosition;
     const renderExternalItems = [];
     vl.reachEnd = false;
     let i;
-
     for (i = fromIndex; i < toIndex; i += 1) {
-      let itemEl; // Define real item index
-
+      let itemEl;
+      // Define real item index
       const index = vl.items.indexOf(items[i]);
       if (i === fromIndex) vl.currentFromIndex = index;
       if (i === toIndex - 1) vl.currentToIndex = index;
-
       if (vl.filteredItems) {
         if (vl.items[index] === vl.filteredItems[vl.filteredItems.length - 1]) vl.reachEnd = true;
-      } else if (index === vl.items.length - 1) vl.reachEnd = true; // Find items
-
+      } else if (index === vl.items.length - 1) vl.reachEnd = true;
 
+      // Find items
       if (vl.params.renderExternal) {
         renderExternalItems.push(items[i]);
       } else if (vl.domCache[index]) {
@@ -303,13 +262,12 @@ class VirtualList extends Framework7Class {
         } else {
           vl.tempDomElement.innerHTML = items[i].toString().trim();
         }
-
         itemEl = vl.tempDomElement.childNodes[0];
         if (vl.params.cache) vl.domCache[index] = itemEl;
         itemEl.f7VirtualListIndex = index;
-      } // Set item top position
-
+      }
 
+      // Set item top position
       if (i === fromIndex) {
         if (vl.dynamicHeight || vl.autoHeight) {
           topPosition = heightBeforeFirstItem;
@@ -317,26 +275,27 @@ class VirtualList extends Framework7Class {
           topPosition = i * vl.params.height / vl.params.cols;
         }
       }
-
       if (!vl.params.renderExternal) {
-        itemEl.style.top = `${topPosition}px`; // Before item insert
+        itemEl.style.top = `${topPosition}px`;
 
-        vl.emit('local::itemBeforeInsert vlItemBeforeInsert', vl, itemEl, items[i]); // Append item to fragment
+        // Before item insert
+        vl.emit('local::itemBeforeInsert vlItemBeforeInsert', vl, itemEl, items[i]);
 
+        // Append item to fragment
         vl.fragment.appendChild(itemEl);
       }
-    } // Update list height with not updatable scroll
-
+    }
 
+    // Update list height with not updatable scroll
     if (!vl.updatableScroll) {
       if (vl.dynamicHeight || vl.autoHeight) {
         vl.itemsWrapEl.style.height = `${heightBeforeLastItem}px`;
       } else {
         vl.itemsWrapEl.style.height = `${i * vl.params.height / vl.params.cols}px`;
       }
-    } // Update list html
-
+    }
 
+    // Update list html
     if (vl.params.renderExternal) {
       if (items && items.length === 0) {
         vl.reachEnd = true;
@@ -345,21 +304,17 @@ class VirtualList extends Framework7Class {
       vl.emit('local::beforeClear vlBeforeClear', vl, vl.fragment);
       vl.itemsWrapEl.innerHTML = '';
       vl.emit('local::itemsBeforeInsert vlItemsBeforeInsert', vl, vl.fragment);
-
       if (items && items.length === 0) {
         vl.reachEnd = true;
         if (vl.params.emptyTemplate) vl.itemsWrapEl.innerHTML = vl.params.emptyTemplate;
       } else {
         vl.itemsWrapEl.appendChild(vl.fragment);
       }
-
       vl.emit('local::itemsAfterInsert vlItemsAfterInsert', vl, vl.fragment);
     }
-
     if (typeof forceScrollTop !== 'undefined' && force) {
       vl.$scrollableParentEl.scrollTop(forceScrollTop, 0);
     }
-
     if (vl.params.renderExternal) {
       vl.params.renderExternal(vl, {
         fromIndex,
@@ -369,52 +324,42 @@ class VirtualList extends Framework7Class {
         items: renderExternalItems
       });
     }
-
     if (vl.autoHeight) {
       requestAnimationFrame(() => {
         vl.setListSize(true);
       });
     }
-  } // Filter
-
+  }
 
+  // Filter
   filterItems(indexes, resetScrollTop) {
     if (resetScrollTop === void 0) {
       resetScrollTop = true;
     }
-
     const vl = this;
     vl.filteredItems = [];
-
     for (let i = 0; i < indexes.length; i += 1) {
       vl.filteredItems.push(vl.items[indexes[i]]);
     }
-
     if (resetScrollTop) {
       vl.$scrollableParentEl[0].scrollTop = 0;
     }
-
     vl.update();
   }
-
   resetFilter() {
     const vl = this;
-
     if (vl.params.showFilteredItemsOnly) {
       vl.filteredItems = [];
     } else {
       vl.filteredItems = null;
       delete vl.filteredItems;
     }
-
     vl.update();
   }
-
   scrollToItem(index) {
     const vl = this;
     if (index > vl.items.length) return false;
     let itemTop = 0;
-
     if (vl.dynamicHeight || vl.autoHeight) {
       for (let i = 0; i < index; i += 1) {
         itemTop += vl.heights[i];
@@ -422,50 +367,43 @@ class VirtualList extends Framework7Class {
     } else {
       itemTop = index * vl.params.height;
     }
-
     const listTop = vl.$el[0].offsetTop;
     vl.render(true, listTop + itemTop - parseInt(vl.$scrollableParentEl.css('padding-top'), 10));
     return true;
   }
-
   handleScroll() {
     const vl = this;
     vl.render();
-  } // Handle resize event
-
+  }
 
+  // Handle resize event
   isVisible() {
     const vl = this;
     return !!(vl.el.offsetWidth || vl.el.offsetHeight || vl.el.getClientRects().length);
   }
-
   handleResize() {
     const vl = this;
-
     if (vl.isVisible()) {
       vl.heightsCalculated = [];
       vl.setListSize();
       vl.render(true);
     }
-  } // Append
-
+  }
 
+  // Append
   appendItems(items) {
     const vl = this;
-
     for (let i = 0; i < items.length; i += 1) {
       vl.items.push(items[i]);
     }
-
     vl.update();
   }
-
   appendItem(item) {
     const vl = this;
     vl.appendItems([item]);
-  } // Replace
-
+  }
 
+  // Replace
   replaceAllItems(items) {
     const vl = this;
     vl.items = items;
@@ -473,22 +411,19 @@ class VirtualList extends Framework7Class {
     vl.domCache = {};
     vl.update();
   }
-
   replaceItem(index, item) {
     const vl = this;
     vl.items[index] = item;
     if (vl.params.cache) delete vl.domCache[index];
     vl.update();
-  } // Prepend
-
+  }
 
+  // Prepend
   prependItems(items) {
     const vl = this;
-
     for (let i = items.length - 1; i >= 0; i -= 1) {
       vl.items.unshift(items[i]);
     }
-
     if (vl.params.cache) {
       const newCache = {};
       Object.keys(vl.domCache).forEach(cached => {
@@ -496,24 +431,21 @@ class VirtualList extends Framework7Class {
       });
       vl.domCache = newCache;
     }
-
     vl.update();
   }
-
   prependItem(item) {
     const vl = this;
     vl.prependItems([item]);
-  } // Move
-
+  }
 
+  // Move
   moveItem(from, to) {
     const vl = this;
     const fromIndex = from;
     let toIndex = to;
-    if (fromIndex === toIndex) return; // remove item from array
-
+    if (fromIndex === toIndex) return;
+    // remove item from array
     const item = vl.items.splice(fromIndex, 1)[0];
-
     if (toIndex >= vl.items.length) {
       // Add item to the end
       vl.items.push(item);
@@ -521,9 +453,8 @@ class VirtualList extends Framework7Class {
     } else {
       // Add item to new index
       vl.items.splice(toIndex, 0, item);
-    } // Update cache
-
-
+    }
+    // Update cache
     if (vl.params.cache) {
       const newCache = {};
       Object.keys(vl.domCache).forEach(cached => {
@@ -537,71 +468,61 @@ class VirtualList extends Framework7Class {
       });
       vl.domCache = newCache;
     }
-
     vl.update();
-  } // Insert before
-
+  }
 
+  // Insert before
   insertItemBefore(index, item) {
     const vl = this;
-
     if (index === 0) {
       vl.prependItem(item);
       return;
     }
-
     if (index >= vl.items.length) {
       vl.appendItem(item);
       return;
     }
-
-    vl.items.splice(index, 0, item); // Update cache
-
+    vl.items.splice(index, 0, item);
+    // Update cache
     if (vl.params.cache) {
       const newCache = {};
       Object.keys(vl.domCache).forEach(cached => {
         const cachedIndex = parseInt(cached, 10);
-
         if (cachedIndex >= index) {
           newCache[cachedIndex + 1] = vl.domCache[cachedIndex];
         }
       });
       vl.domCache = newCache;
     }
-
     vl.update();
-  } // Delete
-
+  }
 
+  // Delete
   deleteItems(indexes) {
     const vl = this;
     let prevIndex;
     let indexShift = 0;
-
     for (let i = 0; i < indexes.length; i += 1) {
       let index = indexes[i];
-
       if (typeof prevIndex !== 'undefined') {
         if (index > prevIndex) {
           indexShift = -i;
         }
       }
-
       index += indexShift;
-      prevIndex = indexes[i]; // Delete item
-
-      const deletedItem = vl.items.splice(index, 1)[0]; // Delete from filtered
+      prevIndex = indexes[i];
+      // Delete item
+      const deletedItem = vl.items.splice(index, 1)[0];
 
+      // Delete from filtered
       if (vl.filteredItems && vl.filteredItems.indexOf(deletedItem) >= 0) {
         vl.filteredItems.splice(vl.filteredItems.indexOf(deletedItem), 1);
-      } // Update cache
-
-
+      }
+      // Update cache
       if (vl.params.cache) {
         const newCache = {};
         Object.keys(vl.domCache).forEach(cached => {
           const cachedIndex = parseInt(cached, 10);
-
           if (cachedIndex === index) {
             delete vl.domCache[index];
           } else if (parseInt(cached, 10) > index) {
@@ -613,10 +534,8 @@ class VirtualList extends Framework7Class {
         vl.domCache = newCache;
       }
     }
-
     vl.update();
   }
-
   deleteAllItems() {
     const vl = this;
     vl.items = [];
@@ -624,38 +543,33 @@ class VirtualList extends Framework7Class {
     if (vl.params.cache) vl.domCache = {};
     vl.update();
   }
-
   deleteItem(index) {
     const vl = this;
     vl.deleteItems([index]);
-  } // Clear cache
-
+  }
 
+  // Clear cache
   clearCache() {
     const vl = this;
     vl.domCache = {};
-  } // Update Virtual List
-
+  }
 
+  // Update Virtual List
   update(deleteCache) {
     const vl = this;
-
     if (deleteCache && vl.params.cache) {
       vl.domCache = {};
     }
-
     vl.heightsCalculated = [];
     vl.setListSize();
     vl.render(true);
   }
-
   init() {
     const vl = this;
     vl.attachEvents();
     vl.setListSize();
     vl.render();
   }
-
   destroy() {
     let vl = this;
     vl.detachEvents();
@@ -664,7 +578,5 @@ class VirtualList extends Framework7Class {
     deleteProps(vl);
     vl = null;
   }
-
 }
-
 export default VirtualList;

package/components/virtual-list/virtual-list.d.ts

@@ -84,7 +84,7 @@ export namespace VirtualList {
     rowsAfter?: number;
     /** Number of items per row. Doesn't compatible when using Virtual List with dynamic height (default 1) */
     cols?: number;
-    /** If number - list item height in px. If function then function should return item height. If "auto" - will automatically calculate each items heights. By default equals to 44 for iOS theme, 48 for MD theme, and 38 for Aurora theme */
+    /** If number - list item height in px. If function then function should return item height. If "auto" - will automatically calculate each items heights. By default equals to 44 for iOS theme, 48 for MD theme */
     height?: number | Function | string;
     /** This optional function allows to use custom function to render item HTML. It could be used instead of template parameter */
     renderItem?(item: any): string;

package/components/virtual-list/virtual-list.js

@@ -5,7 +5,6 @@ export default {
   static: {
     VirtualList
   },
-
   create() {
     const app = this;
     app.virtualList = ConstructorMethods({
@@ -15,5 +14,4 @@ export default {
       domProp: 'f7VirtualList'
     });
   }
-
 };