trestle 0.9.9 → 0.10.0

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

data/frontend/js/controllers/popover_controller.js

@@ -0,0 +1,87 @@
+import ApplicationController from './application_controller'
+
+import { Popover } from 'bootstrap'
+
+export default class extends ApplicationController {
+  static values = {
+    title: { type: String, default: '' },
+    content: { type: String, default: '' },
+    placement: { type: String, default: 'left' },
+    html: { type: Boolean, default: false },
+    trigger: { type: String, default: 'click' }
+  }
+
+  static classes = [ "custom" ]
+
+  initialize () {
+    this.boundHide = this.hide.bind(this)
+
+    this.boundOnShown = this.onShown.bind(this)
+    this.boundOnHidden = this.onHidden.bind(this)
+  }
+
+  connect () {
+    this.popover = new Popover(this.element, this.popoverOptions)
+
+    this.element.addEventListener('shown.bs.popover', this.boundOnShown)
+    this.element.addEventListener('hidden.bs.popover', this.boundOnHidden)
+  }
+
+  disconnect () {
+    this.element.removeEventListener('shown.bs.popover', this.boundOnShown)
+    this.element.removeEventListener('hidden.bs.popover', this.boundOnHidden)
+
+    document.removeEventListener('click', this.boundHide)
+
+    if (this.popover._isEnabled) {
+      this.popover.dispose()
+    }
+  }
+
+  show () {
+    this.popover.show()
+  }
+
+  toggle () {
+    this.popover.toggle()
+  }
+
+  clickWithinPopover (e) {
+    return this.popover.tip && this.popover.tip.contains(e.target)
+  }
+
+  hide (e) {
+    if (e && this.clickWithinPopover(e)) {
+      return
+    }
+
+    this.popover.hide()
+  }
+
+  onShown () {
+    document.addEventListener('click', this.boundHide)
+  }
+
+  onHidden () {
+    document.removeEventListener('click', this.boundHide)
+  }
+
+  get popoverOptions () {
+    return {
+      title: this.title,
+      content: this.content,
+      placement: this.placementValue,
+      trigger: this.triggerValue,
+      html: this.htmlValue,
+      customClass: this.hasCustomClass ? this.customClass : ''
+    }
+  }
+
+  get title () {
+    return this.titleValue
+  }
+
+  get content () {
+    return this.contentValue
+  }
+}

data/frontend/js/controllers/reloadable_controller.js

@@ -0,0 +1,34 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  static values = {
+    url: String
+  }
+
+  initialize () {
+    this.boundScrollToTop = this.scrollToTop.bind(this)
+  }
+
+  connect () {
+    this.element.addEventListener('turbo:frame-load', this.boundScrollToTop)
+  }
+
+  scrollToTop (e) {
+    const scrollTarget = this.element.closest('[data-scroll-target]')
+    const boundingRect = scrollTarget.getBoundingClientRect()
+
+    if (scrollTarget && boundingRect.top < 0) {
+      scrollTarget.scrollIntoView()
+    }
+  }
+
+  reload () {
+    if (this.element.src) {
+      this.element.reload()
+    } else if (this.hasUrlValue) {
+      this.element.src = this.urlValue
+    } else {
+      this.element.src = document.location.href
+    }
+  }
+}

data/frontend/js/controllers/select_controller.js

@@ -0,0 +1,49 @@
+import ApplicationController from './application_controller'
+
+import $ from 'jquery'
+import 'select2/dist/js/select2.full'
+
+// Use Bootstrap theme
+$.fn.select2.defaults.set('theme', 'bootstrap-5')
+
+// Copy all classes from select tag to replacement select field (.select2-selection)
+$.fn.select2.defaults.set('containerCssClass', ':all:')
+
+// Copy all classes excluding 'form-control'/'form-control-*'/'form-select'/'form-select-*' from select tag to dropdown container (.select2-dropdown)
+$.fn.select2.defaults.set('dropdownCssClass', function (el) {
+  return el[0].className.replace(/\s*form-(control|select)(-\w+)?\s*/g, '')
+})
+
+export default class extends ApplicationController {
+  connect () {
+    $(this.element).select2(this.options)
+
+    $(this.element).on('change.select2', (e) => {
+      if (!e.originalEvent) {
+        e.preventDefault()
+
+        const nativeEvent = new CustomEvent('change', {
+          bubbles: true,
+          cancelable: true
+        })
+
+        e.target.dispatchEvent(nativeEvent)
+      }
+    })
+  }
+
+  disconnect () {
+    $(this.element).select2('destroy')
+    $(this.element).off('change.select2')
+  }
+
+  get options () {
+    return {
+      dropdownParent: this.dropdownParent
+    }
+  }
+
+  get dropdownParent () {
+    return this.element.closest('.modal')
+  }
+}

data/frontend/js/controllers/sidebar_controller.js

@@ -0,0 +1,33 @@
+import ApplicationController from './application_controller'
+
+import cookie from '../core/cookie'
+
+export default class extends ApplicationController {
+  static targets = ["inner"]
+
+  connect () {
+    this.scrollToActive()
+  }
+
+  toggle () {
+    const bodyClasses = document.body.classList
+
+    if (bodyClasses.contains('sidebar-expanded') || bodyClasses.contains('sidebar-collapsed')) {
+      bodyClasses.remove('sidebar-expanded', 'sidebar-collapsed')
+      cookie.delete('trestle:sidebar')
+    } else if (document.body.clientWidth >= 1200) {
+      bodyClasses.add('sidebar-collapsed')
+      cookie.set('trestle:sidebar', 'collapsed')
+    } else if (document.body.clientWidth >= 768) {
+      bodyClasses.add('sidebar-expanded')
+      cookie.set('trestle:sidebar', 'expanded')
+    }
+  }
+
+  scrollToActive () {
+    const active = this.element.getElementsByClassName('active')[0]
+    if (active && this.hasInnerTarget) {
+      this.innerTarget.scrollTop = active.offsetTop - 100
+    }
+  }
+}

data/frontend/js/controllers/tab_errors_controller.js

@@ -0,0 +1,45 @@
+import ApplicationController from './application_controller'
+
+import { Tab } from 'bootstrap'
+
+export default class extends ApplicationController {
+  static values = {
+    errorSelector: { type: String, default: '.is-invalid:not([type="hidden"])' }
+  }
+
+  connect () {
+    this.element.querySelectorAll('.nav-link').forEach((link) => {
+      this.updateErrorCount(link)
+    })
+
+    this.focusFirstTabWithErrors()
+  }
+
+  updateErrorCount (link) {
+    const pane = document.querySelector(link.getAttribute('href'))
+    const errorCount = pane.querySelectorAll(this.errorSelectorValue).length
+
+    if (errorCount > 0) {
+      const badge = this._createErrorBadge(errorCount)
+      link.appendChild(badge)
+    }
+  }
+
+  focusFirstTabWithErrors () {
+    this.element.querySelectorAll('.nav-link').forEach((link) => {
+      if (link.querySelector('.badge-danger')) {
+        Tab.getOrCreateInstance(link).show()
+        return
+      }
+    })
+  }
+
+  _createErrorBadge (count) {
+    const badge = document.createElement('span')
+
+    badge.classList.add('badge', 'badge-danger', 'badge-pill')
+    badge.textContent = count
+
+    return badge
+  }
+}

data/frontend/js/controllers/tabs_controller.js

@@ -0,0 +1,45 @@
+/* global history, location */
+
+import ApplicationController from './application_controller'
+
+import { navigator } from '@hotwired/turbo'
+import { Tab } from 'bootstrap'
+
+export default class extends ApplicationController {
+  connect () {
+    this.element.querySelectorAll('.nav-link').forEach((link) => {
+      link.addEventListener('shown.bs.tab', this.saveActiveTab)
+    })
+
+    this.focusActiveTab()
+  }
+
+  disconnect () {
+    this.element.querySelectorAll('.nav-link').forEach((link) => {
+      link.removeEventListener('shown.bs.tab', this.saveActiveTab)
+    })
+  }
+
+  saveActiveTab (e) {
+    const hash = e.target.getAttribute('href')
+
+    if (hash.substring(0, 1) === '#') {
+      const url = `${location.pathname}#!${hash.substring(1)}`
+
+      history.replaceState({}, null, url)
+      navigator.history.replace(new URL(url, location.origin))
+    }
+  }
+
+  focusActiveTab () {
+    if (location.hash.substring(0, 2) === '#!') {
+      const hash = location.hash.substring(2)
+      const link = this.element.querySelector(`.nav-link[href='#${hash}']`)
+
+      if (link) {
+        const tab = new Tab(link)
+        tab.show()
+      }
+    }
+  }
+}

data/frontend/js/controllers/timepicker_controller.js

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

data/frontend/js/controllers/toggle_attr_controller.js

@@ -0,0 +1,27 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  static targets = ["item"]
+
+  static values = {
+    attribute: String
+  }
+
+  toggle () {
+    this.itemTargets.forEach((item) => {
+      item[this.attributeValue] = !item[this.attributeValue]
+    })
+  }
+
+  set () {
+    this.itemTargets.forEach((item) => {
+      item[this.attributeValue] = true
+    })
+  }
+
+  unset () {
+    this.itemTargets.forEach((item) => {
+      item[this.attributeValue] = false
+    })
+  }
+}

data/frontend/js/controllers/toggle_class_controller.js

@@ -0,0 +1,27 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  static targets = ["item"]
+
+  static values = {
+    class: String
+  }
+
+  toggle () {
+    this.itemTargets.forEach((item) => {
+      item.classList.toggle(this.classValue)
+    })
+  }
+
+  add () {
+    this.itemTargets.forEach((item) => {
+      item.classList.add(this.classValue)
+    })
+  }
+
+  remove () {
+    this.itemTargets.forEach((item) => {
+      item.classList.remove(this.classValue)
+    })
+  }
+}

data/frontend/js/controllers/tooltip_controller.js

@@ -0,0 +1,13 @@
+import ApplicationController from './application_controller'
+
+import { Tooltip } from 'bootstrap'
+
+export default class extends ApplicationController {
+  connect () {
+    this.tooltip = new Tooltip(this.element)
+  }
+
+  disconnect () {
+    this.tooltip.dispose()
+  }
+}

data/frontend/js/controllers/wrapper_controller.js

@@ -0,0 +1,43 @@
+import ApplicationController from './application_controller'
+
+export default class extends ApplicationController {
+  static outlets = ['mobile-sidebar']
+
+  initialize () {
+    this.boundStopAnimating = this.stopAnimating.bind(this)
+  }
+
+  connect () {
+    this.element.addEventListener('transitionend', this.boundStopAnimating)
+  }
+
+  disconnect () {
+    this.element.removeEventListener('transitionend', this.boundStopAnimating)
+  }
+
+  animate () {
+    this.element.classList.add('animate')
+  }
+
+  stopAnimating () {
+    this.element.classList.remove('animate')
+  }
+
+  hideMobileSidebar (e) {
+    const sidebarController = this.mobileSidebarOutlet
+
+    if (!sidebarController.isExpanded) {
+      return
+    }
+
+    const clickInHeader = e.target.closest('.app-header')
+    const clickInSidebar = e.target.closest('.app-sidebar')
+
+    if (!clickInHeader && !clickInSidebar) {
+      e.stopPropagation()
+      e.preventDefault()
+
+      sidebarController.hide()
+    }
+  }
+}

data/frontend/js/core/backdrop.js

@@ -0,0 +1,100 @@
+import Modal from './modal'
+
+import { reflow, execute, executeAfterTransition } from '../util/bootstrap'
+
+const Default = {
+  className: 'modal-backdrop',
+  isAnimated: true
+}
+
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_LOADING = 'loading'
+
+export default class Backdrop {
+  static getInstance () {
+    if (!this.instance) {
+      this.instance = new Backdrop()
+    }
+
+    return this.instance
+  }
+
+  constructor () {
+    this._config = Default
+    this._element = null
+    this._isAppended = false
+  }
+
+  show (callback) {
+    this._append()
+
+    if (this._config.isAnimated) {
+      reflow(this._getElement())
+    }
+
+    this._getElement().classList.add(CLASS_NAME_SHOW)
+
+    this._emulateAnimation(() => {
+      execute(callback)
+    })
+  }
+
+  hide (callback) {
+    if (Modal.existing.length === 0) {
+      this._getElement().classList.remove(CLASS_NAME_SHOW)
+    }
+
+    this._emulateAnimation(() => {
+      this.dispose()
+      execute(callback)
+      Modal.restorePrevious()
+    })
+  }
+
+  dispose () {
+    if (!this._isAppended) {
+      return
+    }
+
+    if (Modal.existing.length === 0) {
+      this._element.remove()
+      this._isAppended = false
+    }
+  }
+
+  loading (isLoading) {
+    const el = this._getElement()
+    el.classList[isLoading ? 'add' : 'remove'](CLASS_NAME_LOADING)
+  }
+
+  // Private
+
+  _getElement () {
+    if (!this._element) {
+      const backdrop = document.createElement('div')
+      backdrop.className = this._config.className
+      if (this._config.isAnimated) {
+        backdrop.classList.add(CLASS_NAME_FADE)
+      }
+
+      this._element = backdrop
+    }
+
+    return this._element
+  }
+
+  _append () {
+    if (this._isAppended) {
+      return
+    }
+
+    document.body.append(this._getElement())
+
+    this._isAppended = true
+  }
+
+  _emulateAnimation (callback) {
+    executeAfterTransition(callback, this._getElement(), this._config.isAnimated)
+  }
+}