ratchet_design 0.1.10 → 0.1.11

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/utility/loader.js

@@ -5,6 +5,8 @@
  * @license MIT
  **/
 
+var toolbox = require( 'compose-toolbox' )
+
 // Public API function
 var loader = function( settings ) {
 
@@ -21,7 +23,7 @@ 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 ) ) {
@@ -79,4 +81,4 @@ var loader = function( settings ) {
 };
 
 // Public API
-module.exports = loader;
+module.exports = loader;

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

@@ -9,6 +9,7 @@
 @import 'base/button';
 @import 'base/media';
 @import 'base/form';
+@import 'base/multistep-form';
 @import 'base/table';
 @import 'base/document';
 
@@ -19,4 +20,4 @@
 @import 'enhancement/hero';
 @import 'enhancement/contrast-section';
 @import 'enhancement/tooltip';
-@import 'enhancement/lightbox';
+@import 'enhancement/lightbox';

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

@@ -63,11 +63,6 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
     textarea,
     #{$text-inputs} {
 
-      // Active state
-      + span {
-        @extend %active;
-      }
-
       // Non-required active color
       &:not(:required):focus + span,
       &:not(:required):active + span {
@@ -86,11 +81,6 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
     textarea,
     #{$text-inputs} {
 
-      // Active state
-      + span {
-        @extend %active;
-      }
-
       // Non-required active color
       &:not(:required):focus + span,
       &:not(:required):active + span {
@@ -149,9 +139,10 @@ $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], inp
         transform .2s;
     }
 
-    // Move labels out of the way on focus
+    // Move labels out of the way on focus and empty
     &:focus + span,
-    &:active + span {
+    &:active + span,
+    &:not([value=""]) + span, {
       @extend %active;
     }
   }
@@ -540,7 +531,7 @@ button[type=submit] {
  * ------------------------------------- */
 
 // Apply validation styles to inputs & textareas
-textarea, #{$text-inputs} {
+textarea, #{$text-inputs}, select {
 
   // Strip default styling
   &:invalid {

data/app/assets/stylesheets/ratchet/base/_multistep-form.scss

@@ -0,0 +1,62 @@
+fieldset.form-step {
+  left: 0;
+  right: 0;
+
+  &[disabled] {
+    display: none;
+  }
+
+
+  // Transition to form step
+  &.arrived { animation: fade-in-right .5s forwards; }
+  
+  // Revisit form step
+  &.revisted, &.step-visited.arrived { animation: .5s fade-in-left forwards; }
+
+  // Transition away from form step
+  &.departed { animation: fade-out-left .5s forwards; }
+}
+
+// Transition to form step
+@keyframes fade-in-right {
+  0% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(200px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+}
+
+// Transition away from form step
+@keyframes fade-out-left {
+  0% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+
+  99% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(-200px, 0, 0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(-9999px, 0, 0);
+  }
+}
+
+// Return to previous form step
+@keyframes fade-in-left {
+  0% {
+    opacity: 0;
+    transform: perspective(1px) translate3d(-200px, 0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: perspective(1px) translate3d(0, 0, 0);
+  }
+}

data/app/assets/stylesheets/ratchet/utility/_global.scss

@@ -96,15 +96,6 @@ $mono-font: 'Nitti', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 // Transition duration
 $duration: .2s;
 
-// Class to prevent transitions
-.no-transitions * {
-  &,
-  &:after,
-  &:before {
-    transition: none !important;
-  }
-}
-
 /* ===================================== *
  * iv. Layout
  * ------------------------------------- */
@@ -251,4 +242,4 @@ $content-padding: vr(2); // 30px
 // Visually shown placeholder
 %shown {
   @include shown;
-}
+}

data/app/helpers/ratchet/application_helper.rb

@@ -21,6 +21,11 @@ module Ratchet
       content_for :blank, &block
     end
 
+    # Blank slate layout
+    def footer(&block)
+      content_for :footer, &block
+    end
+
     # Set custom page title
     def title(title = nil)
       title ? content_for(:title) { title + " | " + Site.name } : content_for(:title).presence
@@ -42,9 +47,25 @@ module Ratchet
     end
 
     # Consolidated page class output
-    def page_classes
-      request.path_parameters[:page].split("/").last + (selector ? " #{selector}" : "")
+    def page_class( classnames = nil )
+      if ( classnames )
+        @page_classes ||= ''
+        @page_classes = @page_classes + ' ' + classnames
+        @page_classes.strip!
+      else
+        @page_classes || ''
+      end
     end
 
+    # Consolidated page class output
+    def main_class( classnames = nil )
+      if ( classnames )
+        @main_classes ||= ''
+        @main_classes = @main_classes + ' ' + classnames
+        @main_classes.strip!
+      else
+        @main_classes || ''
+      end
+    end
   end
 end

data/app/views/layouts/ratchet/default.html.slim

@@ -41,7 +41,7 @@ html
     / Head
     = yield :head
 
-  body class="#{page_classes}"
+  body class=page_class
 
     / Icon inclusion
     = render "shared/ratchet/icons"
@@ -56,7 +56,7 @@ html
       = render "shared/ratchet/header"
 
       / Document main
-      main role="main"= yield
+      main class=main_class role="main"= yield
 
       / Document footer
       = render "shared/ratchet/footer"

data/app/views/shared/ratchet/_footer.html.slim

@@ -1,2 +1,3 @@
-footer role="contentinfo"
-  p © #{Time.now.year} #{Site.name}
+- if content_for?(:footer)
+  footer role="contentinfo"
+    = yield :footer

data/app/views/shared/ratchet/_header.html.slim

@@ -11,5 +11,5 @@ header role="banner"
     button.mobile-menu-button
 
     / Main site navigation
-    nav role="navigation"
+    nav.main-nav role="navigation"
       = yield :top_nav

data/lib/ratchet_design/version.rb

@@ -1,3 +1,3 @@
 module RatchetDesign
-  VERSION = "0.1.10"
+  VERSION = "0.1.11"
 end