diff --git a/src/dnd-service.js b/src/dnd-service.js index 6c2cb42..c25fb59 100644 --- a/src/dnd-service.js +++ b/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); diff --git a/src/preview-drawers.js b/src/preview-drawers.js index 92e3be0..7a4deb3 100644 --- a/src/preview-drawers.js +++ b/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) { diff --git a/test/preview-drawers.spec.js b/test/preview-drawers.spec.js index 44e9db1..887e51d 100644 --- a/test/preview-drawers.spec.js +++ b/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('

lorem

'); t.notOk(trPreview(doc.querySelector('p'))); t.end(); }); -test('trPreview ignore malformed table', t => { +test('trPreview ignores malformed table', t => { buildHtml(''); 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('

lorem

'); - t.notOk(liInUlPreview(doc.querySelector('p'))); + t.notOk(liPreview(doc.querySelector('p'))); t.end(); }); -test('liInUlPreview ignore li in ol', t => { - buildHtml('
  1. 1
'); - t.notOk(liInUlPreview(doc.querySelector('li'))); - t.end(); -}); - -test('liInUlPreview copies li in ul', t => { +test('liPreview copies li in ul', t => { buildHtml(''); 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('

lorem

'); - t.notOk(liInOlPreview(doc.querySelector('p'))); - t.end(); -}); - -test('liInOlPreview ignore li in ul', t => { - buildHtml(''); - t.notOk(liInOlPreview(doc.querySelector('li'))); - t.end(); -}); - -test('liInOlPreview copies li in ol', t => { +test('liPreview copies li in ol', t => { buildHtml('
  1. 0
  2. 1
  3. 2
'); 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('

lorem

'); + 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(); });