fix: display:none; does not work in ol>li preview as I wanted.

src/dnd-service.js

@@ -1,7 +1,7 @@
 // borrowed many code from https://github.com/bevacqua/dragula.git
 import _global from './global';
 import {EventAggregator} from 'aurelia-event-aggregator';
-import {trPreview, liInUlPreview, liInOlPreview, defaultPreview} from './preview-drawers';
+import {trPreview, liPreview, defaultPreview} from './preview-drawers';
 
 // Ideally should be using aurelia-pal, but it doesn't support
 // enough DOM features for bcx-aurelia-dnd to work.
@@ -303,8 +303,7 @@ export class DndService {
 
     injectStyles();
     this.addPreviewDrawer(defaultPreview);
-    this.addPreviewDrawer(liInUlPreview);
-    this.addPreviewDrawer(liInOlPreview);
+    this.addPreviewDrawer(liPreview);
     this.addPreviewDrawer(trPreview);
 
     this._grab = this._grab.bind(this);

src/preview-drawers.js

@@ -30,47 +30,23 @@ export function trPreview(el) {
   return newTable;
 }
 
-export function liInUlPreview(el) {
+export function liPreview(el) {
   if (el.tagName !== 'LI') return;
-  if (!el.parentNode || el.parentNode.tagName !== 'UL') return;
+  if (!el.parentNode || (el.parentNode.tagName !== 'UL' && el.parentNode.tagName !== 'OL')) return;
 
   const newLi = el.cloneNode(true);
   const computed = _global.getComputedStyle(el);
   newLi.style.width = computed.width;
   newLi.style.height = computed.height;
+  newLi.style.flex = '0 0 auto';
 
-  let newUl = el.parentNode.cloneNode();
-  newUl.appendChild(newLi);
-  newUl.style.width = 'auto';
-  newUl.style.height = 'auto';
+  let newUlOrOl = el.parentNode.cloneNode();
+  newUlOrOl.appendChild(newLi);
+  newUlOrOl.style.width = 'auto';
+  newUlOrOl.style.height = 'auto';
+  newUlOrOl.style.listStyleType = 'none';
 
-  return newUl;
-}
-
-export function liInOlPreview(el) {
-  if (el.tagName !== 'LI') return;
-  if (!el.parentNode || el.parentNode.tagName !== 'OL') return;
-
-  const computed = _global.getComputedStyle(el);
-
-  const ol = el.parentNode;
-  const newOl = ol.cloneNode(true);
-
-  newOl.style.width = 'auto';
-  newOl.style.height = 'auto';
-
-  const liCount = ol.childElementCount;
-  for(let i = 0; i < liCount; i++) {
-    const newLi = newOl.children[i];
-    if (ol.children[i] === el) {
-      newLi.style.width = computed.width;
-      newLi.style.height = computed.height;
-    } else {
-      newLi.style.display = 'none'; // hide all other li.
-    }
-  }
-
-  return newOl;
+  return newUlOrOl;
 }
 
 export function defaultPreview(el) {

test/preview-drawers.spec.js

@@ -1,7 +1,7 @@
 import test from 'tape';
 import $ from 'jquery';
 import _global from '../src/global';
-import {trPreview, liInUlPreview, liInOlPreview, defaultPreview} from '../src/preview-drawers';
+import {trPreview, liPreview, defaultPreview} from '../src/preview-drawers';
 
 const doc = _global.document;
 const documentElement = doc && doc.documentElement;
@@ -12,13 +12,13 @@ function buildHtml(domStr) {
   dom.appendTo('body');
 }
 
-test('trPreview ignore element not tr tag', t => {
+test('trPreview ignores element not tr tag', t => {
   buildHtml('<p>lorem</p>');
   t.notOk(trPreview(doc.querySelector('p')));
   t.end();
 });
 
-test('trPreview ignore malformed table', t => {
+test('trPreview ignores malformed table', t => {
   buildHtml('<tr><td></td></tr>');
   t.notOk(trPreview(doc.querySelector('tr')));
   t.end();
@@ -43,61 +43,55 @@ test('trPreview copies table', t => {
   t.end();
 });
 
-test('liInUlPreview ignore element not li tag', t => {
+test('liPreview ignores element not li tag', t => {
   buildHtml('<p>lorem</p>');
-  t.notOk(liInUlPreview(doc.querySelector('p')));
+  t.notOk(liPreview(doc.querySelector('p')));
   t.end();
 });
 
-test('liInUlPreview ignore li in ol', t => {
-  buildHtml('<ol><li>1</li></ol>');
-  t.notOk(liInUlPreview(doc.querySelector('li')));
-  t.end();
-});
-
-test('liInUlPreview copies li in ul', t => {
+test('liPreview copies li in ul', t => {
   buildHtml('<ul><li>0</li><li>1</li><li>2</li></ul>');
   const li = doc.querySelectorAll('li')[1];
-  const newLiInUl = liInUlPreview(li);
+  const newLiInUl = liPreview(li);
   t.equal(newLiInUl.tagName, 'UL');
   t.equal(newLiInUl.style.width, 'auto');
   t.equal(newLiInUl.style.height, 'auto');
+  t.equal(newLiInUl.style.listStyleType, 'none');
 
   t.equal(newLiInUl.childElementCount, 1);
   const newLi = newLiInUl.children[0];
   t.equal(newLi.innerText, '1');
   t.equal(newLi.style.width, _global.getComputedStyle(li).width);
   t.equal(newLi.style.height, _global.getComputedStyle(li).height);
+  t.equal(newLi.style.flex, '0 0 auto');
   t.end();
 });
 
-test('liInOlPreview ignore element not li tag', t => {
-  buildHtml('<p>lorem</p>');
-  t.notOk(liInOlPreview(doc.querySelector('p')));
-  t.end();
-});
-
-test('liInOlPreview ignore li in ul', t => {
-  buildHtml('<ul><li>1</li></ul>');
-  t.notOk(liInOlPreview(doc.querySelector('li')));
-  t.end();
-});
-
-test('liInOlPreview copies li in ol', t => {
+test('liPreview copies li in ol', t => {
   buildHtml('<ol><li>0</li><li>1</li><li>2</li></ol>');
   const li = doc.querySelectorAll('li')[1];
-  const newLiInOl = liInOlPreview(li);
-
+  const newLiInOl = liPreview(li);
   t.equal(newLiInOl.tagName, 'OL');
   t.equal(newLiInOl.style.width, 'auto');
   t.equal(newLiInOl.style.height, 'auto');
+  t.equal(newLiInOl.style.listStyleType, 'none');
 
-  t.equal(newLiInOl.childElementCount, 3);
-  t.equal(newLiInOl.children[0].style.display, 'none');
-  t.equal(newLiInOl.children[2].style.display, 'none');
-  const newLi = newLiInOl.children[1];
+  t.equal(newLiInOl.childElementCount, 1);
+  const newLi = newLiInOl.children[0];
   t.equal(newLi.innerText, '1');
   t.equal(newLi.style.width, _global.getComputedStyle(li).width);
   t.equal(newLi.style.height, _global.getComputedStyle(li).height);
+  t.equal(newLi.style.flex, '0 0 auto');
+  t.end();
+});
+
+test('defaultPreview clones element', t => {
+  buildHtml('<div><p>lorem</p></div>');
+  const div = defaultPreview(doc.querySelector('div'));
+  t.equal(div.tagName, 'DIV');
+  t.equal(div.childElementCount, 1);
+  const newP = div.children[0];
+  t.equal(newP.tagName, 'P');
+  t.equal(newP.innerText, 'lorem');
   t.end();
 });