ratchet_design 0.1.5 → 0.1.6

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

@@ -1,76 +1,97 @@
+// Shim modules
+require( './shim/classlist' );
+require( './shim/object.assign' );
+
 // Utility modules
-var loadFont    = require( './utility/load_font' )
-var loadScript  = require( './utility/load_script' )
+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( './utility/ajax' );
 
 // Base modules
-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' )
+var mobileMenu  = require( './base/mobilemenu' );
+var form        = require( './base/form' );
+var validation  = require( './base/validation' );
 
 // 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 loader      = require( './enhancement/loader' );
+var waypoints   = require( './enhancement/waypoints' );
+var notice      = require( './enhancement/notice' );
+var sticky      = require( './enhancement/sticky' );
+var esvg        = require( './_svg' );
 // var swap        = require( './enhancement/swap' );
 
 // Vendor modules
-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()
-});
+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' );
 
 // Public API object
-var ratchet = toolbox.merge( {
+window.ratchet = module.exports = {
   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  : formUp.validate,
+  validation  : validation,
+  loader      : loader,
   waypoints   : waypoints,
   notice      : notice,
   sticky      : sticky,
-  lightbox    : lightbox,
-  esvg        : esvg
-}, toolbox )
+  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();
 
-window.ratchet = module.exports = ratchet
+}, false );

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

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

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

@@ -0,0 +1,93 @@
+Event = require('compose-event')
+/**
+ * Lightbox.js 0.0.2
+ * A lightbox plugin that makes sense
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Transport
+( function( root, factory ) {
+  if ( typeof define === 'function' && define.amd ) {
+    define( factory );
+  } else if ( typeof exports === 'object' ) {
+    module.exports = factory;
+  } else {
+    root.lightbox = factory( root );
+  }
+})( this, function( root ) {
+
+  'use strict';
+
+  // Define global variable(s)
+  var lightboxTrigger = document.querySelectorAll( '[rel="lightbox"]' );
+
+  // Only run if lightbox trigger is present
+  if ( lightboxTrigger ) {
+    init();
+  }
+
+  // Where the magic happens
+  function init() {
+
+    // Preload lightbox images
+    for ( var imgIndex = 0; imgIndex < lightboxTrigger.length; imgIndex ++ ) {
+
+      // Create a temporary image element
+      var tempImg = new Image();
+
+      // And use it to load up image(s)
+      tempImg.src = lightboxTrigger[ imgIndex ].href;
+
+    }
+
+    // Attach our click listener
+    Event.on(document, 'click', '[rel="lightbox"]', openLightbox)
+
+  }
+
+  // Open lightbox function
+  function openLightbox( event ) {
+
+    // Prevent default behavior/bubbling
+    event.stopPropagation();
+    event.preventDefault();
+
+    // Define scoped variable(s)
+    var lightboxUrl  = event.target.href,
+        lightboxCont = '<aside class="lightbox-overlay"><figure class="lightbox-content"><img src="' + lightboxUrl + '" alt=""><a class="close-btn" href="#?"></a></figure></aside>';
+
+    // Open the lightbox
+    document.body.insertAdjacentHTML('beforeend' lightboxCont );
+
+    // Prevent scrolling while lightbox is shown
+    document.body.style.overflow = 'hidden';
+
+    Event.one('.close-btn', 'click', closeLightbox)
+
+  }
+
+  // Close lightbox function
+  function closeLightbox( event ) {
+
+    // Prevent default behavior/bubbling
+    event.stopPropagation();
+    event.preventDefault();
+
+    // Define scoped variable(s)
+    var lightboxOverlay = document.querySelector( '.lightbox-overlay' ),
+        lightboxContent = lightboxOverlay.querySelector( '.lightbox-content' ),
+
+    // Kick off closing animation
+    lightboxContent.className += ' closing';
+
+    Event.one(lightboxContent, 'animationend', function() {
+      // Remove the lightbox from the DOM
+      document.body.removeChild( lightboxOverlay );
+
+      // And turn scrolling back on
+      document.body.style.overflow = '';
+    })
+  }
+
+});

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

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

data/app/assets/javascripts/ratchet/{utility → enhancement}/loader.js

@@ -5,8 +5,6 @@
  * @license MIT
  **/
 
-var toolbox = require( 'compose-toolbox' )
-
 // Public API function
 var loader = function( settings ) {
 
@@ -23,40 +21,35 @@ var loader = function( settings ) {
   };
 
   // Extend defaults
-  var options = toolbox.merge( defaults, settings );
-
-  // If it doesn’t already exist
-  if ( !document.querySelector( 'div.' + options.loaderClass ) ) {
-
-    // Create and prepend loader element
-    options.selector.insertAdjacentHTML( 'afterbegin', '<div class="' + options.loaderClass + '"></div>' );
+  var options = Object.assign( {}, defaults, settings );
 
-  }
+  // Create and prepend loader element
+  options.selector.insertAdjacentHTML( 'afterbegin', '<div class="' + options.loaderClass + '"></div>' );
 
   // Cache loader element
   var element = document.querySelector( 'div.' + options.loaderClass );
 
    // Show loader icon function
-  var show = function( state, message ) {
+  var show = function( state ) {
 
     // Loader pending state
     if ( state === 'pending' ) {
 
-      element.textContent = message || options.loadingMessage;
+      element.textContent = options.loadingMessage;
       element.classList.remove( options.successClass, options.failureClass );
       element.classList.add( options.loadingClass );
 
     // Loader failure state
     } else if ( state === 'failure' ) {
 
-      element.textContent = message || options.failureMessage;
+      element.textContent = options.failureMessage;
       element.classList.remove( options.loadingClass );
       element.classList.add( options.failureClass );
 
     // Loader success state
     } else if ( state === 'success' ) {
 
-      element.textContent = message || options.successMessage;
+      element.textContent = options.successMessage;
       element.classList.remove( options.loadingClass );
       element.classList.add( options.successClass );
 
@@ -81,4 +74,4 @@ var loader = function( settings ) {
 };
 
 // Public API
-module.exports = loader;
+module.exports = loader;

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

@@ -5,8 +5,6 @@
  * @license MIT
  **/
 
-var toolbox = require( 'compose-toolbox' )
-
 // Public API function
 var notice = function( element, settings ) {
 
@@ -18,10 +16,9 @@ var notice = function( element, settings ) {
   };
 
   // Scoped variables
-  var options    = toolbox.merge( defaults, settings ),
+  var options    = Object.assign( {}, defaults, settings ),
       selector   = document.querySelector( element ),
-      cookieName = 'dismiss-' + options.noticeName,
-      button     = selector.querySelector( '.' + options.noticeClass + ' .close-btn' );
+      cookieName = 'dismiss-' + options.noticeName;
 
   // Only run if selector exists & no dismiss cookie is found
   if ( !selector || getCookie( cookieName ) ) return false;
@@ -34,7 +31,7 @@ var notice = function( element, settings ) {
   document.querySelector( 'main' ).insertAdjacentHTML( 'afterbegin', html );
 
   // Listen for close button click
-  toolbox.event.on( button , 'click', dismissNotice )
+  selector.querySelector( '.' + options.noticeClass + ' > .close-btn' ).addEventListener( 'click', dismissNotice, false );
 
   // Dismiss notice on close
   function dismissNotice( event ) {
@@ -50,8 +47,6 @@ 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 toolbox  = require( 'compose-toolbox' ),
-    fromTop  = toolbox.fromTop
+var throttle = require( '../utility/throttle' ),
+    fromTop  = require( '../utility/from_top' );
 
 // Public API function
 var sticky = function( element, settings ) {
@@ -21,7 +21,7 @@ var sticky = function( element, settings ) {
   };
 
   // Scoped variables
-  var options  = toolbox.merge( defaults, settings ),
+  var options  = Object.assign( {}, defaults, settings ),
       selector = document.querySelector( element );
 
   // If selector is not present
@@ -40,11 +40,15 @@ 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 );
 
@@ -56,25 +60,38 @@ var sticky = function( element, settings ) {
   // Media query handler function
   function queryHandler( condition ) {
 
-    // Call resize listener function explicitly at run time
-    resized()
+    // If media query matches
+    if ( condition.matches ) {
+
+      // Call resize listener function explicitly at run time
+      resizeHandler();
 
-    // Call scroll listener function explicitly at run time
-    scrolled();
-    
-    // Reset styles
-    if ( !condition.matches ) docBody.classList.remove( 'sticky' )
+      // Resize function listener
+      window.addEventListener( 'optimizedResize', resizeHandler, false );
 
-    // Remove resize listener
-    resizeHandler.toggle( condition.matches )
+      // Call scroll listener function explicitly at run time
+      scrollHandler();
+
+      // Scroll function listener
+      window.addEventListener( 'optimizedScroll', scrollHandler, false );
+
+    } else {
 
-    // Remove scroll listener
-    scrollHandler.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 );
+
+    }
 
   }
 
   // Resize handler function
-  function resized() {
+  function resizeHandler() {
 
     // Update document height variable
     docHeight = document.body.scrollHeight;
@@ -85,7 +102,7 @@ var sticky = function( element, settings ) {
   }
 
   // Scroll handler function
-  function scrolled() {
+  function scrollHandler() {
 
     // Scoped variables
     var newScrollY = window.pageYOffset,