pure-admin-rails 2.0.0

data/app/assets/javascripts/pure_admin/modals.js

@@ -0,0 +1,228 @@
+var PureAdmin = PureAdmin || {};
+
+PureAdmin.modals = {
+  show: function (event) {
+    event.preventDefault();
+
+    var element = $(event.target).closest('*[modal]');
+    var modalType = element.attr('modal');
+
+    if ( PureAdmin.modals['_' + modalType] !== undefined ) {
+      PureAdmin.modals['_' + modalType](element);
+    } else {
+      PureAdmin.flash('alert', modalType + ' is not a valid modal type.');
+    }
+
+    return false;
+  },
+
+  _ajax: function (element) {
+    var icon = element.data('modal-icon') || 'fa-info-circle';
+    var url = element.data('modal-url') || element.attr('href');
+    var requestMethod = element.data('modal-request-method') || 'get';
+    var requestData = element.data('modal-request-data') || {};
+
+    var header = element.data('modal-text') || element.data('modal-heading');
+
+    if ( url === undefined ) {
+      PureAdmin.flashMessages.create('alert', 'You need to pass a URL to AJAX modals.');
+      return false;
+    }
+
+    var html = '<span class="fa ' + icon + '"></span>';
+
+    var modal = PureAdmin.modals._create('ajax', html);
+
+    $.ajax({
+      url:  url,
+      type: requestMethod,
+      data: requestData,
+      timeout: 40000,
+      success: function(response) {
+        modal.find('.modal').append('<div class="modal-body">' + response + '</div>').show();
+        if (header) {
+          modal.find('.modal-body').prepend('<div class="modal-header"><h3>' + header + '</h3></div>');
+        }
+
+        modal.find('.modal-background').on('click', function(event) {
+          PureAdmin.modals._destroy(modal);
+        });
+
+        element.trigger('pure-admin:modal:shown');
+      },
+      error: function(response) {
+        element.trigger('pure-admin:modal:error');
+        PureAdmin.modals._destroy(modal);
+        PureAdmin.flashMessages.create('error', 'An error occured when loading the remote URL.');
+      }
+    });
+
+    return false;
+  },
+
+  _alert: function (element) {
+    var icon = element.data('modal-icon') || 'fa-exclamation-circle';
+    var text = element.data('modal-text') || 'Oh no!';
+
+    var yesCallbackFunction = PureAdmin.modals._getCallbackFunction(element.data('modal-yes-callback'));
+
+    var yesCallback = function() {
+      if ( yesCallbackFunction !== undefined ) yesCallbackFunction(element);
+      PureAdmin.modals._destroy(modal);
+    }
+
+    var html = '\
+      <span class="fa ' + icon + '"></span>\
+      <div class="modal-body">\
+        <p>' + text + '</p>\
+      </div>\
+      <div class="modal-controls">\
+        <a class="pure-button pure-button-primary" modal-button="yes">OK</a>\
+      </div>\
+    ';
+
+    var modal = PureAdmin.modals._create('alert', html);
+
+    modal.find('*[modal-button=yes]').on('click', yesCallback);
+
+    return false;
+  },
+
+  _confirm: function (element) {
+    var icon = element.data('modal-icon') || 'fa-question-circle';
+    var text = element.data('modal-text') || 'Are you sure?';
+    var url = element.data('modal-url') || element.attr('href');
+    var requestMethod = element.data('modal-request-method') || 'get';
+
+    var yesCallbackFunction = PureAdmin.modals._getCallbackFunction(element.data('modal-yes-callback'));
+    var noCallbackFunction = PureAdmin.modals._getCallbackFunction(element.data('modal-no-callback'));
+
+    var yesCallback = function() {
+      if ( yesCallbackFunction !== undefined ) yesCallbackFunction(element);
+      PureAdmin.modals._destroy(modal);
+    }
+
+    var noCallback = function() {
+      if ( noCallbackFunction !== undefined ) noCallbackFunction(element);
+      PureAdmin.modals._destroy(modal);
+    }
+
+    if ( yesCallbackFunction === undefined ) {
+      var yesButton = '<a href="' + url + '" class="pure-button pure-button-primary"\
+        modal-button="yes" data-method="' + requestMethod + '">Yes</a>';
+    } else {
+      var yesButton = '<a class="pure-button pure-button-primary" modal-button="yes">Yes</a>';
+    }
+
+    var html = '\
+      <span class="fa ' + icon + '"></span>\
+      <div class="modal-body">\
+        <p>' + text + '</p>\
+      </div>\
+      <div class="modal-controls">\
+        <a class="pure-button" modal-button="no">No</a>\
+        ' + yesButton + '\
+      </div>\
+    ';
+
+    var modal = PureAdmin.modals._create('confirm', html);
+
+    modal.find('*[modal-button=yes]').on('click', yesCallback);
+    modal.find('*[modal-button=no], .modal-background').on('click', noCallback);
+
+    return false;
+  },
+
+  _html: function (element) {
+    var icon = element.data('modal-icon') || 'fa-info-circle';
+    var modalHtmlElement = element.data('modal-html-element');
+    var innerHtml;
+
+    if (modalHtmlElement) {
+      innerHtml = $(modalHtmlElement).html();
+    } else {
+      innerHtml = element.data('modal-html') || '';
+    }
+
+    var html = '<span class="fa ' + icon + '"></span>' + innerHtml;
+
+    var modal = PureAdmin.modals._create('html', html);
+
+    modal.find('.modal-background').on('click', function(event) { PureAdmin.modals._destroy(modal) });
+
+    return false;
+  },
+
+  _create: function(type, innerHtml) {
+    var timestamp = new Date().getTime();
+    var html = '\
+      <div id="modal-container-' + timestamp + '" class="modal-container">\
+        <div class="modal-background"></div>\
+        <div class="modal-loading"></div>\
+        <div class="modal ' + type + '">\
+          ' + innerHtml + '\
+        </div>\
+      </div>\
+    ';
+
+    $('body').addClass('no-scroll').append(html);
+
+    var modal = $('#modal-container-' + timestamp);
+
+    // if the wait is longer than the loading timeout we show a loading gif
+    setTimeout(function() { modal.find('.modal-loading').css('opacity', 1) }, PureAdmin.LOADING_TIMEOUT);
+
+    /*
+     * Allow any click on an element with modal-action="close" within the modal to close the modal.
+     */
+    modal.on('click', '*[modal-action=close]', function(event) {
+      event.preventDefault();
+      PureAdmin.modals._destroy(modal);
+    });
+
+    /*
+     * Allow the modal to be closed by sending the modal element a 'hide' event.
+     */
+    modal.on('hide', function(event) {
+      event.preventDefault();
+      PureAdmin.modals._destroy(modal);
+    });
+
+    return modal;
+  },
+
+  _destroy: function(modal) {
+    modal.trigger('pure-admin:modal:destroy');
+    modal.remove();
+    $('body').removeClass('no-scroll');
+  },
+
+  _getCallbackFunction: function(callbackString) {
+    if ( callbackString === undefined ) return undefined;
+
+    var objects = callbackString.split('.');
+
+    var getObject = function(objects, object) {
+      object = object || window;
+      object = object[objects.shift()]
+
+      if ( object === undefined ) return undefined;
+
+      return ( objects.length > 0 ) ? getObject(objects, object) : object;
+    }
+
+    return getObject(objects);
+  }
+};
+
+$(document).ready(function() {
+  $('*[modal]:not(.bound-modal)').addClass('bound-modal').on('click', PureAdmin.modals.show);
+});
+
+$(document).ajaxSuccess(function() {
+  $('*[modal]:not(.bound-modal)').addClass('bound-modal').on('click', PureAdmin.modals.show);
+});
+
+$(document).on('turbolinks:load', function() {
+  $('*[modal]:not(.bound-modal)').addClass('bound-modal').on('click', PureAdmin.modals.show);
+})

data/app/assets/javascripts/pure_admin/partial_refresh.js

@@ -0,0 +1,92 @@
+var PureAdmin = PureAdmin || {};
+
+PureAdmin.partial_refresh = {
+  loadingTimer: {},
+
+  init: function() {
+    var matchElem = '.js-partial-refresh';
+    // Only initialise once, multiple times caused loading issues
+    if (window.partial_refresh_init == true)
+      return;
+
+    /*
+    * When the ajaxSend event is triggered on matchElem, show the loading indicator.
+    */
+    $(document).on('ajax:beforeSend', matchElem, function(e, data) {
+      var target = $(e.currentTarget);
+      var uniqueId = Math.floor((Math.random() * 1000) + 1);
+
+      target.data('pure-admin-unique-id', uniqueId);
+      loading(parentWrapper(target), true, uniqueId);
+      e.stopPropagation();
+    });
+
+    /*
+    * When the ajaxSuccess event is triggered on matchElem, replace the contents.
+    */
+    $(document).on('ajax:success', matchElem, function(e, data) {
+      var target = $(e.currentTarget);
+      var uniqueId = target.data('pure-admin-unique-id');
+      var wrapper = parentWrapper(target);
+
+      // Data will be undefined if we are using Rails 5.1 since UJS dropped
+      // jQuery, so we get the data from the Event
+      wrapper.html(data || e.detail[2].response);
+      loading(wrapper, false, uniqueId);
+      e.stopPropagation();
+    });
+
+    /*
+    * When the ajaxError event is triggered on matchElem, show a flash message.
+    */
+    $(document).on('ajax:error', matchElem, function(e, xhr, status, thrown) {
+      var target = $(e.currentTarget);
+
+      PureAdmin.flashMessages.create('error', thrown || 'Error');
+      loading(parentWrapper(target), false, target.data('pure-admin-unique-id'));
+      e.stopPropagation();
+    });
+
+    /*
+    * Return the appropriate parent of the target element.
+    * If the element has a data-parent attribute, return the matching jQuery object.
+    * Otherwise, return the portlet or main-content div elements, whichever comes first.
+    * @param (jQuery Object) target
+    * @return (jQuery Object) the appropriate parent
+    */
+    function parentWrapper(target) {
+      if (target.data('parent')) {
+        return $(target.data('parent'));
+      } else {
+        return target.parents('.portlet-body, #main-content').first();
+      }
+    }
+
+    /*
+    * Adds a loading class to the given element if 'loading' is not false and removes it if 'loading'
+    * is false.
+    * @param elem (jQuery Object)
+    * @param loadingStatus (Boolean)
+    */
+    function loading(elem, loadingStatus, uniqueId) {
+      if (loadingStatus !== false) {
+        PureAdmin.partial_refresh.loadingTimer[uniqueId] = setTimeout(function() {
+          // if the wait is longer than the loading timeout we show a loading animation
+          elem.addClass('loading');
+        }, PureAdmin.LOADING_TIMEOUT);
+      } else {
+        clearTimeout(PureAdmin.partial_refresh.loadingTimer[uniqueId]);
+        delete PureAdmin.partial_refresh.loadingTimer[uniqueId];
+        elem.removeClass('loading');
+      }
+    }
+    window.partial_refresh_init = true;
+  }
+};
+
+// Init via Turbolinks load if that exists
+if (typeof(Turbolinks) == 'undefined') {
+  $(document).ready(PureAdmin.partial_refresh.init);
+} else {
+  $(document).on('turbolinks:load', PureAdmin.partial_refresh.init);
+}

data/app/assets/javascripts/pure_admin/portlets.js

@@ -0,0 +1,139 @@
+var PureAdmin = PureAdmin || {};
+
+PureAdmin.portlets = {
+
+  loadingTimer: {},
+
+  /*
+   * Toggles the 'expanded' class for the clicked portlet if it is closable.
+   * Additionally calls the loadPortlet function if the portlet is now expanded.
+   * @param e (Event)
+   */
+  toggle: function(e) {
+    e.preventDefault();
+    var portlet = $(e.target).parents('.portlet');
+    if (portlet.data('closable') === true) {
+      portlet.toggleClass('expanded');
+
+      if (portlet.hasClass('expanded')) {
+        PureAdmin.portlets.loadPortlet(portlet);
+      }
+    }
+  },
+
+  /*
+   * Sets the body of the given portlet to be the given newContent.
+   * @param portlet (jQuery Object)
+   * @param newContent (jQuery Object)
+   */
+  setPortletBody: function(portlet, newContent) {
+    portlet.find('.portlet-body').html(newContent);
+  },
+
+  /*
+   * Loads remote content to be inserted into the given portlet.
+   * If a URL is given, this will be used as the endpoint. Otherwise the value of data-source will
+   * be used.
+   * This function sets a sentinal value to determine if the content has already been loaded.
+   * If this sentinal value is present, the function will return early.
+   * Similarly if no source URL can be found, the function will return early.
+   * @param portlet (jQuery Object)
+   * @param url (String) - optional
+   */
+  loadPortlet: function(portlet, url) {
+    var source = (url || portlet.data('source'));
+
+    // Return early if the contents have already been loaded or if no source can be found.
+    if (portlet.data('body-loaded') || !source) { return; }
+
+    // If this function has been called before the toggle function, the portlet will not be expanded.
+    // To save duplicating that logic here, we just rely on the click handler to intercept a
+    // simulated click on the title and let the toggle function call this function again.
+    if (!portlet.hasClass('expanded')) {
+      portlet.find('.portlet-heading').click();
+      return;
+    }
+
+    PureAdmin.portlets.loading(portlet, true, source);
+
+    $.ajax(source, {
+      success: function(data, textStatus, jqXHR) {
+        PureAdmin.portlets.setPortletBody(portlet, $(data));
+      },
+      error: function(jxXHR, textStatus, thrown) {
+        PureAdmin.portlets.setPortletBody(portlet, PureAdmin.portlets.errorResponse(thrown));
+      },
+      complete: function(jxXHR, textStatus) {
+        portlet.data('body-loaded', true);
+        PureAdmin.portlets.loading(portlet, false, source);
+      }
+    });
+  },
+
+  /*
+   * Adds a loading class to the given element if 'loading' is not false and removes it if 'loading'
+   * is false.
+   * @param elem (jQuery Object)
+   * @param loading (Boolean)
+   */
+  loading: function(elem, loading, uniqueId) {
+    if (loading !== false) {
+      if (!PureAdmin.portlets.loadingTimer[uniqueId]) {
+        PureAdmin.portlets.loadingTimer[uniqueId] = setTimeout(function() {
+          // if the wait is longer than the loading timeout we show a loading animation
+          elem.addClass('loading');
+        }, PureAdmin.LOADING_TIMEOUT);
+      }
+    } else {
+      clearTimeout(PureAdmin.portlets.loadingTimer[uniqueId]);
+      delete PureAdmin.portlets.loadingTimer[uniqueId];
+      elem.removeClass('loading');
+    }
+  },
+
+  /*
+   * Creates a flash message then returns a jQuery object that shows the type of error if given,
+   * or a generic message.
+   * @param thrown (String) - optional
+   * @return (jQuery Object)
+   */
+  errorResponse: function(thrown) {
+    PureAdmin.flash_messages.create('error', 'An error occured when loading the remote URL.');
+    return $('<p class="text-error text-center"><i class="fa fa-exclamation-triangle"></i> "' +
+      (thrown || 'Error') + '" loading content</p>');
+  },
+
+  /*
+   * Load portlets that have a data-expand attribute
+   */
+  autoExpand: function() {
+    $('.portlet[data-expand]').each(function() {
+      PureAdmin.portlets.loadPortlet($(this));
+    });
+  },
+
+  ready: function() {
+    // Automatically open portlets that match the anchor
+    var anchorValue = document.location.toString().split("#")[1];
+    if (typeof anchorValue !== 'undefined' && anchorValue.length !== 0) {
+      var anchorPortlet = $('.portlet.' + anchorValue);
+      PureAdmin.portlets.loadPortlet(anchorPortlet);
+    }
+
+    // Automatically open portlets that have the data-expand attribute set
+    PureAdmin.portlets.autoExpand();
+  }
+};
+
+/*
+ * Intercepts clicks on the portlet title and calls the toggle function.
+ */
+$(document).on('click', '.portlet-heading', PureAdmin.portlets.toggle);
+
+$(document).ready(PureAdmin.portlets.ready);
+$(document).on('turbolinks:load', PureAdmin.portlets.ready);
+
+$(document).ajaxSuccess(function() {
+  // Automatically open portlets that have the data-expand attribute set
+  PureAdmin.portlets.autoExpand();
+});