ratchet_design 0.1.1 → 0.1.2

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

@@ -6,129 +6,93 @@
  **/
 
 // 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'    );
+var toolbox    = require( 'compose-toolbox' ),
+    Event      = toolbox.event,
+    matches    = toolbox.matches,
+    fromTop    = toolbox.fromTop,
+    scrollTo   = toolbox.scrollTo,
+    getClosest = toolbox.getClosest,
+    callback   = Event.callback;
 
 // Public API function
-var waypoints = function( elements, settings ) {
+var waypoints = function( settings ) {
 
   // Overridable defaults
   var defaults = {
-    initWidth        : '700px',
-    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 {
+    initWidth        : '0px',
+    elemOffset       : 0
+  }
 
-    // Scoped variables
-    var initWidth   = options.initWidth ? options.initWidth : '0px',
-        widthQuery  = window.matchMedia( '(min-width: ' + initWidth + ')' ),
-        docBody     = document.body,
-        coordinates = [],
-        oldActiveItem,
-        windowHash,
-        docHeight,
-        winHeight;
+  function slice( obj, count ) {
+    return Array.prototype.slice.call( obj, count )
+  }
 
-    // If hash is present
-    if ( window.location.hash ) {
+  // Scoped variables
+  var options          = toolbox.merge( defaults, settings ),
+      activeAnchor     = 'active',
+      landmarkSelector = 'dl',
+      activeLandmark   = 'pinned',
+      nav              = document.querySelector('.waypoint-nav'),
+      elements         = [];
 
-      // Cache it
-      windowHash = window.location.hash.replace( '#', '' );
+  if ( nav ) slice( nav.querySelectorAll( "a[href^='#']" ) ).forEach( function( el ) {
 
-      // Then delete it to prevent default page scroll
-      window.location.hash = '';
+    // Find all elements matching links in the waypoints nav
+    var section = document.querySelector( el.getAttribute('href') )
 
-      // And replace it
-      history.replaceState( null, '', '#' + windowHash );
+    // If found, add them to the elements list
+    if ( section ) elements.push( section )
 
-    }
+  })
 
-    // Resize throttle function init
-    throttle( 'resize', 'optimizedResize' );
+  if ( !nav || elements.length < 1 ) { return false }
 
-    // Scroll throttle function init
-    throttle( 'scroll', 'optimizedScroll' );
+  // Scoped variables
+  var docBody     = document.body,
+      coordinates = [],
+      oldActiveItem,
+      windowHash,
+      docHeight,
+      winHeight;
 
-    // Only run once the window is loaded
-    window.addEventListener( 'load', function() {
+  // If hash is present
+  if ( window.location.hash ) {
 
-      // Call listener function explicitly at run time
-      queryHandler( widthQuery );
+    // Cache it
+    windowHash = window.location.hash.replace( '#', '' );
 
-      // Attach listener function to listen in on state changes
-      widthQuery.addListener( queryHandler );
+    // Then delete it to prevent default page scroll
+    window.location.hash = '';
 
-    }, false );
+    // And replace it
+    history.replaceState( null, '', '#' + windowHash );
 
   }
 
-  // Media query handler function
-  function queryHandler( condition ) {
-
-    // If media query matches
-    if ( condition.matches ) {
+  // Only run once the window is loaded
+  Event.on( window, 'load', function() {
 
-      // Call resize listener function explicitly at run time
-      resizeHandler();
+    // Media query handler function
+    Event.media.minWidth( options.initWidth, function( condition ) {
 
-      // Resize throttle function init
-      window.addEventListener( 'optimizedResize', resizeHandler, false );
+      // Set up resize listener
+      resize.toggle( condition.matches )
+      resize()
 
-      // Call scroll listener function explicitly at run time
-      scrollHandler();
+      // Set up scroll listener
+      scroll.toggle( condition.matches )
+      scroll()
+      
+      // Set up hash change listener
+      hashChange.toggle( condition.matches )
+      hashChange()
 
-      // Scroll function listener
-      window.addEventListener( 'optimizedScroll', scrollHandler, false );
+    })
 
-      // Click function listener
-      docBody.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
-      docBody.removeEventListener( 'click', clickHandler, false );
-
-      // Remove hash change listener
-      window.removeEventListener( 'hashchange', hashHandler, false );
-
-    }
-
-  }
+  })
 
   // Resize handler function
-  function resizeHandler() {
+  var resize = callback.new( function() {
 
     // Update document height variable
     docHeight = docBody.scrollHeight;
@@ -137,23 +101,22 @@ var waypoints = function( elements, settings ) {
     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 ] )
-      };
+    setCoordinates()
 
-      // And update coordinates array
-      coordinates[ i ] = coordinate;
-
-    }
+  })
 
+  // Store coordinates to elements
+  var setCoordinates = function() {
+    elements.forEach( function( element, i ) {
+      coordinates[ i ] = {
+        elem   : elements[ i ],
+        offset : fromTop( elements[ i ] )
+      }
+    })
   }
 
   // Scroll handler function
-  function scrollHandler() {
+  var scroll = callback.new( function() {
 
     // Scoped variables
     var newScrollY = window.pageYOffset,
@@ -163,11 +126,10 @@ var waypoints = function( elements, settings ) {
         landmark;
 
     // Loop through coordinates
-    for ( var i = 0; i < coordinates.length; i++ ) {
+    coordinates.forEach( function( currWaypoint, i ) {
 
       // Scoped variables
       var firstWaypoint = coordinates[ 0 ],
-          currWaypoint  = coordinates[ i ],
           nextWaypoint  = coordinates[ i + 1 ],
           lastWaypoint  = coordinates[ coordinates.length - 1 ];
 
@@ -191,76 +153,65 @@ var waypoints = function( elements, settings ) {
 
       }
 
-    }
+    })
 
     // If active item exists
     if ( newActiveItem ) {
 
       // Only run when new active item is triggered
-      if ( newActiveItem === oldActiveItem ) return false;
+      if ( newActiveItem === oldActiveItem ) return false
 
       // Update active link
-      activeLink = docBody.querySelector( 'a[href="#' + newActiveItem + '"]' );
+      activeLink = nav.querySelector( 'a[href="#' + newActiveItem + '"]' )
 
       // If no active link is found, abort
-      if ( !activeLink ) return false;
+      if ( !activeLink ) return false
 
       // And enable navigation item
-      activate( 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( landmark, options.activeLandmark );
-
-      }
+      activateLink( activeLink )
 
       // Update old active item variable
-      oldActiveItem = newActiveItem;
+      oldActiveItem = newActiveItem
 
     }
 
-  }
+  })
 
   // Click handler function
-  function clickHandler( event ) {
+  var click = callback.new( function( event ) {
 
     // Matches selector function init
     if ( matches( event.target, 'a[href^="#"]' ) ) {
 
       // Prevent default behavior
-      event.preventDefault();
+      event.preventDefault()
 
       // Travel to clicked target
-      travel( event.target, 'click' );
+      travel( event.target, true )
 
     }
-  }
+  })
 
   // Hash change handler function
-  function hashHandler() {
+  var hashChange = callback.new( function() {
 
     // Only run when a hash is present
-    if ( !window.location.hash ) return false;
+    if ( !window.location.hash ) return false
 
     // Find the hash’s relevant navigation item
-    var hashAnchor = document.querySelector( 'a[href="' + window.location.hash + '"]' );
+    var hashAnchor = document.querySelector( 'a[href="' + window.location.hash + '"]' )
 
     // And travel to its target
-    travel( hashAnchor, 'hash' );
+    travel( hashAnchor )
 
-  }
+  })
 
   // Window scroll travel function
-  function travel( destination, trigger ) {
+  var travel = function( destination, animateScroll ) {
 
     // Define scoped variable(s)
-    var targetAnchor   = destination.href.split( '#' )[ 1 ],
-        targetElement  = document.querySelector( '#' + targetAnchor ),
+    var targetAnchor   = destination.getAttribute('href'),
+        targetElement  = document.querySelector( targetAnchor ),
         targetOffset,
         travelTime;
 
@@ -268,10 +219,10 @@ var waypoints = function( elements, settings ) {
     if ( targetElement ) {
 
       // Enable new active navigation item
-      activate( destination, options.activeAnchor );
+      activateLink( destination, activeAnchor )
 
       // Loop through coordinates
-      for ( var i = 0; i < coordinates.length; i++ ) {
+      coordinates.forEach( function( current, i ) {
 
         // If coordinate element matches target element
         if ( coordinates[ i ].elem === targetElement ) {
@@ -279,49 +230,61 @@ var waypoints = function( elements, settings ) {
           // Assign its coordinates to target offset variable
           targetOffset = coordinates[ i ].offset;
         }
-      }
+      })
 
       // If trigger was a click
-      if ( trigger === 'click' ) {
+      if ( animateScroll ) {
 
         // Temporarily remove scroll listener function
-        window.removeEventListener( 'optimizedScroll', scrollHandler, false );
+        scroll.stop()
 
         // 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 );
+        history.pushState( null, '', targetAnchor );
 
-        });
+        // Animate scroll to appropriate element then renable scroll listener
+        scrollTo( targetElement, scroll.start )
 
-      // Otherwise if trigger was a hash
-      } else if ( trigger === 'hash' ) {
+      } else {
 
         // Skip the scroll animation
-        window.scrollTo( 0, targetOffset - options.elemOffset + 1 );
+        window.scrollTo( 0, fromTop( targetElement ) );
 
       }
     }
   }
 
-  // Link activation function
-  function activate( selector, cls ) {
+  function activate( el, classname ) {
 
     // Find currently active link
-    var activeLink = docBody.querySelector( '.' + cls );
+    var activeEl = nav.querySelector( '.' + classname )
+
+    if ( activeEl == el ) return
 
-    // And if it exists, disable it
-    if ( activeLink ) activeLink.classList.remove( cls );
+    // remove active class from existing element
+    if ( activeEl ) activeEl.classList.remove( classname ) 
 
     // Then enable the passed selector
-    selector.classList.add( cls );
+    el.classList.add( classname )
+
+  }
+
+  // Link activation function
+  function activateLink( el ) {
+    activate( el, activeAnchor )
 
+    // Set active landmark to active link’s parent
+    activateLandmark( getClosest( el, landmarkSelector ) )
   }
 
+  function activateLandmark( el ) {
+    if ( el ) activate( el, activeLandmark )
+  }
+
+  Event.resize.stop( resize )
+  Event.scroll( scroll )
+  Event.on( document, 'click', click )
+  Event.on( window, 'hashchange', hashChange )
+
 };
 
 // Public API

data/app/assets/javascripts/ratchet/shim/scope.js

@@ -0,0 +1,94 @@
+/**
+ * Scoped QuerySelector polyfill
+ * @source https://github.com/lazd/scopedQuerySelectorShim
+ * @author Larry Davis ( @lazd )
+ * @license BSD
+ */
+( function() {
+
+  // Throw error on super old browsers
+  if ( !HTMLElement.prototype.querySelectorAll ) {
+    throw new Error( 'rootedQuerySelectorAll: This polyfill can only be used with browsers that support querySelectorAll' );
+  }
+
+  // Create temporary element to query against and test for :scope support
+  var container = document.createElement( 'div' );
+
+  // Check if the browser supports :scope
+  try {
+
+    // Browser supports :scope, do nothing
+    container.querySelectorAll( ':scope *' );
+
+  // Otherwise
+  } catch ( e ) {
+
+    // Match usage of scope
+    var scopeRE = /^\s*:scope/gi;
+
+    // Overrides
+    function overrideNodeMethod( prototype, methodName ) {
+
+      // Store the old method for use later
+      var oldMethod = prototype[ methodName ];
+
+      // Override the method
+      prototype[ methodName ] = function( query ) {
+
+        var gaveContainer = false,
+            gaveId        = false,
+            nodeList;
+
+        if ( query.match( scopeRE ) ) {
+
+          // Remove :scope
+          query = query.replace( scopeRE, '' );
+
+          if ( !this.parentNode ) {
+
+            // Add to temporary container
+            container.appendChild( this );
+            gaveContainer = true;
+
+          }
+
+          parentNode = this.parentNode;
+
+          if ( !this.id ) {
+
+            // Give temporary ID
+            this.id = 'rootedQuerySelector_id_' + new Date().getTime();
+            gaveId = true;
+
+          }
+
+          // Find elements against parent node
+          nodeList = oldMethod.call( parentNode, '#' + this.id + ' ' + query );
+
+          // Reset the ID
+          if ( gaveId ) {
+            this.id = '';
+          }
+
+          // Remove from temporary container
+          if ( gaveContainer ) {
+            container.removeChild( this );
+          }
+
+          return nodeList;
+
+        } else {
+
+          // No immediate child selector used
+          return oldMethod.call( this, query );
+
+        }
+      };
+    }
+
+    // Browser doesnt support :scope, add polyfill
+    overrideNodeMethod( HTMLElement.prototype, 'querySelector' );
+    overrideNodeMethod( HTMLElement.prototype, 'querySelectorAll' );
+
+  }
+})();

data/app/assets/javascripts/ratchet/{enhancement → utility}/loader.js

@@ -5,6 +5,8 @@
  * @license MIT
  **/
 
+var toolbox = require( 'compose-toolbox' )
+
 // Public API function
 var loader = function( settings ) {
 
@@ -21,35 +23,40 @@ var loader = function( settings ) {
   };
 
   // Extend defaults
-  var options = Object.assign( {}, defaults, settings );
+  var options = toolbox.merge( defaults, settings );
+
+  // If it doesn’t already exist
+  if ( !document.querySelector( 'div.' + options.loaderClass ) ) {
+
+    // Create and prepend loader element
+    options.selector.insertAdjacentHTML( 'afterbegin', '<div class="' + options.loaderClass + '"></div>' );
 
-  // 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 ) {
+  var show = function( state, message ) {
 
     // Loader pending state
     if ( state === 'pending' ) {
 
-      element.textContent = options.loadingMessage;
+      element.textContent = message || 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.textContent = message || options.failureMessage;
       element.classList.remove( options.loadingClass );
       element.classList.add( options.failureClass );
 
     // Loader success state
     } else if ( state === 'success' ) {
 
-      element.textContent = options.successMessage;
+      element.textContent = message || options.successMessage;
       element.classList.remove( options.loadingClass );
       element.classList.add( options.successClass );
 
@@ -74,4 +81,4 @@ var loader = function( settings ) {
 };
 
 // Public API
-module.exports = loader;
+module.exports = loader;

data/app/assets/stylesheets/ratchet/_core.scss

@@ -1,6 +1,7 @@
 // Utility modules
 @import 'utility/global';
 @import 'utility/grid';
+@import 'utility/loader';
 
 // Base modules
 @import 'base/text';
@@ -8,13 +9,15 @@
 @import 'base/button';
 @import 'base/media';
 @import 'base/form';
+@import 'base/multistep-form';
 @import 'base/table';
 @import 'base/document';
 
 // Enhancement modules
-@import 'enhancement/loader';
 @import 'enhancement/feature';
 @import 'enhancement/sticky-sidebar';
 @import 'enhancement/notice';
 @import 'enhancement/hero';
 @import 'enhancement/contrast-section';
+@import 'enhancement/tooltip';
+@import 'enhancement/lightbox';

data/app/assets/stylesheets/ratchet/base/_button.scss

@@ -42,7 +42,7 @@
   } @else if $color == secondary {
     $color: $flush;
   } @else if $color == success {
-    $color: $lima;
+    $color: $apple;
   } @else if $color == failure {
     $color: $punch;
   }
@@ -54,9 +54,9 @@
     $margin-top: 15px;
     $margin-bottom: 20px;
   } @else if $size == large {
-    $padding: 10px 24px;
+    $padding: 12px 24px;
     $margin-top: 15px;
-    $margin-bottom: 23px;
+    $margin-bottom: 19px;
   } @else if $size == x-large {
     $font-size: 17px;
     $padding: 14px 26px;