trestle 0.8.13 → 0.9.0

data/frontend/js/components/gallery.js

@@ -0,0 +1,33 @@
+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/select.js

@@ -0,0 +1,18 @@
+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()
+})

data/frontend/js/components/sidebar.js

@@ -0,0 +1,78 @@
+import $ from 'jquery'
+
+import { ready } from '../core/events'
+import cookie from '../core/cookie'
+
+ready(function () {
+  const $body = $('body')
+  const $wrapper = $('.app-wrapper')
+  const $sidebar = $('.app-sidebar')
+
+  // Toggle mobile navigation using menu button
+
+  $sidebar.find('.navbar-toggler').on('click', function (e) {
+    e.preventDefault()
+
+    $wrapper.addClass('animate')
+    $body.toggleClass('mobile-nav-expanded')
+  })
+
+  $wrapper.on('transitionend webkitTransitionEnd', function () {
+    $(this).removeClass('animate')
+  })
+
+  // Interacting outside of the sidebar closes the navigation
+
+  $wrapper.on('click touchstart', function (e) {
+    let navExpanded = $('body').hasClass('mobile-nav-expanded')
+
+    let clickInHeader = $(e.target).closest('.app-header').length
+    let clickInSidebar = $(e.target).closest('.app-sidebar').length
+
+    if (navExpanded && !clickInHeader && !clickInSidebar) {
+      e.stopPropagation()
+      e.preventDefault()
+
+      $wrapper.addClass('animate')
+      $body.removeClass('mobile-nav-expanded')
+    }
+  })
+
+  // Toggle sidebar expand/collapse
+
+  $sidebar.find('.toggle-sidebar').on('click', function (e) {
+    e.preventDefault()
+
+    if ($body.hasClass('sidebar-expanded') || $body.hasClass('sidebar-collapsed')) {
+      $body.removeClass('sidebar-expanded').removeClass('sidebar-collapsed')
+      cookie.delete('trestle:sidebar')
+    } else if ($(document).width() >= 1200) {
+      $body.addClass('sidebar-collapsed')
+      cookie.set('trestle:sidebar', 'collapsed')
+    } else if ($(document).width() >= 768) {
+      $body.addClass('sidebar-expanded')
+      cookie.set('trestle:sidebar', 'expanded')
+    }
+  })
+
+  // Toggle navigation groups
+
+  $sidebar.find('.nav-header a').on('click', function (e) {
+    e.preventDefault()
+
+    $(this).closest('ul').toggleClass('collapsed')
+
+    let collapsed = $sidebar.find('.collapsed .nav-header a').map(function () {
+      return $(this).attr('href').replace(/^#/, '')
+    }).toArray()
+
+    cookie.set('trestle:navigation:collapsed', collapsed.join(','))
+  })
+
+  // Scroll sidebar to active item
+
+  let $active = $sidebar.find('.active')
+  if ($active.length) {
+    $sidebar.find('.app-sidebar-inner').scrollTop($active.offset().top - 100)
+  }
+})

data/frontend/js/components/table.js

@@ -0,0 +1,30 @@
+import $ from 'jquery'
+
+import visit from '../core/visit'
+
+// Allow clicking on any part of a table row to follow either the table's data-url
+// or the first link within the row (that is not in the actions column).
+$(document).on('click', 'tr[data-url]:not([data-behavior="dialog"])', function (e) {
+  let row = $(e.currentTarget)
+
+  let url
+
+  if (row.data('url') === 'auto') {
+    url = row.find('td:not(.actions) a:first').attr('href')
+  } else {
+    url = row.data('url')
+  }
+
+  if (url) {
+    if (e.metaKey || e.ctrlKey) {
+      window.open(url, '_blank')
+    } else {
+      visit(url)
+    }
+  }
+})
+
+// Ignore the above event handler when clicking directly on a link or input element
+$(document).on('click', 'tr[data-url] a, tr[data-url] input', function (e) {
+  e.stopPropagation()
+})

data/frontend/js/components/tabs.js

@@ -0,0 +1,59 @@
+/* global history, location */
+
+import $ from 'jquery'
+
+import { init, ready } from '../core/events'
+
+const TAB_SELECTOR = 'a[data-toggle="tab"]'
+const TAB_PANE_SELECTOR = '.tab-pane'
+const ERROR_SELECTOR = '.is-invalid:not([type="hidden"])'
+
+// Save active tab to URL hash
+init(function (root) {
+  $(root).find(TAB_SELECTOR).on('shown.bs.tab', function (e) {
+    const hash = $(this).attr('href')
+    const withinModal = $(this).closest('.modal').length > 0
+
+    if (hash.substr(0, 1) === '#' && !withinModal) {
+      history.replaceState({ turbolinks: {} }, '', '#!' + hash.substr(1))
+    }
+  })
+})
+
+// Restore active tab when loading
+ready(function () {
+  focusActiveTab()
+})
+
+// Add error count to tabs
+init(function (root) {
+  $(root).find(TAB_PANE_SELECTOR).each(function () {
+    const errorCount = $(this).find(ERROR_SELECTOR).length
+
+    if (errorCount > 0) {
+      const badge = $('<span>').addClass('badge badge-danger badge-pill').text(errorCount)
+      const id = $(this).attr('id')
+      const selector = `${TAB_SELECTOR}[href='#${id}']`
+
+      $(selector).append(badge)
+    }
+  })
+})
+
+export function focusTab (id) {
+  const selector = `${TAB_SELECTOR}[href='#${id}']`
+  $(selector).tab('show')
+}
+
+export function focusActiveTab () {
+  if (location.hash.substr(0, 2) === '#!') {
+    // Focus on active tab from URL
+    focusTab(location.hash.substr(2))
+  } else {
+    const $errorTabs = $(`${TAB_PANE_SELECTOR}:has(${ERROR_SELECTOR})`)
+
+    if ($errorTabs.length) {
+      focusTab($errorTabs.first().attr('id'))
+    }
+  }
+}

data/frontend/js/components/tooltips.js

@@ -0,0 +1,25 @@
+import $ from 'jquery'
+
+import { init, ready } from '../core/events'
+
+// Enable general tooltips and popovers
+init(function (root) {
+  $(root).find('[data-toggle="tooltip"]').tooltip()
+  $(root).find('[data-toggle="popover"]').popover()
+})
+
+// Enable navigation tooltips for non-touch devices
+if (!('ontouchstart' in window)) {
+  ready(function () {
+    $(document).tooltip({
+      selector: '.app-nav a',
+      trigger: 'hover',
+      placement: 'right',
+      boundary: 'window',
+      template: '<div class="tooltip nav-tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',
+      title: function () {
+        return $(this).find('.nav-label').text()
+      }
+    })
+  })
+};

data/frontend/js/core/contexts.js

@@ -0,0 +1,17 @@
+import $ from 'jquery'
+
+import { triggerInit } from './events'
+
+export function refreshContext ($context) {
+  const url = $context.data('context')
+
+  $.get(url, function (data) {
+    $context.html(data)
+    triggerInit($context)
+  })
+}
+
+export function refreshMainContext () {
+  const $context = $('.app-main[data-context]')
+  refreshContext($context)
+}

data/frontend/js/core/cookie.js

@@ -0,0 +1,28 @@
+export function getCookie (name) {
+  name += '='
+
+  var cookies = document.cookie.split(/;\s*/)
+
+  for (let i = cookies.length - 1; i >= 0; i--) {
+    if (!cookies[i].indexOf(name)) {
+      var value = cookies[i].replace(name, '')
+      return decodeURIComponent(value)
+    }
+  }
+
+  return ''
+}
+
+export function setCookie (name, value) {
+  document.cookie = `${name}=${encodeURIComponent(value)}; path=/`
+}
+
+export function deleteCookie (name) {
+  document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`
+}
+
+export default {
+  get: getCookie,
+  set: setCookie,
+  delete: deleteCookie
+}

data/{app/assets/javascripts/trestle/core/_events.js → frontend/js/core/events.js}

@@ -1,39 +1,46 @@
+import $ from 'jquery'
+
 // The ready function sets up a callback to run on each page load.
 //
 //     Trestle.ready(function() {
 //       ...
 //     });
 //
-Trestle.ready = function(callback) {
-  $(Trestle).on('load', callback);
-};
+const readyCallbacks = $.Callbacks('unique')
+export function ready (callback) {
+  readyCallbacks.add(callback)
+}
+
+export function triggerReady (root) {
+  readyCallbacks.fire(root)
+}
 
 // The init function sets up a callback to run on each page load, as well as when elements are added to the page
 // dynamically (e.g. via a modal). It is used to initialize dynamic elements such as date pickers, although it is
 // preferable if they can be set up using event delegation on the document element.
 //
-// The callback is triggered with the applicable root/container element as the second argument.
+// The callback is triggered with the applicable root/container element as the argument.
 //
-//     Trestle.init(function(e, root) {
+//     Trestle.init(function(root) {
 //       $(root).find('...');
 //     });
 //
-Trestle.init = function(callback) {
-  $(Trestle).on('init', callback);
-};
+const initCallbacks = $.Callbacks('unique')
+export function init (callback) {
+  initCallbacks.add(callback)
+}
+
+export function triggerInit (root) {
+  // Pass root as both parameters for backwards compatibility
+  initCallbacks.fire(root, root)
+}
 
 // Initialize all elements within the document on page load.
-Trestle.ready(function() {
-  $(Trestle).trigger('init', document);
-});
+ready(function () {
+  triggerInit(document)
+})
 
 // Trigger the page load events.
-if (Trestle.turbolinks) {
-  $(document).on('turbolinks:load', function() {
-    $(Trestle).trigger("load");
-  });
-} else {
-  $(document).ready(function() {
-    $(Trestle).trigger("load");
-  });
-}
+$(document).on('ready turbolinks:load', function () {
+  triggerReady()
+})

data/{app/assets/javascripts/trestle/core/_l10n.js → frontend/js/core/i18n.js}

@@ -1,23 +1,24 @@
-(function() {
+import flatpickr from 'flatpickr'
+
+// Container for i18n translations
+export const i18n = {}
 
 // Some of Flatpickr's locale names differ from Rails. This maps the Rails I18n locale to their Flatpickr equivalent.
-var FlatpickrLocaleConversions = { ca: "cat", el: "gr", nb: "no", vi: "vn" };
+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');
+//     Trestle.localize('es-MX', 'es', 'en')
 //
-Trestle.localize = function() {
+export function localize () {
   for (var i = 0; i < arguments.length; ++i) {
-    var locale = arguments[i];
-    var flatpickrLocale = FlatpickrLocaleConversions[locale] || locale;
+    var locale = arguments[i]
+    var flatpickrLocale = FlatpickrLocaleConversions[locale] || locale
 
     if (flatpickr.l10ns[flatpickrLocale]) {
-      flatpickr.localize(flatpickr.l10ns[flatpickrLocale]);
-      break;
+      flatpickr.localize(flatpickr.l10ns[flatpickrLocale])
+      break
     }
   }
-};
-
-})();
+}

data/frontend/js/core/turbolinks.js

@@ -0,0 +1,3 @@
+/* global Turbolinks */
+
+export default typeof Turbolinks !== 'undefined' && Turbolinks.supported

data/{app/assets/javascripts/trestle/core/_visit.js → frontend/js/core/visit.js}

@@ -1,10 +1,16 @@
+/* global Turbolinks */
+
+import turbolinks from './turbolinks'
+
 // The visit function is used to direct the user to the given URL. It is provided as an abstraction as the redirection
 // is handled differently depending on whether or not Turbolinks is enabled.
 //
 //     Trestle.visit("/admin/pages");
 //
-if (Trestle.turbolinks) {
-  Trestle.visit = function(url) { Turbolinks.visit(url); };
-} else {
-  Trestle.visit = function(url) { document.location = url; };
+export default function (url) {
+  if (turbolinks) {
+    Turbolinks.visit(url)
+  } else {
+    document.location = url
+  }
 }

data/frontend/js/index.js

@@ -0,0 +1,61 @@
+// Dependencies
+
+import 'jquery'
+import Rails from '@rails/ujs'
+
+import 'bootstrap'
+import 'bootstrap-confirmation2'
+
+import 'magnific-popup'
+
+import 'flatpickr'
+
+import 'select2/dist/js/select2.full'
+
+// Core
+
+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 './components/confirmation'
+import './components/datepicker'
+import Dialog from './components/dialog'
+import './components/file'
+import './components/form'
+import './components/gallery'
+import './components/select'
+import './components/sidebar'
+import './components/table'
+import { focusTab, focusActiveTab } from './components/tabs'
+import './components/tooltips'
+
+// Initialize
+
+Rails.start()
+
+// Export
+
+const Trestle = {
+  refreshContext,
+  refreshMainContext,
+  cookie,
+  init,
+  ready,
+  triggerInit,
+  triggerReady,
+  i18n,
+  localize,
+  turbolinks,
+  visit,
+  Dialog,
+  focusTab,
+  focusActiveTab
+}
+
+export default Trestle