[WIP] [Occlusion Rendering] Preliminary Prototype

addon/components/drag-sort-list.js

@@ -23,14 +23,14 @@ export default Component.extend({
   childClass      : '',
   childTagName    : 'div',
   handle          : null,
+  estimateHeight  : 50,
 
   isHorizontal : false,
   isRtl        : false,
 
   dragEndAction                  : undefined,
   determineForeignPositionAction : undefined,
-
-
+  lazyRenderEnabled              : false,
 
   // ----- Services -----
   dragSort : service(),
@@ -67,6 +67,12 @@ export default Component.extend({
 
 
   // ----- Computed properties -----
+  lazyRenderDisabled : computed('lazyRenderEnabled', 'isHorizontal', function () {
+    const lazyRenderEnabled = this.get('lazyRenderEnabled')
+    const isHorizontal      = this.get('isHorizontal')
+    return !lazyRenderEnabled || isHorizontal
+  }),
+
   isDragging : computed('dragSort.{isDragging,group}', 'group', function () {
     const isDragging       = this.get('dragSort.isDragging')
     const group            = this.get('group')

addon/templates/components/drag-sort-list.hbs

@@ -1,19 +1,26 @@
-{{#each items as |item index|}}
-  {{#drag-sort-item
-    additionalArgs                 = additionalArgs
-    item                           = item
-    index                          = index
-    items                          = items
-    group                          = group
-    handle                         = handle
-    class                          = childClass
-    tagName                        = childTagName
-    isHorizontal                   = isHorizontal
-    isRtl                          = isRtl
-    draggingEnabled                = draggingEnabled
-    dragEndAction                  = dragEndAction
-    determineForeignPositionAction = determineForeignPositionAction
-  }}
-    {{yield item index}}
-  {{/drag-sort-item}}
-{{/each}}
+{{#vertical-collection
+    items
+    estimateHeight=estimateHeight
+    staticHeight=false
+    renderAll=lazyRenderDisabled as |item index|
+}}
+  <div>
+    {{#drag-sort-item
+      additionalArgs                 = additionalArgs
+      item                           = item
+      index                          = index
+      items                          = items
+      group                          = group
+      handle                         = handle
+      class                          = childClass
+      tagName                        = childTagName
+      isHorizontal                   = isHorizontal
+      isRtl                          = isRtl
+      draggingEnabled                = draggingEnabled
+      dragEndAction                  = dragEndAction
+      determineForeignPositionAction = determineForeignPositionAction
+    }}
+      {{yield item index}}
+    {{/drag-sort-item}}
+  </div>
+{{/vertical-collection}}

package.json

@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@ember/optional-features": "^0.6.3",
+    "@html-next/vertical-collection": "^1.0.0",
     "broccoli-asset-rev": "^2.7.0",
     "ember-auto-import": "^1.2.21",
     "ember-cli": "~3.8.1",

tests/dummy/app/controllers/index.js

@@ -121,6 +121,91 @@ export default Controller.extend({
     ])
   ),
 
+  items15 : computed(() =>
+    A([
+      {name : 'Foo'},
+      {name : 'Bar'},
+      {name : 'Baz'},
+      {name : 'Quux'},
+      {name : 'Zomg'},
+      {name : 'Lol'},
+      {name : 'Quuz'},
+      {name : 'Hello'},
+      {name : 'World'},
+      {name : 'Foo'},
+      {name : 'Bar'},
+      {name : 'Baz'},
+      {name : 'Quux'},
+      {name : 'Lol'},
+      {name : 'Quuz'},
+      {name : 'Hello'},
+      {name : 'World'},
+      {name : 'Foo'},
+      {name : 'Bar'},
+      {name : 'Baz'},
+      {name : 'Quux'},
+      {name : 'Zomg'},
+      {name : 'Lol'},
+      {name : 'Quuz'},
+      {name : 'Hello'},
+      {name : 'World'},
+      {name : 'Foo'},
+      {name : 'Bar'},
+      {name : 'Baz'},
+      {name : 'Quux'},
+      {name : 'Zomg'},
+      {name : 'Lol'},
+      {name : 'Quuz'},
+      {name : 'Hello'},
+      {name : 'World'},
+      {name : 'Foo'},
+      {name : 'Bar'},
+      {name : 'Baz'},
+      {name : 'Quux'},
+      {name : 'Zomg'},
+      {name : 'Lol'},
+      {name : 'Quuz'},
+      {name : 'Hello'},
+      {name : 'World'},
+      {name : 'Foo'},
+      {name : 'Bar'},
+      {name : 'Baz'},
+      {name : 'Quux'},
+      {name : 'Zomg'},
+      {name : 'Lol'},
+      {name : 'Quuz'},
+      {name : 'Hello'},
+      {name : 'World'},
+      {name : 'Foo'},
+      {name : 'Bar'},
+      {name : 'Baz'},
+      {name : 'Quux'},
+      {name : 'Zomg'},
+      {name : 'Lol'},
+      {name : 'Quuz'},
+      {name : 'Hello'},
+      {name : 'World'},
+      {name : 'Foo'},
+      {name : 'Bar'},
+      {name : 'Baz'},
+      {name : 'Quux'},
+      {name : 'Zomg'},
+      {name : 'Lol'},
+      {name : 'Quuz'},
+      {name : 'Hello'},
+      {name : 'World'},
+      {name : 'Foo'},
+      {name : 'Bar'},
+      {name : 'Baz'},
+      {name : 'Quux'},
+      {name : 'Zomg'},
+      {name : 'Lol'},
+      {name : 'Quuz'},
+      {name : 'Hello'},
+      {name : 'World'},
+    ])
+  ),
+
   nestedItem : computed(() => (
     {
       name     : 'Foo',

tests/dummy/app/styles/app.css

@@ -162,3 +162,7 @@ tr.dragSortItem.-placeholderAfter td {
 table .the-item {
   margin: 0;
 }
+
+.height--400 {
+  height: 400px;
+}

tests/dummy/app/templates/index.hbs

@@ -374,3 +374,48 @@
     <p>Warning: Nested lists doesn't work well with horizontal lists.</p>
   </div>
 </div>
+
+<div class="list-groups">
+
+  <div class="list-group-wrapper">
+    <h2>Occlusion Rendering</h2>
+
+    <p>
+      Sort lists, drag between lists. Won't let you drag items from/to other groups.
+    </p>
+
+    <section class="list-group">
+      <article class="list">
+        <h4>List with Occlusion Rendering</h4>
+        {{#drag-sort-list
+          items             = items15
+          dragEndAction     = (action 'dragEnd')
+          lazyRenderEnabled = true
+          class             = "height--400"
+          as |item|
+        }}
+          <div class="the-item">
+            {{item.name}}
+          </div>
+        {{/drag-sort-list}}
+      </article>
+
+      <article class="list">
+        <h4>List without occlusion render</h4>
+
+        {{#drag-sort-list
+          items         = items15
+          handle        = '.handle'
+          class         = "height--400"
+          dragEndAction = (action 'dragEnd')
+          as |item|
+        }}
+          <div class="the-item">
+            <span class="handle" draggable="true">☰</span>
+            {{item.name}}
+          </div>
+        {{/drag-sort-list}}
+      </article>
+    </section>
+  </div>
+</div>