fae-railsz 2.1.0

data/app/assets/javascripts/fae/navigation/_language.js

@@ -0,0 +1,89 @@
+/* global Fae */
+
+/**
+ * Fae navigation language
+ * @namespace navigation.language
+ * @memberof navigation
+ */
+Fae.navigation.language = {
+
+  el: {},
+
+  init: function(options, elm){
+    /** Stores shared jQuery objects in Fae.navigation.language.el */
+    this.el.$select = $('#js-language');
+    this.el.$lang_divs = $('div[data-language]');
+
+    if (this.el.$select.length) {
+      this.setInitialState();
+      this.addNavEvents();
+    }
+  },
+
+  /**
+   * Reads the language of the active toggle on load and shows the corresponding fields
+   */
+  setInitialState: function() {
+    var lang = this.el.$select.find('option[selected]').val();
+    this._toggleLanguageFields(lang, 0);
+  },
+
+  /**
+   * On change of the select field, change the language displayed
+   * @has_test {spec/features/language_nav_spec.rb}
+   */
+  addNavEvents: function() {
+    var _this = this;
+
+    _this.el.$select.on('change', function(ev) {
+      ev.preventDefault();
+
+      var $this = $(this);
+      var lang = $this.val();
+
+      _this._toggleLanguageFields(lang, 200);
+
+      // POSTs to Utilities#language_preference to save user's language preference
+      lang = lang || 'all'
+      var post_url = Fae.path + '/language_preference/' + lang;
+      $.post(post_url);
+
+      // Fade out extra error messages
+      $('.hidden_errors').fadeOut(200, function() {
+        $(this).remove();
+      });
+    });
+  },
+
+  /**
+   * Hides all language fields and fades in ones according to language
+   * @protected
+   * @param {String} lang - Language of fields to fade in
+   * @param {Number} speed - Speed of the fade transitions in ms
+   * @has_test {spec/features/language_nav_spec.rb}
+   */
+  _toggleLanguageFields: function(lang, speed) {
+    var _this = this;
+
+    _this.el.$lang_divs
+      .fadeOut(speed)
+      .promise()
+      .done(function() {
+        if (lang) {
+          $('div[data-language='+lang+']').fadeIn(speed);
+        } else {
+          _this.el.$lang_divs.fadeIn(speed);
+        }
+      });
+  },
+
+  /**
+   * Called on form validation; checks for hidden fields with errors and displays a message
+   * @see {@link form.validator.formValidate}
+   */
+  checkForHiddenErrors: function() {
+    if (this.el.$select.length && $('div.field_with_errors:hidden').length && !FCH.exists('.hidden_errors')) {
+      $('.content').prepend('<div class="hidden_errors field_with_errors"><span class="error">There are hidden errors. Click "All Languages" in the language nav to view all errors.</span></div>');
+    }
+  }
+};

data/app/assets/javascripts/fae/navigation/_navigation.js

@@ -0,0 +1,206 @@
+/* global Fae, FCH */
+
+/**
+ * Fae navigation
+ * @namespace navigation
+ * @memberof Fae
+ */
+Fae.navigation = {
+
+  ready: function() {
+    this.fadeNotices();
+    this.openDrawer();
+    this.clickBack();
+    this.accordionClickEventListener();
+
+    this.language.init();
+    this.subnav_highlighter.init();
+    this.global_search.init();
+  },
+
+  load: function() {
+    this.stickyHeaders();
+    this.lockFooter();
+  },
+
+  resize: function() {
+    this.closeAll(false);
+    this.lockFooter();
+  },
+
+  /**
+   * Attach click listener to main and sub links
+   * @has_test {features/nav_spec.rb}
+   */
+  accordionClickEventListener: function() {
+    var _this = this;
+
+    $('.js-accordion > a').click(function(e) {
+      e.preventDefault();
+
+      var $parent = $(this).closest('.js-accordion');
+      var was_open = $parent.hasClass('-open');
+
+      // close all first
+      // only get the first class name and add a leading period
+      $parent.siblings().each(function() {
+        _this.close($(this));
+      });
+
+      if (was_open) {
+        var $sub_accordions = $parent.find('.js-accordion');
+
+        // Close all nested accordions
+        if($sub_accordions.length) {
+          $sub_accordions.each(function() {
+            _this.close($(this));
+          });
+        }
+
+        // Close original accordion
+        _this.close($parent);
+
+      } else {
+        // open the clicked item if it was not just opened
+        _this.open($parent);
+      }
+
+    });
+  },
+
+  /**
+   * Open accordion panel
+   * @protected
+   * @param {jQuery} $el - Accordion wrapper
+   */
+  open: function($el) {
+    $el.addClass('-open');
+
+    if(FCH.bp.large) {
+      $el.find('.js-subnav').first().stop().slideDown();
+    }
+  },
+
+  /**
+   * Close accordion panel
+   * @protected
+   * @param {jQuery} $el - Accordion wrapper
+   */
+  close: function($el) {
+    if(FCH.bp.large) {
+      $el.find('.js-subnav')
+        .first()
+        .stop()
+        .slideUp()
+        .queue(function() {
+          // Remove class after animation
+          $el.removeClass('-open');
+          $.dequeue( this );
+        });
+    } else {
+      $el.removeClass('-open');
+    }
+  },
+
+  /**
+   * Close main level navs
+   * @param {Boolean} nuclear - Slide up drawers too
+   * @see  {@link resize}
+   * @see  {@link openDrawer}
+   */
+  closeAll: function(nuclear) {
+    var _this = this;
+    $('html').removeClass( 'mobile-active' );
+
+    $('.js-accordion').each(function(){
+      var $this = $(this);
+
+      $this.removeClass('-open');
+
+      if(nuclear) {
+        _this.close( $this );
+      }
+    });
+  },
+
+  /**
+   * Mobile - Push body over and display nav
+   */
+  openDrawer: function() {
+    var $html = $('html');
+
+    $('#js-mobilenav-toggle').click(function(e){
+      e.preventDefault();
+
+      if ($html.hasClass( 'mobile-active' )) {
+        Fae.navigation.closeAll(true);
+      } else {
+        $html.addClass( 'mobile-active' );
+      }
+    });
+  },
+
+  /**
+   * Mobile - Collapse sub headers on sub nav click
+   */
+  clickBack: function() {
+    $('.js-mobile-back').click(function(e){
+      e.preventDefault();
+
+      $(this)
+        .closest('.js-accordion')
+        .removeClass('-open');
+    });
+  },
+
+  /**
+   * Hide main-page alerts after 3 seconds
+   */
+  fadeNotices: function() {
+    $('.notice, .alert, .error, .warning').not('.input .error, .form_alert').delay(3000).slideUp('fast');
+  },
+
+  /**
+   * Stick the header in the content area
+   * @param {Boolean} [just_headers=false] Only initialize stickiness for `.js-content-header`
+   */
+  stickyHeaders: function(just_headers) {
+    just_headers = FCH.setDefault(just_headers, false);
+
+    var $header = $('.js-content-header');
+    var sidebar_top_offset = (parseInt( $header.outerHeight(), 10) + 30) + 'px';
+    $('#js-sidenav').css('padding-top', sidebar_top_offset );
+
+    $header.sticky({
+      placeholder: true,
+      perpetual_placeholder: true,
+      ignore_placeholder_offsets: true
+    });
+
+    if (!just_headers) {
+      $('#js-sidenav').sticky();
+    }
+  },
+
+  /**
+   * Fix footer to bottom of screen if viewport extends beyond content. Display after calculation has been performed
+   */
+  lockFooter: function() {
+    if(FCH.exists('#js-footer')) {
+      var $footer = $('#js-footer');
+
+      // Reset
+      $footer.removeClass('active');
+
+      // Lock or unlock
+      if ($footer.offset().top < (FCH.dimensions.wh - $footer.outerHeight()) ) {
+        $footer.addClass('-locked');
+      } else {
+        $footer.removeClass('-locked');
+      }
+
+      $footer.addClass('active');
+    }
+  }
+
+};

data/app/assets/javascripts/fae/navigation/_subnav_highlighter.js

@@ -0,0 +1,81 @@
+/* global Fae, FCH */
+
+/**
+ * Fae navigation subnav highlighter
+ * @namespace navigation.subnav_highlighter
+ * @memberof navigation
+ */
+Fae.navigation.subnav_highlighter = {
+  init: function() {
+    //only run everything if there is a subnav area
+    if (FCH.exists('.content-header-subnav')) {
+      this.FCHListeners();
+
+      //makes the subnav clicks
+      this.anchorClickListener();
+    }
+  },
+
+  /**
+   * Since subnavHighlighter is not a direct child of Fae and therefore unknown to FCH, these listeners are saved in private functions in this method
+   */
+  FCHListeners: function() {
+    /**
+     * On scroll, change highlight of nav item. Bread and butter of this subclass.
+     * @private
+     */
+    function scrollCallback() {
+      var scroll_top = FCH.$window.scrollTop();
+
+      $('.content').each(function(index) {
+        var $this = $(this);
+        var position = $this.position().top - scroll_top;
+        var $link = $('a[href="#' + $this.attr('id') + '"]').parent();
+        var is_scrolled_to_bottom = scroll_top >= (FCH.$document.outerHeight() - FCH.dimensions.wh);
+
+        $link.removeClass('-active');
+        if (position <= 0 || index === 0 || is_scrolled_to_bottom) {
+          $link.addClass('js-highlighter');
+        }
+      });
+
+      $('.js-highlighter').last().addClass('-active').removeClass('js-highlighter');
+    }
+
+    // highlight the first one on page load
+    scrollCallback();
+    FCH.scroll.push(scrollCallback);
+  },
+
+  /**
+   * Smooth scrolling on anchor links in the tab area.
+   */
+  anchorClickListener: function() {
+    var scroll_offset = parseInt( $('.content-header').css('height'), 10 );
+
+    /**
+     * Smoothly scroll to destination if it's a link to the current page
+     * @private
+     * @param {Object} el - JavaScript element to scroll to
+     */
+    function scroller(e) {
+      e.preventDefault();
+
+      if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) {
+        var $target = $(this.hash);
+        $target = $target.length ? $target : $('[name=' + this.hash.slice(1) + ']');
+
+        if($target.find('h2').length) {
+          $target = $target.find('h2');
+          scroll_offset -= 2;
+        }
+
+        if ($target.length) {
+          FCH.smoothScroll($target, 500, 0, -scroll_offset);
+        }
+      }
+    }
+
+    $('#js-content-header-subnav a').on('click', scroller);
+  },
+};

data/app/assets/javascripts/fae/navigation/sticky.js

@@ -0,0 +1,186 @@
+/* global FCH */
+
+(function ( $ ) {
+  'use strict';
+
+  /**
+   * Adjust offsets
+   * @private
+   * @param {jQuery} $el
+   * @see Sticky.windowListeners
+   */
+  function setDimensionsTopLeft($el) {
+    this.dimensions.top = $el.offset().top - this.options.offset;
+    this.dimensions.left = $el.offset().left;
+  }
+
+  /**
+   * Private initialization of Sticky object.
+   * @class
+   */
+  function Sticky($el, options) {
+    /** @type {jQuery} */
+    this.$el = $el;
+
+    /** Inherited settings from jQuery initialization */
+    this.options = options;
+
+    // capture dimensions
+    // If a placeholder exists, use it
+    this.dimensions = {
+      top: $el.offset().top - this.options.offset,
+      left: $el.offset().left
+    };
+
+    var height = $el.outerHeight();
+    $el.addClass('js-will-be-sticky');
+
+    // create a placeholder
+    if (this.options.placeholder) {
+      this.createPlaceholder(height);
+    }
+
+    // run the initial stickIt
+    this.stickIt();
+
+    // bind events
+    this.windowListeners();
+
+    return this;
+  }
+
+  /**
+   * Create a placeholder element to use to keep the top spacing
+   * @param {Number} height - Size of stuck element
+   */
+  Sticky.prototype.createPlaceholder = function(height) {
+    var css_properties = {
+      height: height,
+      visibility: 'hidden'
+    };
+
+    if(!this.options.perpetual_placeholder) {
+      css_properties.display = 'none';
+    }
+
+    var $placeholder = $('<div />', {
+       class: this.options.placeholder_class,
+       css: css_properties
+    });
+
+    $placeholder.insertAfter(this.$el);
+
+    // save for reference later
+    this.$placeholder = $placeholder;
+  };
+
+  /**
+   * On window scroll, check to make sure the screen is larger than table and if it isn't, unstick it
+   * @fires stickItLogic (Conditionally)
+   * @fires _unStick (Conditionally)
+   */
+  Sticky.prototype.stickIt = function() {
+    if (FCH.bp.large) {
+      this._stickItLogic();
+    } else {
+      this._unStick();
+    }
+  };
+
+  /**
+   * Fix sticky element to top of page if it's past originally-set boundary.
+   * @access protected
+   * @fires _unStick (Conditionally)
+   * @see stickIt
+   */
+  Sticky.prototype._stickItLogic = function() {
+    if (FCH.$window.scrollTop() >= this.dimensions.top) {
+      if (this.options.placeholder) {
+        this.$placeholder.show();
+      }
+
+      this.$el
+        .addClass(this.options.class_name)
+        .css({
+          left: this.dimensions.left,
+          position: 'fixed'
+        });
+    } else {
+      this._unStick();
+    }
+  };
+
+  /**
+   * Remove active class and fixed styles from targeted element; hide placeholder
+   */
+  Sticky.prototype._unStick = function() {
+    this.$el
+      .removeClass(this.options.class_name)
+      .css({
+        left: '',
+        position: ''
+      });
+
+    if (this.options.placeholder && !this.options.perpetual_placeholder) {
+      this.$placeholder.hide();
+    }
+  };
+
+  /**
+   * Listen for scroll and smartresize to stick or unstick element
+   */
+  Sticky.prototype.windowListeners = function() {
+    var _this = this;
+
+    function scrollCallback() {
+      _this.stickIt();
+    }
+
+    function resizePlaceholder() {
+      _this.$placeholder.css( 'height', _this.$el.outerHeight() );
+    }
+
+    function debounceResizeCallback() {
+      if ( _this.$placeholder && !_this.options.ignore_placeholder_offsets && _this.$placeholder.is(':visible')) {
+        setDimensionsTopLeft.call(_this, _this.$placeholder);
+      } else {
+        setDimensionsTopLeft.call(_this, _this.$el);
+      }
+
+      _this.stickIt();
+    }
+
+    FCH.scroll.push( scrollCallback );
+    FCH.resize.push( FCH.debounce( debounceResizeCallback ) );
+
+    debounceResizeCallback();
+
+    if (this.options.placeholder) {
+      FCH.resize.push( resizePlaceholder );
+    }
+  };
+
+  /**
+   * Stick elements within the viewport
+   * @function external:'jQuery.fn'.sticky
+   */
+  $.fn.sticky = function( options ) {
+    var defaults = {
+      class_name: 'js-sticky',
+      placeholder_class: 'js-sticky-placeholder',
+      placeholder: false,
+      ignore_placeholder_offsets: false,
+      offset: 0,
+      perpetual_placeholder: false
+    };
+
+    // unite the default options with the passed-in ones
+    var settings = $.extend( {}, defaults, options );
+
+    return this.each(function() {
+      var sticker = new Sticky($(this), settings);
+    });
+
+  };
+
+}( jQuery ));