formstrap 0.1.0

data/app/assets/javascripts/formstrap/controllers/media_modal_controller.js

@@ -0,0 +1,147 @@
+/* global CustomEvent */
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static get targets () {
+    return ['idCheckbox', 'item', 'form', 'selectButton', 'placeholder', 'count']
+  }
+
+  static get values () {
+    return { ids: Array }
+  }
+
+  connect () {
+    this.validate()
+    this.updateCount()
+  }
+
+  // Actions
+  select () {
+    this.dispatchSelectionEvent()
+  }
+
+  submitForm () {
+    this.hidePlaceholder()
+    this.triggerFormSubmission()
+  }
+
+  inputChange (event) {
+    this.handleIdsUpdate(event.target)
+    this.updateCount()
+  }
+
+  // Methods
+  hidePlaceholder () {
+    this.placeholderTarget.classList.add('d-none')
+  }
+
+  handleIdsUpdate (element) {
+    if (element.checked) {
+      const arr = this.idsValue
+      arr.push(element.value)
+      this.idsValue = arr
+    } else {
+      this.idsValue = this.idsValue.filter((value) => {
+        return element.value !== value
+      })
+    }
+  }
+
+  itemTargetConnected (element) {
+    this.updateItem(element.querySelector('input'))
+  }
+
+  updateItem (element) {
+    const arr = this.idsValue
+
+    if (arr.includes(element.value)) {
+      element.checked = true
+    } else {
+      element.checked = false
+    }
+  }
+
+  idsValueChanged () {
+    for (const item of this.itemTargets) {
+      this.updateItem(item.querySelector('input'))
+    }
+    this.validate()
+  }
+
+  dispatchSelectionEvent () {
+    document.dispatchEvent(
+      new CustomEvent(
+        'mediaSelectionSubmitted',
+        {
+          detail: {
+            name: this.element.dataset.name,
+            items: this.renderItemsForEvent()
+          }
+        }
+      )
+    )
+  }
+
+  triggerFormSubmission () {
+    this.formTarget.requestSubmit()
+  }
+
+  renderItemsForEvent () {
+    return this.idsValue.map((item) => this.renderItemForEvent(item)).filter((i) => { return i !== undefined })
+  }
+
+  renderItemForEvent (item) {
+    const id = parseInt(item)
+    const blobId = `#blob_${id}`
+    const element = this.element.querySelector(blobId)
+
+    return {
+      blobId: id,
+      thumbnail: element ? element.querySelector('.h-thumbnail') : ''
+    }
+  }
+
+  selectedItems () {
+    return this.itemTargets.filter((item) => {
+      const checkbox = item.querySelector('input[type="checkbox"]')
+      return checkbox.checked
+    })
+  }
+
+  selectedItemsCount () {
+    return this.idsValue.length
+  }
+
+  minSelectedItems () {
+    return parseInt(this.element.dataset.min, 10) || 0
+  }
+
+  maxSelectedItems () {
+    return parseInt(this.element.dataset.max, 10) || Infinity
+  }
+
+  validate () {
+    if (this.isValid()) {
+      this.enableSelectButton()
+    } else {
+      this.disableSelectButton()
+    }
+  }
+
+  enableSelectButton () {
+    this.selectButtonTarget.removeAttribute('disabled')
+  }
+
+  disableSelectButton () {
+    this.selectButtonTarget.setAttribute('disabled', '')
+  }
+
+  isValid () {
+    const count = this.selectedItemsCount()
+    return count >= this.minSelectedItems() && count <= this.maxSelectedItems()
+  }
+
+  updateCount () {
+    this.countTarget.innerHTML = this.selectedItemsCount()
+  }
+}

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

@@ -0,0 +1,40 @@
+/* global RedactorX */
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  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 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/formstrap/controllers/repeater_controller.js

@@ -0,0 +1,148 @@
+import { Controller } from '@hotwired/stimulus'
+import Sortable from 'sortablejs'
+
+export default class extends Controller {
+  static get values () {
+    return {
+      id: String
+    }
+  }
+
+  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()
+  }
+
+  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)
+    }
+
+    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
+      this.flagRowForDeletion(row)
+      row.remove()
+    }
+
+    this.resetIndices()
+    this.resetPositions()
+    this.toggleEmpty()
+  }
+
+  flagRowForDeletion (row) {
+    const destroyInput = row.querySelector('input[name*=\'_destroy\']')
+    const idInput = row.querySelector('input[name*=\'[id]\']')
+
+    // Update _destroy value
+    destroyInput.value = 1
+
+    // Move away from row
+    this.listTarget.parentNode.appendChild(destroyInput)
+    this.listTarget.parentNode.appendChild(idInput)
+  }
+
+  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
+    })
+  }
+}

data/app/assets/javascripts/formstrap/controllers/select_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from '@hotwired/stimulus'
+import TomSelect from 'tom-select'
+import I18n from '../config/i18n'
+
+export default class extends Controller {
+  connect () {
+    if (this.element.hasAttribute('multiple')) {
+      this.initTomSelect()
+    }
+  }
+
+  defaultOptions (locale) {
+    const defaultOptions = {
+      en: {
+        render: {
+          option_create: function (data, escape) {
+            return '<div class="create">Add <strong>' + escape(data.input) + '</strong>&hellip;</div>'
+          },
+          no_results: function (data, escape) {
+            return '<div class="no-results">No results found</div>'
+          }
+        }
+      },
+      nl: {
+        render: {
+          option_create: function (data, escape) {
+            return '<div class="create">Voeg <strong>' + escape(data.input) + '</strong> toe &hellip;</div>'
+          },
+          no_results: function (data, escape) {
+            return '<div class="no-results">Geen resultaten gevonden</div>'
+          }
+        }
+      }
+    }
+    return defaultOptions[locale]
+  }
+
+  hasTags () {
+    return this.element.dataset.tags === 'true'
+  }
+
+  initTomSelect () {
+    const defaultOptions = this.defaultOptions(I18n.locale)
+    const options = { create: this.hasTags() }
+
+    /* eslint-disable no-new */
+    new TomSelect(this.element, { ...defaultOptions, ...options })
+  }
+}

data/app/assets/javascripts/formstrap/controllers/textarea_controller.js

@@ -0,0 +1,48 @@
+/* global IntersectionObserver */
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static get targets () {
+    return ['textarea', 'count']
+  }
+
+  connect () {
+    onVisible(this.textareaTarget, () => { this.update() })
+  }
+
+  update () {
+    this.resize()
+    this.updateCount()
+  }
+
+  resize () {
+    this.textareaTarget.style.height = 'auto'
+    this.textareaTarget.setAttribute('style', 'height:' + (this.textareaTarget.scrollHeight) + 'px;overflow-y:hidden;')
+  }
+
+  updateCount () {
+    if (this.textareaTarget.getAttribute('maxlength')) {
+      this.updateCountLength()
+    }
+  }
+
+  updateCountLength () {
+    const currentLength = this.textareaTarget.value.length
+    const maximumLength = this.textareaTarget.getAttribute('maxlength')
+
+    this.countTarget.textContent = `${currentLength}/${maximumLength}`
+  }
+}
+
+// Custom callback event that triggers when an element becomes visible.
+// Solves the bug where textarea fields are not properly sized when they (or their parent) or hidden.
+function onVisible (element, callback) {
+  new IntersectionObserver((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.intersectionRatio > 0) {
+        callback(element)
+        observer.disconnect()
+      }
+    })
+  }).observe(element)
+}

data/app/assets/javascripts/formstrap/index.js

@@ -0,0 +1,32 @@
+/* global Stimulus */
+import { Application } from '@hotwired/stimulus'
+import AutocompleteController from './controllers/autocomplete_controller'
+import DateRangeController from './controllers/date_range_controller'
+import DropzoneController from './controllers/dropzone_controller'
+import FilePreviewController from './controllers/file_preview_controller'
+import FlatpickrController from './controllers/flatpickr_controller'
+import InfiniteScrollerController from './controllers/infinite_scroller_controller'
+import MediaController from './controllers/media_controller'
+import MediaModalController from './controllers/media_modal_controller'
+import RedactorxController from './controllers/redactorx_controller'
+import RepeaterController from './controllers/repeater_controller'
+import SelectController from './controllers/select_controller'
+import TextareaController from './controllers/textarea_controller'
+
+export class Formstrap {
+  static start () {
+    window.Stimulus = window.Stimulus || Application.start()
+    Stimulus.register('autocomplete', AutocompleteController)
+    Stimulus.register('date-range', DateRangeController)
+    Stimulus.register('dropzone', DropzoneController)
+    Stimulus.register('file-preview', FilePreviewController)
+    Stimulus.register('flatpickr', FlatpickrController)
+    Stimulus.register('infinite-scroller', InfiniteScrollerController)
+    Stimulus.register('media', MediaController)
+    Stimulus.register('media-modal', MediaModalController)
+    Stimulus.register('redactorx', RedactorxController)
+    Stimulus.register('repeater', RepeaterController)
+    Stimulus.register('select', SelectController)
+    Stimulus.register('textarea', TextareaController)
+  }
+}