ratchet_design 0.1.7 → 0.1.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2f213ad4e1d289b998aa6f4fd5ba8961038cdcac
-  data.tar.gz: 364fa530c27aafedc50050294a22506e57fc33a6
+  metadata.gz: 9c1131fa26386e461f0d5a3bea05a5438a954038
+  data.tar.gz: 8fa3b4cf22a717aefc7d9fb95c0bcadf4ae43ab3
 SHA512:
-  metadata.gz: fadf5e966216414e75b5d3da96bb7d9d1b9c1de299f3875cc54f8321d599fefd0297a9d562c014140d461691a7885d73d3a7117e307f15b1c7d5697b8965ea49
-  data.tar.gz: 4640eb5f6600adbd2f3b874a9bcd23e2e9e644aad0882efd406565ef94c1b4a9d17cf795a7e18c62b7674a5f6f84fd78e19390b52da08e06f1faef6cde7fc479
+  metadata.gz: 43ad5b3a613966848c28df7cd19cd20e09e0014a9fde5688cdf6cbb1b90e03b08a1127e3bef67de878990071d135c3383f5d276a10b2819b7340cf88a43f4757
+  data.tar.gz: faa591cf3997ebfed5d8026113b9ce8d21b1ed7fc2ffa86e787e722357623b4d9715af8617dbe770c612255ee186c47730c10198b03eaaec6f4275d93d75cb51

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/core.js

@@ -28,6 +28,7 @@ var loader      = require( './enhancement/loader' );
 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' );
 
@@ -72,6 +73,7 @@ window.ratchet = module.exports = {
   waypoints   : waypoints,
   notice      : notice,
   sticky      : sticky,
+  lightbox    : lightbox,
   esvg        : esvg,
   event       : event
 }

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

@@ -1,14 +1,12 @@
 /**
- * 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')
+var matches = require( '../utility/matches' );
 
-// Transport
 ;( function( root, factory ) {
   if ( typeof define === 'function' && define.amd ) {
     define( factory );
@@ -21,100 +19,109 @@ var ScrollTo = require('../utility/scroll_to')
 
   'use strict';
 
-  var triggers = document.querySelectorAll( '.swap-trigger' );
+  // Overridable defaults
+  var defaults = {
+    activeClass : 'open',
+    assignHash  : false
+  };
 
-  if ( triggers.length ) {
+  // Public API function
+  var swap = function( element, settings ) {
 
-    // Assignment
-    var location = window.location.hash;
+    // Parameter variables
+    var options   = Object.assign( {}, defaults, settings ),
+        selectors = document.querySelectorAll( element ),
+        location;
 
-    // Swap function
-    var swap = function( trigger, target ) {
+    // Only run if selector exists
+    if ( !selectors.length ) return false;
 
-      // Find all current `selected` class elements
-      var currentSelection = document.querySelectorAll( '.selected' );
+    // Attach window load listener (if hashes are turned on)
+    if ( options.assignHash ) window.addEventListener( 'load', hashHandler, false );
 
-      // And deselect them
-      for ( var i = 0; i < currentSelection.length; i++ ) {
-        currentSelection[ i ].classList.remove( 'selected' );
-      }
-
-      // Select our new elements
-      trigger.classList.add( 'selected' );
-      target.classList.add( 'selected' );
-    };
+    for ( var i = 0; i < selectors.length; i++ ) {
 
-    // Get current window hash
-    var getHash = function() {
-      return location.split( '#' )[ 1 ];
-    };
+      // Attach click event listener
+      selectors[ i ].addEventListener( 'click', clickHandler, false );
 
-    // Get link target hash
-    var getLinkTarget = function( link ) {
-      return link.href.split( '#' )[ 1 ];
-    };
+    }
 
-    // Hash check function
-    var hashCheck = function( event ) {
+    // Window hash handler function
+    function hashHandler() {
 
-      // If no hash
-      if ( !location ) {
+      // Cache window hash
+      var windowHash = window.location.hash;
 
-        // Assign first element(s) variables
-        var firstTrigger = document.querySelector( '.swap-trigger' ),
-            firstTarget  = document.querySelector( '.swappable' );
+      // If no window hash exists
+      if ( !windowHash ) {
 
-        // And select them
-        swap( firstTrigger, firstTarget );
+        // Perform swap function on selector’s first instance of anchor link
+        swap( selector.querySelector( 'a[href^="#"]' ) );
 
       // Otherwise
       } else {
 
         // Stop default anchor tag jump
-        ScrollTo(0, 0);
-
-        // Assign appropriate element(s) variables
-        var loadedTarget  = document.querySelector( '#' + getHash() ),
-            loadedTrigger = document.querySelector('[href="#' + getHash() + '"]' );
+        window.scrollTo( 0, 0 );
 
-        // And select them
-        swap( loadedTrigger, loadedTarget );
+        // Perform swap function on appropriate anchor link
+        swap( selector.querySelector( 'a[href="' + windowHash + '"]' ) );
 
       }
 
-    };
+    }
 
     // Click handler function
-    var clickHandler = function( event ) {
+    function clickHandler( event ) {
+
+      // Only run on anchor links
+      if ( !matches( event.target, 'a[href^="#"]' ) ) return false;
 
       // Prevent default behavior
-      event.stopPropagation();
       event.preventDefault();
 
-      // Local assignment
-      var triggerElem = this,
-          linkTarget  = getLinkTarget( triggerElem ),
-          targetElem  = document.querySelector( '#' + linkTarget );
+      // Only run if not clicking on currently active element
+      if ( event.target.classList.contains( options.activeClass ) ) return false;
 
-      // Select the appropriate elements
-      swap ( triggerElem, targetElem );
+      // Swap out the appropriate element
+      swap( event.target );
 
-      // Replace the hash
-      history.replaceState( null, '', '#' + linkTarget );
+    }
 
-    };
+    // Where the magic happens
+    function swap( target ) {
 
-    // Run hash check on window load
-    window.addEventListener( 'load', hashCheck, false );
+      // Scoped variables
+      var newAnchor = target,
+          oldAnchor = newAnchor.parentNode.querySelector( '.' + options.activeClass ),
+          newTarget = document.querySelector( '#' + newAnchor.href.split( '#' )[ 1 ] ),
+          oldTarget = newTarget.parentNode.querySelector( ':scope > .' + options.activeClass );
 
-    // Iterate over each swap trigger
-    for ( var i = 0; i < triggers.length; i++ ) {
+      // If an old active anchor exists, deactivate it
+      if ( oldAnchor ) oldAnchor.classList.remove( options.activeClass );
 
-      // And attach our click listener
-      triggers[ i ].addEventListener( 'click', clickHandler, false );
+      // And activate the new achor
+      newAnchor.classList.add( options.activeClass );
+
+      // If an old active element exists, deactivate it
+      if ( oldTarget ) oldTarget.classList.remove( options.activeClass );
+
+      // And activate the new element
+      newTarget.classList.add( options.activeClass );
+
+      // Then replace the hash (if hashes are turned on)
+      if ( options.assignHash ) history.pushState( null, '', '#' + newAnchor.href.split( '#' )[ 1 ] );
 
     }
 
-  }
+  };
+
+  // Public API
+  return swap;
 
 });
+
+// Instantiation
+swap( '.swap-nav', {
+  activeClass : 'selected'
+});

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

@@ -0,0 +1,256 @@
+/**
+ * Lightbox 0.0.1
+ * A simple lightbox module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ */
+
+// Dependencies
+var loader  = require( '../enhancement/loader' ),
+    timeout = require( '../utility/timeout' );
+
+// Public API function
+var lightbox = function( element, settings ) {
+
+  // Overridable defaults
+  var defaults = {
+    initWidth : '700px'
+  },
+
+  // Main variables
+  options    = Object.assign( {}, defaults, settings ),
+  selectors  = document.querySelectorAll( element ),
+  widthQuery = window.matchMedia( '(min-width: ' + options.initWidth + ')' ),
+  spinner    = loader({ loadingMessage: 'Loading image', failureMessage : 'No image found' }),
+  docBody    = document.body,
+  tempImg,
+  active;
+
+  // Only run when selectors exist
+  if ( !selectors.length ) return false;
+
+  // Call media query listener function explicitly at run time
+  queryHandler( widthQuery );
+
+  // Attach media query listener
+  widthQuery.addListener( queryHandler );
+
+  // Media query handler function
+  function queryHandler( condition ) {
+
+    // If media query matches init width
+    if ( condition.matches ) {
+
+      // Initialize lightbox
+      init();
+
+    // Otherwise
+    } else {
+
+      // Terminate lightbox
+      terminate();
+
+    }
+
+  }
+
+  // Initialize lightbox function
+  function init() {
+
+    // Turn on active state
+    active = true;
+
+    // If a lightbox has already been initiated
+    if ( document.querySelector( '.lightbox' ) ) {
+
+      // Loop over lightbox images
+      for ( var i = 0; i < selectors.length; i++ ) {
+
+        // And activate their anchor links
+        selectors[ i ].parentNode.setAttribute( 'data-open-lightbox', '' );
+
+      }
+
+      // Then kick rocks
+      return false;
+
+    }
+
+    // Insert lightbox container into body
+    docBody.insertAdjacentHTML( 'afterbegin', '<aside class="lightbox"><figure><img src="" alt=""><button data-close-lightbox></button></figure></aside>' );
+
+    // Cache temporary placeholder image
+    tempImg = document.querySelector( '.lightbox img' );
+
+    // Loop over lightbox images
+    for ( var j = 0; j < selectors.length; j++ ) {
+
+      // Cache current img selector
+      var selector    = selectors[ j ],
+          imgSrc      = selector.src,
+          dataSrc     = selector.getAttribute( 'data-lightbox' ),
+          lightboxSrc = dataSrc !== '' ? dataSrc : imgSrc;
+
+      // If thumbnail size is passed and image is in Cloudinary
+      if ( selector.hasAttribute( 'data-thumb-size' ) && imgSrc.split( '//' )[ 1 ].substring( 0, 18 ) === 'res.cloudinary.com' ) {
+
+        // Split img src url
+        var splitSrc  = imgSrc.split( 'upload' );
+
+        // Switch out image src for Cloudinary-resized src
+        selector.src = splitSrc[ 0 ] + 'upload/w_' + selector.getAttribute( 'data-thumb-size' ) + splitSrc[ 1 ];
+
+      }
+
+      // Wrap the image in a `data-lightbox` anchor tag
+      selector.insertAdjacentHTML( 'beforebegin', '<a data-open-lightbox href="' + lightboxSrc + '"></a>' );
+      selector.previousSibling.insertAdjacentElement( 'afterbegin', selector );
+
+    }
+
+    // Attach click listener
+    docBody.addEventListener( 'click', clickHandler, false );
+
+  }
+
+  // Terminate lightbox function
+  function terminate() {
+
+    // Turn off active state
+    active = false;
+
+    // If no lightbox exists, fugetaboutit … capisce?
+    if ( !document.querySelector( '.lightbox' ) ) return false;
+
+    // Remove lightbox classes from body
+    docBody.classList.remove( 'lightbox-active' );
+
+    // Loop over lightbox images
+    for ( var i = 0; i < selectors.length; i++ ) {
+
+      // And inactivate their anchor links
+      selectors[ i ].parentNode.setAttribute( 'data-open-lightbox', 'inactive' );
+
+    }
+
+  }
+
+  // Hide lightbox function
+  function hideLightbox() {
+
+    // And 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 ) {
+
+    // Prevent any further attempts to open image
+    document.querySelector( 'a[href="' + event.target.src + '"]' ).setAttribute( 'data-open-lightbox', 'inactive' );
+
+    // Wait a second…
+    timeout.set( function() {
+
+      // Show spinner failure state
+      spinner.show( 'failure' );
+
+    }, 1000 );
+
+    // Wait a couple more seconds…
+    timeout.set( function() {
+
+      // Hide the lightbox
+      hideLightbox();
+
+    }, 2500 );
+
+    // Remove image load event listener
+    tempImg.removeEventListener( 'load', loadSuccess, false );
+
+    // Remove image error event listener
+    tempImg.removeEventListener( 'error', loadFailure, false );
+  }
+
+  // Click handler function
+  function clickHandler( event ) {
+
+    // Only run on `data-open-lightbox` links
+    if ( event.target.parentNode.hasAttribute( 'data-open-lightbox' ) ) {
+
+      // Prevent default behavior
+      event.preventDefault();
+
+      // Abort if lightbox and/or link is no longer active
+      if ( !active || event.target.parentNode.getAttribute( 'data-open-lightbox' ) === 'inactive' ) return false;
+
+      // 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
+        tempImg.addEventListener( 'load', loadSuccess, false );
+
+        // Listen for image error event
+        tempImg.addEventListener( 'error', loadFailure, false );
+
+      }
+
+    }
+
+    // Run on `close lightbox` links
+    if ( event.target.hasAttribute( 'data-close-lightbox') || event.target.classList.contains( 'lightbox' ) ) {
+
+      // Hide the lightbox
+      hideLightbox();
+
+    }
+
+  }
+
+};
+
+// Public API
+module.exports = lightbox;

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

@@ -30,26 +30,26 @@ var loader = function( settings ) {
   var element = document.querySelector( 'div.' + options.loaderClass );
 
    // Show loader icon function
-  var show = function( state ) {
+  var show = function( state, message ) {
 
     // Loader pending state
     if ( state === 'pending' ) {
 
-      element.textContent = options.loadingMessage;
+      element.textContent = message || options.loadingMessage;
       element.classList.remove( options.successClass, options.failureClass );
       element.classList.add( options.loadingClass );
 
     // Loader failure state
     } else if ( state === 'failure' ) {
 
-      element.textContent = options.failureMessage;
+      element.textContent = message || options.failureMessage;
       element.classList.remove( options.loadingClass );
       element.classList.add( options.failureClass );
 
     // Loader success state
     } else if ( state === 'success' ) {
 
-      element.textContent = options.successMessage;
+      element.textContent = message || options.successMessage;
       element.classList.remove( options.loadingClass );
       element.classList.add( options.successClass );
 

data/app/assets/javascripts/ratchet/shim/classlist.js

@@ -1,5 +1,5 @@
 /**
- * ClassList
+ * ClassList polyfill
  * Cross-browser full element.classList implementation
  * @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js
  * @author Eli Grey - http://eligrey.com

data/app/assets/javascripts/ratchet/shim/scope.js

@@ -0,0 +1,94 @@
+/**
+ * Scoped QuerySelector polyfill
+ * @source https://github.com/lazd/scopedQuerySelectorShim
+ * @author Larry Davis ( @lazd )
+ * @license BSD
+ */
+( function() {
+
+  // Throw error on super old browsers
+  if ( !HTMLElement.prototype.querySelectorAll ) {
+    throw new Error( 'rootedQuerySelectorAll: This polyfill can only be used with browsers that support querySelectorAll' );
+  }
+
+  // Create temporary element to query against and test for :scope support
+  var container = document.createElement( 'div' );
+
+  // Check if the browser supports :scope
+  try {
+
+    // Browser supports :scope, do nothing
+    container.querySelectorAll( ':scope *' );
+
+  // Otherwise
+  } catch ( e ) {
+
+    // Match usage of scope
+    var scopeRE = /^\s*:scope/gi;
+
+    // Overrides
+    function overrideNodeMethod( prototype, methodName ) {
+
+      // Store the old method for use later
+      var oldMethod = prototype[ methodName ];
+
+      // Override the method
+      prototype[ methodName ] = function( query ) {
+
+        var gaveContainer = false,
+            gaveId        = false,
+            nodeList;
+
+        if ( query.match( scopeRE ) ) {
+
+          // Remove :scope
+          query = query.replace( scopeRE, '' );
+
+          if ( !this.parentNode ) {
+
+            // Add to temporary container
+            container.appendChild( this );
+            gaveContainer = true;
+
+          }
+
+          parentNode = this.parentNode;
+
+          if ( !this.id ) {
+
+            // Give temporary ID
+            this.id = 'rootedQuerySelector_id_' + new Date().getTime();
+            gaveId = true;
+
+          }
+
+          // Find elements against parent node
+          nodeList = oldMethod.call( parentNode, '#' + this.id + ' ' + query );
+
+          // Reset the ID
+          if ( gaveId ) {
+            this.id = '';
+          }
+
+          // Remove from temporary container
+          if ( gaveContainer ) {
+            container.removeChild( this );
+          }
+
+          return nodeList;
+
+        } else {
+
+          // No immediate child selector used
+          return oldMethod.call( this, query );
+
+        }
+      };
+    }
+
+    // Browser doesnt support :scope, add polyfill
+    overrideNodeMethod( HTMLElement.prototype, 'querySelector' );
+    overrideNodeMethod( HTMLElement.prototype, 'querySelectorAll' );
+
+  }
+})();

data/app/assets/stylesheets/ratchet/_core.scss

@@ -18,4 +18,5 @@
 @import 'enhancement/notice';
 @import 'enhancement/hero';
 @import 'enhancement/contrast-section';
-@import 'enhancement/tooltip';
+@import 'enhancement/tooltip';
+@import 'enhancement/lightbox';

data/app/assets/stylesheets/ratchet/base/_button.scss

@@ -42,7 +42,7 @@
   } @else if $color == secondary {
     $color: $flush;
   } @else if $color == success {
-    $color: $lima;
+    $color: $apple;
   } @else if $color == failure {
     $color: $punch;
   }