trestle 0.9.8 → 0.10.0.pre

data/frontend/js/controllers/confirm_controller.js

@@ -0,0 +1,115 @@
+import PopoverController from './popover_controller'
+
+import { i18n } from '../core/i18n'
+
+export default class extends PopoverController {
+  static values = {
+    confirmLabel: String,
+    cancelLabel: String
+  }
+
+  static classes = [ 'confirm', 'cancel' ]
+
+  static defaultConfirmClass = 'btn-primary'
+  static defaultCancelClass = 'btn-light'
+
+  initialize () {
+    super.initialize()
+
+    this.boundOnClick = this.onClick.bind(this)
+
+    this.confirmed = false
+  }
+
+  connect () {
+    super.connect()
+
+    this.element.addEventListener('click', this.boundOnClick, { capture: true })
+  }
+
+  disconnect () {
+    super.disconnect()
+
+    this.element.removeEventListener('click', this.boundOnClick, { capture: true })
+  }
+
+  onClick (e) {
+    if (!this.confirmed) {
+      e.preventDefault()
+      e.stopImmediatePropagation()
+
+      this.toggle()
+    }
+  }
+
+  confirm () {
+    this.popover.dispose()
+
+    this.confirmed = true
+    this.element.click()
+    this.confirmed = false
+  }
+
+  cancel () {
+    this.popover.hide()
+  }
+
+  get popoverOptions () {
+    return {
+      ...super.popoverOptions,
+      html: true
+    }
+  }
+
+  get content () {
+    const group = document.createElement('div')
+    group.classList.add('btn-group')
+
+    group.appendChild(this.confirmButton)
+    group.appendChild(this.cancelButton)
+
+    return group
+  }
+
+  get confirmButton () {
+    const button = document.createElement('button')
+
+    button.classList.add('btn', 'btn-sm', this.confirmButtonClass)
+    button.textContent = this.confirmLabel
+
+    button.addEventListener('click', this.confirm.bind(this))
+
+    return button
+  }
+
+  get cancelButton () {
+    const button = document.createElement('button')
+
+    button.classList.add('btn', 'btn-sm', this.cancelButtonClass)
+    button.textContent = this.cancelLabel
+
+    button.addEventListener('click', this.cancel.bind(this))
+
+    return button
+  }
+
+  get title () {
+    return this.titleValue || i18n.t('trestle.confirmation.title', { defaultValue: 'Are you sure?' })
+  }
+
+  get confirmLabel () {
+    return this.confirmLabelValue || i18n.t('trestle.confirmation.ok', { defaultValue: 'OK' })
+  }
+
+  get cancelLabel () {
+    return this.cancelLabelValue || i18n.t('trestle.confirmation.cancel', { defaultValue: 'Cancel' })
+  }
+
+  get confirmButtonClass () {
+    return this.hasConfirmClass ? this.confirmClass : this.constructor.defaultConfirmClass
+  }
+
+  get cancelButtonClass () {
+    return this.hasCancelClass ? this.cancelClass : this.constructor.defaultCancelClass
+  }
+}

data/frontend/js/controllers/confirm_delete_controller.js

@@ -0,0 +1,11 @@
+import ConfirmController from './confirm_controller'
+
+import { i18n } from '../core/i18n'
+
+export default class extends ConfirmController {
+  static values = {
+    confirmLabel: i18n['trestle.confirmation.delete'] || 'Delete'
+  }
+
+  static defaultConfirmClass = 'btn-danger'
+}

data/frontend/js/controllers/datepicker_controller.js

@@ -0,0 +1,12 @@
+import FlatpickrController from './flatpickr_controller'
+
+import { i18n } from '../core/i18n'
+
+export default class extends FlatpickrController {
+  get options () {
+    return {
+      ...super.options,
+      altFormat: i18n.t('admin.datepicker.formats.date', { defaultValue: 'm/d/Y' })
+    }
+  }
+}

data/frontend/js/controllers/datetimepicker_controller.js

@@ -0,0 +1,13 @@
+import FlatpickrController from './flatpickr_controller'
+
+import { i18n } from '../core/i18n'
+
+export default class extends FlatpickrController {
+  get options () {
+    return {
+      ...super.options,
+      enableTime: true,
+      altFormat: i18n.t('admin.datepicker.formats.datetime', { defaultValue: 'm/d/Y h:i K' })
+    }
+  }
+}

data/frontend/js/controllers/deprecated/init_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus'
+
+import { triggerInit } from '../../deprecated/events'
+
+export default class extends Controller {
+  connect () {
+    triggerInit(this.element)
+  }
+}

data/frontend/js/controllers/flatpickr_controller.js

@@ -0,0 +1,50 @@
+import ApplicationController from './application_controller'
+
+import flatpickr from 'flatpickr'
+
+export default class extends ApplicationController {
+  connect () {
+    this.flatpickr = flatpickr(this.element, {
+      ...this.options,
+      onReady: this.setup.bind(this)
+    })
+  }
+
+  disconnect () {
+    this.flatpickr.destroy()
+  }
+
+  clear () {
+    const isDisabled = this.element.disabled || this.element.classList.contains('disabled')
+
+    if (!isDisabled) {
+      this.flatpickr.clear()
+    }
+  }
+
+  setup (selectedDates, dateStr, instance) {
+    this._createClearButton(instance)
+  }
+
+  get options () {
+    return {
+      allowInput: true,
+      altInput: true
+    }
+  }
+
+  _createClearButton (instance) {
+    if (this.element.dataset.allowClear) {
+      const clearButton = document.createElement('button')
+
+      clearButton.classList.add('clear-datepicker')
+
+      clearButton.addEventListener('click', (e) => {
+        e.preventDefault()
+        this.clear()
+      })
+
+      instance.altInput.parentNode.insertBefore(clearButton, instance.altInput)
+    }
+  }
+}

data/frontend/js/controllers/follow_url_controller.js

@@ -0,0 +1,36 @@
+import ApplicationController from './application_controller'
+
+import { visit } from '@hotwired/turbo'
+import Modal from '../core/modal'
+
+export default class extends ApplicationController {
+  follow (e) {
+    if (this.ignoreElement(e.target) || !this.url) {
+      return
+    }
+
+    if (this.isModal) {
+      Modal.load(this.url)
+    } else if (e.metaKey || e.ctrlKey) {
+      window.open(this.url, '_blank')
+    } else {
+      visit(this.url)
+    }
+  }
+
+  get url () {
+    if (this.element.dataset.url === 'auto') {
+      return this.element.querySelector('td:not(.table-actions) a').href
+    } else {
+      return this.element.dataset.url
+    }
+  }
+
+  get isModal () {
+    return this.element.dataset.modal
+  }
+
+  ignoreElement (node) {
+    return node.matches('a, input, button, .select-row')
+  }
+}

data/frontend/js/controllers/form_error_controller.js

@@ -0,0 +1,24 @@
+import ApplicationController from './application_controller'
+
+import ErrorModal from '../core/error_modal'
+
+export default class extends ApplicationController {
+  connect () {
+    this.element.addEventListener('turbo:before-fetch-response', this.handleFormResponse)
+  }
+
+  disconnect () {
+    this.element.removeEventListener('turbo:before-fetch-response', this.handleFormResponse)
+  }
+
+  handleFormResponse (e) {
+    const response = e.detail.fetchResponse.response
+
+    if (response.status >= 500) {
+      e.preventDefault()
+
+      const title = `${response.status} (${response.statusText})`
+      response.text().then(content => ErrorModal.show({ title, content }))
+    }
+  }
+}

data/frontend/js/controllers/form_loading_controller.js

@@ -0,0 +1,50 @@
+import ApplicationController from './application_controller'
+
+const SUBMIT_BUTTON_SELECTOR = 'input[type="submit"], button[type="submit"]'
+
+export default class extends ApplicationController {
+  initialize () {
+    this.boundSubmit = this.submit.bind(this)
+    this.boundReset = this.reset.bind(this)
+  }
+
+  connect () {
+    this.element.addEventListener('submit', this.boundSubmit)
+    this.element.addEventListener('turbo:before-fetch-response', this.boundReset)
+  }
+
+  disconnect () {
+    this.element.removeEventListener('submit', this.boundSubmit)
+    this.element.removeEventListener('turbo:before-fetch-response', this.boundReset)
+  }
+
+  submit (e) {
+    this.disableButtons()
+    this.setLoading(e.submitter || this.element.querySelector(SUBMIT_BUTTON_SELECTOR))
+  }
+
+  reset (e) {
+    this.restoreButtons()
+  }
+
+  setLoading (button) {
+    button.classList.add('loading')
+  }
+
+  disableButtons (e) {
+    this.submitButtons.forEach(button => {
+      button.disabled = true
+    })
+  }
+
+  restoreButtons () {
+    this.submitButtons.forEach(button => {
+      button.classList.remove('loading')
+      button.disabled = false
+    })
+  }
+
+  get submitButtons () {
+    return this.element.querySelectorAll(SUBMIT_BUTTON_SELECTOR)
+  }
+}

data/frontend/js/controllers/gallery_controller.js

@@ -0,0 +1,10 @@
+import LightboxController from './lightbox_controller'
+
+export default class extends LightboxController {
+  get options () {
+    return {
+      ...super.options,
+      children: this.imageTargets
+    }
+  }
+}

data/frontend/js/controllers/index.js

@@ -0,0 +1,19 @@
+import { Application } from '@hotwired/stimulus'
+import { definitionsFromContext } from '@hotwired/stimulus-webpack-helpers'
+
+import ApplicationController from './application_controller'
+
+window.Stimulus = Application.start()
+
+const context = require.context('.', true, /\.js$/)
+const controllerDefinitions = definitionsFromContext(context)
+Stimulus.load(controllerDefinitions)
+
+const Controllers = controllerDefinitions.reduce((result, definition) => {
+  return { ...result, [definition.identifier]: definition.controllerConstructor }
+}, {})
+
+export {
+  ApplicationController,
+  Controllers
+}

data/frontend/js/controllers/keyboard_submit_controller.js

@@ -0,0 +1,25 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  initialize () {
+    this.boundHandleKeyDown = this.handleKeyDown.bind(this)
+  }
+
+  connect () {
+    this.element.addEventListener('keydown', this.boundHandleKeyDown)
+  }
+
+  disconnect () {
+    this.element.removeEventListener('keydown', this.boundHandleKeyDown)
+  }
+
+  handleKeyDown (e) {
+    if (e.key === 'Enter' && this.preventEnterKey(e.target)) {
+      e.preventDefault()
+    }
+  }
+
+  preventEnterKey (el) {
+    return el.matches('input:not([type="submit"])')
+  }
+}

data/frontend/js/controllers/lightbox_controller.js

@@ -0,0 +1,160 @@
+import ApplicationController from './application_controller'
+import usePhotoSwipe from '../mixins/photoswipe'
+
+import PhotoSwipeLightbox from 'photoswipe/lightbox'
+import getVideoId from 'get-video-id'
+
+const waitForImageDimensions = (element) => {
+  return new Promise((resolve, reject) => {
+    const timeout = setInterval(() => {
+      if (element.naturalWidth && element.naturalHeight) {
+        clearInterval(timeout)
+        resolve(element)
+      }
+    }, 0)
+
+    element.addEventListener('error', () => {
+      clearInterval(timeout)
+      reject(element)
+    })
+  })
+}
+
+const VideoIframeUrl = {
+  youtube: (id) => `https://www.youtube.com/embed/${id}`,
+  vimeo: (id) => `https://player.vimeo.com/video/${id}`
+}
+
+export default class extends ApplicationController {
+  static targets = ["image"]
+
+  static values = {
+    animationType: { type: String, default: 'zoom' },
+    animationDuration: { type: Number, default: 150 },
+    padding: { type: Object, default: { top: 20, bottom: 20, left: 20, right: 20 } },
+
+    defaultVideoWidth: { type: Number, default: 800 },
+    defaultVideoHeight: { type: Number, default: 450 }
+  }
+
+  initialize () {
+    usePhotoSwipe(this)
+  }
+
+  connect () {
+    this.lightbox = new PhotoSwipeLightbox(this.options)
+    this.addFilters()
+    this.lightbox.init()
+  }
+
+  disconnect () {
+    this.lightbox.destroy()
+  }
+
+  addFilters () {
+    this.lightbox.on('contentLoadImage', this.contentLoadImageHandler.bind(this))
+    this.lightbox.on('contentActivate', this.contentActivateHandler.bind(this))
+    this.lightbox.on('contentDeactivate', this.contentDeactivateHandler.bind(this))
+
+    this.lightbox.addFilter('domItemData', this.domItemDimensionsFilter.bind(this))
+    this.lightbox.addFilter('domItemData', this.domItemVideoFilter.bind(this))
+    this.lightbox.addFilter('domItemData', this.domItemEmbedFilter.bind(this))
+    this.lightbox.addFilter('useContentPlaceholder', this.useContentPlaceholderFilter.bind(this))
+  }
+
+  // If the image width and height is not set, try to set it as soon
+  // as the image element has a naturalWidth/naturalHeight
+  contentLoadImageHandler ({ content }) {
+    if (content.width == 0 || content.height == 0) {
+      const imgEl = content.element
+      const linkEl = content.data.element
+
+      waitForImageDimensions(imgEl).then((imgEl) => {
+        linkEl.dataset.width = imgEl.naturalWidth
+        linkEl.dataset.height = imgEl.naturalHeight
+
+        content.instance.refreshSlideContent(content.index)
+      }).catch(() => {})
+    }
+  }
+
+  // Append HTML slide content when slide is reactivated
+  contentActivateHandler({ content }) {
+    if (content.type == 'html') {
+      content.append()
+    }
+  }
+
+  // Remove HTML slide content when slide is deactivated
+  contentDeactivateHandler ({ content }) {
+    if (content.type == 'html') {
+      content.remove()
+    }
+  }
+
+  // Sets the width and height from data-width and data-height attributes on the link element
+  domItemDimensionsFilter (itemData, element, linkEl) {
+    if (linkEl) {
+      const width = linkEl.dataset.width
+      const height = linkEl.dataset.height
+
+      if (width) itemData.w = Number(width)
+      if (height) itemData.h = Number(height)
+    }
+
+    return itemData
+  }
+
+  // Use <video> tag to play media when data-type="video"
+  domItemVideoFilter (itemData, element, linkEl) {
+    if (linkEl && linkEl.dataset.type == 'video') {
+      itemData.type = 'html'
+      itemData.html = `<video controls><source src="${itemData.src}"></video>`
+
+      this.setDefaultVideoDimensions(itemData)
+    }
+
+    return itemData
+  }
+
+  // Automatically detect video links and convert to an iframe
+  domItemEmbedFilter (itemData, element, linkEl) {
+    if (linkEl && !itemData.type) {
+      const video = getVideoId(itemData.src)
+
+      if (video.service && VideoIframeUrl[video.service]) {
+        const src = VideoIframeUrl[video.service](video.id)
+
+        itemData.type = 'html'
+        itemData.html = `<iframe src="${src}" allowfullscreen></iframe>`
+
+        this.setDefaultVideoDimensions(itemData)
+      }
+    }
+
+    return itemData
+  }
+
+  // Use the thumbnail as the content placeholder only when an explicit width/height is set
+  useContentPlaceholderFilter (useContentPlaceholder, content) {
+    return content.width && content.height && content.type !== 'html'
+  }
+
+  get options () {
+    return {
+      gallery: this.element,
+      pswpModule: this.loadPhotoSwipe,
+
+      padding: this.paddingValue,
+
+      showHideAnimationType: this.animationTypeValue,
+      showAnimationDuration: this.animationDurationValue,
+      hideAnimationDuration: this.animationDurationValue
+    }
+  }
+
+  setDefaultVideoDimensions(itemData) {
+    itemData.w ||= this.defaultVideoWidthValue
+    itemData.h ||= this.defaultVideoHeightValue
+  }
+}

data/frontend/js/controllers/mobile_sidebar_controller.js

@@ -0,0 +1,30 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  show () {
+    this.wrapperController.animate()
+    document.body.classList.add('mobile-nav-expanded')
+  }
+
+  hide () {
+    this.wrapperController.animate()
+    document.body.classList.remove('mobile-nav-expanded')
+  }
+
+  toggle () {
+    this.wrapperController.animate()
+    document.body.classList.toggle('mobile-nav-expanded')
+  }
+
+  get isExpanded () {
+    return document.body.classList.contains('mobile-nav-expanded')
+  }
+
+  get wrapperElement () {
+    return document.getElementById('app-wrapper')
+  }
+
+  get wrapperController () {
+    return this.application.getControllerForElementAndIdentifier(this.wrapperElement, 'wrapper')
+  }
+}

data/frontend/js/controllers/modal_controller.js

@@ -0,0 +1,36 @@
+import ApplicationController from './application_controller'
+
+import Modal from '../core/modal'
+
+export default class extends ApplicationController {
+  connect () {
+    this.modal = new Modal(this.element)
+    this.modal.show()
+
+    this.element.addEventListener('hidden.bs.modal', () => this.remove())
+  }
+
+  disconnect () {
+    this.modal.dispose()
+  }
+
+  remove () {
+    this.element.remove()
+  }
+
+  hide () {
+    this.modal.hide()
+  }
+
+  submit (detail) {
+    let event = this.dispatch('submit', { detail: detail })
+    if (event.defaultPrevented) return
+
+    if (this.modalTrigger) {
+      event = this.modalTrigger.dispatch('submit', { detail: detail })
+      if (event.defaultPrevented) return
+    }
+
+    this.hide()
+  }
+}

data/frontend/js/controllers/modal_frame_controller.js

@@ -0,0 +1,11 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  connect () {
+    this.element.addEventListener('turbo:before-fetch-request', this.addTrestleModalHeader)
+  }
+
+  addTrestleModalHeader (event) {
+    event.detail.fetchOptions.headers['X-Trestle-Modal'] = true
+  }
+}