headmin 0.3.2 → 0.4.0

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

@@ -0,0 +1,255 @@
+/* global fetch */
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static get targets () {
+    return ['input', 'dropdown', 'dropdownItem']
+  }
+
+  static get values () {
+    return {
+      url: String
+    }
+  }
+
+  connect () {
+    // Focus
+    this.inputTarget.addEventListener('focus', (event) => {
+      this.show()
+    })
+
+    // Typing
+    this.inputTarget.addEventListener('keydown', (event) => {
+      this.handleKeydown(event)
+    })
+
+    // Clicked outside dropdown
+    document.addEventListener('click', (event) => {
+      this.handleOutsideClick(event)
+    })
+  }
+
+  handleKeydown (event) {
+    this.show()
+
+    const keyCode = parseInt(event.keyCode, 10)
+    if (this.isArrowKey(keyCode)) {
+      this.handleArrowKey(keyCode)
+    } else if (this.isEnterKey(keyCode)) {
+      this.selectActiveItem()
+    } else {
+      this.handleTextKey()
+    }
+  }
+
+  selectActiveItem () {
+    this.activeItem().click()
+  }
+
+  isEnterKey (keyCode) {
+    return keyCode === 13
+  }
+
+  handleArrowKey (keyCode) {
+    switch (keyCode) {
+      case 38:
+        this.handleArrowUp()
+        break
+      case 40:
+        this.handleArrowDown()
+        break
+      default:
+    }
+  }
+
+  handleArrowUp () {
+    this.selectPreviousItem()
+  }
+
+  handleArrowDown () {
+    this.selectNextItem()
+  }
+
+  selectNextItem () {
+    const next = this.nextItem()
+    this.deselectAll()
+    next.classList.add('active')
+  }
+
+  nextItem () {
+    const current = this.activeItem()
+
+    // Select first item if nothing selected
+    if (!this.hasSelectedItem()) {
+      return this.firstItem()
+    }
+
+    if (this.isItemLast(current)) {
+      return this.firstItem()
+    } else {
+      const index = this.itemIndex(current)
+      return this.itemAtIndex(index + 1)
+    }
+  }
+
+  selectPreviousItem () {
+    const previous = this.previousItem()
+    this.deselectAll()
+    previous.classList.add('active')
+  }
+
+  previousItem () {
+    const current = this.activeItem()
+
+    // Select last item if nothing selected
+    if (!this.hasSelectedItem()) {
+      return this.lastItem()
+    }
+
+    if (this.isItemFirst(current)) {
+      return this.lastItem()
+    } else {
+      const index = this.itemIndex(current)
+      return this.itemAtIndex(index - 1)
+    }
+  }
+
+  deselectAll () {
+    this.dropdownItemTargets.forEach(dropdownItem => {
+      dropdownItem.classList.remove('active')
+    })
+  }
+
+  itemAtIndex (index) {
+    return this.dropdownItemTargets[index]
+  }
+
+  firstItem () {
+    return this.itemAtIndex(0)
+  }
+
+  lastItem () {
+    return this.itemAtIndex(this.dropdownItemTargets.length - 1)
+  }
+
+  hasSelectedItem () {
+    return this.activeItem() !== undefined
+  }
+
+  activeItem () {
+    return this.dropdownItemTargets.find((item) => {
+      return item.classList.contains('active')
+    })
+  }
+
+  isItemLast (item) {
+    return this.itemIndex(item) === this.dropdownItemTargets.length - 1
+  }
+
+  isItemFirst (item) {
+    return this.itemIndex(item) === 0
+  }
+
+  itemIndex (item) {
+    return Array.from(this.dropdownItemTargets).indexOf(item)
+  }
+
+  handleTextKey () {
+    // 1. fetch info
+    this.fetchCollection().then((html) => {
+      // 2. render html
+      this.renderCollection(html)
+    }).then(() => {
+      // 3. sort by relevance
+      // ...
+      // 4. Highlight
+      this.highlight()
+    })
+  }
+
+  show () {
+    if (this.isDropdownEmpty()) {
+      this.dropdownTarget.classList.remove('d-none')
+    } else {
+      this.hide()
+    }
+  }
+
+  hide () {
+    this.dropdownTarget.classList.add('d-none')
+  }
+
+  isDropdownEmpty () {
+    return this.dropdownTarget.textContent.trim().length > 0
+  }
+
+  isArrowKey (keyCode) {
+    const arrowKeyCodes = [37, 38, 39, 40]
+    return arrowKeyCodes.includes(keyCode)
+  }
+
+  fetchCollection () {
+    if (this.isRemote()) {
+      return fetch(this.urlValue).then((response) => {
+        return response.text()
+      }).catch((error) => {
+        console.error('The URL you provided for the autocomplete collection didn\'t return a successful result', error)
+      })
+    } else {
+      return Promise.resolve(this.dropdownTarget.innerHTML)
+    }
+  }
+
+  renderCollection (html) {
+    this.dropdownTarget.innerHTML = html
+  }
+
+  isRemote () {
+    return this.hasUrlValue
+  }
+
+  highlight () {
+    const query = this.value()
+    this.dropdownItemTargets.forEach(dropdownItem => {
+      let text = dropdownItem.innerHTML
+
+      // Clean up past results
+      text = text.replace(/<mark.*?>(.*?)<\/mark>/ig, '$1')
+
+      // Highlight query
+      const regex2 = new RegExp(`(${query})`, 'gi')
+      text = text.replace(regex2, '<mark>$1</mark>')
+
+      dropdownItem.innerHTML = text
+    })
+  }
+
+  select (event) {
+    this.inputTarget.value = event.target.getAttribute('value')
+    this.hide()
+  }
+
+  value () {
+    return this.inputTarget.value
+  }
+
+  numberOfCharacters () {
+    return this.value().length
+  }
+
+  handleOutsideClick (event) {
+    if (!this.isClickedInside(event)) {
+      this.hide()
+    }
+  }
+
+  isClickedInside (event) {
+    if (!event) {
+      return false
+    }
+    const inInput = this.inputTarget.contains(event.target)
+    const inDropdown = this.dropdownTarget.contains(event.target)
+
+    return (inInput || inDropdown)
+  }
+}

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