@html-next/vertical-collection 1.0.0-beta.9 → 2.0.1

package/addon/-private/data-view/radar/radar.js

@@ -1,30 +1,30 @@
-import Ember from 'ember';
+import { A } from '@ember/array';
+import { set, get } from '@ember/object';
 import { assert } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
 
 import { Token, scheduler } from 'ember-raf-scheduler';
 
-import VirtualComponent from '../virtual-component';
+import VirtualComponent from '../elements/virtual-component';
+import OccludedContent from '../elements/occluded-content';
 import insertRangeBefore from '../utils/insert-range-before';
 import objectAt from '../utils/object-at';
 import roundTo from '../utils/round-to';
+import { isPrepend, isAppend } from '../utils/mutation-checkers';
 
 import {
   addScrollHandler,
   removeScrollHandler
 } from '../utils/scroll-handler';
 
-import Container from '../container';
+import ViewportContainer from '../viewport-container';
 
 import closestElement from '../../utils/element/closest';
 import estimateElementHeight from '../../utils/element/estimate-element-height';
 import getScaledClientRect from '../../utils/element/get-scaled-client-rect';
+import keyForItem from '../../ember-internals/key-for-item';
 
-const {
-  A,
-  get,
-  set
-} = Ember;
+import document from '../../utils/document-shim';
 
 export default class Radar {
   constructor(
@@ -33,12 +33,14 @@ export default class Radar {
       bufferSize,
       containerSelector,
       estimateHeight,
+      initialRenderCount,
       items,
+      key,
       renderAll,
       renderFromLast,
-      initialRenderCount,
       shouldRecycle,
-      startingIndex
+      startingIndex,
+      occlusionTagName
     }
   ) {
     this.token = new Token(parentToken);
@@ -49,6 +51,7 @@ export default class Radar {
     this.estimateHeight = estimateHeight;
     this.initialRenderCount = initialRenderCount;
     this.items = items;
+    this.key = key;
     this.renderAll = renderAll;
     this.renderFromLast = renderFromLast;
     this.shouldRecycle = shouldRecycle;
@@ -82,32 +85,40 @@ export default class Radar {
     this._nextLayout = null;
     this._started = false;
     this._didReset = true;
+    this._didUpdateItems = false;
 
     // Cache state
     this._scrollTop = 0;
+
     // Setting these values to infinity starts us in a guaranteed good state for the radar,
     // so it knows that it needs to run certain measurements, etc.
     this._prevFirstItemIndex = Infinity;
     this._prevLastItemIndex = -Infinity;
     this._prevFirstVisibleIndex = 0;
     this._prevLastVisibleIndex = 0;
+
     this._firstReached = false;
     this._lastReached = false;
+    this._prevTotalItems = 0;
+    this._prevFirstKey = 0;
+    this._prevLastKey = 0;
+
     this._componentPool = [];
     this._prependComponentPool = [];
 
     // Boundaries
-    this._occludedContentBefore = new VirtualComponent();
-    this._occludedContentAfter = new VirtualComponent();
-
-    this._occludedContentBefore.element = document.createElement('occluded-content');
-    this._occludedContentAfter.element = document.createElement('occluded-content');
+    this._occludedContentBefore = new OccludedContent(occlusionTagName);
+    this._occludedContentAfter = new OccludedContent(occlusionTagName);
 
-    this._occludedContentBefore.element.addEventListener('click', this.pageUp.bind(this));
-    this._occludedContentAfter.element.addEventListener('click', this.pageDown.bind(this));
+    this._pageUpHandler = this.pageUp.bind(this);
+    this._occludedContentBefore.addEventListener('click', this._pageUpHandler);
+    this._pageDownHandler = this.pageDown.bind(this);
+    this._occludedContentAfter.addEventListener('click', this._pageDownHandler);
 
     // Element to hold pooled component DOM when not in use
-    this._domPool = document.createDocumentFragment();
+    if (document) {
+      this._domPool = document.createDocumentFragment();
+    }
 
     // Initialize virtual components
     this.virtualComponents = A([this._occludedContentBefore, this._occludedContentAfter]);
@@ -131,12 +142,18 @@ export default class Radar {
       this.orderedComponents[i].destroy();
     }
 
+    // Boundaries
+    this._occludedContentBefore.removeEventListener('click', this._pageUpHandler);
+    this._occludedContentAfter.removeEventListener('click', this._pageDownHandler);
+    this._occludedContentBefore.destroy();
+    this._occludedContentAfter.destroy();
+
     this.orderedComponents = null;
     set(this, 'virtualComponents', null);
 
     if (this._started) {
       removeScrollHandler(this._scrollContainer, this._scrollHandler);
-      Container.removeEventListener('resize', this._resizeHandler);
+      ViewportContainer.removeEventListener('resize', this._resizeHandler);
     }
   }
 
@@ -158,7 +175,7 @@ export default class Radar {
     // Use the occluded content element, which has been inserted into the DOM,
     // to find the item container and the scroll container
     this._itemContainer = _occludedContentBefore.element.parentNode;
-    this._scrollContainer = containerSelector === 'body' ? Container : closestElement(this._itemContainer, containerSelector);
+    this._scrollContainer = containerSelector === 'body' ? ViewportContainer : closestElement(this._itemContainer, containerSelector);
 
     this._updateConstants();
 
@@ -180,6 +197,10 @@ export default class Radar {
       // initialize the scrollTop value, which will be applied to the
       // scrollContainer after the collection has been initialized
       this._scrollTop = startingScrollTop + _collectionOffset;
+
+      this._prevFirstVisibleIndex = startingIndex;
+    } else {
+      this._scrollTop = this._scrollContainer.scrollTop;
     }
 
     this._started = true;
@@ -187,7 +208,7 @@ export default class Radar {
 
     // Setup event handlers
     addScrollHandler(this._scrollContainer, this._scrollHandler);
-    Container.addEventListener('resize', this._resizeHandler);
+    ViewportContainer.addEventListener('resize', this._resizeHandler);
   }
 
   /*
@@ -202,7 +223,13 @@ export default class Radar {
    *
    * @private
    */
-  scheduleUpdate() {
+  scheduleUpdate(didUpdateItems) {
+    if (didUpdateItems === true) {
+      // Set the update items flag first, in case scheduleUpdate has already been called
+      // but the RAF hasn't yet run
+      this._didUpdateItems = true;
+    }
+
     if (this._nextUpdate !== null || this._started === false) {
       return;
     }
@@ -216,6 +243,11 @@ export default class Radar {
   }
 
   update() {
+    if (this._didUpdateItems === true) {
+      this._determineUpdateType();
+      this._didUpdateItems = false;
+    }
+
     this._updateConstants();
     this._updateIndexes();
     this._updateVirtualComponents();
@@ -224,7 +256,7 @@ export default class Radar {
   }
 
   afterUpdate() {
-    const { totalItems } = this;
+    const { _prevTotalItems: totalItems } = this;
 
     const scrollDiff = this._calculateScrollDiff();
 
@@ -238,7 +270,6 @@ export default class Radar {
     // Unset prepend offset, we're done with any prepend changes at this point
     this._prependOffset = 0;
 
-    // Send actions if there are any items
     if (totalItems !== 0) {
       this._sendActions();
     }
@@ -274,6 +305,35 @@ export default class Radar {
     return (this._prependOffset + this._scrollTop) - this._scrollContainer.scrollTop;
   }
 
+  _determineUpdateType() {
+    const {
+      items,
+      key,
+      totalItems,
+
+      _prevTotalItems,
+      _prevFirstKey,
+      _prevLastKey
+    } = this;
+
+    const lenDiff = totalItems - _prevTotalItems;
+
+    if (isPrepend(lenDiff, items, key, _prevFirstKey, _prevLastKey) === true) {
+      this.prepend(lenDiff);
+    } else if (isAppend(lenDiff, items, key, _prevFirstKey, _prevLastKey) === true) {
+      this.append(lenDiff);
+    } else {
+      this.reset();
+    }
+
+    const firstItem = objectAt(this.items, 0);
+    const lastItem = objectAt(this.items, this.totalItems - 1);
+
+    this._prevTotalItems = totalItems;
+    this._prevFirstKey = totalItems > 0 ? keyForItem(firstItem, key, 0) : 0;
+    this._prevLastKey = totalItems > 0 ? keyForItem(lastItem, key, totalItems - 1) : 0;
+  }
+
   _updateConstants() {
     const {
       estimateHeight,
@@ -361,9 +421,8 @@ export default class Radar {
 
       shouldRecycle,
       renderAll,
-
-      _didReset,
       _started,
+      _didReset,
 
       _occludedContentBefore,
       _occludedContentAfter,
@@ -483,12 +542,12 @@ export default class Radar {
     const beforeItemsText = totalItemsBefore === 1 ? 'item' : 'items';
     const afterItemsText = totalItemsAfter === 1 ? 'item' : 'items';
 
-    // Set padding element heights, unset itemContainer's minHeight
-    _occludedContentBefore.element.style.height = `${Math.max(renderedTotalBefore, 0)}px`;
-    _occludedContentBefore.element.innerHTML = totalItemsBefore > 0 ? `And ${totalItemsBefore} ${beforeItemsText} before` : '';
+    // Set padding element heights.
+    _occludedContentBefore.style.height = `${Math.max(renderedTotalBefore, 0)}px`;
+    _occludedContentBefore.innerHTML = totalItemsBefore > 0 ? `And ${totalItemsBefore} ${beforeItemsText} before` : '';
 
-    _occludedContentAfter.element.style.height = `${Math.max(renderedTotalAfter, 0)}px`;
-    _occludedContentAfter.element.innerHTML = totalItemsAfter > 0 ? `And ${totalItemsAfter} ${afterItemsText} after` : '';
+    _occludedContentAfter.style.height = `${Math.max(renderedTotalAfter, 0)}px`;
+    _occludedContentAfter.innerHTML = totalItemsAfter > 0 ? `And ${totalItemsAfter} ${afterItemsText} after` : '';
   }
 
   _appendComponent(component) {

package/addon/-private/data-view/utils/mutation-checkers.js

@@ -0,0 +1,29 @@
+import { get } from '@ember/object';
+import objectAt from './object-at';
+import keyForItem from '../../ember-internals/key-for-item';
+
+export function isPrepend(lenDiff, newItems, key, oldFirstKey, oldLastKey) {
+  const newItemsLength = get(newItems, 'length');
+
+  if (lenDiff <= 0 || lenDiff >= newItemsLength || newItemsLength === 0) {
+    return false;
+  }
+
+  const newFirstKey = keyForItem(objectAt(newItems, lenDiff), key, lenDiff);
+  const newLastKey = keyForItem(objectAt(newItems, newItemsLength - 1), key, newItemsLength - 1);
+
+  return oldFirstKey === newFirstKey && oldLastKey === newLastKey;
+}
+
+export function isAppend(lenDiff, newItems, key, oldFirstKey, oldLastKey) {
+  const newItemsLength = get(newItems, 'length');
+
+  if (lenDiff <= 0 || lenDiff >= newItemsLength || newItemsLength === 0) {
+    return false;
+  }
+
+  const newFirstKey = keyForItem(objectAt(newItems, 0), key, 0);
+  const newLastKey = keyForItem(objectAt(newItems, newItemsLength - lenDiff - 1), key, newItemsLength - lenDiff - 1);
+
+  return oldFirstKey === newFirstKey && oldLastKey === newLastKey;
+}

package/addon/-private/data-view/utils/scroll-handler.js

@@ -1,8 +1,6 @@
+import { run } from '@ember/runloop';
 import { scheduler } from 'ember-raf-scheduler';
 import SUPPORTS_PASSIVE from './supports-passive';
-import Ember from 'ember';
-
-const { run } = Ember;
 const DEFAULT_ARRAY_SIZE = 10;
 const UNDEFINED_VALUE = Object.create(null);
 

package/addon/-private/data-view/utils/supports-passive.js

@@ -4,6 +4,7 @@ try {
   let opts = Object.defineProperty({}, 'passive', {
     get() {
       supportsPassive = true;
+      return supportsPassive;
     }
   });
 

package/addon/-private/data-view/viewport-container.js

@@ -0,0 +1,70 @@
+/*
+ * There are significant differences between browsers
+ * in how they implement "scroll" on document.body
+ *
+ * The only cross-browser listener for scroll on body
+ * is to listen on window with capture.
+ *
+ * They also implement different standards for how to
+ * access the scroll position.
+ *
+ * This singleton class provides a cross-browser way
+ * to access and set the scrollTop and scrollLeft properties.
+ *
+ */
+export function ViewportContainer() {
+
+  // A bug occurs in Chrome when we reload the browser at a lower
+  // scrollTop, window.scrollY becomes stuck on a single value.
+  Object.defineProperty(this, 'scrollTop', {
+    get() {
+      return document.body.scrollTop
+        || document.documentElement.scrollTop;
+    },
+    set(v) {
+      return document.body.scrollTop = document.documentElement.scrollTop = v;
+    }
+  });
+
+  Object.defineProperty(this, 'scrollLeft', {
+    get() {
+      return window.scrollX
+        || window.pageXOffset
+        || document.body.scrollLeft
+        || document.documentElement.scrollLeft;
+    },
+    set(v) {
+      return window.scrollX
+        = window.pageXOffset
+        = document.body.scrollLeft
+        = document.documentElement.scrollLeft = v;
+    }
+  });
+
+  Object.defineProperty(this, 'offsetHeight', {
+    get() {
+      return window.innerHeight;
+    }
+  });
+}
+
+ViewportContainer.prototype.addEventListener = function addEventListener(event, handler, options) {
+  return window.addEventListener(event, handler, options);
+};
+
+ViewportContainer.prototype.removeEventListener = function addEventListener(event, handler, options) {
+  return window.removeEventListener(event, handler, options);
+};
+
+ViewportContainer.prototype.getBoundingClientRect = function getBoundingClientRect() {
+  return {
+    height: window.innerHeight,
+    width: window.innerWidth,
+    top: 0,
+    left: 0,
+    right: window.innerWidth,
+    bottom: window.innerHeight
+  };
+};
+
+export default new ViewportContainer();

package/addon/-private/ember-internals/identity.js

@@ -1,8 +1,4 @@
-import Ember from 'ember';
-
-const {
-  guidFor
-  } = Ember;
+import { guidFor } from '@ember/object/internals';
 
 export default function identity(item) {
   let key;

package/addon/-private/ember-internals/key-for-item.js

@@ -1,12 +1,8 @@
-import Ember from 'ember';
+import { get } from '@ember/object';
 import { assert } from '@ember/debug';
 
 import identity from './identity';
 
-const {
-  get
-} = Ember;
-
 export default function keyForItem(item, keyPath, index) {
   let key;
 

package/addon/-private/index.js

@@ -5,7 +5,7 @@ export { default as closestElement } from './utils/element/closest';
 export { default as DynamicRadar } from './data-view/radar/dynamic-radar';
 export { default as StaticRadar } from './data-view/radar/static-radar';
 
-export { default as Container } from './data-view/container';
+export { default as ViewportContainer } from './data-view/viewport-container';
 export { default as objectAt } from './data-view/utils/object-at';
 
 export {

package/addon/-private/utils/document-shim.js

@@ -0,0 +1 @@
+export default window ? window.document : undefined;

package/addon/components/vertical-collection/component.js

@@ -1,11 +1,12 @@
-/* global Array, Math */
-import Ember from 'ember';
+import { empty, readOnly } from '@ember/object/computed';
+
+import Component from '@ember/component';
+import { get, computed } from '@ember/object';
+import { run } from '@ember/runloop';
 import layout from './template';
 
 import { scheduler, Token } from 'ember-raf-scheduler';
 
-import { SUPPORTS_INVERSE_BLOCK } from 'ember-compatibility-helpers';
-
 import {
   keyForItem,
   DynamicRadar,
@@ -13,13 +14,6 @@ import {
   objectAt
 } from '../../-private';
 
-const {
-  computed,
-  Component,
-  get,
-  run
-} = Ember;
-
 const VerticalCollection = Component.extend({
   layout,
 
@@ -147,52 +141,28 @@ const VerticalCollection = Component.extend({
    */
   renderAll: false,
 
-  isEmpty: computed.empty('items'),
-  shouldYieldToInverse: computed.readOnly('isEmpty'),
+  /**
+   * The tag name used in DOM elements before and after the rendered list. By default, it is set to
+   * 'occluded-content' to avoid any confusion with user's CSS settings. However, it could be
+   * overriden to provide custom behavior (for example, in table user wants to set it to 'tr' to
+   * comply with table semantics).
+   */
+  occlusionTagName: 'occluded-content',
+
+  isEmpty: empty('items'),
+  shouldYieldToInverse: readOnly('isEmpty'),
 
   virtualComponents: computed('items.[]', 'renderAll', 'estimateHeight', 'bufferSize', function() {
-    const {
-      _radar,
-      _prevItemsLength,
-      _prevFirstKey,
-      _prevLastKey
-    } = this;
+    const { _radar } = this;
+
+    const items = this.get('items');
 
+    _radar.items = items === null || items === undefined ? [] : items;
     _radar.estimateHeight = this.get('estimateHeight');
     _radar.renderAll = this.get('renderAll');
     _radar.bufferSize = this.get('bufferSize');
 
-    const items = this.get('items');
-    const itemsLength = get(items, 'length');
-
-    if (items === null || items === undefined || itemsLength === 0) {
-      _radar.items = [];
-      _radar.reset();
-      _radar.scheduleUpdate();
-
-      this._prevItemsLength = this._prevFirstKey = this._prevLastKey = 0;
-
-      return _radar.virtualComponents;
-    }
-
-    _radar.items = items;
-
-    const key = this.get('key');
-    const lenDiff = itemsLength - _prevItemsLength;
-
-    this._prevItemsLength = itemsLength;
-    this._prevFirstKey = keyForItem(objectAt(items, 0), key, 0);
-    this._prevLastKey = keyForItem(objectAt(items, itemsLength - 1), key, itemsLength - 1);
-
-    if (isPrepend(lenDiff, items, key, _prevFirstKey, _prevLastKey) === true) {
-      _radar.prepend(lenDiff);
-    } else if (isAppend(lenDiff, items, key, _prevFirstKey, _prevLastKey) === true) {
-      _radar.append(lenDiff);
-    } else {
-      _radar.reset();
-    }
-
-    _radar.scheduleUpdate();
+    _radar.scheduleUpdate(true);
 
     return _radar.virtualComponents;
   }),
@@ -216,7 +186,13 @@ const VerticalCollection = Component.extend({
             const item = objectAt(items, index);
             const key = keyForItem(item, keyPath, index);
 
-            this.sendAction(action, item, index, key);
+            // this.sendAction will be deprecated in ember 4.0
+            const _action = get(this, action);
+            if (typeof _action == 'function') {
+              _action(item, index, key);
+            } else if (typeof _action === 'string') {
+              this.sendAction(action, item, index, key);
+            }
           });
           this._scheduledActions.length = 0;
         });
@@ -252,6 +228,7 @@ const VerticalCollection = Component.extend({
     const renderAll = this.get('renderAll');
     const renderFromLast = this.get('renderFromLast');
     const shouldRecycle = this.get('shouldRecycle');
+    const occlusionTagName = this.get('occlusionTagName');
 
     const idForFirstItem = this.get('idForFirstItem');
     const key = this.get('key');
@@ -266,10 +243,12 @@ const VerticalCollection = Component.extend({
         estimateHeight,
         initialRenderCount,
         items,
+        key,
         renderAll,
         renderFromLast,
         shouldRecycle,
-        startingIndex
+        startingIndex,
+        occlusionTagName
       }
     );
 
@@ -308,12 +287,6 @@ VerticalCollection.reopenClass({
   positionalParams: ['items']
 });
 
-if (!SUPPORTS_INVERSE_BLOCK) {
-  VerticalCollection.reopen({
-    shouldYieldToInverse: false
-  });
-}
-
 function calculateStartingIndex(items, idForFirstItem, key, renderFromLast) {
   const totalItems = get(items, 'length');
 
@@ -334,30 +307,4 @@ function calculateStartingIndex(items, idForFirstItem, key, renderFromLast) {
   return startingIndex;
 }
 
-function isPrepend(lenDiff, newItems, key, oldFirstKey, oldLastKey) {
-  const newItemsLength = get(newItems, 'length');
-
-  if (lenDiff <= 0 || lenDiff >= newItemsLength || newItemsLength === 0) {
-    return false;
-  }
-
-  const newFirstKey = keyForItem(objectAt(newItems, lenDiff), key, lenDiff);
-  const newLastKey = keyForItem(objectAt(newItems, newItemsLength - 1), key, newItemsLength - 1);
-
-  return oldFirstKey === newFirstKey && oldLastKey === newLastKey;
-}
-
-function isAppend(lenDiff, newItems, key, oldFirstKey, oldLastKey) {
-  const newItemsLength = get(newItems, 'length');
-
-  if (lenDiff <= 0 || lenDiff >= newItemsLength || newItemsLength === 0) {
-    return false;
-  }
-
-  const newFirstKey = keyForItem(objectAt(newItems, 0), key, 0);
-  const newLastKey = keyForItem(objectAt(newItems, newItemsLength - lenDiff - 1), key, newItemsLength - lenDiff - 1);
-
-  return oldFirstKey === newFirstKey && oldLastKey === newLastKey;
-}
-
 export default VerticalCollection;

package/addon/components/vertical-collection/template.hbs

@@ -1,6 +1,6 @@
-{{#each virtualComponents key="id" as |virtualComponent index| ~}}
+{{#each virtualComponents key="id" as |virtualComponent| ~}}
   {{~unbound virtualComponent.upperBound~}}
-  {{~#if virtualComponent.element ~}}
+  {{~#if virtualComponent.isOccludedContent ~}}
     {{{unbound virtualComponent.element}}}
   {{~else~}}
     {{~yield virtualComponent.content virtualComponent.index ~}}

package/addon/styles/app.css

@@ -1,4 +1,4 @@
-occluded-content {
+.occluded-content {
   display: block;
   position: relative;
   width: 100%;
@@ -10,16 +10,17 @@ occluded-content {
   color: rgba(0,0,0,0);
 }
 
-table > occluded-content,
-tbody > occluded-content,
-thead > occluded-content {
+table .occluded-content,
+tbody .occluded-content,
+thead .occluded-content,
+tfoot .occluded-content {
   display: table-row;
   position: relative;
   width: 100%;
 }
 
-ul > occluded-content,
-ol > occluded-content {
+ul .occluded-content,
+ol .occluded-content {
   display: list-item;
   position: relative;
   width: 100%;

package/app/components/vertical-collection.js

@@ -1 +1 @@
-export { default } from 'vertical-collection/components/vertical-collection/component';
+export { default } from '@html-next/vertical-collection/components/vertical-collection/component';

package/app/initializers/debug.js

@@ -1,4 +1,4 @@
-import 'vertical-collection/-debug';
+import '@html-next/vertical-collection/-debug';
 
 export default {
   name: 'vertical-collection-debug',

package/config/ember-cli-toolbelts.json

@@ -1,5 +1 @@
-{
-  "babel": {
-    "includePolyfill": true
-  }
-}
+{}

package/config/environment.js

@@ -1,4 +1,3 @@
-/* eslint-env node */
 'use strict';
 
 module.exports = function(/* environment, appConfig */) {