trestle 0.8.5 → 0.8.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f43ff0c051a7e29be0e0a815f1500753456f8aef
-  data.tar.gz: 75bc749e3cd64de9c5339e98dda6c921985d5c61
+  metadata.gz: 1f07f2d3328a13c6ac319c7e04b8926a0dc09660
+  data.tar.gz: a8adb65b4c3bd295c5e80397fba9c8968d08febd
 SHA512:
-  metadata.gz: 86dbf71a36e6cfb0499e7ec5d6852103f9148acead9755775883fbb7011b019e435ccb7331866f19a6555c5d7fb9de049aed2139874a70bbe3417c88e79a806e
-  data.tar.gz: 10e8387dbb008465043180543be49f16a659372ce62f8d908b86595c91ebdb6b1b2950c7391c9ec7eb1041feb325f19c817e7c7f5c3e3fb5a078651d1518a0d2
+  metadata.gz: 9d565ea8bd72cca11c5eb2de1ea72332e8980093e5f4147f598f64958ee82b3f1799de37dc7c2c99b68cbb773821454ee62c5230b4ba55bdc50828e516dc347e
+  data.tar.gz: da2e9069173f7fa34f0af87c392af4b00dc9ea5b9b42eb2e6cb3c2df536065bd9648b5482043260c748e919fa735127d3fafb32537e523fe356da52765d7221a

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

@@ -7,17 +7,18 @@
 //= require trestle/select2
 //
 //= require_self
+//
+//= require_tree ./core
+//= require_tree ./components
+//
 //= require trestle/custom
-//= require_tree .
 
-var Trestle = window.Trestle = {};
+var Trestle = {
+  // Is Turbolinks enabled?
+  turbolinks: typeof(Turbolinks) !== 'undefined' && Turbolinks.supported,
 
-Trestle.i18n = {};
+  // Store for i18n translations used within JS
+  i18n: {}
+};
 
-if (typeof(Turbolinks) !== 'undefined' && Turbolinks.supported) {
-  Trestle.ready = function(callback) { $(document).on('turbolinks:load', callback); };
-  Trestle.visit = function(url) { Turbolinks.visit(url); };
-} else {
-  Trestle.ready = function(callback) { $(callback); };
-  Trestle.visit = function(url) { document.location = url; };
-}
+window.Trestle = Trestle;

data/app/assets/javascripts/trestle/{_confirmation.js → components/_confirmation.js}

@@ -11,7 +11,7 @@ Trestle.ready(function() {
     selector:       '[data-toggle="confirm-delete"]',
     singleton:      true,
     popout:         true,
-    title:          Trestle.i18n['admin.confirmation.title'],
+    title:          Trestle.i18n['admin.confirmation.title'] || 'Are you sure?',
     btnOkIcon:      '',
     btnOkClass:     'btn-danger',
     btnOkLabel:     Trestle.i18n['admin.confirmation.delete'] || 'Delete',

data/app/assets/javascripts/trestle/{_datepicker.js → components/_datepicker.js}

@@ -1,18 +1,18 @@
-Trestle.ready(function() {
-  $('input[type="date"][data-picker="true"]').flatpickr({
+Trestle.init(function(e, root) {
+  $(root).find('input[type="date"][data-picker="true"]').flatpickr({
     allowInput: true,
     altInput:   true,
     altFormat:  "m/d/Y",
   });
 
-  $('input[type="datetime"][data-picker="true"], input[type="datetime-local"][data-picker="true"]').flatpickr({
+  $(root).find('input[type="datetime"][data-picker="true"], input[type="datetime-local"][data-picker="true"]').flatpickr({
     enableTime: true,
     allowInput: true,
     altInput:   true,
     altFormat:  "m/d/Y h:i K",
   });
 
-  $('input[type="time"][data-picker="true"]').flatpickr({
+  $(root).find('input[type="time"][data-picker="true"]').flatpickr({
     enableTime: true,
     noCalendar: true,
     allowInput: true,

data/app/assets/javascripts/trestle/components/_dialog.js

@@ -0,0 +1,107 @@
+Trestle.Dialog = function() {
+  this.el = Trestle.Dialog.getElement();
+};
+
+Trestle.Dialog.TEMPLATE =
+  '<div id="dialog" class="modal fade" tabindex="-1">' +
+    '<div class="modal-dialog">' +
+      '<div class="modal-content" data-context></div>' +
+    '</div>' +
+  '</div>';
+
+Trestle.Dialog.getElement = function() {
+  var el = $('#dialog');
+
+  if (el.length == 0) {
+    el = $(Trestle.Dialog.TEMPLATE).appendTo('body');
+
+    el.modal({ show: false });
+
+    // Remove dialog elements once hidden
+    el.on('hidden.bs.modal', function() {
+      el.remove();
+    });
+
+    // Set X-Trestle-Dialog header on AJAX requests initiated from the dialog
+    el.on('ajax:beforeSend', '[data-remote]', function(e, xhr, options) {
+      xhr.setRequestHeader("X-Trestle-Dialog", true);
+    });
+  }
+
+  return el;
+};
+
+Trestle.Dialog.prototype.load = function(url) {
+  var dialog = this;
+
+  dialog.show();
+  dialog.setLoading(true);
+
+  $.ajax({
+    url: url,
+    dataType: 'html',
+    headers: {
+      "X-Trestle-Dialog": true
+    },
+    complete: function() {
+      dialog.setLoading(false);
+    },
+    success: function(content) {
+      dialog.setContent(content);
+    },
+    error: function(xhr, status, error) {
+      dialog.showError(error);
+    }
+  });
+};
+
+Trestle.Dialog.prototype.setLoading = function(loading) {
+  if (loading) {
+    this.el.addClass('loading');
+  } else {
+    this.el.removeClass('loading');
+  }
+}
+
+Trestle.Dialog.prototype.setContent = function(content) {
+  this.el.find('.modal-content').html(content);
+  $(Trestle).trigger('init', this.el);
+};
+
+Trestle.Dialog.prototype.showError = function(error) {
+  this.el.addClass('error');
+
+  var container = this.el.find('.modal-content').empty();
+
+  var errorMessage = Trestle.i18n['trestle.dialog.error'] || 'The request could not be completed.';
+
+  $('<div class="modal-header">')
+    .append('<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>')
+    .append('<h4 class="modal-title"></h4>').find('h4').text(error || errorMessage).end()
+    .appendTo(container);
+
+  $('<div class="modal-body">')
+    .append('<p>').find('p').text(errorMessage).end()
+    .appendTo(container);
+
+  $('<div class="modal-footer">')
+    .append('<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="OK">').find('button').text(Trestle.i18n['admin.buttons.ok'] || 'OK').end()
+    .appendTo(container);
+};
+
+Trestle.Dialog.prototype.show = function() {
+  this.el.modal('show');
+};
+
+Trestle.Dialog.prototype.hide = function() {
+  this.el.modal('hide');
+};
+
+$(document).on('click', '[data-behavior="dialog"]', function(e) {
+  e.preventDefault();
+
+  var url = $(this).data('url') || $(this).attr('href');
+
+  var dialog = new Trestle.Dialog();
+  dialog.load(url);
+});

data/app/assets/javascripts/trestle/{_errors.js → components/_errors.js}

@@ -1,6 +1,6 @@
 // Add error indicators to tabs
-Trestle.ready(function() {
-  $('.tab-pane').each(function() {
+Trestle.init(function(e, root) {
+  $(root).find('.tab-pane').each(function() {
     var errorCount = $(this).find('.has-error').length;
 
     if (errorCount > 0) {

data/app/assets/javascripts/trestle/components/_form.js

@@ -0,0 +1,48 @@
+// Prevent enter key from submitting the form
+$(document).on('keypress', 'form[data-behavior="trestle-form"] :input:not(textarea):not([type=submit])', function(e) {
+  if (e.keyCode == 13) {
+    e.preventDefault();
+  }
+});
+
+Trestle.init(function(e, root) {
+  var form = $(root).find('form[data-behavior="trestle-form"]');
+
+  form
+    .on('ajax:complete', function(e, xhr, status) {
+      // Find the parent context and replace content
+      var context = $(this).closest('[data-context]');
+      context.html(xhr.responseText);
+
+      // Initialize replaced elements within the context
+      $(Trestle).trigger('init', context);
+
+      // Focus the correct tab
+      Trestle.focusActiveTab();
+    })
+    .on('ajax:success', function(e, data, status, xhr) {
+      var context = $(this).closest('[data-context]');
+      var location = xhr.getResponseHeader("X-Trestle-Location");
+
+      if (location) {
+        // Update the URL in the browser and context
+        history.replaceState({}, "", location);
+        context.data('context', location);
+      }
+
+      // Refresh the main context
+      if (!context.hasClass('app-main')) {
+        Trestle.refreshMainContext();
+      }
+    });
+
+  // Loading indicator
+  form.find(':submit').click(function() {
+    var button = $(this);
+
+    // Delay to ensure form is still submitted
+    setTimeout(function() {
+      button.prop('disabled', true).addClass('loading');
+    }, 1);
+  });
+});

data/app/assets/javascripts/trestle/{_gallery.js → components/_gallery.js}

@@ -1,5 +1,5 @@
-Trestle.ready(function() {
-  $('[data-behavior~="zoom"]').magnificPopup({
+Trestle.init(function(e, root) {
+  $(root).find('[data-behavior~="zoom"]').magnificPopup({
     type: 'image',
     closeOnContentClick: false,
     closeBtnInside: false,
@@ -10,7 +10,7 @@ Trestle.ready(function() {
     }
   });
 
-  $('[data-behavior~="gallery"]').magnificPopup({
+  $(root).find('[data-behavior~="gallery"]').magnificPopup({
     delegate: 'a',
     type: 'image',
     closeOnContentClick: false,

data/app/assets/javascripts/trestle/{_select.js → components/_select.js}

@@ -1,5 +1,5 @@
-Trestle.ready(function() {
-  $('select[data-enable-select2]').each(function() {
+Trestle.init(function(e, root) {
+  $(root).find('select[data-enable-select2]').each(function() {
     $(this).select2({
       theme: 'bootstrap',
       containerCssClass: ':all:',

data/app/assets/javascripts/trestle/{_sidebar.js → components/_sidebar.js}

@@ -69,5 +69,7 @@ Trestle.ready(function() {
   // Scroll sidebar to active item
 
   var active = sidebar.find('.active');
-  sidebar.find('.app-sidebar-inner').scrollTop(active.offset().top - 100);
+  if (active.length) {
+    sidebar.find('.app-sidebar-inner').scrollTop(active.offset().top - 100);
+  }
 });

data/app/assets/javascripts/trestle/{_table.js → components/_table.js}

@@ -1,4 +1,4 @@
-$(document).on('click', 'tr[data-url]', function(e) {
+$(document).on('click', 'tr[data-url]:not([data-behavior="dialog"])', function(e) {
   var row = $(e.currentTarget);
 
   if (row.data('url') == 'auto') {

data/app/assets/javascripts/trestle/components/_tabs.js

@@ -0,0 +1,24 @@
+Trestle.init(function(e, root) {
+  $(root).find("a[data-toggle='tab']").on('shown.bs.tab', function(e) {
+    var hash = $(this).attr("href");
+
+    if (hash.substr(0, 1) == "#") {
+      history.replaceState({ turbolinks: {} }, "", "#!" + hash.substr(1));
+    }
+  });
+});
+
+Trestle.focusActiveTab = function() {
+  if (location.hash.substr(0, 2) == "#!") {
+    // Focus on active tab from URL
+    $("a[data-toggle='tab'][href='#" + location.hash.substr(2) + "']").tab("show");
+  } else if ($(".tab-pane:has(.has-error)").length) {
+    // Focus on first tab with errors
+    var pane = $(".tab-pane:has(.has-error)").first();
+    $("a[data-toggle='tab'][href='#" + pane.attr("id") + "']").tab("show");
+  }
+};
+
+Trestle.ready(function() {
+  Trestle.focusActiveTab();
+});

data/app/assets/javascripts/trestle/components/_tooltips.js

@@ -0,0 +1,3 @@
+Trestle.init(function(e, root) {
+  $(root).find('[data-toggle="tooltip"]').tooltip();
+});

data/app/assets/javascripts/trestle/core/_contexts.js

@@ -0,0 +1,13 @@
+Trestle.refreshContext = function(context) {
+  var url = context.data('context');
+
+  $.get(url, function(data) {
+    context.html(data);
+    $(Trestle).trigger('init', context);
+  });
+};
+
+Trestle.refreshMainContext = function() {
+  var context = $('.app-main[data-context]');
+  Trestle.refreshContext(context);
+};

data/app/assets/javascripts/trestle/{_cookies.js → core/_cookies.js}

@@ -6,7 +6,8 @@ Trestle.cookie = {
 
     for (i = cookies.length - 1; i >= 0; i--) {
       if (!cookies[i].indexOf(name)) {
-        return cookies[i].replace(name, '');
+        var value = cookies[i].replace(name, '');
+        return decodeURIComponent(value);
       }
     }
 

data/app/assets/javascripts/trestle/core/_events.js

@@ -0,0 +1,39 @@
+// The ready function sets up a callback to run on each page load.
+//
+//     Trestle.ready(function() {
+//       ...
+//     });
+//
+Trestle.ready = function(callback) {
+  $(Trestle).on('load', callback);
+};
+
+// 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.
+//
+//     Trestle.init(function(e, root) {
+//       $(root).find('...');
+//     });
+//
+Trestle.init = function(callback) {
+  $(Trestle).on('init', callback);
+};
+
+// Initialize all elements within the document on page load.
+Trestle.ready(function() {
+  $(Trestle).trigger('init', document);
+});
+
+// Trigger the page load events.
+if (Trestle.turbolinks) {
+  $(document).on('turbolinks:load', function() {
+    $(Trestle).trigger("load");
+  });
+} else {
+  $(document).ready(function() {
+    $(Trestle).trigger("load");
+  });
+}

data/app/assets/javascripts/trestle/core/_visit.js

@@ -0,0 +1,10 @@
+// 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; };
+}

data/app/assets/stylesheets/trestle/components/_buttons.scss

@@ -1,6 +1,15 @@
 .btn {
   border: none;
   box-shadow: none;
+
+  &.loading {
+    &::before {
+      @extend .fa;
+      @extend .fa-spin;
+      content: $fa-var-spinner;
+      margin-right: 10px;
+    }
+  }
 }
 
 .btn-delete {

data/app/assets/stylesheets/trestle/components/_modal.scss

@@ -0,0 +1,92 @@
+.modal-content {
+  border: none;
+  border-radius: 0;
+
+  .modal.loading & {
+    min-height: 100px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:after {
+      @extend .fa;
+      @extend .fa-spin;
+      content: $fa-var-spinner;
+
+      font-size: 32px;
+      opacity: 0.25;
+    }
+  }
+}
+
+.modal-header {
+  background: $theme-bg;
+  border-bottom: none;
+
+  .close {
+    opacity: 0.75;
+
+    &, &:hover, &:focus {
+      color: white;
+    }
+
+    &:hover, &:focus {
+      opacity: 1;
+    }
+  }
+
+  .modal.error & {
+    background: $error-bg;
+  }
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 500;
+  text-shadow: rgba(black, 0.5) 0 1px 1px;
+  color: white;
+}
+
+.modal-tabs .nav-tabs {
+  background: $body-bg;
+  padding: 10px 15px 0 15px;
+}
+
+.modal-flash {
+  .alert {
+    margin-bottom: 0;
+    border-radius: 0;
+    border-width: 0 0 1px 0;
+
+    padding-top: 10px;
+    padding-bottom: 10px;
+
+    .alert-icon {
+      font-size: 40px;
+      margin-right: 15px;
+    }
+
+    h3 {
+      font-size: 18px;
+    }
+
+    p {
+      font-size: 13px;
+    }
+  }
+}
+
+.modal-body {
+  @extend .tab-content;
+}
+
+.modal-footer {
+  .primary-toolbar {
+    float: right;
+  }
+
+  .secondary-toolbar {
+    float: left;
+  }
+}