ratchet_design 0.1.0

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

@@ -0,0 +1,92 @@
+// 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'      );
+
+// Base modules
+var mobileMenu  = require( './base/mobilemenu' );
+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'    );
+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'        );
+
+// Public API object
+window.ratchet = module.exports = {
+  esvg        : esvg,
+  event       : event,
+  loadFont    : loadFont,
+  throttle    : throttle,
+  loadScript  : loadScript,
+  scrollTo    : scrollTo,
+  wordCount   : wordCount,
+  getNext     : getNext,
+  getClosest  : getClosest,
+  compileData : compileData,
+  timeout     : timeout,
+  mobileMenu  : mobileMenu,
+  form        : form,
+  validation  : validation,
+  loader      : loader,
+  // swap        : swap,
+  waypoints   : waypoints,
+  notice      : notice,
+  sticky      : sticky
+}
+
+// Default events instantiation
+event.change( function() {
+
+  // Unhover module
+  unhover();
+
+  // FullStop module
+  fullStop();
+
+  // Form module
+  form();
+
+  // Validation module
+  validation();
+
+  // Syntax highlighting
+  highlighter.highlight();
+
+}, false );

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

@@ -0,0 +1,96 @@
+/**
+ * Collapse 0.0.1
+ * Easily create expandable excerpts
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Dependencies
+var getClosest = require('../utility/get_closest')
+
+ ;( function( root, factory ) {
+  if ( typeof define === 'function' && define.amd ) {
+    define( factory );
+  } else if ( typeof exports === 'object' ) {
+    module.exports = factory;
+  } else {
+    root.collapse = factory( root );
+  }
+})( this, function( root ) {
+
+  'use strict';
+
+  // Public API function
+  var exports = function( element, settings ) {
+
+    // Parameter variables
+    var
+      selectors = document.querySelectorAll( element ),
+      defaults  = {
+        expandText   : 'Show more ∨',
+        collapseText : 'Show less ∧',
+        triggerText  : ' '
+      };
+
+    // Only run if selector exists
+    if ( !selectors ) return false;
+
+    // Scoped variables
+    var
+      options = compose.extend( defaults, settings ),
+      state   = {};
+
+    // Loop over expandable elements
+    for ( var i = 0; i < selectors.length; i++ ) {
+
+      // Scoped variables
+      var
+        selector  = selectors[ i ],
+        original  = selector.innerHTML,
+        expanded  = original + '<a class="expand" href="#">' + options.collapseText + '</a>',
+        collapsed = original.split( options.triggerText )[ 0 ] + '&hellip; <a class="expand" href="#">' + options.expandText + '</a>';
+
+      // Set excerpt text
+      selector.innerHTML = collapsed;
+
+      // Set index data attribute
+      selector.dataset.idx = i;
+
+      // Populate state reference object
+      state[ i ] = {
+        'expanded'  : expanded,
+        'collapsed' : collapsed
+      };
+
+    }
+
+    // Attach click listener
+    document.body.addEventListener( 'click', clickHandler, false );
+
+    // Click handler function
+    function clickHandler( event ) {
+
+      // Only run on `rel=expand` links
+      if ( event.target.className !== 'expand' ) return false;
+
+      // Prevent default behavior
+      event.preventDefault();
+
+      // Scoped variables
+      var expandable  = getClosest( event.target, element ),
+          stateObject = state[ expandable.dataset.idx ];
+
+      // Toggle between excerpt and full text
+      expandable.innerHTML = ( expandable.innerHTML === stateObject.expanded ) ? stateObject.collapsed : stateObject.expanded;
+
+      // Toggle between expand and collapse link text
+      event.target.textContent = ( event.target.textContent === options.expandText ) ? options.collapseText : options.expandText;
+
+    }
+
+  };
+
+  // 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

@@ -0,0 +1,120 @@
+/**
+ * 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 ) {
+    define( factory );
+  } else if ( typeof exports === 'object' ) {
+    module.exports = factory;
+  } else {
+    root.swap = factory( root );
+  }
+})( this, function( root ) {
+
+  'use strict';
+
+  var triggers = document.querySelectorAll( '.swap-trigger' );
+
+  if ( triggers.length ) {
+
+    // Assignment
+    var location = window.location.hash;
+
+    // Swap function
+    var swap = function( trigger, target ) {
+
+      // Find all current `selected` class elements
+      var currentSelection = document.querySelectorAll( '.selected' );
+
+      // 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' );
+    };
+
+    // Get current window hash
+    var getHash = function() {
+      return location.split( '#' )[ 1 ];
+    };
+
+    // Get link target hash
+    var getLinkTarget = function( link ) {
+      return link.href.split( '#' )[ 1 ];
+    };
+
+    // Hash check function
+    var hashCheck = function( event ) {
+
+      // If no hash
+      if ( !location ) {
+
+        // Assign first element(s) variables
+        var firstTrigger = document.querySelector( '.swap-trigger' ),
+            firstTarget  = document.querySelector( '.swappable' );
+
+        // And select them
+        swap( firstTrigger, firstTarget );
+
+      // 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() + '"]' );
+
+        // And select them
+        swap( loadedTrigger, loadedTarget );
+
+      }
+
+    };
+
+    // Click handler function
+    var clickHandler = function( event ) {
+
+      // Prevent default behavior
+      event.stopPropagation();
+      event.preventDefault();
+
+      // Local assignment
+      var triggerElem = this,
+          linkTarget  = getLinkTarget( triggerElem ),
+          targetElem  = document.querySelector( '#' + linkTarget );
+
+      // Select the appropriate elements
+      swap ( triggerElem, targetElem );
+
+      // Replace the hash
+      history.replaceState( null, '', '#' + linkTarget );
+
+    };
+
+    // Run hash check on window load
+    window.addEventListener( 'load', hashCheck, false );
+
+    // Iterate over each swap trigger
+    for ( var i = 0; i < triggers.length; i++ ) {
+
+      // And attach our click listener
+      triggers[ i ].addEventListener( 'click', clickHandler, false );
+
+    }
+
+  }
+
+});

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

@@ -0,0 +1,28 @@
+/**
+ * Switcheroo v0.0.1
+ * Move a given node from one place to another
+ * @author Kyle Foster @hkfoster
+ * @license MIT
+ **/
+
+( function( window ) {
+
+  'use strict';
+
+  // Define nodeWrapper function
+  var switcheroo = function( node, location ) {
+    if ( node ) {
+      location.appendChild( node );
+    }
+  };
+
+  // Transport
+  if ( typeof define === 'function' && define.amd ) {
+    define( switcheroo );
+  } else if ( typeof exports === 'object' ) {
+    module.exports = switcheroo;
+  } else {
+    window.switcheroo = switcheroo;
+  }
+
+})( window );

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

@@ -0,0 +1,92 @@
+/**
+ * Text Counter 0.0.1
+ * Count & display number of chars/words in a textarea
+ * @author Matt Gillespie (@savethetweets) & Kyle Foster (@hkfoster)
+ * @license MIT
+**/
+
+;( function( root, factory ) {
+  if ( typeof define === 'function' && define.amd ) {
+    define( factory );
+  } else if ( typeof exports === 'object' ) {
+    module.exports = factory;
+  } else {
+    root.textCounter = factory( root );
+  }
+})( this, function( root ) {
+
+  'use strict';
+
+  // Public API function
+  var exports = function( element, settings ) {
+
+    // Parameter variables
+    var
+      selector = document.querySelector( element ),
+      defaults = {
+        defaultMsg : 'characters available',
+        type       : 'characters',
+        successMsg : null,
+        closeCount : 20,
+        value      : 140
+      };
+
+    // Only run if selector exists
+    if ( !selector ) return false;
+
+    // Scoped variables
+    var
+      options      = compose.extend( defaults, settings ),
+      progressElem = selector.querySelector( 'progress' ),
+      counterInput = selector.querySelector( 'textarea' ),
+      targetCount  = progressElem.value || options.limit,
+      currentCount = 0,
+      counterLabel,
+      labelValue;
+
+    // Create and insert progress label span
+    compose.insertAfter( compose.makeNode( '<span>' + options.value + '&nbsp;' + options.defaultMsg + '</span>' ), progressElem );
+
+    // Cache progress span
+    counterLabel = progressElem.nextElementSibling;
+
+    // Attach input listener
+    counterInput.addEventListener( 'keyup', updateProgress, false );
+
+    // Update progress function
+    function updateProgress( event ) {
+
+      // Update current count based on words or characters
+      currentCount = ( options.type === 'words' ) ? currentCount = compose.wordCount( event.target.value ) : currentCount = event.target.value.length;
+
+      // Compare current count to target count and set label value
+      labelValue = targetCount - currentCount;
+
+      // Set progress element’s value accordingly
+      progressElem.value = labelValue;
+
+      // If close count value is set and label value falls below it
+      if ( options.closeCount && labelValue <= options.closeCount ) {
+
+        // Apply `.danger` class to label
+        counterLabel.classList.add( 'danger' );
+
+      // Otherwise
+      } else {
+
+        // Remove `.danger` class from label
+        counterLabel.classList.remove( 'danger' );
+
+      }
+
+      // If success message is set, trigger it … otherwise display negative text count
+      counterLabel.textContent = ( options.successMsg && labelValue <= 0 ) ? options.successMsg : labelValue + ' ' + options.defaultMsg;
+
+    }
+
+  };
+
+  // Public API
+  return exports;
+
+});