ratchet_design 0.1.10 → 0.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8924ce8c1b5c29fe79e3129807f7b5da164fbc49
-  data.tar.gz: f82a0c67c5f6717c35e9ec3651011104b103bdd2
+  metadata.gz: ec25d12b82f3d04fbb1c00a3ec6d972875d06cdb
+  data.tar.gz: 65a3eb002e2e5e4af5846f831c21f0572ac51868
 SHA512:
-  metadata.gz: 8e91b75f13d5b5ee82d1f44f59fb1f2e247b3a168338476d53b93c9281da7ec1a7bddbf991ea39009abf55aa06a5652352a2d9a8a85456660d7b4ce47ced1651
-  data.tar.gz: 238755bdf99cb31751ee696abd9d902069eed1009b1b72ef273690e06d536cf3ad37565b7d2f886f76cfa6e7e71e126c3ce91882a60caf896b2c9cdd45fd42b4
+  metadata.gz: 073a87361ce7d26ba4ab286477c2e44a37c040918f86774ae4011097580d3d5d5c19241da30d7f3ad14663ee45fa65e945a7cdd21a491666d400d469becf98ac
+  data.tar.gz: 847a04f20c510d3b1319b1313fb868acdcdb54fb5781588943a678f0d24f91450887309fe94020b9ba7c27a0848a81bd0166929c9eaa9feafe0a0e5e1c6bb81b

data/app/assets/javascripts/ratchet/base/form.js

@@ -5,14 +5,13 @@
  * @license MIT
  **/
 
-// Dependencies
-var evt = require( 'compose-event' );
+var toolbox = require( 'compose-toolbox' )
 
 // Public API function
 var form = function( element, settings ) {
 
   // Overridable defaults
-  var defaults = {};
+  var defaults = {}
 
   // Parameter variables
   var selector = document.querySelector( element ) || document.querySelector( 'form' );
@@ -21,22 +20,22 @@ var form = function( element, settings ) {
   if ( !selector ) return false;
 
   // Scoped variables
-  var options  = Object.assign( {}, defaults, settings ),
+  var options  = toolbox.merge( defaults, settings ),
       rangeEls = document.querySelectorAll( 'input[type=range]' ),
       tickEls  = document.querySelectorAll( 'input[type=checkbox], input[type=radio]' ),
       docBody  = document.body;
 
   // Prevent non-numeric characters in number fields
-  docBody.addEventListener( 'keypress', keyHandler, false );
+  toolbox.event.on( docBody, 'keypress', 'input[type=number]', restrictInput )
 
   // Run delegated `on input` listener
-  docBody.addEventListener( 'input', rangeHandler, true );
+  toolbox.event.on( docBody, 'input', '[type=range]', rangeHandler )
 
   // Loop over any range inputs that are present
   for ( var rangeIndex = 0; rangeIndex < rangeEls.length; rangeIndex++ ) {
 
     // And run their handler function explicitly at runtime
-    rangeHandler( rangeEls[ rangeIndex ] );
+    rangeHandler( rangeEls[ rangeIndex ] )
 
   }
 
@@ -75,14 +74,9 @@ var form = function( element, settings ) {
   }
 
   // Keydown handler function
-  function keyHandler( event ) {
+  function restrictInput( event ) {
 
-    // Only run on number inputs
-    if ( event.target.type !== 'number' ) {
-      return false;
-    }
-
-    // If user enters non-numeric characters
+    // If user typing in an input[type=number] and enters non-numeric characters
     if ( event.which < 48 || event.which > 57 ) {
 
       // Supress them
@@ -111,109 +105,6 @@ var form = function( element, settings ) {
 
   }
 
-  // Rangetouch 0.0.9 - https://github.com/selz/rangetouch
-  function rangeTouch( size ) {
-
-    // Bail if not a touch device
-    if ( !( 'ontouchstart' in document.documentElement ) ) {
-      return;
-    }
-
-    // Scoped variables
-    var rangeInputs = document.querySelectorAll( '[type=range]' ),
-        thumbSize   = size || 20;
-
-    // Set touchAction to prevent delays
-    for ( var i = rangeInputs.length - 1; i >= 0; i-- ) {
-      rangeInputs[ i ].style.touchAction = 'manipulation';
-      rangeInputs[ i ].style.webkitUserSelect = 'none';
-    }
-
-    // Listen for events
-    docBody.addEventListener( 'touchstart', setValue, false );
-    docBody.addEventListener( 'touchmove', setValue, false );
-    docBody.addEventListener( 'touchend', setValue, false );
-
-    // Get the number of decimal places
-    function getDecimalPlaces( value ) {
-      var match = ( '' + value ).match( /( ?:\.( \d+ ) )?( ?:[eE]( [+-]?\d+ ) )?$/ );
-      if ( !match ) {
-        return 0;
-      }
-      return Math.max( 0, ( match[ 1 ] ? match[ 1 ].length : 0 ) - ( match[ 2 ] ? +match[ 2 ] : 0 ) );
-    }
-
-    // Round to the nearest step
-    function roundToStep( number, step ) {
-      if ( step < 1 ) {
-        var places = getDecimalPlaces( parseInt( step ) );
-        return parseFloat( number.toFixed( places ) );
-      }
-      return ( Math.round( number / step ) * step );
-    }
-
-    // Get the value based on touch position
-    function getValue( event ) {
-
-      // Scoped variables
-      var input = event.target,
-          touch = event.changedTouches[ 0 ],
-          min   = parseFloat( input.getAttribute( 'min' ) )  || 0,
-          max   = parseFloat( input.getAttribute( 'max' ) )  || 100,
-          step  = parseFloat( input.getAttribute( 'step' ) ) || 1,
-          delta = max - min;
-
-      // Calculate percentage
-      var percent,
-          clientRect = input.getBoundingClientRect(),
-          thumbWidth = ( ( ( 100 / clientRect.width ) * ( thumbSize / 2 ) ) / 100 );
-
-      // Determine left percentage
-      percent = ( ( 100 / clientRect.width ) * ( touch.clientX - clientRect.left ) );
-
-      // Don't allow outside bounds
-      if ( percent < 0 ) {
-        percent = 0;
-      } else if ( percent > 100 ) {
-        percent = 100;
-      }
-
-      // Factor in the thumb offset
-      if ( percent < 50 ) {
-        percent -= ( ( 100 - ( percent * 2 ) ) * thumbWidth );
-      } else if ( percent > 50 ) {
-        percent += ( ( ( percent - 50 ) * 2 ) * thumbWidth );
-      }
-
-      // Find the closest step to the mouse position
-      return min + roundToStep( delta * ( percent / 100 ), step );
-
-    }
-
-    // Update range value based on position
-    function setValue( event ) {
-
-      // Bail if not a range slider
-      if ( event.target.type !== 'range' ) {
-        return;
-      }
-
-      // Prevent text highlight on iOS
-      event.preventDefault();
-
-      // Set value
-      event.target.value = getValue( event );
-
-      // Trigger input event
-      evt.fire( event.target, ( event.type === 'touchend' ? 'change' : 'input' ) );
-
-    }
-
-  }
-
-  // Initialize RangeTouch
-  rangeTouch();
-
 };
 
 // Public API

data/app/assets/javascripts/ratchet/base/mobilemenu.js

@@ -6,69 +6,31 @@
  **/
 
 // Dependencies
-var matches = require( '../utility/matches' );
+var toolbox    = require( 'compose-toolbox' )
 
 // Public API function
-var mobileMenu = function( element, settings ) {
+var mobileMenu = function( settings ) {
 
   // Overridable defaults
   var defaults = {
     initWidth  : '700px',
     openClass  : 'menu-open',
-    menuButton : '.mobile-menu-button'
+    nav        : '.main-nav',
+    button     : '.mobile-menu-button'
   },
 
   // Scoped variables
-  options    = Object.assign( {}, defaults, settings ),
-  selector   = document.querySelector( element ),
-  widthQuery = window.matchMedia( '(max-width: ' + options.initWidth + ')' ),
+  options    = toolbox.merge( defaults, settings ),
+  selector   = options.button + ', ' + options.openClass + ' ' + options.nav + ' a',
   docBody    = document.body;
 
   // Attach listeners
-  if ( selector ) {
+  toolbox.event.on( document, 'click', selector, function() {
+    // Toggle body class
+    docBody.classList.toggle( options.openClass )
+  })
 
-    // Call listener function explicitly at run time
-    queryHandler( widthQuery );
-
-    // Attach listener function to listen in on state changes
-    widthQuery.addListener( queryHandler );
-
-  }
-
-  // Click handler function
-  function clickHandler( event ) {
-
-    // Combine element selector with anchor links
-    var toggleSelector = options.menuButton + ', .' + options.openClass + ' ' + element + ' a[href^="#"]';
-
-    // Only run on menu button
-    if ( matches( event.target, toggleSelector ) ) {
-
-      // Toggle body class
-      docBody.classList.toggle( options.openClass );
-
-    }
-
-  }
-
-  // Media query handler function
-  function queryHandler( condition ) {
-
-    // If media query matches
-    if ( condition.matches ) {
-
-      // Click function listener
-      selector.addEventListener( 'click', clickHandler, false );
-
-    } else {
-
-      // Remove click listener
-      selector.removeEventListener( 'click', clickHandler, false );
-
-    }
-  }
-
-};
+}
 
 // Public API
-module.exports = mobileMenu;
+module.exports = mobileMenu

data/app/assets/javascripts/ratchet/base/sync-input-value.js

@@ -0,0 +1,30 @@
+var toolbox = require( 'compose-toolbox' )
+var Event = toolbox.event
+var textSelectors = 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password]'
+
+Event.bubbleFormEvents()
+
+function textInputs() {
+  return document.querySelectorAll( textSelectors )
+}
+
+function syncValue( input ) {
+
+  // Allow calling from event handler
+  if ( input.target ) { input = input.target }
+
+  // If element only contains whitespace, strip value
+  if ( !input.value.replace( /\s/g, '' ).length ) { input.value = ''; }
+
+  input.setAttribute( 'value', input.value )
+
+}
+
+Event.change( function() {
+
+  // Ensure that all inputs have a value
+  toolbox.each( textInputs(), syncValue )
+
+})
+
+Event.on( document, 'blur', 'input', syncValue )

data/app/assets/javascripts/ratchet/core.js

@@ -1,99 +1,76 @@
-// Shim modules
-require( './shim/classlist' );
-require( './shim/object.assign' );
-
 // Utility modules
-var loadFont    = require( './utility/load_font' );
-var fullStop    = require( './utility/full_stop' );
-var unhover     = require( './utility/unhover' );
-var throttle    = require( './utility/throttle' );
-var loadScript  = require( './utility/load_script' );
-var fromTop     = require( './utility/from_top' );
-var scrollTo    = require( './utility/scroll_to' );
-var matches     = require( './utility/matches' );
-var getClosest  = require( './utility/get_closest' );
-var getNext     = require( './utility/get_next' );
-var wordCount   = require( './utility/word_count' );
-var compileData = require( './utility/compile_data' );
-var timeout     = require( './utility/timeout' );
-var ajax        = require( 'superagent' );
-var loader      = require( './utility/loader' );
+var loadFont    = require( './utility/load_font' )
+var loadScript  = require( './utility/load_script' )
 
 // Base modules
-var mobileMenu  = require( './base/mobilemenu' );
-var form        = require( './base/form' );
-var validation  = require( './base/validation' );
+var mobileMenu  = require( './base/mobilemenu' )
+var form        = require( './base/form' )
+var formUp      = require( 'compose-form-up' )
+form.validate   = formUp.validate
+form.next       = formUp.next
+require( './base/sync-input-value' )
 
 // Enhancement modules
-var waypoints   = require( './enhancement/waypoints' );
-var notice      = require( './enhancement/notice' );
-var sticky      = require( './enhancement/sticky' );
-var lightbox    = require( './enhancement/lightbox' );
-var esvg        = require( './_svg' );
+var waypoints   = require( './enhancement/waypoints' )
+var notice      = require( './enhancement/notice' )
+var sticky      = require( './enhancement/sticky' )
+var lightbox    = require( './enhancement/lightbox' )
+var esvg        = require( './_svg' )
 // var swap        = require( './enhancement/swap' );
 
 // Vendor modules
-var event       = require( 'compose-event' );
-var highlighter = require( 'compose-code-highlighter' );
-require( 'codemirror/mode/htmlmixed/htmlmixed' );
-require( 'codemirror/mode/slim/slim' );
-require( 'codemirror/mode/javascript/javascript' );
-require( 'codemirror/mode/css/css' );
-require( 'codemirror/mode/sql/sql' );
-require( 'codemirror/mode/php/php' );
-require( 'codemirror/mode/ruby/ruby' );
-require( 'codemirror/mode/shell/shell' );
-require( 'codemirror/mode/go/go' );
-require( 'codemirror/mode/python/python' );
-require( 'codemirror/mode/yaml/yaml' );
-require( 'codemirror/mode/clike/clike' );
-require( 'codemirror/addon/runmode/runmode' );
-require( 'codemirror/addon/edit/matchbrackets' );
+var toolbox     = require( 'compose-toolbox' )
+var event       = toolbox.event
+var ajax        = require( 'superagent' )
+var rangeTouch  = require( 'rangetouch' )
+var highlighter = require( 'compose-code-highlighter' )
+var loader      = require( 'compose-loader' )
+
+require( 'codemirror/mode/htmlmixed/htmlmixed' )
+require( 'codemirror/mode/slim/slim' )
+require( 'codemirror/mode/javascript/javascript' )
+require( 'codemirror/mode/css/css' )
+require( 'codemirror/mode/sql/sql' )
+require( 'codemirror/mode/php/php' )
+require( 'codemirror/mode/ruby/ruby' )
+require( 'codemirror/mode/shell/shell' )
+require( 'codemirror/mode/go/go' )
+require( 'codemirror/mode/python/python' )
+require( 'codemirror/mode/yaml/yaml' )
+require( 'codemirror/mode/clike/clike' )
+require( 'codemirror/addon/runmode/runmode' )
+require( 'codemirror/addon/edit/matchbrackets' )
+
+// Initialize component features
+rangeTouch.set("thumbWidth", 20);  // Annoying hack to make input ranges work smoothly on touch devices
+
+event.scroll.disablePointer()      // disable pointer events on scroll for performance (to avoid extra repaints)
+event.resize.disableAnimation()    // disable animation on resize for performance (to avoid extra repaints)
+
+// Trigger these events each time the page loads
+event.change( function() {
+
+  // Form module
+  form()
+
+  // Syntax highlighting
+  highlighter.highlight()
+});
 
 // Public API object
-window.ratchet = module.exports = {
+var ratchet = toolbox.merge( {
   loadFont    : loadFont,
-  fullStop    : fullStop,
-  unhover     : unhover,
-  throttle    : throttle,
   loadScript  : loadScript,
-  fromTop     : fromTop,
-  scrollTo    : scrollTo,
-  matches     : matches,
-  getClosest  : getClosest,
-  getNext     : getNext,
-  wordCount   : wordCount,
-  compileData : compileData,
-  timeout     : timeout,
   ajax        : ajax,
   loader      : loader,
   mobileMenu  : mobileMenu,
   form        : form,
-  validation  : validation,
+  validation  : formUp.validate,
   waypoints   : waypoints,
   notice      : notice,
   sticky      : sticky,
   lightbox    : lightbox,
-  esvg        : esvg,
-  event       : event
-}
-
-// Default events instantiation
-event.change( function() {
-
-  // Unhover module
-  unhover();
-
-  // FullStop module
-  fullStop();
-
-  // Form module
-  form();
-
-  // Validation module
-  validation();
-
-  // Syntax highlighting
-  highlighter.highlight();
+  esvg        : esvg
+}, toolbox )
 
-}, false );
+window.ratchet = module.exports = ratchet

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

@@ -6,9 +6,10 @@
  **/
 
 // Dependencies
-var Event   = require( 'compose-event' ),
-    loader  = require( '../utility/loader' ),
-    timeout = require( '../utility/timeout' );
+var toolbox = require( 'compose-toolbox' ),
+    Event   = toolbox.event,
+    delay   = toolbox.delay,
+    loader  = require( '../utility/loader' );
 
 // Public API function
 var lightbox = function( element, settings ) {
@@ -22,7 +23,7 @@ var lightbox = function( element, settings ) {
   },
 
   // Main variables
-  options    = Object.assign( {}, defaults, settings ),
+  options    = toolbox.merge( defaults, settings ),
   selector   = document.querySelector( element ),
   widthQuery = window.matchMedia( '(max-width: ' + options.initWidth + ')' ),
   spinner    = loader({ loadingMessage: 'Loading image', failureMessage : 'No image found' }),
@@ -33,7 +34,7 @@ var lightbox = function( element, settings ) {
   if ( !selector ) return false;
 
   // Attach open lightbox click listener
-  Event.on( document, 'click', 'a[href$=jpg] ,a[href$=png], a[href$=gif], a[href$=svg]', clickHandler );
+  Event.on( document, 'click', 'a[href$=jpg], a[href$=png], a[href$=gif], a[href$=svg]', clickHandler );
 
   // Attach close lightbox click listener
   Event.on( document, 'click', '.lightbox', hideLightbox );
@@ -98,7 +99,7 @@ var lightbox = function( element, settings ) {
   function loadFailure( event ) {
 
     // Wait a second…
-    timeout.set( function() {
+    delay( function() {
 
       // Show spinner failure state
       spinner.show( 'failure' );
@@ -106,7 +107,7 @@ var lightbox = function( element, settings ) {
     }, 1000 );
 
     // Wait a couple more seconds…
-    timeout.set( function() {
+    delay( function() {
 
       // Hide the lightbox
       hideLightbox();
@@ -161,4 +162,4 @@ var lightbox = function( element, settings ) {
 };
 
 // Public API
-module.exports = lightbox;
+module.exports = lightbox;

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

@@ -5,6 +5,8 @@
  * @license MIT
  **/
 
+var toolbox = require( 'compose-toolbox' )
+
 // Public API function
 var notice = function( element, settings ) {
 
@@ -16,9 +18,10 @@ var notice = function( element, settings ) {
   };
 
   // Scoped variables
-  var options    = Object.assign( {}, defaults, settings ),
+  var options    = toolbox.merge( defaults, settings ),
       selector   = document.querySelector( element ),
-      cookieName = 'dismiss-' + options.noticeName;
+      cookieName = 'dismiss-' + options.noticeName,
+      button     = selector.querySelector( '.' + options.noticeClass + ' .close-btn' );
 
   // Only run if selector exists & no dismiss cookie is found
   if ( !selector || getCookie( cookieName ) ) return false;
@@ -31,7 +34,7 @@ var notice = function( element, settings ) {
   document.querySelector( 'main' ).insertAdjacentHTML( 'afterbegin', html );
 
   // Listen for close button click
-  selector.querySelector( '.' + options.noticeClass + ' > .close-btn' ).addEventListener( 'click', dismissNotice, false );
+  toolbox.event.on( button , 'click', dismissNotice )
 
   // Dismiss notice on close
   function dismissNotice( event ) {
@@ -47,6 +50,8 @@ var notice = function( element, settings ) {
 
     // Set cookie to prevent it from returning
     document.cookie = cookieName + '=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
+    
+    toolbox.event.off( button )
 
   }
 

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

@@ -6,8 +6,8 @@
  **/
 
 // Dependencies
-var throttle = require( '../utility/throttle' ),
-    fromTop  = require( '../utility/from_top' );
+var toolbox  = require( 'compose-toolbox' ),
+    fromTop  = toolbox.fromTop
 
 // Public API function
 var sticky = function( element, settings ) {
@@ -21,7 +21,7 @@ var sticky = function( element, settings ) {
   };
 
   // Scoped variables
-  var options  = Object.assign( {}, defaults, settings ),
+  var options  = toolbox.merge( defaults, settings ),
       selector = document.querySelector( element );
 
   // If selector is not present
@@ -40,15 +40,11 @@ var sticky = function( element, settings ) {
         elemHeight = selector.offsetHeight,
         anchorInit = options.anchorPoint,
         docBody    = document.body,
+        resizeHandler = toolbox.event.resize( resized ),
+        scrollHandler = toolbox.event.scroll( scrolled ),
         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 );
 
@@ -60,38 +56,25 @@ var sticky = function( element, settings ) {
   // Media query handler function
   function queryHandler( condition ) {
 
-    // If media query matches
-    if ( condition.matches ) {
-
-      // Call resize listener function explicitly at run time
-      resizeHandler();
+    // Call resize listener function explicitly at run time
+    resized()
 
-      // Resize function listener
-      window.addEventListener( 'optimizedResize', resizeHandler, false );
+    // Call scroll listener function explicitly at run time
+    scrolled();
+    
+    // Reset styles
+    if ( !condition.matches ) docBody.classList.remove( 'sticky' )
 
-      // Call scroll listener function explicitly at run time
-      scrollHandler();
-
-      // Scroll function listener
-      window.addEventListener( 'optimizedScroll', scrollHandler, false );
-
-    } else {
+    // Remove resize listener
+    resizeHandler.toggle( condition.matches )
 
-      // Reset styles
-      docBody.classList.remove( 'sticky' );
-
-      // Remove resize listener
-      window.removeEventListener( 'optimizedResize', resizeHandler, false );
-
-      // Remove scroll listener
-      window.removeEventListener( 'optimizedScroll', scrollHandler, false );
-
-    }
+    // Remove scroll listener
+    scrollHandler.toggle( condition.matches )
 
   }
 
   // Resize handler function
-  function resizeHandler() {
+  function resized() {
 
     // Update document height variable
     docHeight = document.body.scrollHeight;
@@ -102,7 +85,7 @@ var sticky = function( element, settings ) {
   }
 
   // Scroll handler function
-  function scrollHandler() {
+  function scrolled() {
 
     // Scoped variables
     var newScrollY = window.pageYOffset,