headmin 0.3.4 → 0.4.0

data/app/assets/javascripts/headmin/controllers/blocks_controller.js

@@ -1,102 +1,97 @@
-import {Controller} from "@hotwired/stimulus"
-import Sortable from "sortablejs";
+import { Controller } from '@hotwired/stimulus'
+import Sortable from 'sortablejs'
 
 export default class extends Controller {
-    static get targets() {
-        return ["templateBlock", "block", "blocks", "templateEmpty", "button", "buttons"]
-    }
-
-    connect() {
-        new Sortable(this.blocksTarget, {
-            onEnd: () => {
-                this.reorderPositions()
-            }
-        })
-
-        this.toggleEmpty()
-    }
+  static get targets () {
+    return ['templateBlock', 'block', 'blocks', 'templateEmpty', 'button', 'buttons']
+  }
 
-    toggleEmpty() {
-        if(this.blockCount() > 0) {
-            const empty = this.blocksTarget.querySelector('#blocks-empty')
-            if(empty) {
-                empty.remove()
-            }
-        } else {
-            const empty = this.templateEmptyTarget.innerHTML
-            this.blocksTarget.insertAdjacentHTML('beforeend', empty)
-        }
+  connect () {
+    Sortable.create(this.blocksTarget, {
+      onEnd: () => {
+        this.reorderPositions()
+      }
+    })
+
+    this.toggleEmpty()
+  }
+
+  toggleEmpty () {
+    if (this.blockCount() > 0) {
+      const empty = this.blocksTarget.querySelector('#blocks-empty')
+      if (empty) {
+        empty.remove()
+      }
+    } else {
+      const empty = this.templateEmptyTarget.innerHTML
+      this.blocksTarget.insertAdjacentHTML('beforeend', empty)
     }
+  }
 
-    add(event) {
-        event.preventDefault()
-        const blockType = event.target.dataset.type
-        let html = this.templateBlockTargets.filter(blockTarget => blockTarget.id === blockType)[0].innerHTML
-
-        html = this.setPosition(html)
-
-        const element = this.blocksTarget.querySelector(`li[data-position='${event.target.dataset.position}']`)
+  add (event) {
+    event.preventDefault()
+    const blockType = event.target.dataset.type
+    let html = this.templateBlockTargets.filter(blockTarget => blockTarget.id === blockType)[0].innerHTML
 
-        if (element) {
-            element.insertAdjacentHTML('afterend', html)
-        }
-        else {
-            this.blocksTarget.insertAdjacentHTML('afterbegin', html)
-        }
+    html = this.setPosition(html)
 
-        // Dispatch an event
-        this.blocksTarget.dispatchEvent(new CustomEvent('headmin:reinit', {bubbles: true}))
+    const element = this.blocksTarget.querySelector(`li[data-position='${event.target.dataset.position}']`)
 
-        this.reorderPositions()
-        this.toggleEmpty()
+    if (element) {
+      element.insertAdjacentHTML('afterend', html)
+    } else {
+      this.blocksTarget.insertAdjacentHTML('afterbegin', html)
     }
 
-    remove(event) {
-        event.preventDefault()
+    this.reorderPositions()
+    this.toggleEmpty()
+  }
 
-        const block = event.target.closest(".list-group-item")
-        const destroyInput = block.querySelector("input[name*='_destroy']")
+  remove (event) {
+    event.preventDefault()
 
-        if (destroyInput) {
-            destroyInput.value = 1
-            block.style.display = 'none'
-        } else {
-            block.remove()
-        }
+    const block = event.target.closest('.list-group-item')
+    const destroyInput = block.querySelector("input[name*='_destroy']")
 
-        this.reorderPositions()
-        this.toggleEmpty()
+    if (destroyInput) {
+      destroyInput.value = 1
+      block.style.display = 'none'
+    } else {
+      block.remove()
     }
 
-    setPosition(html) {
-        const position = this.retrieveLastPosition() + 1
+    this.reorderPositions()
+    this.toggleEmpty()
+  }
 
-        const regex = new RegExp('99999', "g");
-        return html.replace(regex, position)
-    }
+  setPosition (html) {
+    const position = this.retrieveLastPosition() + 1
 
-    retrieveLastPosition() {
-        const blocks = Array.from(this.blockTargets)
-        if (blocks.length < 1) {
-            return 0
-        }
+    return html.replace(/99999/g, position)
+  }
 
-        const lastBlock = blocks.slice(-1)[0]
-        return parseInt(lastBlock.querySelector("[name*='position']").value)
+  retrieveLastPosition () {
+    const blocks = Array.from(this.blockTargets)
+    if (blocks.length < 1) {
+      return 0
     }
 
-    reorderPositions() {
-        for (let [index, block] of this.blockTargets.entries()) {
-            this.changePositionInfo(block, index)
-        }
-    }
+    const lastBlock = blocks.slice(-1)[0]
+    return parseInt(lastBlock.querySelector("[name*='position']").value)
+  }
 
-    changePositionInfo(block, index) {
-        block.setAttribute("data-position", index)
-        block.querySelector("input[name*='position']").value = index
+  reorderPositions () {
+    for (const [index, block] of this.blockTargets.entries()) {
+      this.changePositionInfo(block, index)
     }
+  }
 
-    blockCount() {
-        return this.blockTargets.length;
-    }
-}
+  changePositionInfo (block, index) {
+    block.setAttribute('data-position', index)
+    block.querySelector("input[name*='position']").value = index
+  }
+
+  blockCount () {
+    return this.blockTargets.length
+  }
+}

data/app/assets/javascripts/headmin/controllers/date_range_controller.js

@@ -1,32 +1,32 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-    static get targets() {
-        return ["dateInput", "startDateInput", "endDateInput"]
-    }
+  static get targets () {
+    return ['dateInput', 'startDateInput', 'endDateInput']
+  }
 
-    update(event) {
-        const flatpickr = event.target._flatpickr
-        const startDate = flatpickr.selectedDates[0]
-        const endDate = flatpickr.selectedDates[1]
+  update (event) {
+    const flatpickr = event.target._flatpickr
+    const startDate = flatpickr.selectedDates[0]
+    const endDate = flatpickr.selectedDates[1]
 
-        this.setStartDateInputValue(this.formatDate(startDate))
-        this.setEndDateInputValue(this.formatDate(endDate))
-    }
+    this.setStartDateInputValue(this.formatDate(startDate))
+    this.setEndDateInputValue(this.formatDate(endDate))
+  }
 
-    setStartDateInputValue(value) {
-        this.startDateInputTarget.value = value
-    }
+  setStartDateInputValue (value) {
+    this.startDateInputTarget.value = value
+  }
 
-    setEndDateInputValue(value) {
-        this.endDateInputTarget.value = value
-    }
+  setEndDateInputValue (value) {
+    this.endDateInputTarget.value = value
+  }
 
-    formatDate(date) {
-        if(date instanceof Date) {
-            return date.toLocaleDateString('nl-BE', {day: '2-digit', month: '2-digit', year: 'numeric'})
-        } else {
-            return null;
-        }
+  formatDate (date) {
+    if (date instanceof Date) {
+      return date.toLocaleDateString('nl-BE', { day: '2-digit', month: '2-digit', year: 'numeric' })
+    } else {
+      return null
     }
-}
+  }
+}

data/app/assets/javascripts/headmin/controllers/dropzone_controller.js

@@ -1,33 +1,31 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus'
 
 // References:
 // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
 
 export default class extends Controller {
-    static get targets() {
-        return ["input"]
-    }
+  static get targets () {
+    return ['input']
+  }
 
-    connect() {
-        this.element.classList.add('h-dropzone')
+  connect () {
+    // Drag
+    this.inputTarget.addEventListener('dragover', (event) => {
+      this.element.classList.add('focus')
+    })
+    this.inputTarget.addEventListener('dragleave', (event) => {
+      this.element.classList.remove('focus')
+    })
+    this.inputTarget.addEventListener('drop', (event) => {
+      this.element.classList.remove('focus')
+    })
 
-        // Drag
-        this.inputTarget.addEventListener('dragover', (event) => {
-            this.element.classList.add('dragover')
-        })
-        this.inputTarget.addEventListener('dragleave', (event) => {
-            this.element.classList.remove('dragover')
-        })
-        this.inputTarget.addEventListener('drop', (event) => {
-            this.element.classList.remove('dragover')
-        })
-
-        // Focus
-        this.inputTarget.addEventListener('focusin', (event) => {
-            this.element.classList.add('active')
-        })
-        this.inputTarget.addEventListener('focusout', (event) => {
-            this.element.classList.remove('active')
-        })
-    }
+    // Focus
+    this.inputTarget.addEventListener('focusin', (event) => {
+      this.element.classList.add('focus')
+    })
+    this.inputTarget.addEventListener('focusout', (event) => {
+      this.element.classList.remove('focus')
+    })
+  }
 }