trestle 0.9.9 → 0.10.0.pre

data/app/assets/javascripts/trestle/admin.js

@@ -1,3 +0,0 @@
-//= require trestle/bundle
-//= require trestle/i18n
-//= require trestle/custom

data/app/assets/javascripts/trestle/i18n.js.erb

@@ -1,8 +0,0 @@
-<% flatpickr_locale_conversions = { ca: "cat", el: "gr", nb: "no", vi: "vn" } %>
-
-<% I18n.available_locales.sort.each do |locale| %>
-  <% Trestle.i18n_fallbacks(locale).each do |candidate| %>
-    <% candidate = flatpickr_locale_conversions[candidate] || candidate %>
-    <% require_asset("trestle/flatpickr/#{candidate}") rescue nil %>
-  <% end %>
-<% end %>

data/app/assets/stylesheets/trestle/admin.css

@@ -1,2 +0,0 @@
-//= require trestle/bundle
-//= require trestle/icons/_font-awesome

data/app/assets/stylesheets/trestle/icons/_font-awesome.css.erb

@@ -1,40 +0,0 @@
-/*!
- * Font Awesome Free 5.8.1 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 400;
-  src: url(<%= asset_path('trestle/fa-regular-400.eot') %>);
-  src: url(<%= asset_path('trestle/fa-regular-400.eot?#iefix') %>) format('embedded-opentype'),
-       url(<%= asset_path('trestle/fa-regular-400.woff2') %>) format('woff2'),
-       url(<%= asset_path('trestle/fa-regular-400.woff') %>) format('woff'),
-       url(<%= asset_path('trestle/fa-regular-400.ttf') %>) format('truetype'),
-       url(<%= asset_path('trestle/fa-regular-400.svg#fontawesome') %>) format('svg');
-}
-
-@font-face {
-  font-family: 'Font Awesome 5 Free';
-  font-style: normal;
-  font-weight: 900;
-  src: url(<%= asset_path('trestle/fa-solid-900.eot') %>);
-  src: url(<%= asset_path('trestle/fa-solid-900.eot?#iefix') %>) format('embedded-opentype'),
-       url(<%= asset_path('trestle/fa-solid-900.woff2') %>) format('woff2'),
-       url(<%= asset_path('trestle/fa-solid-900.woff') %>) format('woff'),
-       url(<%= asset_path('trestle/fa-solid-900.ttf') %>) format('truetype'),
-       url(<%= asset_path('trestle/fa-solid-900.svg#fontawesome') %>) format('svg');
-}
-
-@font-face {
-  font-family: 'Font Awesome 5 Brands';
-  font-style: normal;
-  font-weight: normal;
-  src: url(<%= asset_path('trestle/fa-brands-400.eot') %>);
-  src: url(<%= asset_path('trestle/fa-brands-400.eot?#iefix') %>) format('embedded-opentype'),
-       url(<%= asset_path('trestle/fa-brands-400.woff2') %>) format('woff2'),
-       url(<%= asset_path('trestle/fa-brands-400.woff') %>) format('woff'),
-       url(<%= asset_path('trestle/fa-brands-400.ttf') %>) format('truetype'),
-       url(<%= asset_path('trestle/fa-brands-400.svg#fontawesome') %>) format('svg');
-}

data/app/controllers/concerns/trestle/controller/dialog.rb

@@ -1,16 +0,0 @@
-module Trestle
-  module Controller
-    module Dialog
-      extend ActiveSupport::Concern
-
-      included do
-        helper_method :dialog_request?
-      end
-
-    protected
-      def dialog_request?
-        request.headers["X-Trestle-Dialog"]
-      end
-    end
-  end
-end

data/app/views/trestle/application/_dialog.html.erb

@@ -1,34 +0,0 @@
-<div class="modal-header">
-  <h4 class="modal-title"><%= title %></h4>
-  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-</div>
-
-<div class="modal-flash">
-  <%= render "trestle/flash/flash" %>
-</div>
-
-<div class="modal-tabs">
-  <%= render "tabs" %>
-</div>
-
-<div class="modal-body">
-  <%= yield %>
-
-  <% if content_for?(:sidebar) %>
-    <div id="tab-sidebar" class="tab-pane" role="tabpanel">
-      <%= content_for(:sidebar) %>
-    </div>
-  <% end %>
-</div>
-
-<div class="modal-footer">
-  <div class="btn-toolbar secondary-toolbar" role="toolbar">
-    <%= render_toolbar(toolbar(:secondary)) %>
-    <%= deprecated_toolbar(:secondary) %>
-  </div>
-
-  <div class="btn-toolbar primary-toolbar" role="toolbar">
-    <%= render_toolbar(toolbar(:primary)) %>
-    <%= deprecated_toolbar(:primary) %>
-  </div>
-</div>

data/frontend/css/components/_color-vars.scss

@@ -1,10 +0,0 @@
-:root {
-  $color: "primary";
-  $value: theme-color($color);
-
-  --#{$color}-rgb: #{red($value), green($value), blue($value)};
-
-  --#{$color}-hue: #{hue($value)};
-  --#{$color}-saturation: #{saturation($value)};
-  --#{$color}-lightness: #{lightness($value)};
-}

data/frontend/css/components/_custom-forms.scss

@@ -1,35 +0,0 @@
-// Convert custom controls to use em rather than rem sizing, so that they scale nicely.
-// This is planned for Bootstrap 5 (https://github.com/twbs/bootstrap/issues/27803)
-.custom-control-label {
-  &::before {
-    top: em(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
-    left: em(-($custom-control-gutter + $custom-control-indicator-size));
-    width: em($custom-control-indicator-size);
-    height: em($custom-control-indicator-size);
-  }
-
-  &::after {
-    top: em(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2);
-    left: em(-($custom-control-gutter + $custom-control-indicator-size));
-    width: em($custom-control-indicator-size);
-    height: em($custom-control-indicator-size);
-  }
-}
-
-.custom-switch {
-  padding-left: em($custom-switch-width + $custom-control-gutter);
-
-  .custom-control-label {
-    &::before {
-      left: em(-($custom-switch-width + $custom-control-gutter));
-      width: em($custom-switch-width);
-    }
-
-    &::after {
-      top: calc(#{em((($font-size-base * $line-height-base - $custom-control-indicator-size) / 2))} + #{$custom-control-indicator-border-width * 2});
-      left: calc(#{em(-($custom-switch-width + $custom-control-gutter))} + #{$custom-control-indicator-border-width * 2});
-      width: $custom-switch-indicator-size;
-      height: $custom-switch-indicator-size;
-    }
-  }
-}

data/frontend/css/components/_magnific-popup.scss

@@ -1,36 +0,0 @@
-// Fix z-index of Magnific Popup lightboxes so that they appear above Bootstrap modals
-
-$mfp-z-index-base: 1140;
-
-.mfp-bg { z-index: $mfp-z-index-base + 2; }
-.mfp-wrap { z-index: $mfp-z-index-base + 3; }
-.mfp-content { z-index: $mfp-z-index-base + 5; }
-.mfp-preloader { z-index: $mfp-z-index-base + 4; }
-
-button.mfp-close,
-button.mfp-arrow {
-  z-index: $mfp-z-index-base + 6;
-}
-
-
-// Smooth transition of lightbox background
-
-.mfp-with-zoom .mfp-container,
-.mfp-with-zoom.mfp-bg {
-	opacity: 0;
-
-  backface-visibility: hidden;
-	transition: all 150ms ease-out;
-}
-
-.mfp-with-zoom.mfp-ready .mfp-container {
-	opacity: 1;
-}
-.mfp-with-zoom.mfp-ready.mfp-bg {
-	opacity: 0.8;
-}
-
-.mfp-with-zoom.mfp-removing .mfp-container,
-.mfp-with-zoom.mfp-removing.mfp-bg {
-	opacity: 0;
-}

data/frontend/css/components/_turbolinks.scss

@@ -1,3 +0,0 @@
-.turbolinks-progress-bar {
-  background-color: theme-color("primary");
-}

data/frontend/js/components/confirmation.js

@@ -1,32 +0,0 @@
-import $ from 'jquery'
-
-import { init } from '../core/events'
-import { i18n } from '../core/i18n'
-
-init(function (root) {
-  const DEFAULTS = {
-    singleton: true,
-    popout: true,
-    title: i18n['trestle.confirmation.title'] || 'Are you sure?',
-    btnOkClass: 'btn btn-sm btn-primary',
-    btnOkLabel: i18n['trestle.confirmation.ok'] || 'OK',
-    btnCancelClass: 'btn btn-sm btn-light',
-    btnCancelLabel: i18n['trestle.confirmation.cancel'] || 'Cancel',
-    copyAttributes: 'href target data-remote data-method data-url data-params data-type'
-  }
-
-  const CONFIRM = {
-    ...DEFAULTS,
-    rootSelector: '[data-toggle="confirm"]'
-  }
-
-  const DELETE = {
-    ...DEFAULTS,
-    rootSelector: '[data-toggle="confirm-delete"]',
-    btnOkClass: 'btn btn-sm btn-danger',
-    btnOkLabel: i18n['trestle.confirmation.delete'] || 'Delete'
-  }
-
-  $(root).find('[data-toggle="confirm"]').confirmation(CONFIRM)
-  $(root).find('[data-toggle="confirm-delete"]').confirmation(DELETE)
-})

data/frontend/js/components/datepicker.js

@@ -1,69 +0,0 @@
-import $ from 'jquery'
-
-import { init } from '../core/events'
-import { i18n } from '../core/i18n'
-
-function setupDatePicker (selectedDates, dateStr, instance) {
-  addClearButton(instance)
-  enableDirectEntry(instance)
-}
-
-function addClearButton (instance) {
-  const $input = $(instance.input)
-
-  if ($input.data('allow-clear')) {
-    $('<a href="#">')
-      .on('click', function (e) {
-        e.preventDefault()
-
-        const isDisabled = $input.is(':disabled') || $input.hasClass('disabled')
-
-        if (!isDisabled) {
-          instance.clear()
-        }
-      })
-      .addClass('clear-datepicker')
-      .insertBefore(instance.altInput)
-  }
-}
-
-function enableDirectEntry (instance) {
-  const $altInput = $(instance.altInput)
-
-  $altInput.on('input', function (e) {
-    const value = $altInput.val()
-
-    const parsedDate = instance.parseDate(value, instance.config.altFormat)
-    const formattedDate = instance.formatDate(parsedDate, instance.config.altFormat)
-
-    if (value === formattedDate) {
-      instance.setDate(value, true, instance.config.altFormat)
-    }
-  })
-}
-
-init(function (root) {
-  $(root).find('input[type="date"][data-picker="true"]').flatpickr({
-    allowInput: true,
-    altInput: true,
-    altFormat: i18n['admin.datepicker.formats.date'] || 'm/d/Y',
-    onReady: setupDatePicker
-  })
-
-  $(root).find('input[type="datetime"][data-picker="true"], input[type="datetime-local"][data-picker="true"]').flatpickr({
-    enableTime: true,
-    allowInput: true,
-    altInput: true,
-    altFormat: i18n['admin.datepicker.formats.datetime'] || 'm/d/Y h:i K',
-    onReady: setupDatePicker
-  })
-
-  $(root).find('input[type="time"][data-picker="true"]').flatpickr({
-    enableTime: true,
-    noCalendar: true,
-    allowInput: true,
-    altInput: true,
-    altFormat: i18n['admin.datepicker.formats.time'] || 'h:i K',
-    onReady: setupDatePicker
-  })
-})

data/frontend/js/components/dialog.js

@@ -1,149 +0,0 @@
-import $ from 'jquery'
-
-import { i18n } from '../core/i18n'
-import { triggerInit } from '../core/events'
-
-const TEMPLATE = `
-<div class="modal fade" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content" data-context>
-    </div>
-  </div>
-</div>
-`
-
-function createElement () {
-  const $el = $(TEMPLATE).appendTo('body')
-
-  $el.modal({
-    show: false,
-    focus: false
-  })
-
-  $el.on('hidden.bs.modal', function () {
-    // Restore modal-open class on body if background modals still visible
-    if ($el.prevAll('.modal.show').length) {
-      $(document.body).addClass('modal-open')
-    }
-
-    // Remove dialog elements once hidden
-    $el.remove()
-  })
-
-  // Restore the next visible modal to the foreground
-  $el.on('hide.bs.modal', function () {
-    $el.prevAll('.modal.show').last().removeClass('background')
-  })
-
-  // Set X-Trestle-Dialog header on AJAX requests initiated from the dialog
-  $el.on('ajax:beforeSend', '[data-remote]', function (e) {
-    const xhr = e.detail[0]
-    xhr.setRequestHeader('X-Trestle-Dialog', true)
-  })
-
-  return $el
-}
-
-export function showError (title, errorText) {
-  const dialog = new Dialog({ modalClass: 'modal-lg' })
-
-  dialog.showError(title, $('<pre>').addClass('exception').text(errorText))
-  dialog.show()
-
-  return dialog
-}
-
-export default class Dialog {
-  constructor (options = {}) {
-    this.options = options
-    this.$el = createElement()
-
-    if (options.modalClass) {
-      this.$el.find('.modal-dialog').addClass(options.modalClass)
-    }
-  }
-
-  load (url, callback) {
-    this.show()
-    this.setLoading(true)
-
-    $.ajax({
-      url: url,
-      dataType: 'html',
-      headers: {
-        'X-Trestle-Dialog': true
-      },
-      complete: () => {
-        this.setLoading(false)
-      },
-      success: (content) => {
-        this.setContent(content)
-
-        if (callback) {
-          callback.apply(this)
-        }
-      },
-      error: (xhr, status, error) => {
-        const errorMessage = i18n['trestle.dialog.error'] || 'The request could not be completed.'
-
-        const title = error || errorMessage
-        const content = $('<p>').text(errorMessage)
-
-        this.showError(title, content)
-      }
-    })
-  }
-
-  setLoading (loading) {
-    this.$el.toggleClass('loading', loading)
-  }
-
-  setContent (content) {
-    this.$el.find('.modal-content').html(content)
-    triggerInit(this.$el)
-  }
-
-  showError (title, content) {
-    this.$el.addClass('error')
-
-    this.setContent(`
-      <div class="modal-header">
-        <h4 class="modal-title">${title}</h4>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-      </div>
-
-      <div class="modal-body">
-        ${content.prop('outerHTML')}
-      </div>
-
-      <div class="modal-footer">
-        <button type="button" class="btn btn-light" data-dismiss="modal" aria-label="OK">${i18n['admin.buttons.ok'] || 'OK'}</button>
-      </div>`)
-  }
-
-  show () {
-    this.$el.modal('show')
-
-    // Background any existing visible modals
-    this.$el.prevAll('.modal.show').addClass('background')
-  }
-
-  hide () {
-    this.$el.modal('hide')
-  }
-}
-
-// Expose showError as Trestle.Dialog.showError
-Dialog.showError = showError
-
-$(document).on('click', '[data-behavior="dialog"]', function (e) {
-  e.preventDefault()
-
-  const url = $(this).data('url') || $(this).attr('href')
-
-  const dialog = new Dialog({
-    modalClass: $(this).data('dialog-class')
-  })
-
-  dialog.load(url)
-})

data/frontend/js/components/file.js

@@ -1,7 +0,0 @@
-import { init } from '../core/events'
-
-import bsCustomFileInput from 'bs-custom-file-input'
-
-init(function () {
-  bsCustomFileInput.init()
-})

data/frontend/js/components/form.js

@@ -1,100 +0,0 @@
-/* global history */
-
-import $ from 'jquery'
-
-import { init, triggerInit } from '../core/events'
-import { refreshMainContext } from '../core/contexts'
-
-import { focusActiveTab } from './tabs'
-import { showError } from './dialog'
-
-const FORM_SELECTOR = 'form[data-behavior="trestle-form"]'
-
-// Prevent enter key from submitting the form
-$(document).on('keypress', `${FORM_SELECTOR} :input:not(textarea):not([type=submit])`, function (e) {
-  if (e.keyCode === 13) {
-    e.preventDefault()
-  }
-})
-
-init(function (root) {
-  const $form = $(root).find(FORM_SELECTOR)
-
-  $form
-    .on('ajax:send', function (e) {
-      // Only run when triggered directly on form
-      if (e.target !== this) return
-
-      // Disable submit buttons
-      $(this).find(':submit').prop('disabled', true)
-
-      // Set loading status on button that triggered submission
-      const button = $(this).data('trestle:submitButton')
-      if (button) { $(button).addClass('loading') }
-    })
-    .on('ajax:complete', function (e) {
-      // Only run when triggered directly on form
-      if (e.target !== this) return
-
-      const xhr = e.detail[0]
-
-      // Reset submit buttons
-      $(this).find(':submit').prop('disabled', false).removeClass('loading')
-      $(this).removeData('trestle:submitButton')
-
-      const contentType = (xhr.getResponseHeader('Content-Type') || '').split(';')[0]
-
-      if (contentType === 'text/html') {
-        if (/<html/i.test(xhr.responseText)) {
-          // Response is a full HTML page, likely an error page. Render within an iframe.
-          const $context = $(this).closest('[data-context]')
-          const iframe = $('<iframe>').addClass('error-iframe').get(0)
-          $context.html(iframe)
-
-          iframe.contentWindow.document.documentElement.innerHTML = xhr.responseText
-        } else {
-          // Find the parent context and replace content
-          const $context = $(this).closest('[data-context]')
-          $context.html(xhr.responseText)
-
-          // Initialize replaced elements within the context
-          triggerInit($context)
-
-          // Focus the correct tab
-          focusActiveTab()
-        }
-      } else if (contentType === 'text/plain') {
-        // Assume an error response
-        const title = `${xhr.status} (${xhr.statusText})`
-        showError(title, xhr.responseText)
-      }
-    })
-    .on('ajax:success', function (e) {
-      // Only run when triggered directly on form
-      if (e.target !== this) return
-
-      const xhr = e.detail[2]
-
-      const $context = $(this).closest('[data-context]')
-      let location = xhr.getResponseHeader('X-Trestle-Location')
-
-      if (location) {
-        // Retain current active tab
-        location = location + document.location.hash
-
-        // Update the URL in the browser and context
-        history.replaceState({}, '', location)
-        $context.data('context', location)
-      }
-
-      // Refresh the main context
-      if (!$context.hasClass('app-main')) {
-        refreshMainContext()
-      }
-    })
-
-  $form.find(':submit').click(function () {
-    // Save this as the button that triggered the form
-    $(this).closest('form').data('trestle:submitButton', this)
-  })
-})

data/frontend/js/components/gallery.js

@@ -1,33 +0,0 @@
-import $ from 'jquery'
-
-import { init } from '../core/events'
-
-init(function (root) {
-  $(root).find('[data-behavior~="zoom"]').magnificPopup({
-    type: 'image',
-    closeOnContentClick: false,
-    closeBtnInside: false,
-    mainClass: 'mfp-with-zoom mfp-img-mobile',
-    zoom: {
-      enabled: true,
-      duration: 150
-    }
-  })
-
-  $(root).find('[data-behavior~="gallery"]').each(function () {
-    $(this).magnificPopup({
-      delegate: 'a',
-      type: 'image',
-      closeOnContentClick: false,
-      closeBtnInside: false,
-      mainClass: 'mfp-with-zoom mfp-img-mobile',
-      gallery: {
-        enabled: true
-      },
-      zoom: {
-        enabled: true,
-        duration: 150
-      }
-    })
-  })
-})

data/frontend/js/components/pagination.js

@@ -1,51 +0,0 @@
-/* global history */
-
-import $ from 'jquery'
-
-import { triggerInit } from '../core/events'
-
-const REMOTE_PAGINATION_SELECTOR = '.page-link[data-remote]'
-
-$(document)
-  .on('ajax:send', function (e) {
-    const $context = $(e.target).closest('[data-context]')
-    const $table = $context.find('.table-container')
-    $table.addClass('loading')
-  })
-
-  .on('ajax:complete', function (e) {
-    const $context = $(e.target).closest('[data-context]')
-    const $table = $context.find('.table-container')
-    $table.removeClass('loading')
-  })
-
-  .on('ajax:success', REMOTE_PAGINATION_SELECTOR, function (e) {
-    const $link = $(e.target)
-    const $context = $link.closest('[data-context]')
-
-    // Update table and pagination
-    const $doc = $(e.detail[0])
-
-    const $table = $doc.find('.table-container')
-    $context.find('.table-container').replaceWith($table)
-
-    triggerInit($table)
-
-    const $pagination = $doc.find('.pagination-container')
-    $context.find('.pagination-container').replaceWith($pagination)
-
-    // Update the URL in the browser and context
-    const location = $link.attr('href')
-
-    if (location) {
-      // TODO: Implement URL updating with back button support
-      // if ($context.hasClass('app-main')) {
-      //   history.pushState({}, '', location)
-      // }
-
-      $context.data('context', location)
-    }
-
-    // Scroll to top of table
-    $table[0].scrollIntoView(true)
-  })

data/frontend/js/components/select.js

@@ -1,18 +0,0 @@
-import $ from 'jquery'
-
-import { init } from '../core/events'
-
-// Use Bootstrap theme
-$.fn.select2.defaults.set('theme', 'bootstrap')
-
-// 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-*' from select tag to dropdown container (.select2-dropdown)
-$.fn.select2.defaults.set('dropdownCssClass', function (el) {
-  return el[0].className.replace(/\s*form-control(-\w+)?\s*/g, '')
-})
-
-init(function (root) {
-  $(root).find('select[data-enable-select2]').select2()
-})