feat: init option (#32)

* add the `init` option and invoke the initDragAndDrop method when instantiating only if init option value equals true or undefined

* extend the initDragAndDrop method to set the initialised property value and go through an early return if it equals true

* add the init method

* extend the destroy method to set the initialised property value to false

* update the enable-disable.html sample code to leverage the newly added `init` option

* refactor and extend the list item attributes related tests

Author: Hesam Bahrami

dev/enable-disable.html

@@ -33,8 +33,7 @@ <h2>Server rendered list</h2>
 
   <hr>
 
-  <h2>Data-driven list</h2>
-
+  <h2>Local storage persistent data-driven list</h2>
   <button type="button" onclick="initDataDrivenList()">Init / Enable</button>
   <button type="button" onclick="destroyDataDrivenList()">Destroy / Disable</button>
 
@@ -45,16 +44,14 @@ <h2>Data-driven list</h2>
 <script src="../dist/nested-sort.umd.js"></script>
 <script>
   // Server rendered list
-  const initServerRenderedList = () => {
-    if (window.serverRenderedList) {
-      window.serverRenderedList.destroy()
-    }
+  const startServerRenderedList = () => {
     window.serverRenderedList = new NestedSort({
       actions: {
         onDrop: function (data) {
           console.log(data)
         }
       },
+      init: false,
       el: '#server-rendered',
       droppingEdge: 5,
       listClassNames: ['nested-sort']
@@ -64,10 +61,15 @@ <h2>Data-driven list</h2>
   const destroyServerRenderedList = () => {
     if (window.serverRenderedList) {
       window.serverRenderedList.destroy()
-      delete window.serverRenderedList
     }
   }
 
+  const initServerRenderedList = () => {
+    window.serverRenderedList.init()
+  }
+
+  startServerRenderedList()
+
   // Local storage persistent data-driven list
   const originalData = [
     { item_id: 1, item_title: 'One', position: 5 },
@@ -91,15 +93,13 @@ <h2>Data-driven list</h2>
     localStorage.setItem(dataKey, JSON.stringify(newData))
   }
 
-  const initDataDrivenList = () => {
-    if (window.dataDrivenList) {
-      window.dataDrivenList.destroy()
-    }
+  const startDataDrivenList = () => {
     window.dataDrivenList = new NestedSort({
       actions: {
         onDrop
       },
       data: data,
+      init: false,
       propertyMap: {
         id: 'item_id',
         parent: 'item_parent',
@@ -115,9 +115,14 @@ <h2>Data-driven list</h2>
   const destroyDataDrivenList = () => {
     if (window.dataDrivenList) {
       window.dataDrivenList.destroy()
-      delete window.dataDrivenList
     }
   }
+
+  const initDataDrivenList = () => {
+    window.dataDrivenList.init()
+  }
+
+  startDataDrivenList()
 </script>
 </body>
 </html>

src/main.js

@@ -17,6 +17,7 @@ class NestedSort {
     data,
     droppingEdge = 15,
     el,
+    init = true,
     listClassNames,
     listItemClassNames,
     propertyMap = {},
@@ -34,7 +35,7 @@ class NestedSort {
     this.actions = {
       onDrop,
     }
-
+    this.initialised = false
     this.targetNode = {
       X: null,
       Y: null,
@@ -74,7 +75,7 @@ class NestedSort {
 
     this.maybeInitDataDom()
     this.addListAttributes()
-    this.initDragAndDrop()
+    if (init) this.initDragAndDrop()
   }
 
   getDataEngine() {
@@ -143,15 +144,23 @@ class NestedSort {
   }
 
   initDragAndDrop() {
+    if (this.initialised) return
+
     this.toggleListEventListeners()
     this.initPlaceholderList()
     this.toggleListItemAttributes()
     this.getSortableList().querySelectorAll('li').forEach(this.addListItemStyles.bind(this))
+    this.initialised = true
+  }
+
+  init() {
+    this.initDragAndDrop()
   }
 
   destroy() {
     this.toggleListEventListeners(true)
     this.toggleListItemAttributes(false)
+    this.initialised = false
   }
 
   getComputedStyleValue(el, prop) {

test/main.test.js

@@ -14,13 +14,19 @@ describe('NestedSort', () => {
     document.body.innerHTML = `<div id="${DYNAMIC_LIST_WRAPPER_ID}"></div>`
   })
 
-  describe('upon initiation', () => {
-    describe('list items attributes', () => {
-      it('should add the draggable attribute to all the list items', () => {
-        const ns = initDataDrivenList()
-        Array.from(ns.getSortableList().getElementsByTagName('li')).forEach(li => {
-          expect(li.getAttribute('draggable')).toBe('true')
-        })
+  describe('upon instantiation', () => {
+    it('should not invoke the initDragAndDrop method when the init option is falsy', () => {
+      const spy = jest.spyOn(NestedSort.prototype, 'initDragAndDrop')
+      initDataDrivenList({ init: false })
+      expect(spy).not.toHaveBeenCalled()
+    })
+
+    it('should invoke the initDragAndDrop method when the init option is true or undefined', () => {
+      [undefined, true].forEach(init => {
+        const spy = jest.spyOn(NestedSort.prototype, 'initDragAndDrop')
+        initDataDrivenList({ init })
+        expect(spy).toHaveBeenCalledTimes(1)
+        spy.mockRestore()
       })
     })
   })
@@ -905,6 +911,72 @@ describe('NestedSort', () => {
     })
   })
 
+  describe('initDragAndDrop method', () => {
+    describe('when drag and drop is already initialised', () => {
+      let ns
+      beforeEach(() => {
+        ns = initDataDrivenList({ init: true })
+      })
+
+      it('should go through the early return', () => {
+        const spy1 = jest.spyOn(ns, 'toggleListEventListeners')
+        const spy2 = jest.spyOn(ns, 'initPlaceholderList')
+        const spy3 = jest.spyOn(ns, 'toggleListItemAttributes')
+
+        ns.initDragAndDrop()
+
+        expect(spy1).not.toHaveBeenCalled()
+        expect(spy2).not.toHaveBeenCalled()
+        expect(spy3).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('when drag and drop is NOT initialised', () => {
+      let ns
+      beforeEach(() => {
+        ns = initDataDrivenList({ init: false })
+      })
+
+      it('should invoke the toggleListEventListeners method with no arguments', () => {
+        const spy = jest.spyOn(ns, 'toggleListEventListeners')
+        ns.initDragAndDrop()
+        expect(spy).toHaveBeenCalledTimes(1)
+        expect(spy).toHaveBeenCalledWith()
+      })
+
+      it('should invoke the initPlaceholderList method with no arguments', () => {
+        const spy = jest.spyOn(ns, 'initPlaceholderList')
+        ns.initDragAndDrop()
+        expect(spy).toHaveBeenCalledTimes(1)
+        expect(spy).toHaveBeenCalledWith()
+      })
+
+      it('should invoke the toggleListItemAttributes method with no arguments', () => {
+        const spy = jest.spyOn(ns, 'toggleListItemAttributes')
+        ns.initDragAndDrop()
+        expect(spy).toHaveBeenCalledTimes(1)
+        expect(spy).toHaveBeenCalledWith()
+      })
+
+      it('should set the initialised property value to true', () => {
+        expect(ns.initialised).toBe(false)
+        ns.initDragAndDrop()
+        expect(ns.initialised).toBe(true)
+      })
+    })
+  })
+
+  describe('init method', () => {
+    it('should invoke the initDragAndDrop', () => {
+      const spy = jest.spyOn(NestedSort.prototype, 'initDragAndDrop')
+      const ns = initDataDrivenList({ init: false })
+
+      expect(spy).not.toHaveBeenCalled()
+      ns.init()
+      expect(spy).toHaveBeenCalledTimes(1)
+    })
+  })
+
   describe('destroy method', () => {
     it('should invoke the toggleListEventListeners method with correct arguments', () => {
       const ns = initDataDrivenList()
@@ -925,5 +997,39 @@ describe('NestedSort', () => {
       expect(spy).toHaveBeenCalledTimes(1)
       expect(spy).toHaveBeenCalledWith(false)
     })
+
+    it('should set the initialised property value to false', () => {
+      const ns = initDataDrivenList({ init: true })
+      ns.destroy()
+      expect(ns.initialised).toBe(false)
+    })
+  })
+
+  describe('toggleListItemAttributes method', () => {
+    it('should set the draggable attribute value to true on all the list items when no argument is passed to it', () => {
+      const ns = initDataDrivenList({ init: false })
+      Array.from(ns.getSortableList().getElementsByTagName('li')).forEach(li => {
+        expect(li.getAttribute('draggable')).toBe(null)
+      }) // to make sure instantiation has not set the attribute value
+
+      ns.toggleListItemAttributes()
+
+      Array.from(ns.getSortableList().getElementsByTagName('li')).forEach(li => {
+        expect(li.getAttribute('draggable')).toBe('true')
+      })
+    })
+
+    it('should set the draggable attribute value to false on all the list items when the passed argument equals false', () => {
+      const ns = initDataDrivenList({ init: true })
+      Array.from(ns.getSortableList().getElementsByTagName('li')).forEach(li => {
+        expect(li.getAttribute('draggable')).toBe('true')
+      }) // to make sure instantiation has set the attribute value to true
+
+      ns.toggleListItemAttributes(false)
+
+      Array.from(ns.getSortableList().getElementsByTagName('li')).forEach(li => {
+        expect(li.getAttribute('draggable')).toBe('false')
+      })
+    })
   })
 })