trestle 0.8.13 → 0.9.0

data/frontend/css/variables/_trestle.scss

@@ -0,0 +1,108 @@
+// Default theme
+
+$theme-bg: theme-color("primary");
+$error-bg: theme-color("danger");
+
+
+// Header
+
+$header-bg:    white;
+$header-color: #333333;
+
+$header-height: 50px;
+
+
+// Footer
+
+$footer-bg:    #f9f9f9;
+$footer-color: #888888;
+
+
+// Sidebar
+
+$sidebar-bg:            #222222;
+$sidebar-hover-bg:      #1a1a1a;
+$sidebar-active-bg:     #393939;
+$sidebar-active-border: 4px;
+
+$sidebar-link-color:  #919191;
+$sidebar-group-color: #595959;
+
+$sidebar-toggle-bg:    rgba(black, 0.25);
+$sidebar-toggle-color: rgba(white, 0.5);
+
+$sidebar-mobile-toggle-bg:     transparent;
+$sidebar-mobile-toggle-color:  white;
+$sidebar-mobile-toggle-border: 1px solid rgba($sidebar-mobile-toggle-color, 0.15);
+
+$sidebar-mobile-toggle-active-bg:     rgba($sidebar-mobile-toggle-color, 0.1);
+$sidebar-mobile-toggle-active-border: $sidebar-mobile-toggle-border;
+
+$sidebar-mobile-toggle-icon-bg: str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$sidebar-mobile-toggle-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23");
+
+$sidebar-width:           250px;
+$sidebar-width-collapsed: 54px;
+
+$sidebar-transition-duration: 250ms;
+
+$sidebar-font-size-scale: 0.925;
+
+
+// Content
+
+$content-header-bg:  #fafafa;
+$content-sidebar-bg: #f9f9f9;
+
+$content-sidebar-width: 285px;
+
+$main-content-header-bg:      $content-sidebar-bg;
+$main-content-header-padding: 12px 20px;
+$main-content-header-border:  1px solid rgba(black, 0.1);
+
+$main-content-footer-bg:      $content-sidebar-bg;
+$main-content-footer-padding: 12px 20px;
+$main-content-footer-border:  1px solid rgba(black, 0.1);
+
+
+// Tags
+
+$tag-color:        white;
+$tag-bg:           lighten(theme-color("primary"), 10%);
+$tag-border:       theme-color("primary");
+
+$tag-hover-color:  white;
+$tag-hover-bg:     theme-color("primary");
+$tag-hover-border: darken(theme-color("primary"), 10%);
+
+
+// Scopes
+
+$scope-padding:      0.25rem 0.5rem;
+
+$scope-color:        rgba(black, 0.3);
+$scope-bg:           rgba(black, 0.025);
+
+$scope-label-color:  rgba(black, 0.4);
+
+$scope-hover-color:  rgba(black, 0.3);
+$scope-hover-bg:     rgba(black, 0.05);
+
+$scope-active-color: white;
+$scope-active-bg:    rgba(black, 0.25);
+
+
+// Alerts
+
+$alert-success-bg:     #7ac47a;
+$alert-success-color:  white;
+$alert-success-border: #66bb66;
+
+$alert-danger-bg:      #de7471;
+$alert-danger-color:   white;
+$alert-danger-border:  #d85956;
+
+
+// Modals
+
+$modal-header-bg: $theme-bg;
+$modal-footer-bg: $content-sidebar-bg;

data/frontend/index.js

@@ -0,0 +1,5 @@
+// CSS entry point
+import './css/index.scss'
+
+// JS entry point
+export { default as Trestle } from './js/index.js'

data/frontend/js/components/confirmation.js

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,138 @@
+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 })
+
+  // Remove dialog elements once hidden
+  $el.on('hidden.bs.modal', function () {
+    $el.remove()
+  })
+
+  // Restore the next visible modal to the foreground
+  $el.on('hide.bs.modal', function () {
+    $el.prevAll('.modal.in').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.in').addClass('background')
+  }
+
+  hide () {
+    this.$el.modal('hide')
+  }
+}
+
+$(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

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

data/frontend/js/components/form.js

@@ -0,0 +1,91 @@
+/* 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) {
+      // 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) {
+      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) {
+      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)
+  })
+})