ratchet_design 0.1.8 → 0.1.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 9c1131fa26386e461f0d5a3bea05a5438a954038
-  data.tar.gz: 8fa3b4cf22a717aefc7d9fb95c0bcadf4ae43ab3
+  metadata.gz: aef44c1ad9f928199a956dea5dba0cf289bb48df
+  data.tar.gz: 720ddc559f457ce0210126e87d45e0b6936ca690
 SHA512:
-  metadata.gz: 43ad5b3a613966848c28df7cd19cd20e09e0014a9fde5688cdf6cbb1b90e03b08a1127e3bef67de878990071d135c3383f5d276a10b2819b7340cf88a43f4757
-  data.tar.gz: faa591cf3997ebfed5d8026113b9ce8d21b1ed7fc2ffa86e787e722357623b4d9715af8617dbe770c612255ee186c47730c10198b03eaaec6f4275d93d75cb51
+  metadata.gz: 9e21b41531dc60488671e22d57b64a8490a93c6973afc80767b514baedcc22707815c262f2fae0ce21f4177b62f662fd3879903e33e9968df6440d978e4c0e08
+  data.tar.gz: d9135ea36d1f05cb47df0567ec752a15af756b9296999c9aa405c11552be3886226bdfac2f118f1aa2542236b7473371753a5f1d40cfee6e2a24ef091cf1d53f

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

@@ -16,7 +16,8 @@ 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' );
+var ajax        = require( 'superagent' );
+var loader      = require( './utility/loader' );
 
 // Base modules
 var mobileMenu  = require( './base/mobilemenu' );
@@ -24,7 +25,6 @@ var form        = require( './base/form' );
 var validation  = require( './base/validation' );
 
 // Enhancement modules
-var loader      = require( './enhancement/loader' );
 var waypoints   = require( './enhancement/waypoints' );
 var notice      = require( './enhancement/notice' );
 var sticky      = require( './enhancement/sticky' );
@@ -66,10 +66,10 @@ window.ratchet = module.exports = {
   compileData : compileData,
   timeout     : timeout,
   ajax        : ajax,
+  loader      : loader,
   mobileMenu  : mobileMenu,
   form        : form,
   validation  : validation,
-  loader      : loader,
   waypoints   : waypoints,
   notice      : notice,
   sticky      : sticky,

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

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

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

@@ -3,15 +3,19 @@
  * A simple lightbox module
  * @author Kyle Foster (@hkfoster)
  * @license MIT
- */
+ **/
 
 // Dependencies
-var loader  = require( '../enhancement/loader' ),
+var Event   = require( 'compose-event' ),
+    loader  = require( '../utility/loader' ),
     timeout = require( '../utility/timeout' );
 
 // 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'
@@ -19,126 +23,39 @@ var lightbox = function( element, settings ) {
 
   // Main variables
   options    = Object.assign( {}, defaults, settings ),
-  selectors  = document.querySelectorAll( element ),
-  widthQuery = window.matchMedia( '(min-width: ' + options.initWidth + ')' ),
+  selector   = document.querySelector( element ),
+  widthQuery = window.matchMedia( '(max-width: ' + options.initWidth + ')' ),
   spinner    = loader({ loadingMessage: 'Loading image', failureMessage : 'No image found' }),
   docBody    = document.body,
-  tempImg,
-  active;
+  tempImg;
 
   // 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 {
+  if ( !selector ) return false;
 
-      // Terminate lightbox
-      terminate();
+  // 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() {
 
-    // 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>' );
+    docBody.insertAdjacentHTML( 'afterbegin', '<aside class="lightbox"><figure><img src="" alt=""><button></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() {
+  function hideLightbox( event ) {
+
+    // Don’t apply when image is clicked
+    if ( event && event.target.tagName === 'IMG' ) return false;
 
-    // And hide the spinner
+    // Hide the spinner
     spinner.hide();
 
     // Remove active lightbox class from body
@@ -180,9 +97,6 @@ var lightbox = function( element, settings ) {
   // 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() {
 
@@ -200,51 +114,45 @@ var lightbox = function( element, settings ) {
     }, 2500 );
 
     // Remove image load event listener
-    tempImg.removeEventListener( 'load', loadSuccess, false );
+    Event.off( tempImg, 'load', loadSuccess );
 
     // Remove image error event listener
-    tempImg.removeEventListener( 'error', loadFailure, false );
+    Event.off( tempImg, 'error', loadFailure );
+
   }
 
   // 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;
+    // Prevent default behavior
+    event.preventDefault();
 
-      // Load lightbox image
-      loadPending( event.target );
+    // If viewport is smaller than <initWidth>, abort
+    if ( widthQuery.matches ) return false;
 
-      // If it has loaded successfully
-      if ( tempImg.complete ) {
+    // If lightbox hasn’t already been instantiated, :doit:
+    if ( !document.querySelector( '.lightbox' ) ) init();
 
-        // Kick off image load success function
-        loadSuccess();
+    // Allow escape to close lightbox
+    Event.keyOne( 'esc', hideLightbox );
 
-      // Otherwise
-      } else {
+    // Load lightbox image
+    loadPending( event.target );
 
-        // Listen for image load event
-        tempImg.addEventListener( 'load', loadSuccess, false );
+    // If it has loaded successfully
+    if ( tempImg.complete ) {
 
-        // Listen for image error event
-        tempImg.addEventListener( 'error', loadFailure, false );
+      // Kick off image load success function
+      loadSuccess();
 
-      }
-
-    }
+    // Otherwise
+    } else {
 
-    // Run on `close lightbox` links
-    if ( event.target.hasAttribute( 'data-close-lightbox') || event.target.classList.contains( 'lightbox' ) ) {
+      // Listen for image load event
+      Event.on( tempImg, 'load', loadSuccess );
 
-      // Hide the lightbox
-      hideLightbox();
+      // Listen for image error event
+      Event.on( tempImg, 'error', loadFailure );
 
     }
 

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

@@ -23,8 +23,13 @@ var loader = function( settings ) {
   // Extend defaults
   var options = Object.assign( {}, defaults, settings );
 
-  // Create and prepend loader element
-  options.selector.insertAdjacentHTML( 'afterbegin', '<div class="' + options.loaderClass + '"></div>' );
+  // 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>' );
+
+  }
 
   // Cache loader element
   var element = document.querySelector( 'div.' + options.loaderClass );

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

@@ -1,6 +1,7 @@
 // Utility modules
 @import 'utility/global';
 @import 'utility/grid';
+@import 'utility/loader';
 
 // Base modules
 @import 'base/text';
@@ -12,7 +13,6 @@
 @import 'base/document';
 
 // Enhancement modules
-@import 'enhancement/loader';
 @import 'enhancement/feature';
 @import 'enhancement/sticky-sidebar';
 @import 'enhancement/notice';

data/app/assets/stylesheets/ratchet/enhancement/_lightbox.scss

@@ -87,7 +87,12 @@
   }
 }
 
-// Inactive anchor links
-a[data-open-lightbox='inactive'] {
-  cursor: default;
+// Deactivate anchor links under 700px
+@media (max-width: 700px) {
+  a[href$=jpg],
+  a[href$=png],
+  a[href$=gif],
+  a[href$=svg] {
+    cursor: default;
+  }
 }

data/app/views/layouts/ratchet/default.html.slim

@@ -21,7 +21,7 @@ html
 
     / Favicon
     - if content_for?(:favicon)
-        = yield :favicon
+      = yield :favicon
 
     / Ratchet core JS
     = javascript_tag "core"

data/lib/ratchet_design/version.rb

@@ -1,3 +1,3 @@
 module RatchetDesign
-  VERSION = "0.1.8"
+  VERSION = "0.1.9"
 end