trestle 0.9.9 → 0.10.0

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

data/frontend/js/core/modal.js

@@ -0,0 +1,52 @@
+import { Modal as BootstrapModal } from 'bootstrap'
+
+import Backdrop from './backdrop'
+import { fetchTurboStream } from './fetch'
+
+export default class Modal extends BootstrapModal {
+  static load (url, fetchParams) {
+    const backdrop = Backdrop.getInstance()
+    backdrop.loading(true)
+    backdrop.show()
+
+    Modal.existing.forEach((modal) => modal.classList.add('background'))
+
+    return new Promise((resolve) => {
+      document.addEventListener('modal:render', (e) => {
+        resolve(e.detail)
+      }, { capture: true, once: true })
+
+      fetchTurboStream(url, {
+        ...fetchParams,
+
+        headers: {
+          'X-Trestle-Modal': true
+        }
+      })
+    })
+  }
+
+  static get existing () {
+    return document.querySelectorAll('.modal.show')
+  }
+
+  static restorePrevious () {
+    const previousModal = document.querySelector('.modal.show:last-child')
+
+    if (previousModal) {
+      previousModal.classList.remove('background')
+    }
+  }
+
+  constructor (element) {
+    super(element)
+
+    element.addEventListener('show.bs.modal', () => {
+      this._backdrop.loading(false)
+    })
+  }
+
+  _initializeBackDrop () {
+    return Backdrop.getInstance()
+  }
+}

data/frontend/js/core/stream_actions.js

@@ -0,0 +1,56 @@
+/* global CustomEvent */
+
+import { StreamActions, visit } from '@hotwired/turbo'
+
+import { Modal } from 'bootstrap'
+
+const buildModalEvent = (modal) => {
+  return new CustomEvent('modal:render', { detail: modal })
+}
+
+StreamActions.modal = function () {
+  const target = document.getElementById('modal')
+  const modal = this.templateContent.querySelector('*')
+
+  target.appendChild(modal)
+  target.dispatchEvent(buildModalEvent(modal))
+}
+
+StreamActions.closeModal = function () {
+  this.targetElements.forEach((e) => {
+    const modalEl = e.closest('.modal')
+    const modal = Modal.getInstance(modalEl)
+    if (modal) { modal.hide() }
+  })
+}
+
+StreamActions.flash = function () {
+  const flashTarget = document.querySelector('.modal.show .modal-flash') || document.querySelector('#flash')
+
+  flashTarget.innerHTML = ""
+  flashTarget.append(this.templateContent)
+}
+
+StreamActions.reload = function () {
+  let reloadables
+
+  if (this.target || this.targets) {
+    reloadables = this.targetElements
+  } else {
+    reloadables = document.querySelectorAll('[data-controller="reloadable"]')
+  }
+
+  reloadables.forEach((frame) => {
+    const modal = frame.closest('.modal')
+    if (modal && !modal.classList.contains('show')) {
+      return
+    }
+
+    const controller = Stimulus.getControllerForElementAndIdentifier(frame, 'reloadable')
+    if (controller) { controller.reload() }
+  })
+}
+
+StreamActions.redirect = function () {
+  visit(this.target)
+}

data/frontend/js/core/turbo_errors.js

@@ -0,0 +1,9 @@
+import ErrorModal from './error_modal'
+
+document.addEventListener('turbo:frame-missing', async (e) => {
+  e.preventDefault()
+
+  const response = e.detail.response
+  const title = `${response.status} (${response.statusText})`
+  response.text().then(content => ErrorModal.show({ title, content }))
+})

data/frontend/js/{core → deprecated}/events.js

@@ -1,7 +1,5 @@
 import $ from 'jquery'
 
-import turbolinks from './turbolinks'
-
 // The ready function sets up a callback to run on each page load.
 //
 //     Trestle.ready(function() {
@@ -42,9 +40,4 @@ ready(function () {
   triggerInit(document)
 })
 
-// Trigger the page load events.
-if (turbolinks) {
-  $(document).on('turbolinks:load', triggerReady)
-} else {
-  $(document).ready(triggerReady)
-}
+document.addEventListener('turbo:load', () => triggerReady())

data/frontend/js/deprecated/tooltip.js

@@ -0,0 +1,8 @@
+import { Tooltip } from 'bootstrap'
+
+document.addEventListener('turbo:load', function () {
+  // eslint-disable-next-line no-new
+  new Tooltip(document.body, {
+    selector: '[data-toggle="tooltip"]'
+  })
+})

data/frontend/js/index.js

@@ -1,62 +1,50 @@
-// Dependencies
-
-import 'jquery'
-import Rails from '@rails/ujs'
+// Global Dependencies
 
+import '@hotwired/turbo'
 import 'bootstrap'
-import 'bootstrap-confirmation2'
-
-import 'magnific-popup'
-
-import 'flatpickr'
 
-import 'select2/dist/js/select2.full'
+// Core Functionality
 
-// Core
+import './core/stream_actions'
+import './core/turbo_errors'
 
-import { refreshContext, refreshMainContext } from './core/contexts'
 import cookie from './core/cookie'
-import { init, ready, triggerInit, triggerReady } from './core/events'
 import { i18n, localize } from './core/i18n'
-import turbolinks from './core/turbolinks'
-import visit from './core/visit'
 
-// Components
+import Modal from './core/modal'
+import ErrorModal from './core/error_modal'
 
-import './components/confirmation'
-import './components/datepicker'
-import Dialog from './components/dialog'
-import './components/file'
-import './components/form'
-import './components/gallery'
-import './components/pagination'
-import './components/select'
-import './components/sidebar'
-import './components/table'
-import { focusTab, focusActiveTab } from './components/tabs'
-import './components/tooltips'
+// Stimulus Controllers
 
-// Initialize
+import { ApplicationController, Controllers } from './controllers'
+import Mixins from './mixins'
 
-Rails.start()
+// Deprecated Functionality
+
+import { init, ready, triggerInit, triggerReady } from './deprecated/events'
+import './deprecated/tooltip'
 
 // Export
 
 const Trestle = {
-  refreshContext,
-  refreshMainContext,
   cookie,
+  i18n,
+  localize,
+
+  // Stimulus
+  ApplicationController,
+  Controllers,
+  Mixins,
+
+  // Modals
+  Modal,
+  ErrorModal,
+
+  // Deprecated
   init,
   ready,
   triggerInit,
-  triggerReady,
-  i18n,
-  localize,
-  turbolinks,
-  visit,
-  Dialog,
-  focusTab,
-  focusActiveTab
+  triggerReady
 }
 
 export default Trestle

data/frontend/js/mixins/index.js

@@ -0,0 +1,5 @@
+import usePhotoSwipe from './photoswipe'
+
+export default {
+  usePhotoSwipe
+}

data/frontend/js/mixins/photoswipe.js

@@ -0,0 +1,10 @@
+const usePhotoSwipe = (controller) => {
+  Object.assign(controller, {
+    loadPhotoSwipe () {
+      return import(/* webpackChunkName: "photoswipe" */ 'photoswipe')
+        .then(module => module.default)
+    }
+  })
+}
+
+export default usePhotoSwipe

data/frontend/js/util/bootstrap.js

@@ -0,0 +1,93 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): util/index.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+const MILLISECONDS_MULTIPLIER = 1000
+const TRANSITION_END = 'transitionend'
+
+/**
+ * Trick to restart an element's animation
+ *
+ * @param {HTMLElement} element
+ * @return void
+ *
+ * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
+ */
+const reflow = element => {
+  // eslint-disable-next-line no-unused-expressions
+  element.offsetHeight
+}
+
+const execute = callback => {
+  if (typeof callback === 'function') {
+    callback()
+  }
+}
+
+const getTransitionDurationFromElement = element => {
+  if (!element) {
+    return 0
+  }
+
+  // Get transition-duration of the element
+  let { transitionDuration, transitionDelay } = window.getComputedStyle(element)
+
+  const floatTransitionDuration = Number.parseFloat(transitionDuration)
+  const floatTransitionDelay = Number.parseFloat(transitionDelay)
+
+  // Return 0 if element or transition duration is not found
+  if (!floatTransitionDuration && !floatTransitionDelay) {
+    return 0
+  }
+
+  // If multiple durations are defined, take the first
+  transitionDuration = transitionDuration.split(',')[0]
+  transitionDelay = transitionDelay.split(',')[0]
+
+  return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER
+}
+
+const triggerTransitionEnd = element => {
+  // eslint-disable-next-line no-undef
+  element.dispatchEvent(new Event(TRANSITION_END))
+}
+
+const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
+  if (!waitForTransition) {
+    execute(callback)
+    return
+  }
+
+  const durationPadding = 5
+  const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding
+
+  let called = false
+
+  const handler = ({ target }) => {
+    if (target !== transitionElement) {
+      return
+    }
+
+    called = true
+    transitionElement.removeEventListener(TRANSITION_END, handler)
+    execute(callback)
+  }
+
+  transitionElement.addEventListener(TRANSITION_END, handler)
+  setTimeout(() => {
+    if (!called) {
+      triggerTransitionEnd(transitionElement)
+    }
+  }, emulatedDuration)
+}
+
+export {
+  getTransitionDurationFromElement,
+  triggerTransitionEnd,
+  reflow,
+  execute,
+  executeAfterTransition
+}

data/i18n/config.yml

@@ -0,0 +1,14 @@
+---
+translations:
+  - file: i18n/locale/:locale.json
+    patterns:
+    - "*"
+    - "!*.activerecord"
+    - "!*.errors"
+    - "!*.number.nth"
+
+export_files:
+  enabled: true
+  files:
+    - template: i18n/template.erb
+      output: app/assets/bundle/trestle/locale/%{base_name}.js

data/i18n/environment.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "rails"
+require "active_support/railtie"
+require "action_view/railtie"
+
+I18n.load_path += Dir["./config/locales/**/*.yml"]

data/i18n/export

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+bundle exec i18n export -c i18n/config.yml -r i18n/environment.rb

data/i18n/template.erb

@@ -0,0 +1 @@
+Trestle.i18n.store(<%= JSON.pretty_generate(translations) %>);

data/lib/generators/trestle/install/install_generator.rb

@@ -10,14 +10,9 @@ module Trestle
       end
 
       def create_assets
-        if defined?(Sass) || defined?(SassC)
-          template "_custom.scss", "app/assets/stylesheets/trestle/_custom.scss"
-          template "_theme.scss",  "app/assets/stylesheets/trestle/_theme.scss"
-        else
-          template "_custom.css", "app/assets/stylesheets/trestle/_custom.css"
-        end
-
-        template "custom.js",    "app/assets/javascripts/trestle/custom.js"
+        css = (defined?(Sass) || defined?(SassC)) ? "scss" : "css"
+        template "_custom.#{css}", "app/assets/stylesheets/trestle/_custom.#{css}"
+        template "custom.js", "app/assets/javascripts/trestle/custom.js"
       end
 
       def create_directory

data/lib/generators/trestle/install/templates/trestle.rb.erb

@@ -15,6 +15,11 @@ Trestle.configure do |config|
   #
   # config.site_logo_small = "logo-small.png"
 
+  # Define primary and secondary theme colors. Color values may be specified
+  # as either 3- or 6-digit hex codes, or rgb/hsl() triplets.
+  #
+  # config.theme = { primary: "#338ab7", secondary: "#719dc3" }
+
   # Specify a favicon to be used within the admin.
   #
   # config.favicon = "favicon.ico"
@@ -94,11 +99,6 @@ Trestle.configure do |config|
   #   stylesheet_link_tag "custom"
   # end
 
-  # Toggle whether Turbolinks is enabled within the admin.
-  # Defaults to true if Turbolinks is available.
-  #
-  # config.turbolinks = false
-
   # Specify the parameters that should persist across requests when
   # paginating or reordering. Defaults to [:sort, :order, :scope].
   #

data/lib/trestle/color.rb

@@ -0,0 +1,113 @@
+module Trestle
+  class Color
+    attr_reader :r, :g, :b
+
+    def initialize(r, g, b)
+      @r, @g, @b = r, g, b
+    end
+
+    def hex
+      "##{[r, g, b].map { |i| i < 16 ? "0#{i.to_s(16)}" : i.to_s(16) }.join}"
+    end
+
+    def rgb
+      [r, g, b]
+    end
+
+    def hsl
+      r = @r / 255.0
+      g = @g / 255.0
+      b = @b / 255.0
+
+      min = [r, g, b].min
+      max = [r, g, b].max
+
+      h = s = l = (max + min) / 2.0
+
+      if max == min
+        h = 0
+        s = 0
+      else
+        d = max - min
+        s = l >= 0.5 ? d / (2 - max - min) : d / (max + min)
+
+        case max
+        when r
+          h = (g - b) / d + (g < b ? 6 : 0)
+        when g
+          h = (b - r) / d + 2
+        when b
+          h = (r - g) / d + 4
+        end
+
+        h /= 6.0
+      end
+
+      [(h*360).round, (s*100).round, (l*100).round]
+    end
+
+    def self.parse(str)
+      if str.starts_with?("#") && str.length.in?([4, 7])
+        parse_hex(str)
+      elsif str.starts_with?("rgb")
+        parse_rgb(str)
+      elsif str.starts_with?("hsl")
+        parse_hsl(str)
+      else
+        raise ArgumentError, "Could not parse color code: #{str}"
+      end
+    end
+
+    def self.parse_hex(str)
+      str = str.sub(/^#/, "")
+
+      if str.length == 3
+        str = str[0] * 2 + str[1] * 2 + str[2] * 2
+      end
+
+      new(str[0, 2].hex, str[2, 2].hex, str[4, 2].hex)
+    end
+
+    def self.parse_rgb(str)
+      match = str.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/)
+      new(match[1].to_i, match[2].to_i, match[3].to_i)
+    end
+
+    def self.parse_hsl(str)
+      match = str.match(/^hsl\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/)
+      h, s, l = match[1].to_f, match[2].to_f, match[3].to_f
+
+      h /= 360
+      s /= 100
+      l /= 100
+
+      if s == 0
+        r = g = b = l.to_f
+      else
+        q = l < 0.5 ? l * (1 + s) : l + s - l * s
+        p = 2 * l - q
+
+        r = hue_to_rgb(p, q, h + 1/3.0)
+        g = hue_to_rgb(p, q, h)
+        b = hue_to_rgb(p, q, h - 1/3.0)
+      end
+
+      new((r * 255).round, (g * 255).round, (b * 255).round)
+    end
+
+    def self.hue_to_rgb(p, q, t)
+      t += 1 if t < 0
+      t -= 1 if t > 1
+
+      if t < 1 / 6.0
+        p + (q - p) * 6 * t
+      elsif t < 1 / 2.0
+        q
+      elsif t < 2 / 3.0
+        p + (q - p) * (2 / 3.0 - t) * 6
+      else
+        p
+      end
+    end
+  end
+end