ratchet_design 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 05e52118e10d1100b0d48fc879d875a872586559
-  data.tar.gz: a4b56310564057e3446f8b8d16c7a39f7d728b0c
+  metadata.gz: f6297919184307b0129029a416712ee65e6c1d94
+  data.tar.gz: 83c451f5339b4c0f4e83959962459f6733a618b9
 SHA512:
-  metadata.gz: 44157e35a90e6263f377a3477956cce463aba8a69d4a207af25cfeb30dab9d2c2298e02ee61dc4228533242c75d3cc3e90127d55c8594799e5a13db8f52e50b3
-  data.tar.gz: 6e94d09f3ea42db5ac4c61775d39f65d6fa3dfe666a40cba15959bf4bc493879f733288b70bf4b31ae74b18378d24359192e166c53494711e7c8d3a788de7496
+  metadata.gz: d5dc301107da8ff1a7f52a96e9e3d183d6adb48605c11a71d8546bb6942aa60f3e7885fe4594a5cf2546a1e268c5781bd7eeedd4516eaaafbdce903370b4f2e7
+  data.tar.gz: 80fb37a9190e8ad60ad1aef7c89efa0c74aaa5f7e747a469635a7bcc63f23e71cfe1de0094cc0e895a7d34b612d734598012c10b903924080e28e1ada1962d87

data/app/assets/images/ratchet/safari-pinned-tab.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.251 24.382l-4.844-8.414 4.844-8.35h9.562l4.78 8.35-4.78 8.414h-9.562zM16.103 0c.781.008 1.56.067 2.331.185 1.431.218 2.83.633 4.149 1.23 1.698.768 3.258 1.836 4.592 3.139 1.263 1.233 2.321 2.674 3.117 4.25.664 1.315 1.144 2.722 1.421 4.169.326 1.698.374 3.449.145 5.162-.218 1.631-.69 3.226-1.396 4.712-.812 1.712-1.931 3.275-3.287 4.599-1.427 1.393-3.112 2.518-4.949 3.295-1.933.818-4.024 1.245-6.123 1.258-2.102.014-4.202-.387-6.149-1.183-1.847-.755-3.547-1.86-4.991-3.237-1.371-1.307-2.508-2.856-3.341-4.557-.722-1.475-1.214-3.062-1.452-4.687-.251-1.711-.224-3.463.08-5.165.266-1.484.744-2.929 1.415-4.279.786-1.581 1.836-3.029 3.092-4.27 1.302-1.287 2.824-2.35 4.484-3.125 1.309-.612 2.701-1.043 4.127-1.28.768-.127 1.544-.196 2.323-.213l.412-.003zm-.194 1.913c-.688.006-1.374.058-2.054.162-1.259.192-2.49.557-3.649 1.082-1.419.642-2.729 1.521-3.862 2.589-1.152 1.086-2.12 2.364-2.851 3.768-.611 1.174-1.054 2.435-1.311 3.734-.302 1.522-.35 3.096-.145 4.634.188 1.406.591 2.782 1.192 4.068.706 1.512 1.684 2.895 2.872 4.069 1.249 1.234 2.727 2.233 4.34 2.927 1.695.73 3.531 1.117 5.377 1.14 1.852.024 3.705-.317 5.425-1.008 1.631-.655 3.134-1.619 4.413-2.824 1.235-1.164 2.258-2.549 3.005-4.073.635-1.298 1.068-2.693 1.277-4.123.225-1.537.197-3.111-.087-4.638-.241-1.303-.669-2.571-1.266-3.754-.701-1.388-1.633-2.658-2.746-3.744-1.113-1.087-2.406-1.99-3.812-2.657-1.147-.545-2.369-.932-3.621-1.148-.675-.116-1.357-.18-2.042-.2l-.455-.004z" /></svg>

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

@@ -1,18 +1,17 @@
 /**
  * Form 0.0.1
- * Compose forms module
+ * Ratchet forms module
  * @author Kyle Foster (@hkfoster)
  * @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,95 +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 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 loader      = require( './enhancement/loader' );
-var waypoints   = require( './enhancement/waypoints' );
-var notice      = require( './enhancement/notice' );
-var sticky      = require( './enhancement/sticky' );
-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,
-  loader      : loader,
+  validation  : formUp.validate,
   waypoints   : waypoints,
   notice      : notice,
   sticky      : sticky,
-  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();
+  lightbox    : lightbox,
+  esvg        : esvg
+}, toolbox )
 
-}, false );
+window.ratchet = module.exports = ratchet

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

@@ -5,9 +5,6 @@
  * @license MIT
  **/
 
-// Dependencies
-var getClosest = require('../utility/get_closest')
-
  ;( function( root, factory ) {
   if ( typeof define === 'function' && define.amd ) {
     define( factory );
@@ -29,7 +26,7 @@ var getClosest = require('../utility/get_closest')
       defaults  = {
         expandText   : 'Show more ∨',
         collapseText : 'Show less ∧',
-        triggerText  : ' '
+        triggerText  : '{{ more }}'
       };
 
     // Only run if selector exists
@@ -77,7 +74,7 @@ var getClosest = require('../utility/get_closest')
       event.preventDefault();
 
       // Scoped variables
-      var expandable  = getClosest( event.target, element ),
+      var expandable  = compose.getClosest( event.target, element ),
           stateObject = state[ expandable.dataset.idx ];
 
       // Toggle between excerpt and full text
@@ -93,4 +90,4 @@ var getClosest = require('../utility/get_closest')
   // Public API
   return exports;
 
-});
+});

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

@@ -1,13 +1,9 @@
 /**
- * Swap 0.0.2
- * Compose swappable element module
+ * Swap.js 0.0.2
  * @author Kyle Foster (@hkfoster)
  * @license MIT
  **/
 
-// Dependencies
-var ScrollTo = require('../utility/scroll_to')
-
 // Transport
 ;( function( root, factory ) {
   if ( typeof define === 'function' && define.amd ) {
@@ -71,7 +67,7 @@ var ScrollTo = require('../utility/scroll_to')
       } else {
 
         // Stop default anchor tag jump
-        ScrollTo(0, 0);
+        window.scrollTo(0, 0);
 
         // Assign appropriate element(s) variables
         var loadedTarget  = document.querySelector( '#' + getHash() ),
@@ -117,4 +113,4 @@ var ScrollTo = require('../utility/scroll_to')
 
   }
 
-});
+});