trestle 0.9.9 → 0.10.0.pre

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

data/lib/trestle/configuration.rb

@@ -22,8 +22,19 @@ module Trestle
     # Default timestamp precision
     option :timestamp_precision, :minutes
 
-    # Theme stylesheet compilation (requires Sass support)
-    option :theme, defined?(Sass) || defined?(SassC)
+    # Theme colors
+    option :theme, {}
+
+    def theme=(colors)
+      if [true, false].include?(colors)
+        Trestle.deprecator.warn("Passing a boolean to config.theme is deprecated. Please pass primary and secondary theme colors as a hash.")
+      else
+        original = fetch(:colors) || {}
+        colors = colors.transform_values { |color| Trestle::Color.parse(color) }
+
+        assign(:theme, original.merge(colors))
+      end
+    end
 
 
     ## Mounting Options
@@ -68,8 +79,8 @@ module Trestle
       self.helper_module.module_eval(&block) if block_given?
     end
 
-    # Enable or disable Turbolinks within the Trestle admin
-    option :turbolinks, defined?(Turbolinks)
+    # [DEPRECATED] Enable or disable Turbolinks within the Trestle admin
+    deprecated_option :turbolinks, "The config.turbolinks option is deprecated. Turbo is included and enabled by default within Trestle."
 
     # List of parameters that should persist across requests when paginating or reordering
     option :persistent_params, [:sort, :order, :scope]
@@ -94,10 +105,7 @@ module Trestle
     end
 
     # List of i18n keys to pass into the Trestle.i18n JavaScript object
-    option :javascript_i18n_keys, [
-      "trestle.confirmation.title", "trestle.confirmation.delete", "trestle.confirmation.cancel", "trestle.dialog.error",
-      "admin.buttons.ok", "admin.datepicker.formats.date", "admin.datepicker.formats.datetime", "admin.datepicker.formats.time"
-    ]
+    option :javascript_i18n_keys, []
 
     # List of load paths for where to find admin definitions
     option :load_paths, [

data/lib/trestle/engine.rb

@@ -1,17 +1,16 @@
-require "sprockets/railtie"
-
 module Trestle
   class Engine < ::Rails::Engine
     isolate_namespace Trestle
     self.routes.default_scope = {}
 
-    # Application assets
-    config.assets.precompile << "trestle/admin.css" << "trestle/admin.js" << "trestle/custom.css"
+    initializer "trestle.sprockets" do |app|
+      # Sprockets manifest
+      config.assets.precompile << "trestle/manifest.js"
+    end if defined?(Sprockets)
 
-    # Vendor assets
-    %w(eot svg ttf woff woff2).each do |ext|
-      config.assets.precompile << "trestle/fa-*.#{ext}"
-    end
+    initializer "trestle.propshaft" do |app|
+      app.config.assets.excluded_paths << Trestle::Engine.root.join("app/assets/sprockets")
+    end if defined?(Propshaft)
 
     initializer "trestle.automount" do |app|
       if Trestle.config.automount
@@ -21,23 +20,30 @@ module Trestle
       end
     end
 
+    initializer "trestle.deprecator" do |app|
+      app.deprecators[:trestle] = Trestle.deprecator if app.respond_to?(:deprecators)
+    end
+
     initializer "trestle.draper" do |app|
       if defined?(Draper)
         Draper::CollectionDecorator.delegate :current_page, :total_pages, :limit_value, :entry_name, :total_count, :offset_value, :last_page?
       end
     end
 
-    initializer "trestle.theme" do |app|
-      # Enable theme compilation
-      if Trestle.config.theme
-        app.config.assets.paths << root.join("frontend/theme").to_s
-        app.config.assets.precompile << "trestle/theme.css"
-      end
+    initializer "turbo.mimetype" do
+      Mime::Type.register "text/vnd.turbo-stream.html", :turbo_stream unless Mime[:turbo_stream]
     end
 
-    initializer "trestle.turbolinks" do |app|
-      # Optional turbolinks
-      app.config.assets.precompile << "turbolinks.js" if Trestle.config.turbolinks
+    initializer "turbo.renderer" do
+      ActiveSupport.on_load(:action_controller) do
+        # Compatibility fix for Rails 5.2
+        delegate :media_type, to: "@_response" unless instance_methods.include?(:media_type)
+
+        ActionController::Renderers.add :turbo_stream do |turbo_streams_html, options|
+          self.content_type = Mime[:turbo_stream] if media_type.nil?
+          turbo_streams_html
+        end
+      end
     end
 
     config.to_prepare do