trestle 0.8.13 → 0.9.4

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/frontend/js/core/events.js

@@ -0,0 +1,50 @@
+import $ from 'jquery'
+
+import turbolinks from './turbolinks'
+
+// The ready function sets up a callback to run on each page load.
+//
+//     Trestle.ready(function() {
+//       ...
+//     });
+//
+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 argument.
+//
+//     Trestle.init(function(root) {
+//       $(root).find('...');
+//     });
+//
+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.
+ready(function () {
+  triggerInit(document)
+})
+
+// Trigger the page load events.
+if (turbolinks) {
+  $(document).on('turbolinks:load', triggerReady)
+} else {
+  $(document).ready(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,62 @@
+// 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/pagination'
+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

data/{app/assets/stylesheets/trestle/_custom.scss → frontend/theme/trestle/_variables.scss}

@@ -1,4 +1,4 @@
-// This file is left as an extension point for user customization.
+// This file is left as a (deprecated) extension point for user configuration.
 //
 // It will be overridden by the similarly named file within
 // the app/assets folder of the Rails application.

data/frontend/theme/trestle/theme.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+@import "theme/functions";
+@import "theme/variables";
+@import "theme/defaults";
+
+@import "theme/bootstrap/color-vars";
+@import "theme/bootstrap/links";
+@import "theme/bootstrap/tables";
+@import "theme/bootstrap/forms";
+@import "theme/bootstrap/buttons";
+@import "theme/bootstrap/dropdown";
+@import "theme/bootstrap/custom-forms";
+@import "theme/bootstrap/nav";
+@import "theme/bootstrap/pagination";
+@import "theme/bootstrap/badge";
+@import "theme/bootstrap/alert";
+@import "theme/bootstrap/progress";
+@import "theme/bootstrap/list-group";
+@import "theme/bootstrap/utilities";
+
+@import "theme/trestle/background";
+@import "theme/trestle/headers";
+@import "theme/trestle/navigation";
+@import "theme/trestle/navbar";
+@import "theme/trestle/datepicker";
+@import "theme/trestle/select2";
+@import "theme/trestle/tags";
+@import "theme/trestle/turbolinks";

data/frontend/theme/trestle/theme/_defaults.scss

@@ -0,0 +1,152 @@
+// Theme colors to override
+
+$theme-colors: (
+  "primary": #4d6bb2
+) !default;
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark:  #212529 !default;
+$yiq-text-light: #ffffff !default;
+
+
+// Links
+
+$link-color:       theme-color("primary") !default;
+$link-hover-color: darken($link-color, 15%) !default;
+
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: 15% !default;
+
+
+// Components
+
+$component-active-bg: theme-color("primary") !default;
+
+
+// Tables
+
+$table-bg-level:     -11 !default;
+$table-border-level: -7 !default;
+
+
+// Buttons + Forms
+
+$input-btn-focus-width:      .2rem !default;
+$input-btn-focus-color:      rgba($component-active-bg, 0.25) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$btn-focus-width:            $input-btn-focus-width !default;
+
+
+// Forms
+
+$input-focus-border-color: lighten($component-active-bg, 25%) !default;
+$input-focus-width:        $input-btn-focus-width !default;
+$input-focus-box-shadow:   $input-btn-focus-box-shadow !default;
+
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), 0.5) !default;
+$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
+
+$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;
+$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
+
+$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
+$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
+
+$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
+$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
+
+$custom-select-focus-border-color: $input-focus-border-color !default;
+$custom-select-focus-width:        $input-focus-width !default;
+$custom-select-focus-box-shadow:   0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
+
+$custom-range-thumb-bg:        $component-active-bg !default;
+$custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
+
+$custom-file-focus-border-color: $input-focus-border-color !default;
+$custom-file-focus-box-shadow:   $input-focus-box-shadow !default;
+
+
+// Navs
+
+$nav-pills-link-active-bg: $component-active-bg !default;
+
+
+// Navbar
+
+$sidebar-mobile-toggle-bg:     transparent !default;
+$sidebar-mobile-toggle-color:  white !default;
+$sidebar-mobile-toggle-border: 1px solid rgba($sidebar-mobile-toggle-color, 0.15) !default;
+
+$sidebar-mobile-toggle-active-bg:     rgba($sidebar-mobile-toggle-color, 0.1) !default;
+$sidebar-mobile-toggle-active-border: $sidebar-mobile-toggle-border !default;
+
+$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") !default;
+
+
+// Dropdowns
+
+$dropdown-link-active-bg: $component-active-bg !default;
+
+
+// Pagination
+
+$pagination-color:               $link-color !default;
+
+$pagination-focus-box-shadow:    $input-btn-focus-box-shadow !default;
+
+$pagination-hover-color:         $link-hover-color !default;
+
+$pagination-active-bg:           $component-active-bg !default;
+$pagination-active-border-color: $pagination-active-bg !default;
+
+
+// Badges
+
+$badge-focus-width: $input-btn-focus-width !default;
+
+
+// Alerts
+
+$alert-bg-level:     -10 !default;
+$alert-border-level: -9 !default;
+$alert-color-level:  6 !default;
+
+
+// Progress bars
+
+$progress-bar-bg: theme-color("primary") !default;
+
+
+// List group
+
+$list-group-active-bg:           $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+
+// Select2
+
+$s2bs-input-border-focus:            $input-focus-border-color !default;
+$s2bs-form-control-focus-box-shadow: $input-focus-box-shadow !default;
+$s2bs-dropdown-link-active-bg:       $dropdown-link-active-bg !default;
+
+
+// Trestle
+
+$theme-bg:       null !default;
+$theme-bg-color: darken(theme-color("primary"), 15%) !default;
+
+$sidebar-active-border-color: theme-color("primary") !default;
+
+$tag-bg:      lighten(theme-color("primary"), 10%) !default;
+$tag-border:  theme-color("primary") !default;
+
+$tag-hover-bg:     theme-color("primary") !default;
+$tag-hover-border: darken(theme-color("primary"), 10%) !default;

data/frontend/theme/trestle/theme/_functions.scss

@@ -0,0 +1,44 @@
+// Replace `$search` with `$replace` in `$string`
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// Color contrast
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
+
+// Retrieve color Sass maps
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, black, white);
+  $level: abs($level);
+
+  @return mix($color-base, $color, $level * $theme-color-interval);
+}
+
+@function gradient-mask($color, $alpha) {
+  $mask: rgba($color, $alpha);
+  @return linear-gradient($mask, $mask);
+}

data/frontend/theme/trestle/theme/_variables.scss

@@ -0,0 +1,15 @@
+$theme-colors: null !default;
+
+// Import deprecated user-defined variables
+@import "trestle/_variables";
+
+$brand-primary: false !default;
+
+@if $brand-primary != false {
+  $theme-colors: (
+    "primary": $brand-primary
+  );
+}
+
+// Import user-defined theme variables
+@import "trestle/_theme";