formstrap 0.1.0

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

@@ -0,0 +1,38 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  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))
+  }
+
+  setStartDateInputValue (value) {
+    const startDateInput = this.startDateInput()
+    startDateInput.value = value
+  }
+
+  setEndDateInputValue (value) {
+    const endDateInput = this.endDateInput()
+    endDateInput.value = value
+  }
+
+  startDateInput () {
+    return this.element.nextElementSibling
+  }
+
+  endDateInput () {
+    return this.startDateInput().nextElementSibling
+  }
+
+  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/formstrap/controllers/dropzone_controller.js

@@ -0,0 +1,31 @@
+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']
+  }
+
+  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')
+    })
+
+    // Focus
+    this.inputTarget.addEventListener('focusin', (event) => {
+      this.element.classList.add('focus')
+    })
+    this.inputTarget.addEventListener('focusout', (event) => {
+      this.element.classList.remove('focus')
+    })
+  }
+}

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

@@ -0,0 +1,244 @@
+/* global FileReader, DataTransfer */
+import { Controller } from '@hotwired/stimulus'
+
+// References:
+// https://developer.mozilla.org/en-US/docs/Web/API/FileReader
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
+
+export default class extends Controller {
+  static get targets () {
+    return ['thumbnails', 'template', 'input', 'placeholder', 'thumbnail', 'thumbnailDestroy']
+  }
+
+  connect () {
+    this.thumbnailWidth = this.firstThumbnailWidth()
+    this.thumbnailHeight = this.firstThumbnailHeight()
+  }
+
+  preview () {
+    this.removeThumbnails()
+    this.addThumbnails()
+    this.togglePlaceholder()
+  }
+
+  togglePlaceholder () {
+    if (this.hasFilesSelected()) {
+      this.hidePlaceholder()
+    } else {
+      this.showPlaceholder()
+    }
+  }
+
+  hasFilesSelected () {
+    return this.hasInputFiles() || this.hasVisibleAttachments()
+  }
+
+  hasVisibleAttachments () {
+    return this.visibleAttachments().length > 0
+  }
+
+  hasAttachments () {
+    return this.attachments().length > 0
+  }
+
+  hasInputFiles () {
+    return this.inputFiles().length > 0
+  }
+
+  attachments () {
+    return this.thumbnailTargets.filter((thumbnail) => {
+      return this.isAttachment(thumbnail)
+    })
+  }
+
+  visibleAttachments () {
+    return this.attachments().filter((thumbnail) => {
+      return !thumbnail.classList.contains('d-none')
+    })
+  }
+
+  inputFiles () {
+    return Array.from(this.inputTarget.files)
+  }
+
+  writeInputFiles (files) {
+    const dataTransfer = new DataTransfer()
+    files.forEach((file) => {
+      dataTransfer.items.add(file)
+    })
+    this.inputTarget.files = dataTransfer.files
+  }
+
+  remove (event) {
+    const thumbnail = event.target.closest('[data-file-preview-target="thumbnail"]')
+    this.removeThumbnail(thumbnail, event.params.name)
+    this.togglePlaceholder()
+  }
+
+  isAttachment (thumbnail) {
+    return thumbnail.querySelector('[data-file-preview-target="thumbnailDestroy"]')
+  }
+
+  removeInputFile (thumbnail, fileName) {
+    let files = this.inputFiles()
+    files = files.filter((file) => {
+      return file.name !== fileName
+    })
+    thumbnail.remove()
+    this.writeInputFiles(files)
+  }
+
+  removeAttachment (thumbnail) {
+    const destroyInput = thumbnail.querySelector('[data-file-preview-target="thumbnailDestroy"]')
+    destroyInput.value = '1'
+    thumbnail.classList.add('d-none')
+  }
+
+  showPlaceholder () {
+    this.placeholderTarget.classList.remove('d-none')
+  }
+
+  hidePlaceholder () {
+    this.placeholderTarget.classList.add('d-none')
+  }
+
+  removeThumbnails () {
+    this.thumbnailTargets.forEach((thumbnail) => {
+      this.removeThumbnail(thumbnail)
+    })
+  }
+
+  removeThumbnail (thumbnail, filename) {
+    if (this.isAttachment(thumbnail)) {
+      this.removeAttachment(thumbnail)
+    } else {
+      this.removeInputFile(thumbnail, filename)
+    }
+  }
+
+  addThumbnails () {
+    const files = this.inputFiles()
+    files.forEach((file) => {
+      const thumbnail = this.generateDummyThumbnail()
+      this.appendThumbnail(thumbnail)
+      this.updateThumbnail(this.lastThumbnail(), file)
+    })
+  }
+
+  generateDummyThumbnail () {
+    return this.templateTarget.content.cloneNode(true)
+  }
+
+  appendThumbnail (thumbnail) {
+    return this.thumbnailsTarget.appendChild(thumbnail)
+  }
+
+  updateThumbnail (thumbnail, file) {
+    this.updateThumbnailRemoveButton(thumbnail, file.name)
+
+    const title = this.titleForFile(file)
+    this.updateThumbnailTitle(thumbnail, title)
+
+    const icon = this.iconForMimeType(file.type)
+    this.updateThumbnailIcon(thumbnail, icon)
+
+    if (this.isImage(file)) {
+      this.updateThumbnailImage(thumbnail, file)
+    }
+  }
+
+  updateThumbnailImage (thumbnail, file) {
+    this.fileToBase64(file).then(base64 => {
+      this.updateThumbnailBackground(thumbnail, base64)
+      this.removeThumbnailIcon(thumbnail)
+    })
+  }
+
+  titleForFile (file) {
+    const byteSizeString = this.bytesToString(file.size)
+    return `${file.name} (${byteSizeString})`
+  }
+
+  bytesToString (bytes) {
+    const i = Math.floor(Math.log(bytes) / Math.log(1024))
+    return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
+  }
+
+  updateThumbnailRemoveButton (thumbnail, fileName) {
+    const removeButton = thumbnail.querySelector('.h-form-file-thumbnail-remove')
+    if (removeButton) {
+      removeButton.dataset.filePreviewNameParam = fileName
+    }
+  }
+
+  updateThumbnailTitle (thumbnail, title) {
+    thumbnail.title = title
+  }
+
+  updateThumbnailBackground (thumbnail, url) {
+    const thumbnailBackground = thumbnail.querySelector('.h-thumbnail-bg')
+    thumbnailBackground.style.backgroundImage = `url('${url}')`
+  }
+
+  removeThumbnailIcon (thumbnail) {
+    thumbnail.querySelector('.h-thumbnail-bg').innerHTML = ''
+  }
+
+  updateThumbnailIcon (thumbnail, icon) {
+    thumbnail.querySelector('.h-thumbnail-bg').innerHTML = icon
+  }
+
+  iconForMimeType (mimeType) {
+    const typeMap = {
+      image: ['image/bmp', 'image/gif', 'image/vnd.microsoft.icon', 'image/jpeg', 'image/png', 'image/svg+xml', 'image/tiff', 'image/webp'],
+      play: ['video/mp4', 'video/mpeg', 'video/ogg', 'video/mp2t', 'video/webm', 'video/3gpp', 'video/3gpp2'],
+      music: ['audio/aac', 'audio/midi', 'audio/x-midi', 'audio/mpeg', 'audio/ogg', 'audio/opus', 'audio/wav', 'audio/webm', 'audio/3gpp', 'audio/3gpp2'],
+      word: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
+      ppt: ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'],
+      excel: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+      slides: ['application/vnd.oasis.opendocument.presentation'],
+      spreadsheet: ['application/vnd.oasis.opendocument.spreadsheet'],
+      richtext: ['application/vnd.oasis.opendocument.text'],
+      zip: ['application/zip application/x-7z-compressed', 'application/x-bzip application/x-bzip2 application/gzip application/vnd.rar'],
+      pdf: ['application/pdf']
+    }
+
+    const iconName = Object.keys(typeMap).find(key => typeMap[key].includes(mimeType))
+    const fullIconName = ['bi', 'file', 'earmark', iconName].filter(e => typeof e === 'string' && e !== '').join('-')
+
+    return `<i class="bi ${fullIconName} h-thumbnail-icon"></i>`
+  }
+
+  isImage (file) {
+    return file.type.match(/^image/) !== null
+  }
+
+  fileToBase64 (file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = () => resolve(reader.result)
+      reader.onerror = error => reject(error)
+    })
+  }
+
+  thumbnails () {
+    return this.thumbnailsTarget.querySelectorAll('.img-thumbnail')
+  }
+
+  firstThumbnail () {
+    return this.thumbnailsTarget.firstElementChild
+  }
+
+  lastThumbnail () {
+    return this.thumbnailsTarget.lastElementChild
+  }
+
+  firstThumbnailWidth () {
+    return this.firstThumbnail().style.width
+  }
+
+  firstThumbnailHeight () {
+    return this.firstThumbnail().style.height
+  }
+}

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

@@ -0,0 +1,35 @@
+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 {
+  connect () {
+    const options = { ...this.defaultOptions(), ...this.options() }
+    flatpickr(this.element, options)
+  }
+
+  options () {
+    return JSON.parse(this.element.getAttribute('data-flatpickr'))
+  }
+
+  defaultOptions () {
+    return {
+      allowInput: true,
+      dateFormat: 'd/m/Y',
+      locale: this.getLocale(I18n.locale)
+    }
+  }
+
+  getLocale (locale) {
+    const locales = this.locales()
+    return locales[locale]
+  }
+
+  locales () {
+    return {
+      en: null,
+      nl: Dutch
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect () {
+    this.clickWhenInViewport()
+
+    document.querySelector('.modal-body').addEventListener('scroll', () => {
+      this.clickWhenInViewport()
+    })
+  }
+
+  clickWhenInViewport () {
+    if (!this.isLoading() && this.isInViewport()) {
+      this.element.setAttribute('clicked', 1)
+      this.element.click()
+    }
+  }
+
+  isLoading () {
+    return this.element.hasAttribute('clicked')
+  }
+
+  isInViewport () {
+    const rect = this.element.getBoundingClientRect()
+
+    return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  }
+}

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

@@ -0,0 +1,252 @@
+import { Controller } from '@hotwired/stimulus'
+import Sortable from 'sortablejs'
+
+export default class extends Controller {
+  static get targets () {
+    return ['item', 'template', 'thumbnails', 'modalButton', 'placeholder', 'count', 'editButton', 'validationInput']
+  }
+
+  connect () {
+    document.addEventListener('mediaSelectionSubmitted', (event) => {
+      if (event.detail.name === this.element.dataset.name) {
+        this.selectItems(event.detail.items)
+      }
+    })
+
+    // Init sorting
+    if (this.hasSorting()) {
+      this.initSortable()
+    }
+
+    this.validate()
+  }
+
+  // Actions
+  destroy (event) {
+    const item = event.currentTarget.closest('[data-media-target=\'item\']')
+    this.destroyItem(item)
+  }
+
+  syncIds () {
+    const ids = this.activeIds()
+
+    this.modalButtonTargets.forEach((button) => {
+      const url = new URL(button.getAttribute('href'))
+
+      // Remove all ids[]
+      url.searchParams.delete('ids[]')
+
+      // Add new ids
+      ids.forEach((id) => {
+        url.searchParams.append('ids[]', id)
+      })
+
+      button.setAttribute('href', url.toString())
+    })
+  }
+
+  // Methods
+  initSortable () {
+    Sortable.create(this.thumbnailsTarget, {
+      handle: '.media-drag-sort-handle',
+      onEnd: (event) => {
+        this.resetPositions()
+      }
+    })
+  }
+
+  hasSorting () {
+    return this.element.dataset.sort === 'true'
+  }
+
+  destroyItem (item) {
+    this.removeItem(item)
+    this.postProcess()
+  }
+
+  selectItems (items) {
+    // Destroy all deselected items
+    this.removeAllDeselectedItems(items)
+
+    // Add all new selected items
+    this.addNewItems(items)
+
+    this.postProcess()
+  }
+
+  postProcess () {
+    // Reset positions
+    this.resetPositions()
+
+    // Sync Ids
+    this.syncIds()
+
+    // Toggle placeholder
+    this.togglePlaceholder()
+
+    // Validate
+    this.validate()
+  }
+
+  validate () {
+    this.clearValidation()
+    this.validateMinimum()
+    this.validateMaximum()
+  }
+
+  clearValidation () {
+    this.validationInputTarget.setCustomValidity('')
+  }
+
+  validateMinimum () {
+    const count = this.activeItems().length
+    if (count < this.minActiveItems()) {
+      this.validationInputTarget.setCustomValidity(this.validationInputTarget.dataset.minMessage)
+    }
+  }
+
+  validateMaximum () {
+    const count = this.activeItems().length
+    if (count > this.maxActiveItems()) {
+      this.validationInputTarget.setCustomValidity(this.validationInputTarget.dataset.maxMessage)
+    }
+  }
+
+  minActiveItems () {
+    return parseInt(this.element.dataset.min, 10) || 0
+  }
+
+  maxActiveItems () {
+    return parseInt(this.element.dataset.max, 10) || Infinity
+  }
+
+  resetPositions () {
+    this.activeItems().forEach((item, index) => {
+      const positionInput = item.querySelector('input[name*=\'position\']')
+      if (positionInput) {
+        positionInput.value = index
+      }
+    })
+  }
+
+  addNewItems (items) {
+    const itemTargetIds = this.itemTargets.map((i) => { return parseInt(i.querySelectorAll('input')[1].value) })
+    items.forEach((item) => {
+      if (itemTargetIds.includes(item.blobId)) {
+        // Do not add this item (as it is already present)
+        return
+      }
+
+      this.addItem(item)
+    })
+  }
+
+  addItem (item) {
+    const currentItem = this.itemByBlobId(item.blobId)
+    if (currentItem) {
+      // (re-)enable if already exists
+      this.enableItem(currentItem)
+    } else {
+      // Create if item doesn't exist yet
+      this.createItem(item)
+    }
+  }
+
+  togglePlaceholder () {
+    if (this.activeItems().length > 0) {
+      this.hidePlaceholder()
+    } else {
+      this.showPlaceholder()
+    }
+  }
+
+  showPlaceholder () {
+    this.placeholderTarget.classList.remove('d-none')
+  }
+
+  hidePlaceholder () {
+    this.placeholderTarget.classList.add('d-none')
+  }
+
+  enableItem (item) {
+    item.querySelector('input[name*=\'_destroy\']').value = false
+    item.classList.remove('d-none')
+  }
+
+  createItem (item) {
+    // Copy template
+    const template = this.templateTarget
+    const html = this.randomizeIds(template)
+    this.thumbnailsTarget.insertAdjacentHTML('beforeend', html)
+
+    // Set new values
+    const newItem = this.itemTargets.pop()
+    newItem.querySelector('input[name*="[blob_id]"]').value = item.blobId
+    newItem.querySelector('input[name*="[_destroy]"]').value = false
+
+    // Update edit button url
+    const editButton = newItem.querySelector('[data-media-target="editButton"]')
+    editButton.setAttribute('href', editButton.getAttribute('href').replace('$1', item.blobId))
+
+    // Copy thumbnail
+    const oldThumbnail = newItem.querySelector('.h-thumbnail')
+    const newThumbnail = item.thumbnail.cloneNode(true)
+    oldThumbnail.parentNode.replaceChild(newThumbnail, oldThumbnail)
+  }
+
+  randomizeIds (template) {
+    const regex = new RegExp(template.dataset.templateIdRegex, 'g')
+    const randomNumber = Math.floor(100000000 + Math.random() * 900000000)
+    return template.innerHTML.replace(regex, randomNumber)
+  }
+
+  removeAllDeselectedItems (items) {
+    this.removeDeselectedItems(items, this.itemTargets)
+  }
+
+  removeDeselectedItems (elements, items) {
+    const returnedBlobIds = elements.map((e) => { return e.blobId })
+
+    items.forEach((item) => {
+      const blobId = parseInt(item.querySelectorAll('input')[1].value)
+      if (returnedBlobIds.includes(blobId)) {
+        // Do not delete this one
+        return
+      }
+
+      this.removeItem(item)
+    })
+  }
+
+  removeItem (item) {
+    item.querySelector('input[name*=\'_destroy\']').value = 1
+    item.classList.add('d-none')
+
+    // Reset positions
+    this.resetPositions()
+
+    // Sync ids
+    this.syncIds()
+
+    // Toggle placeholder
+    this.togglePlaceholder()
+  }
+
+  itemByBlobId (blobId) {
+    return this.itemTargets.find((item) => {
+      return item.querySelector('input[name*=\'blob_id\']').value === blobId
+    })
+  }
+
+  activeItems () {
+    return this.itemTargets.filter((item) => {
+      return item.querySelector('input[name$=\'[_destroy]\']').value === 'false'
+    })
+  }
+
+  activeIds () {
+    return this.activeItems().map((item) => {
+      return item.querySelector('input[name$=\'[blob_id]\']').value
+    })
+  }
+}