ratchet_design 0.1.5 → 0.1.6

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

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

@@ -0,0 +1,234 @@
+/**
+ * ClassList
+ * Cross-browser full element.classList implementation
+ * @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js
+ * @author Eli Grey - http://eligrey.com
+ * @license MIT
+ **/
+
+if ( 'document' in self ) {
+
+  // Full polyfill for browsers with no classList support
+  if ( !( 'classList' in document.createElement( '_' ) ) ) {
+
+    ( function( view ) {
+
+    'use strict';
+
+    if ( !( 'Element' in view ) ) return;
+
+    var
+      classListProp = 'classList',
+      protoProp     = 'prototype',
+      elemCtrProto  = view.Element[ protoProp ],
+      objCtr        = Object,
+
+      strTrim = String[ protoProp ].trim || function() {
+        return this.replace( /^\s+|\s+$/g, '' );
+      },
+
+      arrIndexOf = Array[ protoProp ].indexOf || function( item ) {
+        for ( var i = 0; i < this.length; i++ ) {
+          if ( i in this && this[ i ] === item ) {
+            return i;
+          }
+        }
+        return -1;
+      },
+
+      DOMEx = function( type, message ) {
+        this.name    = type;
+        this.code    = DOMException[ type ];
+        this.message = message;
+      },
+
+      checkTokenAndGetIndex = function( classList, token ) {
+        if ( token === '' ) {
+          throw new DOMEx(
+            'SYNTAX_ERR',
+            'An invalid or illegal string was specified'
+          );
+        }
+        if ( /\s/.test( token ) ) {
+          throw new DOMEx(
+            'INVALID_CHARACTER_ERR',
+            'String contains an invalid character'
+          );
+        }
+        return arrIndexOf.call( classList, token );
+      },
+
+      ClassList = function( elem ) {
+        var trimmedClasses = strTrim.call( elem.getAttribute( 'class' ) || '' ),
+            classes = trimmedClasses ? trimmedClasses.split( /\s+/ ) : [];
+
+        for ( var i = 0; i < classes.length; i++ ) {
+          this.push( classes[ i ] );
+        }
+
+        this._updateClassName = function() {
+          elem.setAttribute( 'class', this.toString() );
+        };
+      },
+
+      classListProto = ClassList[ protoProp ] = [],
+
+      classListGetter = function() {
+        return new ClassList( this );
+      };
+
+    DOMEx[ protoProp ] = Error[ protoProp ];
+
+    classListProto.item = function( i ) {
+      return this[ i ] || null;
+    };
+
+    classListProto.contains = function( token ) {
+      token += '';
+      return checkTokenAndGetIndex( this, token ) !== -1;
+    };
+
+    classListProto.add = function() {
+      var
+        tokens  = arguments,
+        iter    = 0,
+        len     = tokens.length,
+        updated = false,
+        token;
+
+      do {
+        token = tokens[ iter ] + '';
+        if ( checkTokenAndGetIndex( this, token ) === -1 ) {
+          this.push( token );
+          updated = true;
+        }
+      }
+
+      while ( ++iter < len );
+
+      if ( updated ) {
+        this._updateClassName();
+      }
+    };
+
+    classListProto.remove = function() {
+      var
+        tokens  = arguments,
+        iter    = 0,
+        len     = tokens.length,
+        updated = false,
+        token,
+        index;
+
+      do {
+        token = tokens[ iter ] + '';
+        index = checkTokenAndGetIndex( this, token );
+
+        while ( index !== -1 ) {
+          this.splice( index, 1 );
+          updated = true;
+          index = checkTokenAndGetIndex( this, token );
+        }
+      }
+
+      while ( ++iter < len );
+
+      if ( updated ) {
+        this._updateClassName();
+      }
+    };
+
+    classListProto.toggle = function( token, force ) {
+      token += '';
+
+      var
+        result = this.contains( token ),
+        method = result ? force !== true && 'remove' : force !== false && 'add';
+
+      if ( method ) {
+        this[ method ]( token );
+      }
+
+      if ( force === true || force === false ) {
+        return force;
+      } else {
+        return !result;
+      }
+    };
+
+    classListProto.toString = function() {
+      return this.join( ' ' );
+    };
+
+    if ( objCtr.defineProperty ) {
+      var classListPropDesc = {
+          get          : classListGetter,
+          enumerable   : true,
+          configurable : true
+      };
+
+      try {
+        objCtr.defineProperty( elemCtrProto, classListProp, classListPropDesc );
+      }
+
+      catch ( ex ) {
+        if ( ex.number === -0x7FF5EC54 ) {
+          classListPropDesc.enumerable = false;
+          objCtr.defineProperty( elemCtrProto, classListProp, classListPropDesc );
+        }
+      }
+
+    } else if ( objCtr[ protoProp ].__defineGetter__ ) {
+      elemCtrProto.__defineGetter__( classListProp, classListGetter );
+    }
+
+    }( self ));
+
+  } else {
+
+    ( function() {
+
+      'use strict';
+
+      var testElement = document.createElement( '_' );
+
+      testElement.classList.add( 'c1', 'c2' );
+
+      if ( !testElement.classList.contains( 'c2' ) ) {
+        var createMethod = function( method ) {
+          var original = DOMTokenList.prototype[ method ];
+
+          DOMTokenList.prototype[ method ] = function( token ) {
+            var i, len = arguments.length;
+
+            for ( i = 0; i < len; i++ ) {
+              token = arguments[ i ];
+              original.call( this, token );
+            }
+          };
+        };
+        createMethod( 'add' );
+        createMethod( 'remove' );
+      }
+
+      testElement.classList.toggle( 'c3', false );
+
+      if ( testElement.classList.contains( 'c3' ) ) {
+        var _toggle = DOMTokenList.prototype.toggle;
+
+        DOMTokenList.prototype.toggle = function( token, force ) {
+          if ( 1 in arguments && !this.contains( token ) === !force ) {
+            return force;
+          } else {
+            return _toggle.call( this, token );
+          }
+        };
+
+      }
+
+      testElement = null;
+
+    }());
+
+  }
+}