headmin 0.3.3 → 0.4.1

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

@@ -1,64 +1,60 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-    static get targets() {
-        return ["form", "list", "input", "template", "button", "menuItem"]
-    }
-
-    add(event) {
-        event.preventDefault()
-        const name = event.target.dataset.filterName
-        const button = this.getButtonByName(name)
-        if (button) {
-            this.openFilter(button)
-        } else {
-            this.createFilter(name)
-        }
-    }
-
-    createFilter(name) {
-        let html = this.getTemplateHTML(name)
-        html = this.replaceIdsWithTimestamps(html)
-        this.listTarget.insertAdjacentHTML('beforeend', html)
-
-        // Dispatch an event
-        this.menuItemTarget.dispatchEvent(new CustomEvent('headmin:reinit', {bubbles: true}))
-    }
-
-    remove(event) {
-        const filter = event.currentTarget.closest('.h-filter')
-        filter.remove()
-        this.formTarget.submit()
-    }
-
-    removeAll(event) {
-        this.listTarget.innerHTML = ""
-        this.formTarget.submit()
-    }
-
-    update(event) {
-        this.formTarget.submit()
-    }
-
-    getButtonByName(name) {
-        return this.buttonTargets.find(function (element) {
-            return element.dataset.filterName === name
-        })
-    }
-
-    openFilter(button) {
-        button.controller.open()
-    }
-
-    getTemplateHTML(name) {
-        const template = this.templateTargets.filter((element) => {
-            return element.dataset.filterName === name
-        })[0]
-        return template.innerHTML
-    }
-
-    replaceIdsWithTimestamps(html) {
-        const regex = new RegExp('template_id', "g");
-        return html.replace(regex, new Date().getTime())
-    }
+  static get targets () {
+    return ['form', 'list', 'input', 'template', 'button', 'menuItem']
+  }
+
+  add (event) {
+    event.preventDefault()
+    const name = event.target.dataset.filterName
+    const button = this.getButtonByName(name)
+    if (button) {
+      this.openFilter(button)
+    } else {
+      this.createFilter(name)
+    }
+  }
+
+  createFilter (name) {
+    let html = this.getTemplateHTML(name)
+    html = this.replaceIdsWithTimestamps(html)
+    this.listTarget.insertAdjacentHTML('beforeend', html)
+  }
+
+  remove (event) {
+    const filter = event.currentTarget.closest('.h-filter')
+    filter.remove()
+    this.formTarget.submit()
+  }
+
+  removeAll (event) {
+    this.listTarget.innerHTML = ''
+    this.formTarget.submit()
+  }
+
+  update (event) {
+    this.formTarget.submit()
+  }
+
+  getButtonByName (name) {
+    return this.buttonTargets.find(function (element) {
+      return element.dataset.filterName === name
+    })
+  }
+
+  openFilter (button) {
+    button.controller.open()
+  }
+
+  getTemplateHTML (name) {
+    const template = this.templateTargets.filter((element) => {
+      return element.dataset.filterName === name
+    })[0]
+    return template.innerHTML
+  }
+
+  replaceIdsWithTimestamps (html) {
+    return html.replace(/template_id/g, new Date().getTime())
+  }
 }

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

@@ -1,39 +1,39 @@
-import {Controller} from "@hotwired/stimulus"
-import flatpickr from "flatpickr";
-import {Dutch} from "flatpickr/dist/esm/l10n/nl.js"
-import I18n from "../config/i18n";
+import { Controller } from '@hotwired/stimulus'
+import flatpickr from 'flatpickr'
+import { Dutch } from 'flatpickr/dist/esm/l10n/nl.js'
+import I18n from '../config/i18n'
 
 export default class extends Controller {
-    static get targets() {
-        return ["input"]
-    }
+  static get targets () {
+    return ['input']
+  }
 
-    connect() {
-        const options = {...this.defaultOptions(), ...this.options()}
-        flatpickr(this.inputTarget, options);
-    }
+  connect () {
+    const options = { ...this.defaultOptions(), ...this.options() }
+    flatpickr(this.inputTarget, options)
+  }
 
-    options() {
-        return JSON.parse(this.inputTarget.getAttribute('data-flatpickr-options'))
-    }
+  options () {
+    return JSON.parse(this.inputTarget.getAttribute('data-flatpickr'))
+  }
 
-    defaultOptions() {
-        return {
-            allowInput: true,
-            dateFormat: 'd/m/Y',
-            locale: this.getLocale(I18n.locale)
-        }
+  defaultOptions () {
+    return {
+      allowInput: true,
+      dateFormat: 'd/m/Y',
+      locale: this.getLocale(I18n.locale)
     }
+  }
 
-    getLocale(locale) {
-        const locales = this.locales()
-        return locales[locale]
-    }
+  getLocale (locale) {
+    const locales = this.locales()
+    return locales[locale]
+  }
 
-    locales() {
-        return {
-            en: null,
-            nl: Dutch
-        }
+  locales () {
+    return {
+      en: null,
+      nl: Dutch
     }
+  }
 }

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

@@ -1,7 +1,7 @@
-import {Controller} from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-  connect() {
-    this.element.textContent = "Hello world"
+  connect () {
+    this.element.textContent = 'Hello world'
   }
 }

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

@@ -1,8 +1,9 @@
-import {Controller} from "@hotwired/stimulus"
-import {Toast} from "bootstrap";
+import { Controller } from '@hotwired/stimulus'
+import { Toast } from 'bootstrap'
 
 export default class extends Controller {
-    connect() {
-        new Toast(this.element, {})
-    }
-}
+  connect () {
+    /* eslint-disable no-new */
+    new Toast(this.element, {})
+  }
+}

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

@@ -1,67 +1,73 @@
-import {Controller} from "@hotwired/stimulus"
-import {createPopper} from '@popperjs/core';
+/* global HTMLInputElement */
+import { Controller } from '@hotwired/stimulus'
+import { createPopper } from '@popperjs/core'
 
 export default class extends Controller {
-    static get targets() {
-        return ["popup", "button"]
-    }
+  static get targets () {
+    return ['popup', 'button']
+  }
 
-    static get values() {
-        return {id: String}
-    }
+  static get values () {
+    return { id: String }
+  }
 
-    connect() {
-        // Clicked outside popup
-        document.addEventListener('click', (event) => {
-            this.handleOutsideClick(event)
-        })
-    }
+  connect () {
+    // Clicked outside popup
+    document.addEventListener('click', (event) => {
+      this.handleOutsideClick(event)
+    })
+  }
 
-    handleOutsideClick(event) {
-        const inPopup = event.target.closest('[data-popup-target="popup"]') !== null
-        const inButton = event.target.closest('[data-popup-target="button"]') !== null
-        const openPopup = document.querySelector('[data-popup-target="popup"]:not(.closed)')
+  handleOutsideClick (event) {
+    const inPopup = event.target.closest('[data-popup-target="popup"]') !== null
+    const inButton = event.target.closest('[data-popup-target="button"]') !== null
+    const openPopup = document.querySelector('[data-popup-target="popup"]:not(.closed)')
 
-        if(!inButton && !inPopup && openPopup) {
-            this.closePopup(openPopup)
-        }
+    if (!inButton && !inPopup && openPopup) {
+      this.closePopup(openPopup)
     }
+  }
+
+  open (event) {
+    const button = event.target.closest('[data-popup-target="button"]')
+    const popup = this.popupById(button.dataset.popupId)
+    const passThru = button.dataset.popupPassThru
 
-    open(event) {
-        const button = event.target.closest('[data-popup-target="button"]')
-        const popup = this.popupById(button.dataset['popupId'])
-        const passThru = button.dataset['popupPassThru']
+    // Open the popup
+    createPopper(button, popup)
+    this.openPopup(popup)
 
-        if (passThru) {
-            // Pass click event to an element inside the popup
-            const passThruElement = popup.querySelector(passThru)
-            passThruElement.click()
+    if (passThru) {
+      // Pass click event to an element inside the popup
+      const passThruElement = popup.querySelector(passThru)
+      passThruElement.click()
 
-        } else {
-            // Open the popup
-            createPopper(button, popup)
-            this.openPopup(popup)
-        }
+      // Focus and select value if it's an input element
+      if (passThruElement instanceof HTMLInputElement) {
+        passThruElement.focus()
+        passThruElement.select()
+      }
     }
+  }
 
-    close(event) {
-        const button = event.target.closest('[data-popup-target="button"]')
-        const popup = this.popupById(button.dataset['popupId'])
+  close (event) {
+    const button = event.target.closest('[data-popup-target="button"]')
+    const popup = this.popupById(button.dataset.popupId)
 
-        this.closePopup(popup)
-    }
+    this.closePopup(popup)
+  }
 
-    popupById(id) {
-        return this.popupTargets.find((popup) => {
-            return popup.dataset['popupId'] === id
-        })
-    }
+  popupById (id) {
+    return this.popupTargets.find((popup) => {
+      return popup.dataset.popupId === id
+    })
+  }
 
-    openPopup(popup) {
-        popup.classList.remove('closed')
-    }
+  openPopup (popup) {
+    popup.classList.remove('closed')
+  }
 
-    closePopup(popup) {
-        popup.classList.add('closed')
-    }
-}
+  closePopup (popup) {
+    popup.classList.add('closed')
+  }
+}

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

@@ -1,13 +1,40 @@
-import {Controller} from "@hotwired/stimulus"
+/* global RedactorX */
+import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
-    connect() {
-        if (typeof RedactorX == 'undefined') {
-            console.error("RedactorX is a paid module and is not included in Headmin. Please purchase it and import it as a JS module")
-            return false;
-        }
+  connect () {
+    this.initRedactor()
+  }
+
+  initRedactor () {
+    if (typeof RedactorX === 'undefined') {
+      console.error('RedactorX is a paid module and is not included in Headmin. Please purchase it and import it as a JS module')
+      return false
+    }
 
-        const options = JSON.parse(this.element.getAttribute('data-redactor-options'))
-        RedactorX(this.element, options);
+    const defaultOptions = {
+      editor: {
+        minHeight: '57px'
+      },
+      subscribe: {
+        'app.start': () => {
+          this.stylize()
+        }
+      }
     }
-}
+    const options = JSON.parse(this.element.getAttribute('data-redactor-options'))
+    RedactorX(this.element, { ...defaultOptions, ...options })
+  }
+
+  stylize () {
+    const container = this.element.nextElementSibling
+
+    // Copy textarea classes
+    const inputClasses = this.element.classList
+    container.classList.add(...inputClasses)
+
+    // Add top margin to input group
+    // const inputGroup = container.closest('.input-group')
+    // inputGroup.classList.add('mt-4')
+  }
+}

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

@@ -1,139 +1,136 @@
-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 values() {
-        return {
-            id: String
-        }
+  static get values () {
+    return {
+      id: String
     }
-
-    static get targets() {
-        return ["repeater", "footer", "template", "row", "list", "empty", "addButton"]
-    }
-
-    connect() {
-        new Sortable(this.listTarget, {
-            animation: 150,
-            ghostClass: 'list-group-item-dark',
-            draggable: '.repeater-row',
-            handle: '.repeater-row-handle',
-            onEnd: () => {
-                this.resetIndices()
-                this.resetPositions()
-            }
-        })
-
-        this.toggleEmpty()
-    }
-
-    resetButtonIndices(event) {
-        const row = event.target.closest('.repeater-row')
-        const index = this.containsRow(row) ? row.dataset.rowIndex : ''
-        this.updatePopupButtonIndices(index)
-    }
-
-    containsRow(row) {
-        return this.rowTargets.includes(row)
-    }
-
-    updatePopupButtonIndices(index) {
-        const popup = document.querySelector(`[data-popup-target="popup"][data-popup-id="repeater-buttons-${this.idValue}"]`)
-        const buttons = popup.querySelectorAll('a')
-        buttons.forEach((button) => {
-            button.dataset.rowIndex = index
-        })
-    }
-
-    addRow(event) {
-        event.preventDefault()
-        const button = event.target
-        const templateName = button.dataset.templateName
-        let rowIndex = button.dataset.rowIndex
-
-        // Prepare html from template
-        const template = this.getTemplate(templateName)
-        const html = this.replaceIdsWithTimestamps(template)
-
-        // Fallback to last row if no index is set
-        if (rowIndex) {
-            // Insert new row after defined row
-            const row = this.rowTargets[rowIndex]
-            row.insertAdjacentHTML('afterend', html)
-        } else {
-            // Insert before footer
-            this.footerTarget.insertAdjacentHTML('beforebegin', html)
-        }
-
-        // Dispatch an event
-        document.dispatchEvent(new CustomEvent('headmin:reinit', {bubbles: true}))
-
-        this.resetIndices()
-        this.resetPositions()
-        this.toggleEmpty()
-    }
-
-    removeRow(event) {
-        event.preventDefault()
-
-        const row = event.target.closest(".repeater-row")
-
-        if (row.dataset.newRecord === "true") {
-            // New records are simply removed from the page
-            row.remove()
-        } else {
-            // Existing records are hidden and flagged for deletion
-            row.querySelector("input[name*='_destroy']").value = 1
-            row.style.display = 'none'
-        }
-
+  }
+
+  static get targets () {
+    return ['repeater', 'footer', 'template', 'row', 'list', 'empty', 'addButton']
+  }
+
+  connect () {
+    Sortable.create(this.listTarget, {
+      animation: 150,
+      ghostClass: 'list-group-item-dark',
+      draggable: '.repeater-row',
+      handle: '.repeater-row-handle',
+      onEnd: () => {
         this.resetIndices()
         this.resetPositions()
-        this.toggleEmpty()
+      }
+    })
+
+    this.toggleEmpty()
+  }
+
+  resetButtonIndices (event) {
+    const row = event.target.closest('.repeater-row')
+    const index = this.containsRow(row) ? row.dataset.rowIndex : ''
+    this.updatePopupButtonIndices(index)
+  }
+
+  containsRow (row) {
+    return this.rowTargets.includes(row)
+  }
+
+  updatePopupButtonIndices (index) {
+    const popup = document.querySelector(`[data-popup-target="popup"][data-popup-id="repeater-buttons-${this.idValue}"]`)
+    const buttons = popup.querySelectorAll('a')
+    buttons.forEach((button) => {
+      button.dataset.rowIndex = index
+    })
+  }
+
+  addRow (event) {
+    event.preventDefault()
+    const button = event.target
+    const templateName = button.dataset.templateName
+    const rowIndex = button.dataset.rowIndex
+
+    // Prepare html from template
+    const template = this.getTemplate(templateName)
+    const html = this.replaceIdsWithTimestamps(template)
+
+    // Fallback to last row if no index is set
+    if (rowIndex) {
+      // Insert new row after defined row
+      const row = this.rowTargets[rowIndex]
+      row.insertAdjacentHTML('afterend', html)
+    } else {
+      // Insert before footer
+      this.footerTarget.insertAdjacentHTML('beforebegin', html)
     }
 
-    getTemplate(name) {
-        return this.templateTargets.filter((template) => {
-            return template.dataset.templateName === name
-        })[0]
-    }
+    this.resetIndices()
+    this.resetPositions()
+    this.toggleEmpty()
+  }
 
-    replaceIdsWithTimestamps(template) {
-        const regex = new RegExp(template.dataset.templateIdRegex, "g")
-        return template.innerHTML.replace(regex, new Date().getTime())
-    }
-
-    visibleRowsCount() {
-        return this.visibleRows().length
-    }
+  removeRow (event) {
+    event.preventDefault()
 
-    visibleRows() {
-        const rows = this.rowTargets
-        return rows.filter((row) => {
-            return row.querySelector("input[name*='_destroy']").value !== '1'
-        })
-    }
-
-    toggleEmpty() {
-        if (this.visibleRowsCount() > 0) {
-            this.emptyTarget.classList.add('invisible')
-        } else {
-            this.emptyTarget.classList.remove('invisible')
-        }
-    }
+    const row = event.target.closest('.repeater-row')
 
-    resetPositions() {
-        this.visibleRows().forEach((row, index) => {
-            const positionInput = row.querySelector("input[name*='position']")
-            if (positionInput) {
-                positionInput.value = index
-            }
-        })
+    if (row.dataset.newRecord === 'true') {
+      // New records are simply removed from the page
+      row.remove()
+    } else {
+      // Existing records are hidden and flagged for deletion
+      row.querySelector("input[name*='_destroy']").value = 1
+      row.style.display = 'none'
     }
 
-    resetIndices() {
-        this.visibleRows().forEach((row, index) => {
-            row.dataset.rowIndex = index
-        })
+    this.resetIndices()
+    this.resetPositions()
+    this.toggleEmpty()
+  }
+
+  getTemplate (name) {
+    return this.templateTargets.filter((template) => {
+      return template.dataset.templateName === name
+    })[0]
+  }
+
+  replaceIdsWithTimestamps (template) {
+    const regex = new RegExp(template.dataset.templateIdRegex, 'g')
+    return template.innerHTML.replace(regex, new Date().getTime())
+  }
+
+  visibleRowsCount () {
+    return this.visibleRows().length
+  }
+
+  visibleRows () {
+    const rows = this.rowTargets
+    return rows.filter((row) => {
+      return row.querySelector("input[name*='_destroy']").value !== '1'
+    })
+  }
+
+  toggleEmpty () {
+    if (this.visibleRowsCount() > 0) {
+      this.emptyTarget.classList.add('invisible')
+    } else {
+      this.emptyTarget.classList.remove('invisible')
     }
+  }
+
+  resetPositions () {
+    this.visibleRows().forEach((row, index) => {
+      const positionInput = row.querySelector("input[name*='position']")
+      if (positionInput) {
+        positionInput.value = index
+      }
+    })
+  }
+
+  resetIndices () {
+    this.visibleRows().forEach((row, index) => {
+      row.dataset.rowIndex = index
+    })
+  }
 }