ratchet_design 0.1.5 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9854474d864b29d5388bc282aecad7fc7a3f8760
-  data.tar.gz: 3b1eb0f65c9eefa2d94cca6781911eead681e4fd
+  metadata.gz: 800a6bcc6a8a10f42a0684bb4dda1d88dfb52cd7
+  data.tar.gz: 78ba7b72667ec3c73de93bc91b6eab8d269fac17
 SHA512:
-  metadata.gz: 4948c22ed7802902649afd43073d4f68f343218ef55d9a8aeab7164a7ee8ccbee6b4aec7a00996c338b7547cc2d9179a625676eb4d1fc9e9d37ac4f361f149f3
-  data.tar.gz: 518a7a7bc903d003065d93d83488924c3631a449752771afe684bc464b5938e59260f14987b921a14917c254549217fbf72cc39a06abd9c3f9e73476f43dea5c
+  metadata.gz: a573756a5d39a85e1e890ae4b3c72669146fbc77d820a7a3594fb132af7774b7f7926d56bfa8caaa8f35fd13428d56c898d3f8da831f4e92abd1a99516aa26d7
+  data.tar.gz: 5239ca2ac035a0dd1144b11247f4b9bc38582cc387ddb795a4c8a6a9903df512fe912305c73af4c0c6d97990f8f005f4ec69c14af576da5ee6470f4b84db247a

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

@@ -5,13 +5,14 @@
  * @license MIT
  **/
 
-var toolbox = require( 'compose-toolbox' )
+// Dependencies
+var evt = require( 'compose-event' );
 
 // Public API function
 var form = function( element, settings ) {
 
   // Overridable defaults
-  var defaults = {}
+  var defaults = {};
 
   // Parameter variables
   var selector = document.querySelector( element ) || document.querySelector( 'form' );
@@ -20,22 +21,22 @@ var form = function( element, settings ) {
   if ( !selector ) return false;
 
   // Scoped variables
-  var options  = toolbox.merge( defaults, settings ),
+  var options  = Object.assign( {}, 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
-  toolbox.event.on( docBody, 'keypress', 'input[type=number]', restrictInput )
+  docBody.addEventListener( 'keypress', keyHandler, false );
 
   // Run delegated `on input` listener
-  toolbox.event.on( docBody, 'input', '[type=range]', rangeHandler )
+  docBody.addEventListener( 'input', rangeHandler, true );
 
   // 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 ] );
 
   }
 
@@ -74,9 +75,14 @@ var form = function( element, settings ) {
   }
 
   // Keydown handler function
-  function restrictInput( event ) {
+  function keyHandler( event ) {
 
-    // If user typing in an input[type=number] and enters non-numeric characters
+    // Only run on number inputs
+    if ( event.target.type !== 'number' ) {
+      return false;
+    }
+
+    // If user enters non-numeric characters
     if ( event.which < 48 || event.which > 57 ) {
 
       // Supress them
@@ -105,6 +111,109 @@ 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,31 +6,69 @@
  **/
 
 // Dependencies
-var toolbox    = require( 'compose-toolbox' )
+var matches = require( '../utility/matches' );
 
 // Public API function
-var mobileMenu = function( settings ) {
+var mobileMenu = function( element, settings ) {
 
   // Overridable defaults
   var defaults = {
     initWidth  : '700px',
     openClass  : 'menu-open',
-    nav        : '.main-nav',
-    button     : '.mobile-menu-button'
+    menuButton : '.mobile-menu-button'
   },
 
   // Scoped variables
-  options    = toolbox.merge( defaults, settings ),
-  selector   = options.button + ', ' + options.openClass + ' ' + options.nav + ' a',
+  options    = Object.assign( {}, defaults, settings ),
+  selector   = document.querySelector( element ),
+  widthQuery = window.matchMedia( '(max-width: ' + options.initWidth + ')' ),
   docBody    = document.body;
 
   // Attach listeners
-  toolbox.event.on( document, 'click', selector, function() {
-    // Toggle body class
-    docBody.classList.toggle( options.openClass )
-  })
+  if ( selector ) {
 
-}
+    // 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/validation.js

@@ -0,0 +1,263 @@
+/**
+ * Validation 0.0.6
+ * Compose form validation module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Dependencies
+var matches    = require( '../utility/matches'     ),
+    getClosest = require( '../utility/get_closest' ),
+    wordCount  = require( '../utility/word_count'  );
+
+// Public API function
+var validation = function( element, settings ) {
+
+  // Overridable defaults
+  var defaults = {};
+
+  // Parameter variables
+  var selector = document.querySelector( element ) || document.querySelector( '[required]' );
+
+  // Only run if selector exists & validation is supported
+  if ( !selector || typeof document.createElement( 'input' ).checkValidity !== 'function' ) return false;
+
+  // Scoped variables
+  var options = Object.assign( {}, defaults, settings ),
+      docBody = document.body;
+
+  // Suppress default message bubbles
+  docBody.addEventListener( 'invalid', function( event ) {
+    event.preventDefault();
+  }, true );
+
+  // Run delegated `on blur` validation checks
+  docBody.addEventListener( 'blur', blurHandler, true );
+
+  // Run delegated `on submit` validation checks
+  docBody.addEventListener( 'click', submissionHandler, false );
+
+  // Blur validation handler
+  function blurHandler( event ) {
+
+    // Only run on non-submit inputs
+    if ( !matches( event.target, 'input:not([type=submit]), textarea' ) ) return false;
+
+    // Scoped variables
+    var element   = event.target,
+        minWords  = element.dataset.minWords,
+        maxWords  = element.dataset.maxWords,
+        indicator = getClosest( element, 'label' ) || element,
+        validity;
+
+    // If element only contains whitespace, strip value
+    if ( element.value && !element.value.replace( /\s/g, '' ).length ) {
+      element.value = '';
+    }
+
+    // Remove pre-existing validation message
+    messageHandler( 'hide', element );
+
+    // If element has `data-min-words` attribute
+    if ( minWords ) {
+
+      // Run respective validation function
+      validateWords( 'min', element, minWords );
+
+    }
+
+    // If element has `data-min-words` attribute
+    if ( maxWords ) {
+
+      // Run respective validation function
+      validateWords( 'max', element, maxWords );
+
+    }
+
+    // Check validity
+    validity = element.checkValidity();
+
+    // If the element has a value but is invalid
+    if ( element.value && !validity ) {
+
+      // Set invalid state
+      indicator.classList.remove( 'valid' );
+      indicator.classList.add( 'invalid' );
+
+    // If the element has a value and is valid
+    } else if ( element.value && validity ) {
+
+      // Set valid state
+      indicator.classList.remove( 'invalid' );
+      indicator.classList.add( 'valid' );
+
+    // If the element has no value
+    } else if ( !element.value ) {
+
+      // Set neutral state
+      indicator.classList.remove( 'valid' );
+      indicator.classList.remove( 'invalid' );
+
+    }
+
+  }
+
+  // Submission validation handler function
+  function submissionHandler( event ) {
+
+    // Only run on submission
+    if ( !matches( event.target, 'input[type=submit], button[type=submit]' ) ) return;
+
+    // Scoped variables
+    var invalidForm = getClosest( event.target, 'form' ),
+        invalidElem = invalidForm.querySelector( 'input:invalid, textarea:invalid' ),
+        indicator;
+
+    // If invalid element found
+    if ( invalidElem ) {
+
+      // Set indicator to parent label if it exists
+      indicator = getClosest( invalidElem, 'label' ) || invalidElem;
+
+      // If credit card field is invalid
+      if ( matches( invalidElem, '[data-stripe=number]' ) ) {
+
+        // Strip it of non-number characters
+        invalidElem.value = invalidElem.value.replace( /[^0-9 -]/g, '' );
+
+        // Evaluate form validity again
+        invalidElem = invalidForm.querySelector( 'input:invalid, textarea:invalid' );
+
+        // And return if valid
+        if ( !invalidElem ) return;
+
+      }
+
+      // Prevent default behavior
+      event.preventDefault();
+
+      // If invalid is not hidden
+      if ( invalidElem.style.display !== 'none' ) {
+
+        // Focus it
+        invalidElem.focus();
+
+      // Otherwise
+      } else {
+
+        // Focus its immediate sibling (mostly used for upload buttons)
+        invalidElem.nextSibling.focus();
+
+      }
+
+      // Toggle classes
+      indicator.classList.remove( 'valid' );
+      indicator.classList.add( 'invalid' );
+
+      // Show validation message
+      messageHandler( 'show', invalidElem );
+
+      // Prevent Safari submission
+      return false;
+
+    }
+
+  }
+
+  // Validation message handler function
+  function messageHandler( action, element ) {
+
+    // Scoped variables
+    var parentForm  = getClosest( element, 'form' ),
+        oldMessage  = parentForm.querySelector( '.validation-message' ),
+        newMessage  = element.validationMessage,
+
+    // Hide old message
+    hideMessage = function() {
+      oldMessage.parentNode.removeChild( oldMessage );
+    },
+
+    // Show new message
+    showMessage = function() {
+
+      // Find the element's parent label
+      var labelParent = getClosest( element, 'label' );
+
+      // If it doesn't exist, abort
+      if ( !labelParent ) return false;
+
+      // Otherwise, create and append the validation message
+      labelParent.insertAdjacentHTML( 'beforeend',  '<aside class="validation-message"><p>' + newMessage + '</p></aside>' );
+
+    };
+
+    // If a `data-message` attribute exists, use it in message
+    if ( element.dataset.message ) newMessage = element.dataset.message;
+
+    // If hide action is passed hide old message
+    if ( oldMessage && action === 'hide' ) hideMessage();
+
+    // If show action is passed and no old message exists
+    if ( action === 'show' && !oldMessage ) {
+
+      // Show new message
+      showMessage();
+
+    // If show action is passed and old message exists
+    } else if ( action === 'show' && oldMessage ) {
+
+      // Make sure old message is not on currently invalid element
+      if ( oldMessage.parentNode !== element.parentNode ) {
+
+        // Hide old message
+        hideMessage();
+
+        // And show new message
+        showMessage();
+
+      // Otherwise
+      } else {
+
+        // Update message text on currently invalid element
+        oldMessage.childNodes[ 0 ].textContent = newMessage;
+
+      }
+
+    }
+
+  }
+
+  // Min- or max-words validation function
+  function validateWords( type, element, goal ) {
+
+    // Defaults settings to min-words
+    var value     = element.value,
+        condition = wordCount( value ) < goal,
+        verbiage  = 'at least ';
+
+    // Overwrite defaults in case of max-words
+    if ( type === 'max' ) {
+      condition = wordCount( value ) > goal;
+      verbiage  = 'no more than ';
+    }
+
+    // If value exists and it meets invalid condition
+    if ( value && condition ) {
+
+      // Set a custom error message
+      element.setCustomValidity( 'Please write ' + verbiage + goal + ' words.' );
+
+    // Otherwise
+    } else {
+
+      // Default to normal error messaging
+      element.setCustomValidity( '' );
+
+    }
+
+  }
+
+};
+
+// Public API
+module.exports = validation;