The first commit

src/modules/DOMController.js

@@ -0,0 +1,197 @@
+import Templates from '../templates/Views'
+import NotesAPI from './NotesAPI'
+
+export default class DOMController {
+
+  constructor (root) {
+    this.root = root
+
+    try {
+      this.root.innerHTML = Templates.grid
+    } catch (e) {
+      DOMController.alert(e.toString(), 0, 3)
+    }
+
+    this.btnCreateNote = this.root.querySelector(window.env.querySelectors.btnCreateNote)
+
+    this.createNotesGrid(window.env.prePopulateAmount || 0)
+
+    this.listener([
+      [
+        this.btnCreateNote, 'click', (this.btnCreateNote.dataset.action || 'showError'), {
+        legend: 'Create Note',
+      }],
+    ])
+  }
+
+  /**
+   *
+   * @param msg
+   * @param fadeOut
+   * @param type
+   */
+  static alert (msg = '', fadeOut = 0, type = 0) {
+    const alertTypes = window.env.alertTypes
+    const alert = this.createNode('div', { class: `uk-alert-${alertTypes[type]}`, 'uk-alert': null },
+      `<a class="uk-alert-close" uk-close></a>\n` + msg)
+    alert.style.display = 'block'
+    document.getElementById(window.env.querySelectors.console.slice(1)).appendChild(alert)
+  }
+
+  createNotesGrid (len, archived = false) {
+
+    const notes = NotesAPI.getNotesSanitized(len, archived)
+
+    if (notes.length === 0) { return }
+
+    const nodeToListen = []
+    const notesGrid = document.querySelector(window.env.querySelectors.notesGrid + ' tbody')
+    notesGrid.innerHTML = ''
+
+    notes.forEach(el => {
+
+      const row = DOMController.createNode('tr')
+      row.dataset.id = el.id
+
+      window.env.gridOrder.notes.forEach(key => {
+        let attrs = {}
+        let value = el[key] || ''
+
+        switch (key) {
+          case 'createdAt':
+            value = ___formatDate(value)
+            break
+          case 'content':
+            attrs.class = 'uk-text-truncate'
+            break
+          case 'dates':
+            attrs.class = 'uk-text-truncate'
+            value = ___findDates(el.content).join(', ')
+            break
+          case 'edit' :
+            attrs.class = 'icon icon-edit grid-control'
+            attrs['data-action'] = 'getEditForm'
+            break
+          case 'archive' :
+            attrs.class = 'icon icon-archive grid-control'
+            attrs['data-action'] = 'toArchive'
+            break
+          case 'delete' :
+            attrs.class = 'icon icon-delete grid-control'
+            attrs['data-action'] = 'toTrash'
+            break
+        }
+
+        const td = DOMController.createNode('td', attrs, value)
+
+        if (key.match(/^(edit|archive|delete)$/)) {
+          nodeToListen.push(td)
+          this.listener([td, 'click', td.dataset.action])
+        }
+
+        row.appendChild(td)
+
+      })
+      notesGrid.appendChild(row)
+    })
+  }
+
+  showError () {
+    console.error('Error occurred :(')
+  }
+
+  static createNode (...args) {
+    const [tag, attrs, content, callback] = args
+    const node = document.createElement(tag)
+
+    for (const [key, value] of Object.entries(attrs || [])) {
+      node.setAttribute(key, value)
+    }
+
+    node.innerHTML = content || ''
+
+    return node
+  }
+
+  destroyNode (selector) {
+
+    if (!(selector instanceof Node) && typeof selector === 'string') {
+      selector = document.querySelector(selector)
+    }
+
+    try {
+      selector.remove()
+    } catch (e) {}
+
+  }
+
+  getEditForm (args = {}) {
+
+    const node = DOMController.createNode('div', { class: window.env.querySelectors.modal.slice(1) },
+      Templates.templates.editForm)
+
+    if (args.legend) {
+      node.querySelector('legend').innerHTML = args.legend
+    }
+
+    this.root.appendChild(node)
+    node.style.display = 'block'
+
+    this.listener([
+      [node.querySelector(window.env.querySelectors.btnDestroyModal), 'click', 'destroyNode', node],
+      [node.querySelector('form'), 'submit', NotesAPI.saveNote],
+    ])
+  }
+
+  listener (els) {
+    els[0] instanceof Element ? this.on(els) : els.forEach(el => this.on(el))
+  }
+
+  /**
+   *
+   * @param args //selector, event, method, params
+   */
+  on (args) {
+
+    const [selector, event, method] = args
+
+    if (!(selector instanceof Element)) {
+      return
+    }
+
+    try {
+      selector.addEventListener(event, evt => {
+        const params = args[3] || {}
+
+        if (evt.type === 'submit') {
+          evt.preventDefault()
+        }
+
+        if (typeof this[method] === 'function') {
+          this[method](params)
+        } else if (typeof method === 'function') {
+          method(params)
+        }
+      })
+
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  /**
+   *
+   * @param selector
+   * @returns {{}}
+   */
+  static getFormData (selector = window.env.querySelectors.noteEditForm) {
+    const formData = new FormData(document.querySelector(selector))
+    const data = {}
+
+    for (let key of formData.keys()) {
+      data[key] = formData.get(key)
+    }
+
+    return data
+  }
+}