fae-railsz 2.1.0

data/app/assets/javascripts/fae/fae_init.js

@@ -0,0 +1,8 @@
+/* global Fae, FCH */
+
+// This is a separate file to keep application.js pure
+;(function() {
+  window.FCH = new FrobCoreHelpers(Fae, {
+    mobile_fps: false
+  });
+})();

data/app/assets/javascripts/fae/form/_ajax.js

@@ -0,0 +1,380 @@
+/* global Fae, fae_chosen, fileinputer, FCH, Cookies */
+
+/**
+ * Fae AJAX
+ * @namespace form.ajax
+ * @memberof form
+ */
+Fae.form.ajax = {
+
+  init: function() {
+    this.$addedit_form = $('.js-addedit-form, .js-index-addedit-form');
+    this.$filter_form = $('.js-filter-form');
+
+    this.addEditLinks();
+    this.addEditSubmission();
+
+    this.addCancelLinks();
+
+    this.imageDeleteLinks();
+    this.htmlListeners();
+
+    this.deleteNoForm();
+  },
+
+  /**
+   * Click event listener for add and edit links applied to both index and nested forms
+   */
+  addEditLinks: function() {
+    var _this = this;
+
+    this.$addedit_form.on('click', '.js-add-link, .js-edit-link', function(ev) {
+      ev.preventDefault();
+      var $this = $(this);
+      var $parent = $this.hasClass('js-index-add-link') ? $('.js-addedit-form') : $this.closest('.js-addedit-form');
+
+      // scroll to the last column of the tbody, where the form will start
+      FCH.smoothScroll($parent.find('tbody tr:last-child'), 500, 450, -20);
+
+      _this._addEditActions($this.attr('href'), $parent.find('.js-addedit-form-wrapper'));
+    });
+  },
+
+  /**
+   * Once add or edit is clicked, load remote data, add it to the DOM and initialize listeners on the new create form
+   * @protected
+   * @param {String} remote_url - Remote page to load form from
+   * @param {jQuery} $wrapper - Whole form container
+   * @see addEditLinks
+   */
+  _addEditActions: function(remote_url, $wrapper) {
+
+    $.get(remote_url, function(data){
+      // check to see if the content is hidden and slide it down if it is.
+      if ($wrapper.is(':hidden')) {
+        // replace the content of the form area and initiate the chosen and fileinputer
+        $wrapper.html(data).find('.select select').fae_chosen({ width: '300px' });
+        $wrapper.find('.input.file').fileinputer();
+        $wrapper.slideDown();
+
+      } else {
+        // if it is visible, replace its content by retaining height
+        $wrapper.height($wrapper.height());
+
+        // replace the content of the form area and then remove that height and then chosen and then fileinputer
+        $wrapper.html(data).css('height', '').find('.select select').fae_chosen();
+        $wrapper.find('.input.file').fileinputer();
+      }
+
+      // Bind validation to nested form fields added by AJAX
+      Fae.form.validator.bindValidationEvents($('.nested-form'));
+
+      // Reinitialize form elements
+      Fae.form.dates.initDatepicker();
+      Fae.form.dates.initDateRangePicker();
+      Fae.form.color.initColorpicker();
+      Fae.form.slugger.addListener();
+      Fae.form.validator.length_counter.init();
+      Fae.form.text.initMarkdown();
+      Fae.form.checkbox.setCheckboxAsActive();
+
+      $wrapper.find('.hint').hinter();
+    });
+  },
+
+  /**
+   * Click event listener for cancel links applied to both index and nested forms; clears form to prevent saving errors
+   */
+  addCancelLinks: function() {
+    this.$addedit_form.on('click', '.js-cancel-nested', function(ev) {
+      ev.preventDefault();
+      var $this = $(this);
+      var $form_wrapper = $this.closest('.js-addedit-form-wrapper');
+
+      if ($form_wrapper.length) {
+        $form_wrapper.slideUp('normal', function(){
+          $form_wrapper.empty();
+        });
+      }
+    });
+  },
+
+  /**
+   * Once form is submitted and receives a successful AJAX response, replace form data and initialize listeners on nested elements
+   * @fires {@link navigation.fadeNotices}
+   */
+  addEditSubmission: function() {
+    var _this = this;
+
+    this.$addedit_form.on('ajax:success', function(evt, data, status, xhr){
+
+      var $target = $(evt.target);
+
+      // ignore calls not returning html
+      if (data !== ' ' && $(data)[0]) {
+        var $this = $(this);
+
+        // if its the new or old remotipart, return the html
+        var $html = $(data).length === 1 ? $(data) : $(data)[2];
+
+        // if it returns data inside textarea, strip that out
+        if ( $($html).is('textarea') ) {
+          $html = $( $($html).val() );
+        }
+
+        if ($html) {
+          if($html.hasClass('js-addedit-form') || $html.hasClass( 'js-index-addedit-form' )) {
+            // we're returning the table, replace everything
+            _this._addEditReplaceAndReinit($this, $html.html(), $target);
+          } else if ($html.hasClass('nested-form')) {
+
+            // we're returning the form due to an error, just replace the form
+            $this.find( '.nested-form' ).replaceWith(data);
+            $this.find('.select select').fae_chosen();
+            $this.find('.input.file').fileinputer();
+
+            Fae.form.dates.initDatepicker();
+            Fae.form.dates.initDateRangePicker();
+            Fae.form.color.initColorpicker();
+            Fae.form.validator.length_counter.init();
+            Fae.form.checkbox.setCheckboxAsActive();
+            Fae.form.text.initMarkdown();
+
+            FCH.smoothScroll($this.find('.js-addedit-form-wrapper'), 500, 100, 120);
+          }
+        }
+
+        if (_this.$filter_form.length) {
+          _this.filterSubmission();
+        }
+
+        Fae.navigation.fadeNotices();
+
+      } else if ($target.hasClass('js-asset-delete')) {
+        // handle remove asset links on nested forms
+        var $parent = $target.closest('.asset-actions');
+
+        $parent.fadeOut(function(){
+          $parent.next('.asset-inputs').fadeIn();
+        });
+      }
+
+      Fae.navigation.lockFooter();
+    });
+  },
+
+  /**
+   * Replace AJAX'd form and add calls to all new HTML elements
+   * @protected
+   * @param $el {jQuery} - Object to be replaced
+   * @param html {String} - New HTML
+   * @param $target {jQuery} - Original form wrapper
+   * @see addEditSubmission
+   */
+  _addEditReplaceAndReinit: function($el, html, $target) {
+    var $form_wrapper = $el.find('.js-addedit-form-wrapper');
+
+    // Private function replaces parent element with HTML and reinits select and sorting
+    function regenerateHTML() {
+      // .html() is not replacing it properly
+      $el.get(0).innerHTML = html;
+      $el.find('.select select').fae_chosen();
+      Fae.tables.rowSorting();
+      Fae.navigation.fadeNotices();
+
+      if ($el.find('.js-content-header').length) {
+        Fae.navigation.stickyHeaders(true);
+      }
+    }
+
+    // if there's a form wrap, slide it up before replacing content
+    if ($form_wrapper.length) {
+      $form_wrapper.slideUp(regenerateHTML);
+
+    } else {
+      regenerateHTML();
+    }
+
+    if (!$target.hasClass('js-delete-link')) {
+      FCH.smoothScroll($el.parent(), 500, 100, 120);
+    }
+  },
+
+  /**
+   * Attach filter listeners
+   */
+  filterSubmission: function() {
+    var _this = this;
+
+    _this.$filter_form
+      .on('submit', function() {
+        $('.js-reset-btn').show();
+      })
+
+      // On filter change, update table data
+      .on('ajax:success', function(evt, data, status, xhr){
+        $(this).next('table').replaceWith( $(data).find('table').first() );
+        $('.pagination').replaceWith( $(data).find('.pagination').first() );
+
+        Fae.tables.columnSorting();
+        Fae.tables.rowSorting();
+        Fae.tables.sortColumnsFromCookies();
+        Fae.navigation.lockFooter();
+      })
+
+      // Reset filter button
+      .on('click', '.js-reset-btn', function(ev) {
+        ev.preventDefault();
+
+        var $form = $(this).closest('form');
+
+        $form.get(0).reset();
+        $form.find('select').val('').trigger('chosen:updated');
+        // reset hashies
+        window.location.hash = '';
+
+        // Spoof form submission
+        $form.submit();
+
+        $(this).hide();
+      })
+
+      .on('click', '.table-filter-keyword-wrapper i', function() {
+        _this.$filter_form.submit();
+      })
+
+      .on('change', 'select', function() {
+        _this.$filter_form.submit();
+        // Update hash when filter dropdowns changed
+        var key = $(this).attr('id').split('filter_')[1];
+        var value = $(this).val();
+        _this.fry.update(key, value);
+      });
+  },
+
+  /**
+   * Delete or replace file for non-AJAX'd fields
+   */
+  deleteNoForm: function() {
+    $('.js-asset-delete').on('ajax:success', function(){
+      var $this = $(this);
+      if (!$this.closest('.js-addedit-form-wrapper').length) {
+        // handle remove asset links
+        var $parent = $this.closest('.asset-actions');
+
+        $parent.fadeOut(function(){
+          $parent.next('.asset-inputs').fadeIn();
+        });
+      }
+    });
+  },
+
+  /**
+   * Attach delete listener to images uploaded
+   */
+  imageDeleteLinks: function() {
+    $('.imageDeleteLink').click(function(e) {
+      e.preventDefault();
+      var $this = $(this);
+
+      if (confirm('Are you sure you want to delete this image?')) {
+        $.post($this.attr('href'), 'html');
+        $this.parent().next().show();
+        $this.parent().hide();
+      }
+    });
+  },
+
+  /**
+   * Attaching click handlers to #js-main-content to allow ajax replacement
+   * @todo Clean this up, moving listeners into their respective component classes (select, checkbox, etc.)
+   */
+  htmlListeners: function() {
+    $('#js-main-content, .login-form > form')
+
+      /**
+       * For the yes/no slider
+       */
+      .on('click', '.slider-wrapper', function(e){
+        e.preventDefault();
+        $(this).toggleClass('slider-yes-selected');
+      })
+
+      /**
+       * The settings menu for tables and checkboxes
+       */
+      .on('click', '.boolean label, .js-checkbox-wrapper label', function(e){
+        var $this = $(this);
+
+        if(!$this.hasClass('disabled') && !$this.hasClass('readonly')) {
+          $this.toggleClass('active');
+        }
+      })
+
+      /**
+       * Stop event bubbling and running the above toggleClass twice
+       */
+      .on('click', '.boolean :checkbox, .js-checkbox-wrapper :checkbox', function(e){
+        e.stopPropagation();
+      })
+
+      /**
+       * Support for a focus state on radio collections
+       */
+      .on('focus blur', '.radio_collection :radio', function(e) {
+        $(this)
+          .closest('.input.radio_collection')
+          .toggleClass('focused', $(this).has(':focus'));
+      })
+
+      /**
+       * Support for a focus state on checkboxes
+       */
+      .on('focus blur', '.boolean :checkbox, .js-checkbox-wrapper :checkbox', function(e) {
+        $(this)
+          .closest('label.boolean, span.checkbox')
+          .toggleClass('focused', $(this).has(':focus'));
+      })
+
+      /**
+       * Support spacebar toggling for checkboxes
+       */
+      .on('keydown', '.boolean, .js-checkbox-wrapper :checkbox', function(e) {
+        if (e.which === 32) {
+          e.preventDefault();
+          $(':checkbox:focus')
+            .closest('label')
+            .trigger('click');
+        }
+      })
+
+      /**
+       * Support for shift+tab off of ms-list element.
+       * By default, $.multiSelect() plugin captures shift+tab and disgards it
+       * @todo This entire method feels very brittle. Possible alternative:
+       * - Create an index of all focusable form elements on page load / DOM mutation
+       * - Use this index to navigate upwards from .ms-list element
+      */
+      .on('keydown', '.ms-list', function(e) {
+        if (e.which === 9 && e.shiftKey) {
+          e.preventDefault();
+
+          // Sniff out the previous focusable element
+          var $prevFocusable = $(this)
+            .closest('.input')
+            .prevAll('.input:not(.hidden):first') // Ugh X(
+            .find('input[type!=hidden][type!=file], select, button, textarea') // Yuck :(
+            .first();
+
+          // Trigger focus
+          $prevFocusable.focus();
+
+          // Check for select instance and further trigger focus via Chosen API
+          if ($prevFocusable.is('select')) {
+            $prevFocusable.trigger('chosen:activate');
+          }
+        }
+      });
+  }
+
+};

data/app/assets/javascripts/fae/form/_cancel.js

@@ -0,0 +1,38 @@
+/* global Fae */
+
+/**
+ * Fae form cancel
+ * @namespace form.cancel
+ * @memberof form
+ */
+Fae.form.cancel = {
+
+  init: function() {
+    this.detectCancelledUrls();
+    this.addCancelParam();
+  },
+
+  /**
+   * If URL has cancelled param, update the history
+   */
+  detectCancelledUrls: function() {
+    var params = window.location.search;
+    if (params.length && params.toLowerCase().indexOf("cancelled") >= 0 && params.indexOf("&") !== 0) {
+      window.history.replaceState(null, null, window.location.pathname);
+    };
+  },
+
+  /**
+   * Once any field changes, add cancelled param to button to ensure user knows data will be lost
+   */
+  addCancelParam: function() {
+    function updateCancel() {
+      var $cancel_btn = $('#js-header-cancel');
+      var new_href = $cancel_btn.attr('href') + '?cancelled=true';
+      $cancel_btn.attr('href', new_href);
+      $('form').off('change', 'input, textarea, select', updateCancel);
+    }
+
+    $('form').on('change', 'input, textarea, select', updateCancel);
+  }
+};

data/app/assets/javascripts/fae/form/_filtering.js

@@ -0,0 +1,276 @@
+/* global Fae, fae_chosen, fileinputer, FCH, Cookies */
+
+/**
+ * Fae Filtering, Sorting and Paging
+ * @namespace form.filtering
+ * @memberof form
+ */
+Fae.form.filtering = {
+
+  init: function() {
+    this.$filter_form = $('.js-filter-form');
+    this.$pagination = $('.pagination');
+    this.has_hash_on_load_and_cookie = false;
+
+    // init only on pages with filering, sorting or paging
+    if (this.$filter_form.length || this.$pagination.length || $('.js-sort-column').length) {
+      this.applyCookies();
+      var window_hash = window.location.hash;
+      var has_hash_on_load = window_hash.length > 2;
+      this.fry = new Fryr(this._refreshTable, {}, has_hash_on_load);
+
+      // this.fry.params needs to be set to the "deep link" passed params
+      if(has_hash_on_load) {
+        this.fry.parse(window_hash);
+      }
+
+      this.setFilterDropDowns();
+      this.filterFormListeners();
+      this.paginationListeners();
+      this.sortingSetup();
+    }
+  },
+
+  /**
+   * Fryr callback, POSTs to Fae's endpoint and updates the view
+   */
+  _refreshTable: function() {
+    // hardcode _this because this === Fryr object
+    var _this = Fae.form.filtering;
+
+    if (_this.$filter_form.length) {
+      post_url = _this.$filter_form.attr('action');
+      $current_table = _this.$filter_form.next('table');
+    } else {
+      post_url = _this.$pagination.data('filter-path');
+      $current_table = _this.$pagination.prevAll(":visible:first");
+    }
+
+    var $results_table = ($(".js-results-table").length) ? $(".js-results-table").first() : $current_table;
+
+    $results_table.addClass('loading-fade');
+
+    $.post(post_url, this.params, function(data){
+      var $data = $(data);
+      var $table_from_data = $data.find('table').first();
+
+      // replace table
+      $results_table.replaceWith($table_from_data);
+
+      // replace sticky header
+      $('.sticky-table-header thead').html($table_from_data.find('thead').html());
+      // replace pagination
+      _this.$pagination.html($data.find('.pagination').first().html());
+
+      // reinit a few things on the fresh table
+      Fae.tables.columnSorting();
+      Fae.tables.rowSorting();
+      Fae.navigation.lockFooter();
+
+      _this.sortingSetup();
+
+      // dont set the cookie if it's a "deep link" and they have an existing cookie - leave that intact with their old saved filter
+      if (!_this.has_hash_on_load_and_cookie) {
+        _this.setCookie();
+      }
+    });
+  },
+
+
+  /**
+   * Adds listeners to the filter forms
+   */
+  filterFormListeners: function() {
+    var _this = this;
+
+    this.$filter_form
+      // update search param when form submits
+      .on('submit', function(ev) {
+        $('.js-reset-btn').show();
+        _this.updateFryrAndResetPaging('search', $('#filter_search').val());
+        return false;
+      })
+
+      // update search param when search btn is clicked
+      .on('click', '.table-filter-keyword-wrapper i', function() {
+        _this.updateFryrAndResetPaging('search', $('#filter_search').val());
+      })
+
+      // reset filter button
+      .on('click', '.js-reset-btn', function(ev) {
+        var $this = $(this);
+        ev.preventDefault();
+
+        // reset params and form selects
+        _this.fry.merge({ page: '' }, true);
+        $('#filter_search').val('');
+        $this.closest('form').find('select').val('').trigger('chosen:updated');
+        $this.hide();
+      })
+
+      // update hash when filter dropdowns changed
+      .on('change', 'select', function() {
+        // get key and value from select
+        var key = $(this).attr('id').split('filter_')[1];
+        var value = $(this).val();
+
+        _this.updateFryrAndResetPaging(key, value);
+
+        $('.js-reset-btn').show();
+      });
+  },
+
+  /**
+   * Sets filter dropdowns on page load based on Fryr params
+   */
+  setFilterDropDowns: function() {
+    // Exit early if this.fry.params is blank
+    if ($.isEmptyObject(this.fry.params)) {
+      return;
+    }
+
+    // Loop through all available this.fry.params to find the select menu and the proper option
+    $.each(this.fry.params, function(key, value) {
+      var $select = $('.js-filter-form .table-filter-group #filter_' + key);
+
+      if($select.length) {
+        var $option = $select.find('option[value="' + value + '"]');
+
+        // Ensure we find the option and that it isn't already chosen
+        if($option.length && $option.prop('selected') !== 'selected') {
+          $option.prop('selected', 'selected');
+          $select.trigger('chosen:updated');
+        }
+      }
+    });
+
+    $('.js-reset-btn').show();
+  },
+
+  /**
+   * Updates a Fryr param while reseting paging
+   * Use for most cases of pushing a single params to Fryr, as paging will always reset in those cases
+   * @param {string} key - The Fryr param key to be changed
+   * @param {string} value - The value to be changed to
+   */
+  updateFryrAndResetPaging: function(key, value) {
+    var values_obj = { page: '' };
+    values_obj[key] = value;
+    this.fry.merge(values_obj);
+  },
+
+  /**
+   * Adds listeners to pagination
+   */
+  paginationListeners: function() {
+    var _this = this;
+    // update params when pagination link clicked
+    $('.pagination').on('click', 'a', function(ev) {
+      ev.preventDefault();
+      _this.fry.merge({ page: $(this).data('page') });
+    })
+  },
+
+  /**
+   * Wrapper method to setup HTML and listeners to support sorting
+   * Called on load and this._refreshTable()
+   */
+  sortingSetup: function() {
+    this._addSortingClasses();
+    this._addSortingListeners();
+  },
+
+  /**
+   * Updates sortable table headers
+   */
+  _addSortingClasses: function() {
+    // get sort_by and sort_direction from Fryr
+    var sort_by = this.fry.params.sort_by;
+    var sort_direction = this.fry.params.sort_direction;
+    if (!sort_direction) {
+      sort_direction = 'asc';
+    }
+
+    var $sortable_th = $('th[data-sort]');
+    // add sort_direction class to current sorted column
+    $sortable_th.filter('[data-sort="'+sort_by+'"]').addClass('-'+sort_direction);
+    // add .th-sortable-title to support styling
+    $sortable_th.not(':has(.th-sortable-title)').wrapInner('<div class="th-sortable-title"></div>');
+  },
+
+  /**
+   * Adds listeners to the sortable table headers
+   */
+  _addSortingListeners: function() {
+    var _this = this;
+
+    // Fizzle if listeneres have already been attached
+    if (this._are_sorting_listeners_setup === true) { return; }
+
+    $('body').on('click', 'th[data-sort]', function() {
+      var $this = $(this);
+      var new_direction = 'asc';
+
+      // update sort_direction class
+      if ($this.hasClass('-asc')) {
+        new_direction = 'desc';
+        $this.addClass('-desc').removeClass('-asc');
+      } else {
+        $this.addClass('-asc').removeClass('-desc');
+      }
+
+      // update Fryr
+      _this.fry.merge({
+        sort_by: $this.data('sort'),
+        sort_direction: new_direction,
+        page: ''
+      });
+    });
+
+    // To ensure listeners are only attached once
+    this._are_sorting_listeners_setup = true;
+  },
+
+  /**
+   * Sets the filter form's cookie to the Fryr params
+   */
+  setCookie: function() {
+    var cookie_name = this.$filter_form.attr('data-cookie-key');
+    Cookies.set(cookie_name, this.fry.params);
+  },
+
+  /**
+   * If cookies are available, load them into the hash
+   */
+  applyCookies: function() {
+    var cookie_key = $('.js-filter-form').attr('data-cookie-key');
+
+    if (cookie_key) {
+      var cookie = Cookies.getJSON(cookie_key);
+
+      if (!$.isEmptyObject(cookie)) {
+
+        // exit now if it's a "deep link" so the passed params get used instead of saved cookie params
+        if (window.location.hash.length > 2) {
+          this.has_hash_on_load_and_cookie = true;
+          return false;
+        }
+
+        var keys = Object.keys(cookie);
+        var hash = '?';
+
+        for(var i = 0; i < keys.length; i++) {
+          if (hash !== '?') {
+            hash += '&';
+          }
+          hash += keys[i] + '=' + cookie[keys[i]];
+        }
+
+        if (hash !== '?') {
+          window.location.hash = hash;
+        }
+      }
+    }
+  }
+
+};