ratchet_design 0.1.0

data/app/assets/javascripts/ratchet/enhancement/loader.js

@@ -0,0 +1,77 @@
+/**
+ * Loader 0.0.1
+ * Compose loader module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Public API function
+var loader = function( settings ) {
+
+  // Overridable defaults
+  var defaults = {
+    selector       : document.body,
+    loaderClass    : 'loader',
+    loadingMessage : 'Hang tight…',
+    loadingClass   : 'loading',
+    successMessage : 'Got it!',
+    successClass   : 'success',
+    failureMessage : 'Hold up!',
+    failureClass   : 'failure'
+  };
+
+  // Extend defaults
+  var options = Object.assign( {}, defaults, settings );
+
+  // Create and prepend loader element
+  options.selector.insertAdjacentHTML( 'afterbegin', '<div class="' + options.loaderClass + '"></div>' );
+
+  // Cache loader element
+  var element = document.querySelector( 'div.' + options.loaderClass );
+
+   // Show loader icon function
+  var show = function( state ) {
+
+    // Loader pending state
+    if ( state === 'pending' ) {
+
+      element.textContent = options.loadingMessage;
+      element.classList.remove( options.successClass, options.failureClass );
+      element.classList.add( options.loadingClass );
+
+    // Loader failure state
+    } else if ( state === 'failure' ) {
+
+      element.textContent = options.failureMessage;
+      element.classList.remove( options.loadingClass );
+      element.classList.add( options.failureClass );
+
+    // Loader success state
+    } else if ( state === 'success' ) {
+
+      element.textContent = options.successMessage;
+      element.classList.remove( options.loadingClass );
+      element.classList.add( options.successClass );
+
+    }
+
+  };
+
+  // Hide loader icon function
+  var hide = function() {
+
+    // Remove state classes altogether
+    element.classList.remove( options.loadingClass, options.successClass, options.failureClass );
+
+  };
+
+  // Public functions
+  return {
+    show : show,
+    hide : hide
+  };
+
+};
+
+// Public API
+module.exports = loader;

data/app/assets/javascripts/ratchet/enhancement/notice.js

@@ -0,0 +1,70 @@
+/**
+ * Notice 0.0.1
+ * Compose notice module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Public API function
+var notice = function( element, settings ) {
+
+  // Overridable defaults
+  var defaults = {
+    noticeName    : 'notice',
+    noticeClass   : 'notice',
+    noticeMessage : '[your notice message here]'
+  };
+
+  // Scoped variables
+  var options    = Object.assign( {}, defaults, settings ),
+      selector   = document.querySelector( element ),
+      cookieName = 'dismiss-' + options.noticeName;
+
+  // Only run if selector exists & no dismiss cookie is found
+  if ( !selector || getCookie( cookieName ) ) return false;
+
+  // Uncomment for development
+  // deleteCookie( cookieName );
+
+  // Create and append notice
+  var html = '<aside class="' + options.noticeClass + '">' + options.noticeMessage + '<a href="#?" class="close-btn"></a></aside>'
+  document.querySelector( 'main' ).insertAdjacentHTML( 'afterbegin', html );
+
+  // Listen for close button click
+  selector.querySelector( '.' + options.noticeClass + ' > .close-btn' ).addEventListener( 'click', dismissNotice, false );
+
+  // Dismiss notice on close
+  function dismissNotice( event ) {
+
+    // Prevent default behavior
+    event.preventDefault();
+
+    // Cache notice element
+    var noticeElem = selector.querySelector( '.' + options.noticeClass );
+
+    // Remove notice from page
+    selector.removeChild( noticeElem );
+
+    // Set cookie to prevent it from returning
+    document.cookie = cookieName + '=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
+
+  }
+
+  // Check for cookie by name
+  function getCookie( name ) {
+    var value = '; ' + document.cookie;
+    var parts = value.split( '; ' + name + '=' );
+    if ( parts.length == 2 ) return parts.pop().split( ';' ).shift();
+  }
+
+  // Delete a cookie by setting the date of expiry to yesterday
+  function deleteCookie( name ) {
+    var date = new Date();
+    date.setDate( date.getDate() -1 );
+    document.cookie = escape( name ) + '=;expires=' + date;
+  }
+
+};
+
+// Public API
+module.exports = notice;

data/app/assets/javascripts/ratchet/enhancement/sticky.js

@@ -0,0 +1,128 @@
+/**
+ * Sticky 0.0.3
+ * Compose sticky elements module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Dependencies
+var throttle = require( '../utility/throttle' ),
+    fromTop  = require( '../utility/from_top' );
+
+// Public API function
+var sticky = function( element, settings ) {
+
+  // Overridable defaults
+  var defaults = {
+    topPadding  : false,
+    initWidth   : '700px',
+    stickyClass : 'sticky',
+    anchorPoint : null
+  };
+
+  // Scoped variables
+  var options  = Object.assign( {}, defaults, settings ),
+      selector = document.querySelector( element );
+
+  // If selector is not present
+  if ( !selector ) {
+
+    // Abort
+    return false;
+
+  // Otherwise attach listeners
+  } else {
+
+    // Scoped variables
+    var topPadding = ( options.topPadding === true ) ? parseInt( window.getComputedStyle( selector, null ).getPropertyValue( 'padding-top' ) ) : 0,
+        widthQuery = window.matchMedia( '(min-width: ' + options.initWidth + ')' ),
+        topOffset  = fromTop( selector ) + topPadding,
+        elemHeight = selector.offsetHeight,
+        anchorInit = options.anchorPoint,
+        docBody    = document.body,
+        docHeight,
+        winHeight;
+
+    // Resize throttle function init
+    throttle( 'resize', 'optimizedResize' );
+
+    // Scroll throttle function init
+    throttle( 'scroll', 'optimizedScroll' );
+
+    // Call listener function explicitly at run time
+    queryHandler( widthQuery );
+
+    // Attach listener function to listen in on state changes
+    widthQuery.addListener( queryHandler );
+
+  }
+
+  // Media query handler function
+  function queryHandler( condition ) {
+
+    // If media query matches
+    if ( condition.matches ) {
+
+      // Call resize listener function explicitly at run time
+      resizeHandler();
+
+      // Resize function listener
+      window.addEventListener( 'optimizedResize', resizeHandler, false );
+
+      // Call scroll listener function explicitly at run time
+      scrollHandler();
+
+      // Scroll function listener
+      window.addEventListener( 'optimizedScroll', scrollHandler, false );
+
+    } else {
+
+      // Reset styles
+      docBody.classList.remove( 'sticky' );
+
+      // Remove resize listener
+      window.removeEventListener( 'optimizedResize', resizeHandler, false );
+
+      // Remove scroll listener
+      window.removeEventListener( 'optimizedScroll', scrollHandler, false );
+
+    }
+
+  }
+
+  // Resize handler function
+  function resizeHandler() {
+
+    // Update document height variable
+    docHeight = document.body.scrollHeight;
+
+    // Update window height variable
+    winHeight = window.innerHeight;
+
+  }
+
+  // Scroll handler function
+  function scrollHandler() {
+
+    // Scoped variables
+    var newScrollY = window.pageYOffset,
+        pastOffset = newScrollY > topOffset,
+        anchored   = ( anchorInit ) ? newScrollY >= docHeight - elemHeight - anchorInit + topPadding : null;
+
+    // Where the magic happens
+    if ( pastOffset && !anchored ) {
+      docBody.classList.remove( 'anchored' );
+      docBody.classList.add( 'sticky' );
+    } else if ( pastOffset && anchored ) {
+      docBody.classList.remove( 'sticky' );
+      docBody.classList.add( 'anchored' );
+    } else {
+      docBody.classList.remove( 'sticky' );
+    }
+
+  }
+
+};
+
+// Public API
+module.exports = sticky;

data/app/assets/javascripts/ratchet/enhancement/waypoints.js

@@ -0,0 +1,328 @@
+/**
+ * Waypoints 0.0.4
+ * Compose waypoint navigation module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Dependencies
+var matches    = require( '../utility/matches'     ),
+    fromTop    = require( '../utility/from_top'    ),
+    scrollTo   = require( '../utility/scroll_to'   ),
+    getClosest = require( '../utility/get_closest' ),
+    throttle   = require( '../utility/throttle'    );
+
+// Public API function
+var waypoints = function( elements, settings ) {
+
+  // Overridable defaults
+  var defaults = {
+    initWidth        : '700px',
+    navigation       : '.secondary',
+    activeAnchor     : 'active',
+    elemOffset       : 0,
+    showLandmarks    : false,
+    landmarkSelector : '.landmark',
+    activeLandmark   : 'pinned',
+  };
+
+  // Scoped variables
+  var options   = Object.assign( {}, defaults, settings ),
+      selectors = document.querySelectorAll( elements );
+
+  // If selectors are not present
+  if ( !selectors.length ) {
+
+    // Abort
+    return false;
+
+  // Otherwise attach listeners
+  } else {
+
+    // Scoped variables
+    var navigation  = document.querySelector( options.navigation ),
+        widthQuery  = window.matchMedia( '(min-width: ' + options.initWidth + ')' ),
+        coordinates = [],
+        oldActiveItem,
+        windowHash,
+        docHeight,
+        winHeight;
+
+    // If hash is present
+    if ( window.location.hash ) {
+
+      // Cache it
+      windowHash = window.location.hash.replace( '#', '' );
+
+      // Then delete it to prevent default page scroll
+      window.location.hash = '';
+
+      // And replace it
+      history.replaceState( null, '', '#' + windowHash );
+
+    }
+
+    // Resize throttle function init
+    throttle( 'resize', 'optimizedResize' );
+
+    // Scroll throttle function init
+    throttle( 'scroll', 'optimizedScroll' );
+
+    // Only run once the window is loaded
+    window.addEventListener( 'load', function() {
+
+      // Call listener function explicitly at run time
+      queryHandler( widthQuery );
+
+      // Attach listener function to listen in on state changes
+      widthQuery.addListener( queryHandler );
+
+    }, false );
+
+  }
+
+  // Media query handler function
+  function queryHandler( condition ) {
+
+    // If media query matches
+    if ( condition.matches ) {
+
+      // Call resize listener function explicitly at run time
+      resizeHandler();
+
+      // Resize throttle function init
+      window.addEventListener( 'optimizedResize', resizeHandler, false );
+
+      // Call scroll listener function explicitly at run time
+      scrollHandler();
+
+      // Scroll function listener
+      window.addEventListener( 'optimizedScroll', scrollHandler, false );
+
+      // Click function listener
+      navigation.addEventListener( 'click', clickHandler, false );
+
+      // Call hash change listener function explicitly at run time
+      hashHandler();
+
+      // Hash change function listener
+      window.addEventListener( 'hashchange', hashHandler, false );
+
+    // Otherwise…
+    } else {
+
+      // Remove resize listener
+      window.removeEventListener( 'optimizedResize', resizeHandler, false );
+
+      // Remove scroll listener
+      window.removeEventListener( 'optimizedScroll', scrollHandler, false );
+
+      // Remove click listener
+      navigation.removeEventListener( 'click', clickHandler, false );
+
+      // Remove hash change listener
+      window.removeEventListener( 'hashchange', hashHandler, false );
+
+    }
+
+  }
+
+  // Resize handler function
+  function resizeHandler() {
+
+    // Update document height variable
+    docHeight = document.body.scrollHeight;
+
+    // Update window height variable
+    winHeight = window.innerHeight;
+
+    // Loop through waypoints
+    for ( var i = 0; i < selectors.length; i++ ) {
+
+      // Construct coordinate object
+      var coordinate = {
+        elem   : selectors[ i ],
+        offset : fromTop( selectors[ i ] )
+      };
+
+      // And update coordinates array
+      coordinates[ i ] = coordinate;
+
+    }
+
+  }
+
+  // Scroll handler function
+  function scrollHandler() {
+
+    // Scoped variables
+    var newScrollY = window.pageYOffset,
+        rockBottom = newScrollY < 0 || newScrollY + winHeight >= docHeight,
+        newActiveItem,
+        activeLink,
+        landmark;
+
+    // Loop through coordinates
+    for ( var i = 0; i < coordinates.length; i++ ) {
+
+      // Scoped variables
+      var firstWaypoint = coordinates[ 0 ],
+          currWaypoint  = coordinates[ i ],
+          nextWaypoint  = coordinates[ i + 1 ],
+          lastWaypoint  = coordinates[ coordinates.length - 1 ];
+
+      // If scrolled to last waypoint
+      if ( newScrollY < firstWaypoint.offset ) {
+
+        // Set active item to first waypoint
+        newActiveItem = firstWaypoint.elem.id;
+
+      // If scrolled to bottom of page or on past the last waypoint
+      } else if ( rockBottom || newScrollY > lastWaypoint.offset - options.elemOffset ) {
+
+        // Set active item to last waypoint
+        newActiveItem = lastWaypoint.elem.id;
+
+      // Otherwise if a waypoint is in the viewport
+      } else if ( newScrollY > currWaypoint.offset - options.elemOffset && newScrollY < nextWaypoint.offset - options.elemOffset ) {
+
+        // Update active item to match
+        newActiveItem = currWaypoint.elem.id;
+
+      }
+
+    }
+
+    // If active item exists
+    if ( newActiveItem ) {
+
+      // Only run when new active item is triggered
+      if ( newActiveItem === oldActiveItem ) return false;
+
+      // Update active link
+      activeLink = navigation.querySelector( 'a[href="#' + newActiveItem + '"]' );
+
+      // If no active link is found, abort
+      if ( !activeLink ) return false;
+
+      // And enable navigation item
+      activate( navigation, activeLink, options.activeAnchor );
+
+      // If landmarks are turned on
+      if ( options.showLandmarks === true ) {
+
+        // Set active landmark to active link’s parent
+        landmark = getClosest( activeLink, options.landmarkSelector );
+
+        // Enable active landmark
+        activate( navigation, landmark, options.activeLandmark );
+
+      }
+
+      // Update old active item variable
+      oldActiveItem = newActiveItem;
+
+    }
+
+  }
+
+  // Click handler function
+  function clickHandler( event ) {
+
+    // Prevent default behavior
+    event.preventDefault();
+
+    // Matches selector function init
+    if ( matches( event.target, 'a[href^="#"]' ) ) {
+
+      // Travel to clicked target
+      travel( event.target, 'click' );
+
+    }
+  }
+
+  // Hash change handler function
+  function hashHandler() {
+
+    // Only run when a hash is present
+    if ( !window.location.hash ) return false;
+
+    // Find the hash’s relevant navigation item
+    var hashAnchor = document.querySelector( 'a[href="' + window.location.hash + '"]' );
+
+    // And travel to its target
+    travel( hashAnchor, 'hash' );
+
+  }
+
+  // Window scroll travel function
+  function travel( destination, trigger ) {
+
+    // Define scoped variable(s)
+    var targetAnchor   = destination.href.split( '#' )[ 1 ],
+        targetElement  = document.querySelector( '#' + targetAnchor ),
+        targetOffset,
+        travelTime;
+
+    // If a target element exists
+    if ( targetElement ) {
+
+      // Enable new active navigation item
+      activate( navigation, destination, options.activeAnchor );
+
+      // Loop through coordinates
+      for ( var i = 0; i < coordinates.length; i++ ) {
+
+        // If coordinate element matches target element
+        if ( coordinates[ i ].elem === targetElement ) {
+
+          // Assign its coordinates to target offset variable
+          targetOffset = coordinates[ i ].offset;
+        }
+      }
+
+      // If trigger was a click
+      if ( trigger === 'click' ) {
+
+        // Temporarily remove scroll listener function
+        window.removeEventListener( 'optimizedScroll', scrollHandler, false );
+
+        // Update the hash
+        history.pushState( null, '', '#' + targetAnchor );
+
+        // Animate scroll to appropriate element
+        scrollTo( targetOffset - options.elemOffset + 1, function() {
+
+          // Once scroll is complete, enable scroll listener
+          window.addEventListener( 'optimizedScroll', scrollHandler, false );
+
+        });
+
+      // Otherwise if trigger was a hash
+      } else if ( trigger === 'hash' ) {
+
+        // Skip the scroll animation
+        window.scrollTo( 0, targetOffset - options.elemOffset + 1 );
+
+      }
+    }
+  }
+
+  // Link activation function
+  function activate( container, selector, cls ) {
+
+    // Find currently active link
+    var activeLink = container.querySelector( '.' + cls );
+
+    // And if it exists, disable it
+    if ( activeLink ) activeLink.classList.remove( cls );
+
+    // Then enable the passed selector
+    selector.classList.add( cls );
+
+  }
+
+};
+
+// Public API
+module.exports = waypoints;