ratchet_design 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 89650100df2404d22f67c7f009684726963eb6d7
+  data.tar.gz: ea6180540d9a955e87377e2585b79d88ddcf3ad2
+SHA512:
+  metadata.gz: 139f8966dc358cb3e6b245039979db3f4ecc12dab5cb9a8278a5fe3c87bec82a5f9a8459636e1be57a18677cb8435228a4cf83570aeb9bf0e70fefc5c52b2b5d
+  data.tar.gz: dba992c64cc3f07799c2a5dabb3bf413321c4d8efc928a06b1cb76e9b7cb1a249a31014e6cfe967ace0f9078772d9b64bd210776a9cf3fc7320f1156dcfacfb4

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Brandon Mathis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,41 @@
+# RatchetDesign
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/ratchet_design`. To experiment with that code, run `bin/console` for an interactive prompt.
+
+TODO: Delete this and the text above, and describe your gem
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'ratchet_design'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install ratchet_design
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/ratchet_design. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+

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

@@ -0,0 +1,55 @@
+var esvg = {
+  embed: function(){
+    if (!document.querySelector('#esvg-symbols')) {
+      document.querySelector('body').insertAdjacentHTML('afterbegin', '<svg id="esvg-symbols" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><symbol id="icon-facebook" viewBox="0 0 38 38" width="38" height="38"><path d="M21.4 12.8h2.1V9.4h-2.7c-2.9 0-4.2 1.3-4.2 3.7v2.6h-2V19h2v9.6h3.9v-9.7h2.7l.3-3.2h-3v-1.8c0-.8.2-1.1.9-1.1z"/></symbol><symbol id="icon-github" viewBox="0 0 38 38" width="38" height="38"><path d="M23 35.9v-4.5c0-1.6-.5-2.5-1.1-3 3.6-.4 7.5-1.8 7.5-8.1 0-1.8-.6-3.3-1.7-4.4.2-.4.7-2.1-.2-4.3 0 0-1.4-.4-4.5 1.6-1.3-.3-2.7-.5-4.2-.5-1.4 0-2.8.2-4.2.5-3.1-2.1-4.5-1.6-4.5-1.6-.9 2.3-.3 3.9-.2 4.3-1 1.1-1.7 2.6-1.7 4.4 0 6.3 3.8 7.7 7.4 8.1-.4.4-.9 1.1-1 2.2-1 .4-3.3 1.1-4.8-1.4 0 0-.9-1.6-2.5-1.7 0 0-1.6 0-.1 1 0 0 1 .5 1.8 2.4 0 0 1 2.9 5.5 1.9v3c0 .4-.3 1-1 .8 1.6.5 3.4.9 5.2.9 1.8 0 3.5-.3 5.2-.9-.6.3-.9-.2-.9-.7z"/></symbol><symbol id="icon-google-plus" viewBox="0 0 38 38" width="38" height="38"><path d="M10.6 24c0 2 2.3 3.2 5.1 3.2 3.9 0 5.4-2.1 5.4-3.7 0-1.4-.5-2.3-2-3.4-1.6-1.1-1.9-1.8-.5-2.9.8-.6 1.4-1.5 1.4-2.6 0-1.2-.5-2.2-1.4-2.7h1.3l1.1-1.1h-4.8c-3 0-4.5 1.8-4.5 3.8s1.4 3.6 4.1 3.6c-.4.9-.3 1.6.4 2.2-4.6 0-5.6 2-5.6 3.6zm3-9.5c-.3-1.7.6-3 1.9-3s2.4 1.4 2.6 3.1c.2 1.7-.5 2.8-1.7 2.8-1.3 0-2.6-1.2-2.8-2.9zm2.4 6.3c2.2.1 3.4 1.4 3.4 2.8 0 1.5-1.2 2.6-3.7 2.6-1.9 0-3.3-1.2-3.3-2.7 0-1.4 1.6-2.7 3.6-2.7zM25.2 10.9h-1.1v2.2h-2.2v1.1h2.2v2.2h1.1v-2.2h2.2v-1.1h-2.2"/></symbol><symbol id="icon-ibm" viewBox="0 0 75 30" width="75" height="30"><path d="M0 0v2h14.6V0H0zm16.7 0v2h20.8s-2.1-2-4.9-2H16.7zm24.8 0v2h12.6l-.8-2H41.5zm21.7 0l-.8 2h12.5V0H63.2zM0 4v2h14.6V4H0zm16.7 0v2h23.2s-.3-1.6-.8-2H16.7zm24.8 0v2h14l-.7-2H41.5zm20.2 0L61 6h13.9V4H61.7zM4.2 8v2.1h6.3V8H4.2zm16.7 0v2.1h6.3V8h-6.3zm12.4 0v2.1h6.3S40 9 40 8h-6.7zm12.5 0v2.1H57L56.2 8H45.8zm14.5 0l-.8 2.1h11.3V8H60.3zM4.2 12v2h6.3v-2H4.2zm16.7 0v2H37s1.4-1.1 1.8-2H20.9zm24.9 0v2h6.3v-1.1l.4 1.1H64l.4-1.1V14h6.3v-2H58.9l-.6 1.7-.6-1.7H45.8zM4.2 16v2h6.3v-2H4.2zm16.7 0v2h17.9c-.4-1-1.8-2-1.8-2H20.9zm24.9 0v2h6.3v-2h-6.3zm7.4 0l.8 2h8.7l.7-2H53.2zm11.3 0v2h6.3v-2h-6.3zM4.2 20v2h6.3v-2H4.2zm16.7 0v2h6.3v-2h-6.3zm12.4 0v2H40c0-1-.4-2-.4-2h-6.3zm12.5 0v2h6.3v-2h-6.3zm8.9 0l.8 2h5.8l.8-2h-7.4zm9.8 0v2h6.3v-2h-6.3zM.1 23.9V26h14.6v-2.1H.1zm16.6 0V26h22.5c.5-.5.8-2.1.8-2.1H16.7zm25 0V26h10.4v-2.1H41.7zm14.4 0l.8 2.1h2.9l.7-2.1h-4.4zm8.4 0V26H75v-2.1H64.5zM.1 28v2h14.6v-2H.1zm16.6 0v2h15.9c2.8 0 4.9-2 4.9-2H16.7zm25 0v2h10.4v-2H41.7zm15.8 0l.7 2h.1l.8-2h-1.6zm7 0v2H75v-2H64.5z"/></symbol><symbol id="icon-inbox" viewBox="0 0 76 54" width="76" height="54"><path d="M74 7S38.66 31 38 31C37.34 31 2 7 2 7V2.63h72V7zm0 6.24v38.33H2V13.24s34.59 22.9 36 22.9c1.41 0 36-22.9 36-22.9z"/></symbol><symbol id="icon-linkedin" viewBox="0 0 38 38" width="38" height="38"><path d="M11.6 15.5H15v10.8h-3.4z"/><ellipse cx="13.3" cy="12.1" rx="2" ry="2"/><path d="M27.5 26.4v-6.9c0-2.9-1.6-4.3-3.9-4.3S20.3 17 20.3 17v-1.5h-3.2v10.8h3.2v-5.7c0-1.5.7-2.4 2-2.4 1.2 0 1.8.9 1.8 2.4v5.7h3.4z"/></symbol><symbol id="icon-ratchet" viewBox="0 0 600 120" width="600" height="120"><path d="M502.1 2.5H397v39h-20v-39h-37v101.8l-16.8-30.2c-4.5 7.4-12.6 12.4-21.9 12.4-14.2 0-25.7-11.5-25.7-25.7s11.5-25.7 25.7-25.7c8.2 0 15.5 3.8 20.2 9.8l.6-1 18-31.7c-3.1-2.2-6.7-4.2-11-6-3.7-1.6-8-3-13.1-4.3C311 .6 305.2 0 298.7 0c-8.2 0-16 1.4-23.3 4.2C268 7 261.6 11 256.2 16.3c-4.3 4.2-8 9-10.9 14.5 2.2-5.5 5.8-12.5 11.5-18.1 3.8-3.8 8.2-7.2 12.9-9.2H113.5L82.8 83.6l13.7 32.9h9.6l2.9-8h36.4l2.9 8H222v-77h19.5c-2.1 6.3-3.2 13.1-3.2 20.5 0 8.9 1.5 17.1 4.6 24.4 3.1 7.4 7.4 13.7 12.9 18.9 5.5 5.3 12 9.3 19.5 12.3 7.5 2.9 15.8 4.4 24.7 4.4 6.6 0 12.5-.7 17.7-2.1 5.1-1.4 9.3-2.9 13-4.5 3.6-1.7 7.3-3.5 9.3-5.6v9.6h37v-43h20v43h32l5.8-107.9.6 107.9H503v-37h-32v-7h19v-28h-19v-6h31V3.2l6.3 36.3H532v78h38v-78h23.7l6.3-37h-97.9zm-379 71l4.2-10.9 4.2 10.9h-8.4zm19.3-66.4l18.4 32.4H184v76.1L142.4 7.1zM92 43.5c0-22.9-18.5-41-41.4-41H0v114h37V87.6l16.7 28.9h42.9L74.2 77.1C84.9 69.7 92 57.6 92 43.5zm-50.1 13H37v-21h4.9c5.4 0 9.7 4.7 9.8 10.5-.1 5.1-4.5 10.5-9.8 10.5zm251.9 17.2l-7.6-13.2 7.6-13.1h15l7.5 13.1-7.5 13.2h-15z"/></symbol><symbol id="icon-search" viewBox="0 0 38 38" width="38" height="38"><path d="M26.7 25.1L23 21.3c.7-1.1 1.2-2.4 1.2-3.8-.1-3.6-3-6.5-6.7-6.5-3.6 0-6.6 2.9-6.6 6.6s3 6.6 6.6 6.6c1.4 0 2.7-.5 3.8-1.2l3.7 3.7c.2.2.5.3.9.3.3 0 .6-.1.9-.3.3-.4.3-1.2-.1-1.6m-9.1-2.6c-2.7 0-4.9-2.2-4.9-4.9s2.2-4.9 4.9-4.9 4.9 2.2 4.9 4.9-2.2 4.9-4.9 4.9"/></symbol><symbol id="icon-subscribe" viewBox="0 0 38 38" width="38" height="38"><path d="M21.6 26.9c0-5.8-4.7-10.5-10.5-10.5v3.2c4 0 7.3 3.3 7.3 7.3h3.2zm-6.2-2.2c0-1.2-1-2.2-2.2-2.2-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2c1.2 0 2.2-.9 2.2-2.2zM27 27c0-8.8-7.1-16-15.9-16v3.2c3.4 0 6.6 1.3 9 3.7s3.7 5.6 3.7 9l3.2.1z"/></symbol><symbol id="icon-twitter" viewBox="0 0 38 38" width="38" height="38"><path d="M27 12.4c-.7.4-1.4.6-2.2.8-.6-.7-1.5-1.1-2.5-1.1-2.3 0-3.9 2.1-3.4 4.3-2.9-.1-5.5-1.5-7.2-3.6-.9 1.5-.4 3.6 1.1 4.6-.6 0-1.1-.1-1.6-.4 0 1.7 1.1 3.2 2.8 3.5-.5.2-1.1.2-1.6.1.4 1.4 1.7 2.4 3.2 2.4-1.5 1.1-3.4 1.6-5.2 1.4 1.5 1 3.3 1.6 5.3 1.6 6.5 0 10.1-5.4 9.9-10.3.7-.5 1.3-1.1 1.9-1.9-.6.2-1.3.4-2 .5.7-.4 1.3-1.2 1.5-1.9z"/></symbol><symbol id="icon-y-combinator" viewBox="0 0 38 38" width="38" height="38"><path d="M22.4 10.9h3.8l-5.3 10v6h-3.3v-6l-5.5-10H16l3.3 7 3.1-7z"/></symbol></svg>')
+    }
+  },
+  icon: function(name, classnames) {
+    var svgName = this.iconName(name)
+    var element = document.querySelector('#'+svgName)
+
+    if (element) {
+      return '<svg class="svg-icon '+svgName+' '+(classnames || '')+'" '+this.dimensions(element)+'><use xlink:href="#'+svgName+'"/></svg>'
+    } else {
+      console.error('File not found: "'+name+'.svg" at app/assets/svgs/ratchet/')
+    }
+  },
+  iconName: function(name) {
+    var before = true
+    if (before) {
+      return "icon-"+this.dasherize(name)
+    } else {
+      return name+"-icon"
+    }
+  },
+  dimensions: function(el) {
+    return 'viewBox="'+el.getAttribute('viewBox')+'" width="'+el.getAttribute('width')+'" height="'+el.getAttribute('height')+'"'
+  },
+  dasherize: function(input) {
+    return input.replace(/[W,_]/g, '-').replace(/-{2,}/g, '-')
+  },
+  load: function(){
+    // If DOM is already ready, embed SVGs
+    if (document.readyState == 'interactive') { this.embed() }
+
+    // Handle Turbolinks (or other things that fire page change events)
+    document.addEventListener("page:change", function(event) { this.embed() }.bind(this))
+
+    // Handle standard DOM ready events
+    document.addEventListener("DOMContentLoaded", function(event) { this.embed() }.bind(this))
+  },
+  aliases: {},
+  alias: function(name) {
+    var aliased = this.aliases[name]
+    if (typeof(aliased) != "undefined") {
+      return aliased
+    } else {
+      return name
+    }
+  }
+}
+
+esvg.load()
+
+// Work with module exports:
+if(typeof(module) != 'undefined') { module.exports = esvg }

data/app/assets/javascripts/ratchet/base/form.js

@@ -0,0 +1,220 @@
+/**
+ * Form 0.0.1
+ * Compose forms module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Dependencies
+var evt = require( 'compose-event' );
+
+// Public API function
+var form = function( element, settings ) {
+
+  // Overridable defaults
+  var defaults = {};
+
+  // Parameter variables
+  var selector = document.querySelector( element ) || document.querySelector( 'form' );
+
+  // Only run if selector exists
+  if ( !selector ) return false;
+
+  // Scoped variables
+  var options  = Object.assign( {}, defaults, settings ),
+      rangeEls = document.querySelectorAll( 'input[type=range]' ),
+      tickEls  = document.querySelectorAll( 'input[type=checkbox], input[type=radio]' ),
+      docBody  = document.body;
+
+  // Prevent non-numeric characters in number fields
+  docBody.addEventListener( 'keypress', keyHandler, false );
+
+  // Run delegated `on input` listener
+  docBody.addEventListener( 'input', rangeHandler, true );
+
+  // Loop over any range inputs that are present
+  for ( var rangeIndex = 0; rangeIndex < rangeEls.length; rangeIndex++ ) {
+
+    // And run their handler function explicitly at runtime
+    rangeHandler( rangeEls[ rangeIndex ] );
+
+  }
+
+  // Loop over any checkbox/radio inputs that are present
+  for ( var tickIndex = 0; tickIndex < tickEls.length; tickIndex++ ) {
+
+    // And run their handler function explicitly at runtime
+    tickHandler( tickEls[ tickIndex ] );
+
+  }
+
+  // Checkbox/radio input hander function
+  function tickHandler( elem ) {
+
+    // Find element’s parent node
+    var labelParent = elem.parentNode;
+
+    // If parent is a label
+    if ( labelParent.tagName === 'LABEL' ) {
+
+      // Simply add the `tick-label` classname
+      labelParent.classList.add( 'tick-label' );
+
+    // Otherwise
+    } else {
+
+      // Wrap the element properly
+      elem.insertAdjacentHTML( 'beforebegin', '<label class="tick-label"></label>' );
+      elem.previousSibling.insertAdjacentElement( 'afterbegin', elem );
+
+    }
+
+    // And add empty span to label
+    elem.insertAdjacentHTML( 'afterend', '<span></span>' );
+
+  }
+
+  // Keydown handler function
+  function keyHandler( event ) {
+
+    // Only run on number inputs
+    if ( event.target.type !== 'number' ) {
+      return false;
+    }
+
+    // If user enters non-numeric characters
+    if ( event.which < 48 || event.which > 57 ) {
+
+      // Supress them
+      event.preventDefault();
+
+    }
+
+  }
+
+  // Range input hander function
+  function rangeHandler( event ) {
+
+    // Define target element
+    var element = ( event.target ) ? event.target : event;
+
+    // Only run on range inputs
+    if ( element.type !== 'range' ) {
+      return false;
+    }
+
+    // Calculate percentage value
+    var percValue = ( element.max ) ? element.value / element.max * 100 : element.value / 100 * 100;
+
+    // Style bar accordingly
+    element.style.backgroundImage = 'linear-gradient(90deg, #009DDC ' + percValue + '%, #D1D1D1 ' + percValue + '%)';
+
+  }
+
+  // Rangetouch 0.0.9 - https://github.com/selz/rangetouch
+  function rangeTouch( size ) {
+
+    // Bail if not a touch device
+    if ( !( 'ontouchstart' in document.documentElement ) ) {
+      return;
+    }
+
+    // Scoped variables
+    var rangeInputs = document.querySelectorAll( '[type=range]' ),
+        thumbSize   = size || 20;
+
+    // Set touchAction to prevent delays
+    for ( var i = rangeInputs.length - 1; i >= 0; i-- ) {
+      rangeInputs[ i ].style.touchAction = 'manipulation';
+      rangeInputs[ i ].style.webkitUserSelect = 'none';
+    }
+
+    // Listen for events
+    docBody.addEventListener( 'touchstart', setValue, false );
+    docBody.addEventListener( 'touchmove', setValue, false );
+    docBody.addEventListener( 'touchend', setValue, false );
+
+    // Get the number of decimal places
+    function getDecimalPlaces( value ) {
+      var match = ( '' + value ).match( /( ?:\.( \d+ ) )?( ?:[eE]( [+-]?\d+ ) )?$/ );
+      if ( !match ) {
+        return 0;
+      }
+      return Math.max( 0, ( match[ 1 ] ? match[ 1 ].length : 0 ) - ( match[ 2 ] ? +match[ 2 ] : 0 ) );
+    }
+
+    // Round to the nearest step
+    function roundToStep( number, step ) {
+      if ( step < 1 ) {
+        var places = getDecimalPlaces( parseInt( step ) );
+        return parseFloat( number.toFixed( places ) );
+      }
+      return ( Math.round( number / step ) * step );
+    }
+
+    // Get the value based on touch position
+    function getValue( event ) {
+
+      // Scoped variables
+      var input = event.target,
+          touch = event.changedTouches[ 0 ],
+          min   = parseFloat( input.getAttribute( 'min' ) )  || 0,
+          max   = parseFloat( input.getAttribute( 'max' ) )  || 100,
+          step  = parseFloat( input.getAttribute( 'step' ) ) || 1,
+          delta = max - min;
+
+      // Calculate percentage
+      var percent,
+          clientRect = input.getBoundingClientRect(),
+          thumbWidth = ( ( ( 100 / clientRect.width ) * ( thumbSize / 2 ) ) / 100 );
+
+      // Determine left percentage
+      percent = ( ( 100 / clientRect.width ) * ( touch.clientX - clientRect.left ) );
+
+      // Don't allow outside bounds
+      if ( percent < 0 ) {
+        percent = 0;
+      } else if ( percent > 100 ) {
+        percent = 100;
+      }
+
+      // Factor in the thumb offset
+      if ( percent < 50 ) {
+        percent -= ( ( 100 - ( percent * 2 ) ) * thumbWidth );
+      } else if ( percent > 50 ) {
+        percent += ( ( ( percent - 50 ) * 2 ) * thumbWidth );
+      }
+
+      // Find the closest step to the mouse position
+      return min + roundToStep( delta * ( percent / 100 ), step );
+
+    }
+
+    // Update range value based on position
+    function setValue( event ) {
+
+      // Bail if not a range slider
+      if ( event.target.type !== 'range' ) {
+        return;
+      }
+
+      // Prevent text highlight on iOS
+      event.preventDefault();
+
+      // Set value
+      event.target.value = getValue( event );
+
+      // Trigger input event
+      evt.fire( event.target, ( event.type === 'touchend' ? 'change' : 'input' ) );
+
+    }
+
+  }
+
+  // Initialize RangeTouch
+  rangeTouch();
+
+};
+
+// Public API
+module.exports = form;

data/app/assets/javascripts/ratchet/base/mobilemenu.js

@@ -0,0 +1,62 @@
+/**
+ * Mobile Menu 0.0.2
+ * Compose mobile menu module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT (http://www.opensource.org/licenses/mit-license.php/)
+ **/
+
+// Public API function
+var mobileMenu = function( element, settings ) {
+
+  // Overridable defaults
+  var defaults = {
+    initWidth : '700px',
+    openClass : 'menu-open'
+  };
+
+  // Scoped variables
+  var options    = Object.assign( {}, defaults, settings ),
+      selector   = document.querySelector( element ),
+      widthQuery = window.matchMedia( '(max-width: ' + options.initWidth + ')' );
+
+  // Attach listeners
+  if ( selector ) {
+
+    // Call listener function explicitly at run time
+    queryHandler( widthQuery );
+
+    // Attach listener function to listen in on state changes
+    widthQuery.addListener( queryHandler );
+
+  }
+
+  // Click handler function
+  function clickHandler( event ) {
+
+    event.preventDefault();
+
+    document.body.classList.toggle( options.openClass );
+
+  }
+
+  // Media query handler function
+  function queryHandler( condition ) {
+
+    // If media query matches
+    if ( condition.matches ) {
+
+      // Click function listener
+      selector.addEventListener( 'click', clickHandler, false );
+
+    } else {
+
+      // Remove click listener
+      selector.removeEventListener( 'click', clickHandler, false );
+
+    }
+  }
+
+};
+
+// Public API
+module.exports = mobileMenu;

data/app/assets/javascripts/ratchet/base/validation.js

@@ -0,0 +1,230 @@
+/**
+ * Validation 0.0.6
+ * Compose form validation module
+ * @author Kyle Foster (@hkfoster)
+ * @license MIT
+ **/
+
+// Dependencies
+var matches    = require( '../utility/matches'     ),
+    getClosest = require( '../utility/get_closest' ),
+    wordCount  = require( '../utility/word_count'  );
+
+// Public API function
+var validation = function( element, settings ) {
+
+  // Overridable defaults
+  var defaults = {};
+
+  // Parameter variables
+  var selector = document.querySelector( element ) || document.querySelector( '[required]' );
+
+  // Only run if selector exists & validation is supported
+  if ( !selector || typeof document.createElement( 'input' ).checkValidity !== 'function' ) return false;
+
+  // Scoped variables
+  var options = Object.assign( {}, defaults, settings ),
+      docBody = document.body;
+
+  // Suppress default message bubbles
+  docBody.addEventListener( 'invalid', function( event ) {
+    event.preventDefault();
+  }, true );
+
+  // Run delegated `on blur` validation checks
+  docBody.addEventListener( 'blur', blurHandler, true );
+
+  // Run delegated `on submit` validation checks
+  docBody.addEventListener( 'click', submissionHandler, false );
+
+  // Blur validation handler
+  function blurHandler( event ) {
+
+    // Only run on non-submit inputs
+    if ( !matches( event.target, 'input:not([type=submit]), textarea' ) ) return false;
+
+    // Scoped variables
+    var element   = event.target,
+        minWords  = element.dataset.minWords,
+        indicator = getClosest( element, 'label' ) || element,
+        validity;
+
+    // Remove pre-existing validation message
+    messageHandler( 'hide', element );
+
+    // If element has `data-min-words` attribute
+    if ( minWords ) {
+
+      // And it has a value that is less than the set minimum
+      if ( element.value && wordCount( element.value ) < minWords ) {
+
+        // Set a custom error message
+        element.setCustomValidity( 'Please write at least ' + minWords + ' words.' );
+
+      // Otherwise
+      } else {
+
+        // Default to normal error messaging
+        element.setCustomValidity( '' );
+
+      }
+
+    }
+
+    // Check validity
+    validity = element.checkValidity();
+
+    // If the element has a value but is invalid
+    if ( element.value && !validity ) {
+
+      // Set invalid state
+      indicator.classList.remove( 'valid' );
+      indicator.classList.add( 'invalid' );
+
+    // If the element has a value and is valid
+    } else if ( element.value && validity ) {
+
+      // Set valid state
+      indicator.classList.remove( 'invalid' );
+      indicator.classList.add( 'valid' );
+
+    // If the element has no value
+    } else if ( !element.value ) {
+
+      // Set neutral state
+      indicator.classList.remove( 'valid' );
+      indicator.classList.remove( 'invalid' );
+
+    }
+
+  }
+
+  // Submission validation handler function
+  function submissionHandler( event ) {
+
+    // Only run on submission
+    if ( !matches( event.target, 'input[type=submit], button:not([type=button])' ) ) return;
+
+    // Scoped variables
+    var invalidForm = getClosest( event.target, 'form' ),
+        invalidElem = invalidForm.querySelector( 'input:invalid, textarea:invalid' ),
+        indicator;
+
+    // If invalid element found
+    if ( invalidElem ) {
+
+      // Set indicator to parent label if it exists
+      indicator = getClosest( invalidElem, 'label' ) || invalidElem;
+
+      // If credit card field is invalid
+      if ( matches( invalidElem, '[data-stripe=number]' ) ) {
+
+        // Strip it of non-number characters
+        invalidElem.value = invalidElem.value.replace( /[^0-9 -]/g, '' );
+
+        // Evaluate form validity again
+        invalidElem = invalidForm.querySelector( 'input:invalid, textarea:invalid' );
+
+        // And return if valid
+        if ( !invalidElem ) return;
+
+      }
+
+      // Prevent default behavior
+      event.preventDefault();
+
+      // If invalid is not hidden
+      if ( invalidElem.style.display !== 'none' ) {
+
+        // Focus it
+        invalidElem.focus();
+
+      // Otherwise
+      } else {
+
+        // Focus its immediate sibling (mostly used for upload buttons)
+        invalidElem.nextSibling.focus();
+
+      }
+
+      // Toggle classes
+      indicator.classList.remove( 'valid' );
+      indicator.classList.add( 'invalid' );
+
+      // Show validation message
+      messageHandler( 'show', invalidElem );
+
+      // Prevent Safari submission
+      return false;
+
+    }
+
+  }
+
+  // Validation message handler function
+  function messageHandler( action, element ) {
+
+    // Scoped variables
+    var parentForm  = getClosest( element, 'form' ),
+        oldMessage  = parentForm.querySelector( '.validation-message' ),
+        newMessage  = element.validationMessage,
+
+    // Hide old message
+    hideMessage = function() {
+      oldMessage.parentNode.removeChild( oldMessage );
+    },
+
+    // Show new message
+    showMessage = function() {
+
+      // Find the element's parent label
+      var labelParent = getClosest( element, 'label' );
+
+      // If it doesn't exist, abort
+      if ( !labelParent ) return false;
+
+      // Otherwise, create and append the validation message
+      labelParent.insertAdjacentHTML( 'beforeend',  '<aside class="validation-message"><p>' + newMessage + '</p></aside>' );
+
+    };
+
+    // If a `data-message` attribute exists, use it in message
+    if ( element.dataset.message ) newMessage = element.dataset.message;
+
+    // If hide action is passed hide old message
+    if ( oldMessage && action === 'hide' ) hideMessage();
+
+    // If show action is passed and no old message exists
+    if ( action === 'show' && !oldMessage ) {
+
+      // Show new message
+      showMessage();
+
+    // If show action is passed and old message exists
+    } else if ( action === 'show' && oldMessage ) {
+
+      // Make sure old message is not on currently invalid element
+      if ( oldMessage.parentNode !== element.parentNode ) {
+
+        // Hide old message
+        hideMessage();
+
+        // And show new message
+        showMessage();
+
+      // Otherwise
+      } else {
+
+        // Update message text on currently invalid element
+        oldMessage.childNodes[ 0 ].textContent = newMessage;
+
+      }
+
+    }
+
+  }
+
+};
+
+// Public API
+module.exports = validation;