ratchet_design 0.1.1 → 0.1.2

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

@@ -0,0 +1,165 @@
+/**
+ * Lightbox 0.0.1
+ * A simple lightbox module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Dependencies
+var toolbox = require( 'compose-toolbox' ),
+    Event   = toolbox.event,
+    delay   = toolbox.delay,
+    loader  = require( '../utility/loader' );
+
+// Public API function
+var lightbox = function( element, settings ) {
+
+  // Apply default element selector
+  element = element || 'a[href$=jpg] ,a[href$=png], a[href$=gif], a[href$=svg]';
+
+  // Overridable defaults
+  var defaults = {
+    initWidth : '700px'
+  },
+
+  // Main variables
+  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' }),
+  docBody    = document.body,
+  tempImg;
+
+  // Only run when selectors exist
+  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 );
+
+  // Attach close lightbox click listener
+  Event.on( document, 'click', '.lightbox', hideLightbox );
+
+  // Initialize lightbox function
+  function init() {
+
+    // Insert lightbox container into body
+    docBody.insertAdjacentHTML( 'afterbegin', '<aside class="lightbox"><figure><img src="" alt=""><button></button></figure></aside>' );
+
+    // Cache temporary placeholder image
+    tempImg = document.querySelector( '.lightbox img' );
+
+  }
+
+  // Hide lightbox function
+  function hideLightbox( event ) {
+
+    // Don’t apply when image is clicked
+    if ( event && event.target.tagName === 'IMG' ) return false;
+
+    // Hide the spinner
+    spinner.hide();
+
+    // Remove active lightbox class from body
+    docBody.classList.remove( 'lightbox-active' );
+
+    // Remove loaded class from lightbox image
+    tempImg.classList.remove( 'loaded' );
+
+    // Reset lightbox image source
+    tempImg.src = '';
+
+  }
+
+  // Image load pending function
+  function loadPending( target ) {
+
+    // Show loading icon
+    spinner.show( 'pending' );
+
+    // Set temp image source appropriately
+    tempImg.src = target.parentNode.href;
+
+    // Add `lightbox-active` class to body
+    docBody.classList.add( 'lightbox-active' );
+
+  }
+
+  // Image load success function
+  function loadSuccess() {
+
+    // Hide the spinner
+    spinner.hide();
+
+    // Bada bing, bada boom
+    tempImg.classList.add( 'loaded' );
+
+  }
+
+  // Image load failure function
+  function loadFailure( event ) {
+
+    // Wait a second…
+    delay( function() {
+
+      // Show spinner failure state
+      spinner.show( 'failure' );
+
+    }, 1000 );
+
+    // Wait a couple more seconds…
+    delay( function() {
+
+      // Hide the lightbox
+      hideLightbox();
+
+    }, 2500 );
+
+    // Remove image load event listener
+    Event.off( tempImg, 'load', loadSuccess );
+
+    // Remove image error event listener
+    Event.off( tempImg, 'error', loadFailure );
+
+  }
+
+  // Click handler function
+  function clickHandler( event ) {
+
+    // Prevent default behavior
+    event.preventDefault();
+
+    // If viewport is smaller than <initWidth>, abort
+    if ( widthQuery.matches ) return false;
+
+    // If lightbox hasn’t already been instantiated, :doit:
+    if ( !document.querySelector( '.lightbox' ) ) init();
+
+    // Allow escape to close lightbox
+    Event.keyOne( 'esc', hideLightbox );
+
+    // Load lightbox image
+    loadPending( event.target );
+
+    // If it has loaded successfully
+    if ( tempImg.complete ) {
+
+      // Kick off image load success function
+      loadSuccess();
+
+    // Otherwise
+    } else {
+
+      // Listen for image load event
+      Event.on( tempImg, 'load', loadSuccess );
+
+      // Listen for image error event
+      Event.on( tempImg, 'error', loadFailure );
+
+    }
+
+  }
+
+};
+
+// Public API
+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,