trestle 0.9.9 → 0.10.0.pre

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

data/frontend/js/controllers/modal_trigger_controller.js

@@ -0,0 +1,74 @@
+/* global FormData */
+
+import ApplicationController from './application_controller'
+
+import Modal from '../core/modal'
+
+export default class extends ApplicationController {
+  initialize () {
+    this.boundLoad = this.load.bind(this)
+  }
+
+  connect () {
+    this.element.addEventListener('click', this.boundLoad)
+  }
+
+  disconnect () {
+    this.element.removeEventListener('click', this.boundLoad)
+  }
+
+  load (e) {
+    e.preventDefault()
+
+    this.dispatch('loading')
+
+    Modal.load(this.url, this.fetchParams)
+      .then((modal) => {
+        this.modal = modal
+
+        const modalController = this._getModalController(modal)
+        modalController.modalTrigger = this
+
+        this.dispatch('loaded', { detail: modal })
+      })
+  }
+
+  get url () {
+    if (this.isLink) {
+      return this.element.href
+    } else {
+      const form = this.element.closest('form')
+
+      if (form) {
+        return form.action
+      } else {
+        throw new Error('Unable to determine modal trigger URL')
+      }
+    }
+  }
+
+  get fetchParams () {
+    if (this.isLink) {
+      return {}
+    } else {
+      const form = this.element.closest('form')
+
+      if (form) {
+        return {
+          method: form.method,
+          body: new FormData(form)
+        }
+      } else {
+        return {}
+      }
+    }
+  }
+
+  get isLink () {
+    return this.element.nodeName === 'A'
+  }
+
+  _getModalController (modal) {
+    return this.application.getControllerForElementAndIdentifier(modal, 'modal')
+  }
+}

data/frontend/js/{components/navigation.js → controllers/navigation_controller.js}

@@ -1,3 +1,5 @@
+import ApplicationController from './application_controller'
+
 import cookie from '../core/cookie'
 
 const PREFIX = 'trestle:navigation'
@@ -28,13 +30,17 @@ class NavigationCookieStore {
   }
 }
 
-class Navigation {
-  constructor () {
+export default class extends ApplicationController {
+  initialize () {
     this.store = new NavigationCookieStore()
   }
 
-  toggle (list) {
-    if (list.hasClass('collapsed')) {
+  toggle (e) {
+    e.preventDefault()
+
+    const list = e.target.closest('ul')
+
+    if (list.classList.contains('collapsed')) {
       this.expand(list)
     } else {
       this.collapse(list)
@@ -42,22 +48,20 @@ class Navigation {
   }
 
   expand (list) {
-    list.removeClass('collapsed')
+    list.classList.remove('collapsed')
 
-    const id = list.data('group')
+    const id = list.dataset.group
 
     this.store.addGroup(id, 'expanded')
     this.store.removeGroup(id, 'collapsed')
   }
 
   collapse (list) {
-    list.addClass('collapsed')
+    list.classList.add('collapsed')
 
-    const id = list.data('group')
+    const id = list.dataset.group
 
     this.store.addGroup(id, 'collapsed')
     this.store.removeGroup(id, 'expanded')
   }
 }
-
-export default new Navigation()

data/frontend/js/controllers/navigation_tooltip_controller.js

@@ -0,0 +1,32 @@
+import ApplicationController from './application_controller'
+
+import { Tooltip } from 'bootstrap'
+
+const TEMPLATE = `
+<div class="tooltip nav-tooltip" role="tooltip">
+  <div class="tooltip-arrow"></div>
+  <div class="tooltip-inner"></div>
+</div>
+`
+
+export default class extends ApplicationController {
+  static targets = ["label"]
+
+  connect () {
+    this.tooltip = new Tooltip(this.element, {
+      trigger: 'hover',
+      placement: 'right',
+      boundary: 'window',
+      template: TEMPLATE,
+      title: () => this.labelText
+    })
+  }
+
+  disconnect () {
+    this.tooltip.dispose()
+  }
+
+  get labelText () {
+    return this.labelTarget.innerText
+  }
+}