fae-railsz 2.1.0

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

@@ -0,0 +1,44 @@
+(function ( $ ) {
+  'use strict';
+
+  /**
+   * This plugin sets chosen defaults and massages options based on class names.
+   * @function external:"jQuery.fn".fae_chosen
+   */
+  $.fn.fae_chosen = function( options ) {
+    var defaults = {
+      disable_search_threshold: 10
+    };
+
+    var settings = $.extend( {}, defaults, options );
+
+    return this.each(function() {
+      var $this = $(this);
+
+      // remove threshold if show_search class is added from `search: true`
+      if ($this.hasClass('select-search')) {
+        settings.disable_search_threshold = 0;
+      }
+
+      $this.chosen(settings);
+
+      // add handling for bottom of viewport / drop-up support
+      $this.on('chosen:showing_dropdown', function(event, params) {
+        var $chosen_container = $(event.target ).next('.chosen-container');
+        var $dropdown = $chosen_container.find('.chosen-drop');
+        var results_container_max_height = parseInt($dropdown.find('.chosen-results').css('max-height'));
+        var results_container_top_offset = 40; // to account for possibility of chosen search input
+        var dropdown_top = $dropdown.offset().top - FCH.$window.scrollTop();
+
+        if (dropdown_top + results_container_max_height + results_container_top_offset > FCH.dimensions.wh) {
+          $chosen_container.addClass('chosen-drop-up');
+        }
+      });
+      $this.on('chosen:hiding_dropdown', function(event, params) {
+         $(event.target).next('.chosen-container').removeClass('chosen-drop-up');
+      });
+    });
+
+  };
+
+}( jQuery ));

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

@@ -0,0 +1,178 @@
+(function ( $ ) {
+  'use strict';
+
+  /**
+   * Private initialization of FileInputer object.
+   * @private
+   * @class
+   */
+  function FileInputer($el, options) {
+    /** Inherited settings from jQuery initialization */
+    this.options = options;
+
+    /** @type {jQuery} */
+    this.$el = $el;
+    this._drawElements();
+    this.changeListener();
+
+    return this;
+  }
+
+  /**
+   * Create jQuery objects of all necessary components and add them to the DOM
+   * @protected
+   * @fires FileInputer._buttonListener
+   * @fires FileInputer._deleterListener
+   */
+  FileInputer.prototype._drawElements = function() {
+    this.$input = this.$el.find('input[type="file"]');
+
+    // position the input off screen
+    this.$input.css({
+      position: 'absolute',
+      top: 0,
+      left: '-9999px',
+      visibility: 'hidden'
+    });
+
+    //save the reference for each element to object
+    this.$inputer = $('<div />', {
+      class: this.options.wrapper_class
+    });
+
+    this.$text = $('<span />', {
+      text: this.options.file_text
+    });
+
+    var $button = $('<button />', {
+      class: this.options.button_class,
+      attr: {
+        type: 'button'
+      },
+      text: this.options.choose_text
+    });
+
+    var $deleter = $('<div />', {
+      class: this.options.delete_class
+    });
+
+    this.$inputer
+      .append($button)
+      .append(this.$text)
+      .append($deleter);
+
+    this.$el.append(this.$inputer);
+
+    this._deleterListener($deleter);
+    this._buttonListener($button);
+  };
+
+  /**
+   * Redirect the click on the created visuals to the file input area
+   * @protected
+   * @param {jQuery} $button
+   */
+  FileInputer.prototype._buttonListener = function($button) {
+    var _this = this;
+
+    $button.on('click', function(){
+      _this.$input.click();
+    });
+  };
+
+  /**
+   * Clear input, set upload text, and remove active text to destroy appearance of a file uploaded
+   * @protected
+   * @param {jQuery} $deleter
+   */
+  FileInputer.prototype._deleterListener = function($deleter) {
+    var _this = this;
+
+    $deleter.on('click', function() {
+      _this.$input.val('');
+      _this.$text.text(_this.options.file_text);
+      _this.$inputer.removeClass(_this.options.active_class);
+    });
+  };
+
+  /**
+   * On $input change (a file is uploaded), display file name and set field to active
+   */
+  FileInputer.prototype.changeListener = function() {
+    var _this = this;
+
+    // this is to get the filename and present it next to the button
+    _this.$input.on('change', function(e){
+      var $this = $(this);
+
+      if (_this._checkSize()) {
+        _this.$text.text( $this.val().replace('C:\\fakepath\\', '') );
+
+        if ($this.val() !== '') {
+          _this.$inputer.addClass( _this.options.active_class );
+        }
+      } else {
+        e.preventDefault();
+      }
+    });
+  };
+
+  /**
+   * Determine if file uploaded exceeds provided limit
+   * @private
+   * @return {Boolean}
+   */
+  FileInputer.prototype._checkSize = function() {
+    var limit = parseInt( this.$input.attr('data-limit') );
+    var input_files = this.$input.get(0).files;
+
+    // IE9 doesn't support size lookups; exit early and return true to clear validation
+    if (typeof input_files === undefined) {
+      return true;
+    }
+
+    var size = input_files[0].size / 1024 / 1024;
+
+    var error_obj = $('<span />', {
+      class: 'error',
+      text: this.$input.attr('data-exceeded').replace('###', limit)
+    });
+
+    if (size > limit) {
+      this.$input.after( error_obj );
+      this.$el.addClass('field_with_errors');
+
+      return false;
+    } else {
+      this.$input.next('.error').remove();
+      this.$el.removeClass('field_with_errors');
+
+      return true;
+    }
+  };
+
+  /**
+   * A small helper library for displaying a file input field
+   * @function external:"jQuery.fn".fileinputer
+   */
+  $.fn.fileinputer = function( options ) {
+
+    var defaults = {
+      wrapper_class: 'asset-actions',
+      button_class: 'button',
+      choose_text: 'Choose File',
+      file_text: 'No File Chosen',
+      active_class: 'active',
+      delete_class: 'asset-delete'
+    };
+
+    // unite the default options with the passed-in ones
+    var settings = $.extend( {}, defaults, options );
+
+    return this.each(function() {
+      var file = new FileInputer($(this), settings);
+    });
+
+  };
+
+}( jQuery ));

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

@@ -0,0 +1,111 @@
+/* global FCH */
+
+(function ( $ ) {
+  'use strict';
+
+  /**
+   * Display inline modal of helper text. This is the bread and butter of the plugin.
+   * @private
+   * @param {jQuery} $el - The object to display the text relative to
+   */
+  function showModal($el) {
+    var top = $el.offset().top - FCH.$window.scrollTop();
+    var left = $el.offset().left + 20;
+    var $hint = $el.closest('label').siblings('.hint');
+    var new_height = $hint.height() + 80;
+    var width = 250;
+
+    if ($hint.find('.youtube-hint').length) {
+      width = 570;
+      new_height -= 40;
+    }
+
+    $hint.modal({
+      minHeight: new_height,
+      minWidth: width,
+      maxWidth: width,
+      position: [top, left],
+      overlayClose: true,
+      opacity: 0,
+      containerCss: { position: 'absolute' }
+    });
+
+  }
+
+  /**
+   * Private initialization of Hinter object.
+   * @class
+   */
+  function Hinter($el, options) {
+    /** Inherited settings from jQuery initialization */
+    this.options = options;
+    this._drawElements($el);
+    this._clickListener();
+    // this._hoverListener();
+
+    return this
+  }
+
+  /**
+   * Create jQuery object of the $icon and add it to the DOM
+   * @protected
+   */
+  Hinter.prototype._drawElements = function($el) {
+    var $label = $el.parent().find('.label_inner');
+
+    //create the icon
+    this.$icon = $('<span />', {
+      class: this.options.icon_class + ' ' + this.options.style_class
+    });
+
+    this.$icon.appendTo($label);
+  };
+
+  /**
+   * Show the modal on click
+   * @protected
+   */
+  Hinter.prototype._clickListener = function() {
+    this.$icon.click(function(){
+      showModal( $(this) );
+    });
+  };
+
+  /**
+   * Allow hover to do the same as a clicking
+   */
+  Hinter.prototype._hoverListener = function(){
+    var $clicker = $('.hinter-clicker');
+
+    this.$icon.mouseenter(function() {
+      $clicker.addClass('hovered');
+      showModal( $(this) );
+    });
+
+    this.$icon.mouseleave(function() {
+      $clicker.removeClass('hovered');
+      $.modal.close();
+    });
+  };
+
+  /**
+   * Display helper text in a very small inline modal
+   * @function external:'jQuery.fn'.hinter
+   */
+  $.fn.hinter = function( options ) {
+
+    var defaults = {
+      icon_class: 'icon-support',
+      style_class: 'hinter-clicker'
+    };
+
+    // unite the default options with the passed-in ones
+    var settings = $.extend( {}, defaults, options );
+
+    return this.each(function() {
+      var hint = new Hinter($(this), settings);
+    });
+
+  };
+
+}( jQuery ));

data/app/assets/javascripts/fae/form/inputs/_checkbox.js

@@ -0,0 +1,27 @@
+/* global Fae */
+
+/**
+ * Fae form checkbox
+ * @namespace form.checkbox
+ * @memberof form
+ */
+Fae.form.checkbox = {
+
+  init: function() {
+    this.setCheckboxAsActive();
+  },
+
+  /**
+   * Run through the checkboxes and see if they are checked. apply js class for styling.
+   */
+  setCheckboxAsActive: function() {
+    $('.boolean label, .js-checkbox-wrapper label').each(function(){
+      var $this = $(this);
+
+      if ($this.find(':checkbox:checked').length) {
+        $this.addClass('active');
+      }
+    });
+  }
+
+};

data/app/assets/javascripts/fae/form/inputs/_color.js

@@ -0,0 +1,42 @@
+/* global Fae, colorpicker, FCH */
+
+/**
+ * Fae form color
+ * @namespace form.color
+ * @memberof form
+ */
+
+Fae.form.color = {
+  init: function() {
+    this.initColorpicker();
+  },
+
+  /**
+   * Initialize colorpicker
+   */
+  initColorpicker: function(e) {
+    var includeAlphaSlider = $('.alpha-slider').length > 0
+
+    var settings = {
+      opacity: includeAlphaSlider,
+      positionCallback: function($elm) {
+        var inputOffset = $elm.offset().top;
+        var distanceToBottom = $(document).height() - inputOffset;
+        var top = distanceToBottom <= this.$UI._height ? 414 : inputOffset + $elm.innerHeight();
+        var left = $elm.offset().left;
+
+        return { left: left, top: top }
+      },
+      renderCallback: function($elm, toggled) {
+        var colors = this.color.colors;
+
+        // default to HEX if Alpha is 1
+        if ($elm.val() && colors.alpha > 0.9) {
+          $elm.val('#' + colors.HEX);
+        }
+      }
+    }
+
+    $('.js-color-picker').colorPicker(settings);
+  }
+};

data/app/assets/javascripts/fae/form/inputs/_dates.js

@@ -0,0 +1,78 @@
+/* global Fae, datepicker, FCH */
+
+/**
+ * Fae form dates
+ * @namespace form.dates
+ * @memberof form
+ */
+Fae.form.dates = {
+
+  init: function() {
+    this.initDatepicker();
+    this.initDateRangePicker();
+  },
+
+  /**
+   * Initialize date picker
+   */
+  initDatepicker: function() {
+    $('.datepicker input:not(.hasDatepicker)').datepicker({
+      dateFormat: 'M dd, yy',
+      inline: true,
+      showOtherMonths: true,
+      dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+    });
+  },
+
+  /**
+   * Initialize date range picker
+   */
+  initDateRangePicker: function() {
+    $.dateRangePickerLanguages['custom'] = {
+      'selected': 'Choosed:',
+      'days': 'Days',
+      'apply': 'Close',
+      'week-1' : 'Mon',
+      'week-2' : 'Tue',
+      'week-3' : 'Wed',
+      'week-4' : 'Thu',
+      'week-5' : 'Fri',
+      'week-6' : 'Sat',
+      'week-7' : 'Sun',
+      'month-name': ['January','February','March','April','May','June','July','August','September','October','November','December'],
+      'previous' : 'Previous',
+      'prev-week' : 'Week',
+      'prev-month' : 'Month',
+      'prev-quarter' : 'Quarter',
+      'prev-year' : 'Year',
+      'less-than' : 'Date range should longer than %d days',
+      'more-than' : 'Date range should less than %d days',
+      'default-more' : 'Please select a date range longer than %d days',
+      'default-less' : 'Please select a date range less than %d days',
+      'default-range' : 'Please select a date range between %d and %d days',
+      'default-default': 'Please select a date'
+    };
+
+    // daterangepicker instantiation
+    if (FCH.exists('.daterangepicker')) {
+      $('.daterangepicker').dateRangePicker({
+        format: 'MMM DD, YYYY',
+        separator : ' to ',
+        showShortcuts: false,
+        language: 'custom',
+        getValue: function() {
+          if ($('.js-start_date').val() && $('.js-end_date').val()) {
+            return $('.js-start_date').val() + ' to ' + $('.js-end_date').val();
+          } else {
+            return '';
+          }
+        },
+        setValue: function(s,s1,s2) {
+          $('.js-start_date').val(s1);
+          $('.js-end_date').val(s2);
+        }
+      });
+    };
+  },
+
+};