trestle 0.9.9 → 0.10.0.pre

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

data/frontend/js/core/error_modal.js

@@ -0,0 +1,65 @@
+/* global DOMParser */
+
+import { i18n } from '../core/i18n'
+
+const TEMPLATE = () => `
+<div class="modal fade error-modal" tabindex="-1" data-controller="modal">
+  <div class="modal-dialog modal-xl">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title"></h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+
+      <div class="modal-body">
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-light" data-bs-dismiss="modal" aria-label="OK">${i18n.t('admin.buttons.ok', { defaultValue: 'OK' })}</button>
+      </div
+    </div>
+  </div>
+</div>
+`
+
+export default class ErrorModal {
+  static show ({ title, content }) {
+    new ErrorModal({ title, content }).show()
+  }
+
+  constructor ({ title, content }) {
+    this.title = title
+    this.content = content
+  }
+
+  show () {
+    this._append(this._buildModal())
+  }
+
+  // Private
+
+  _buildModal () {
+    const el = this._buildWrapper()
+    el.querySelector('.modal-title').textContent = this.title
+
+    const iframe = this._buildIframe(this.content)
+    el.querySelector('.modal-body').append(iframe)
+
+    return el
+  }
+
+  _buildWrapper () {
+    return new DOMParser().parseFromString(TEMPLATE(), 'text/html').body.childNodes[0]
+  }
+
+  _buildIframe () {
+    const iframe = document.createElement('iframe')
+    iframe.className = 'error-iframe'
+    iframe.srcdoc = this.content
+    return iframe
+  }
+
+  _append (el) {
+    document.getElementById('modal').append(el)
+  }
+}

data/frontend/js/core/fetch.js

@@ -0,0 +1,32 @@
+/* global fetch */
+
+import { renderStreamMessage } from '@hotwired/turbo'
+
+import ErrorModal from './error_modal'
+
+export function fetchWithErrorHandling (url, options = {}) {
+  return fetch(url, options)
+    .then(response => {
+      if (!response.ok) { throw response }
+      return response
+    })
+    .catch(response => {
+      const title = `${response.status} (${response.statusText})`
+      response.text().then(content => ErrorModal.show({ title, content }))
+    })
+}
+
+export function fetchTurboStream (url, options = {}) {
+  options = {
+    ...options,
+
+    headers: {
+      Accept: 'text/vnd.turbo-stream.html',
+      ...options.headers
+    }
+  }
+
+  return fetchWithErrorHandling(url, options)
+    .then(response => response.text())
+    .then(html => renderStreamMessage(html))
+}

data/frontend/js/core/i18n.js

@@ -1,20 +1,24 @@
+import { I18n } from 'i18n-js'
 import flatpickr from 'flatpickr'
 
 // Container for i18n translations
-export const i18n = {}
+export const i18n = new I18n()
+
+function localizeTrestle (locale, fallbacks) {
+  // Set up i18n fallbacks
+  i18n.enableFallback = true
+  i18n.locales.register(locale, [locale, ...fallbacks])
+
+  // Set current locale
+  i18n.locale = locale
+}
 
 // Some of Flatpickr's locale names differ from Rails. This maps the Rails I18n locale to their Flatpickr equivalent.
 const FlatpickrLocaleConversions = { ca: 'cat', el: 'gr', nb: 'no', vi: 'vn' }
 
-// Sets up localization for Trestle and its dependencies, in particular Flatpickr.
-// This method accepts a list of locales in descending order of priority.
-//
-//     Trestle.localize('es-MX', 'es', 'en')
-//
-export function localize () {
-  for (var i = 0; i < arguments.length; ++i) {
-    var locale = arguments[i]
-    var flatpickrLocale = FlatpickrLocaleConversions[locale] || locale
+function localizeFlatpickr (...locales) {
+  for (const locale of locales) {
+    const flatpickrLocale = FlatpickrLocaleConversions[locale] || locale
 
     if (flatpickr.l10ns[flatpickrLocale]) {
       flatpickr.localize(flatpickr.l10ns[flatpickrLocale])
@@ -22,3 +26,13 @@ export function localize () {
     }
   }
 }
+
+// Sets up localization for Trestle and its dependencies, in particular Flatpickr.
+// This method accepts a list of locales in descending order of priority.
+//
+//     Trestle.localize('es-MX', 'es', 'en')
+//
+export function localize (locale, ...fallbacks) {
+  localizeTrestle(locale, fallbacks)
+  localizeFlatpickr(locale, ...fallbacks)
+}