ratchet_design 0.1.17 → 0.1.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: aa2cc12ed79853e64afc9ecee2a1ad894bd46ded
-  data.tar.gz: 0fd055dfd76329487557080e2f17a9892b0d1a02
+  metadata.gz: ab32714804189a0aebc1663da68347d5cdef6dfb
+  data.tar.gz: 8bd3261cd9231a7f8a9551c90f35c42fb68359ee
 SHA512:
-  metadata.gz: 82ce272bda62087a1cc46a45635ab5a6c180a2eff90a73668d64fd2584ee2f9067a223bd34db312547cf154cba232e6d4195ccc4cf492a8c96c75d74728c47c1
-  data.tar.gz: 7fc0540eca557bcbfd9221a0749c693ae84f5d27e871621ea4d030368cd9936e6008b4dc2a5d269a7a43fc2c300f2cf3b904d22c58d8d6ee7c6d6fcf24d977c0
+  metadata.gz: 7b7f21a2a69fb8a4dcc903b96406cabdb8b717b7dfcab5fb93f3fdd6ed42e888e5d29ccc17033caaf63962376bdcbe15bd0696d0ad3b71a4708a2da0812f2cb2
+  data.tar.gz: 2b558d5a3befcebd8dfcd4963fb8371ea4cde5a48f958a46582f41ccfbb4ad344db16a06548b242d240c3be9738470d3334e43b319d7fa170ec13786269f2b12

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

@@ -1,3 +1,7 @@
+// Shim modules
+require( './shim/object_fit' );
+require( './shim/scope' );
+
 // Utility modules
 var loadFont    = require( './utility/load_font' );
 var loadScript  = require( './utility/load_script' );

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

@@ -0,0 +1,236 @@
+/**
+ * Polyfill for object-fit & object-position
+ * @source https://github.com/bfred-it/object-fit-images
+ * @author Federico Brigante ( @bfred-it )
+ * @license MIT
+ */
+var objectFitImages = (function () {
+'use strict';
+
+var OFI = 'bfred-it:object-fit-images';
+var propRegex = /(object-fit|object-position)\s*:\s*([-\w\s%]+)/g;
+var testImg = typeof Image === 'undefined' ? {style: {'object-position': 1}} : new Image();
+var supportsObjectFit = 'object-fit' in testImg.style;
+var supportsObjectPosition = 'object-position' in testImg.style;
+var supportsOFI = 'background-size' in testImg.style;
+var supportsCurrentSrc = typeof testImg.currentSrc === 'string';
+var nativeGetAttribute = testImg.getAttribute;
+var nativeSetAttribute = testImg.setAttribute;
+var autoModeEnabled = false;
+
+function createPlaceholder(w, h) {
+  return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" + w + "' height='" + h + "'%3E%3C/svg%3E");
+}
+
+function polyfillCurrentSrc(el) {
+  if (el.srcset && !supportsCurrentSrc && window.picturefill) {
+    var pf = window.picturefill._;
+    // parse srcset with picturefill where currentSrc isn't available
+    if (!el[pf.ns] || !el[pf.ns].evaled) {
+      // force synchronous srcset parsing
+      pf.fillImg(el, {reselect: true});
+    }
+
+    if (!el[pf.ns].curSrc) {
+      // force picturefill to parse srcset
+      el[pf.ns].supported = false;
+      pf.fillImg(el, {reselect: true});
+    }
+
+    // retrieve parsed currentSrc, if any
+    el.currentSrc = el[pf.ns].curSrc || el.src;
+  }
+}
+
+function getStyle(el) {
+  var style = getComputedStyle(el).fontFamily;
+  var parsed;
+  var props = {};
+  while ((parsed = propRegex.exec(style)) !== null) {
+    props[parsed[1]] = parsed[2];
+  }
+  return props;
+}
+
+function setPlaceholder(img, width, height) {
+  // Default: fill width, no height
+  var placeholder = createPlaceholder(width || 1, height || 0);
+
+  // Only set placeholder if it's different
+  if (nativeGetAttribute.call(img, 'src') !== placeholder) {
+    nativeSetAttribute.call(img, 'src', placeholder);
+  }
+}
+
+function onImageReady(img, callback) {
+  // naturalWidth is only available when the image headers are loaded,
+  // this loop will poll it every 100ms.
+  if (img.naturalWidth) {
+    callback(img);
+  } else {
+    setTimeout(onImageReady, 100, img, callback);
+  }
+}
+
+function fixOne(el) {
+  var style = getStyle(el);
+  var ofi = el[OFI];
+  style['object-fit'] = style['object-fit'] || 'fill'; // default value
+
+  // Avoid running where unnecessary, unless OFI had already done its deed
+  if (!ofi.img) {
+    // fill is the default behavior so no action is necessary
+    if (style['object-fit'] === 'fill') {
+      return;
+    }
+
+    // Where object-fit is supported and object-position isn't (Safari < 10)
+    if (
+      !ofi.skipTest && // unless user wants to apply regardless of browser support
+      supportsObjectFit && // if browser already supports object-fit
+      !style['object-position'] // unless object-position is used
+    ) {
+      return;
+    }
+  }
+
+  // keep a clone in memory while resetting the original to a blank
+  if (!ofi.img) {
+    ofi.img = new Image(el.width, el.height);
+    ofi.img.srcset = nativeGetAttribute.call(el, "data-ofi-srcset") || el.srcset;
+    ofi.img.src = nativeGetAttribute.call(el, "data-ofi-src") || el.src;
+
+    // preserve for any future cloneNode calls
+    // https://github.com/bfred-it/object-fit-images/issues/53
+    nativeSetAttribute.call(el, "data-ofi-src", el.src);
+    if (el.srcset) {
+      nativeSetAttribute.call(el, "data-ofi-srcset", el.srcset);
+    }
+
+    setPlaceholder(el, el.naturalWidth || el.width, el.naturalHeight || el.height);
+
+    // remove srcset because it overrides src
+    if (el.srcset) {
+      el.srcset = '';
+    }
+    try {
+      keepSrcUsable(el);
+    } catch (err) {
+      if (window.console) {
+        console.log('http://bit.ly/ofi-old-browser');
+      }
+    }
+  }
+
+  polyfillCurrentSrc(ofi.img);
+
+  el.style.backgroundImage = "url(\"" + ((ofi.img.currentSrc || ofi.img.src).replace(/"/g, '\\"')) + "\")";
+  el.style.backgroundPosition = style['object-position'] || 'center';
+  el.style.backgroundRepeat = 'no-repeat';
+
+  if (/scale-down/.test(style['object-fit'])) {
+    onImageReady(ofi.img, function () {
+      if (ofi.img.naturalWidth > el.width || ofi.img.naturalHeight > el.height) {
+        el.style.backgroundSize = 'contain';
+      } else {
+        el.style.backgroundSize = 'auto';
+      }
+    });
+  } else {
+    el.style.backgroundSize = style['object-fit'].replace('none', 'auto').replace('fill', '100% 100%');
+  }
+
+  onImageReady(ofi.img, function (img) {
+    setPlaceholder(el, img.naturalWidth, img.naturalHeight);
+  });
+}
+
+function keepSrcUsable(el) {
+  var descriptors = {
+    get: function get(prop) {
+      return el[OFI].img[prop ? prop : 'src'];
+    },
+    set: function set(value, prop) {
+      el[OFI].img[prop ? prop : 'src'] = value;
+      nativeSetAttribute.call(el, ("data-ofi-" + prop), value); // preserve for any future cloneNode
+      fixOne(el);
+      return value;
+    }
+  };
+  Object.defineProperty(el, 'src', descriptors);
+  Object.defineProperty(el, 'currentSrc', {
+    get: function () { return descriptors.get('currentSrc'); }
+  });
+  Object.defineProperty(el, 'srcset', {
+    get: function () { return descriptors.get('srcset'); },
+    set: function (ss) { return descriptors.set(ss, 'srcset'); }
+  });
+}
+
+function hijackAttributes() {
+  function getOfiImageMaybe(el, name) {
+    return el[OFI] && el[OFI].img && (name === 'src' || name === 'srcset') ? el[OFI].img : el;
+  }
+  if (!supportsObjectPosition) {
+    HTMLImageElement.prototype.getAttribute = function (name) {
+      return nativeGetAttribute.call(getOfiImageMaybe(this, name), name);
+    };
+
+    HTMLImageElement.prototype.setAttribute = function (name, value) {
+      return nativeSetAttribute.call(getOfiImageMaybe(this, name), name, String(value));
+    };
+  }
+}
+
+function fix(imgs, opts) {
+  var startAutoMode = !autoModeEnabled && !imgs;
+  opts = opts || {};
+  imgs = imgs || 'img';
+
+  if ((supportsObjectPosition && !opts.skipTest) || !supportsOFI) {
+    return false;
+  }
+
+  // use imgs as a selector or just select all images
+  if (typeof imgs === 'string') {
+    imgs = document.querySelectorAll(imgs);
+  } else if (!('length' in imgs)) {
+    imgs = [imgs];
+  }
+
+  // apply fix to all
+  for (var i = 0; i < imgs.length; i++) {
+    imgs[i][OFI] = imgs[i][OFI] || {
+      skipTest: opts.skipTest
+    };
+    fixOne(imgs[i]);
+  }
+
+  if (startAutoMode) {
+    document.body.addEventListener('load', function (e) {
+      if (e.target.tagName === 'IMG') {
+        fix(e.target, {
+          skipTest: opts.skipTest
+        });
+      }
+    }, true);
+    autoModeEnabled = true;
+    imgs = 'img'; // reset to a generic selector for watchMQ
+  }
+
+  // if requested, watch media queries for object-fit change
+  if (opts.watchMQ) {
+    window.addEventListener('resize', fix.bind(null, imgs, {
+      skipTest: opts.skipTest
+    }));
+  }
+}
+
+fix.supportsObjectFit = supportsObjectFit;
+fix.supportsObjectPosition = supportsObjectPosition;
+
+hijackAttributes();
+
+return fix;
+
+}());

data/app/assets/javascripts/ratchet/utility/load_font.js

@@ -14,12 +14,25 @@ var supportsWoff2 = ( function( win ) {
   return f.status == 'loading' || f.status == 'loaded';
 })( window );
 
-// Public API function -
+// Catch-all LocalStorage availability check
+var localStorageAvailable = function() {
+  var testKey = 'test', storage = window.localStorage;
+  try {
+    storage.setItem( testKey, '1' );
+    storage.removeItem( testKey );
+    return true;
+  } catch ( error ) {
+    return false;
+  }
+};
+
+// Public API function
 var loadFont = function( fontName, woffUrl, woff2Url, onlyLoadFontOnSecondPageload ){
 
   // Many unsupported browsers should stop here
   var nua  = navigator.userAgent,
-      nope = !window.addEventListener || ( nua.match( /(Android (2|3|4.0|4.1|4.2|4.3))|(Opera (Mini|Mobi))/ ) && !nua.match( /Chrome/ ) );
+      pass = localStorageAvailable(),
+      nope = !window.addEventListener || !pass || ( nua.match( /(Android (2|3|4.0|4.1|4.2|4.3))|(Opera (Mini|Mobi))/ ) && !nua.match( /Chrome/ ) );
 
   if ( nope ) return;
 
@@ -30,19 +43,20 @@ var loadFont = function( fontName, woffUrl, woff2Url, onlyLoadFontOnSecondPagelo
   try { loSto = localStorage || {}; }
   catch( ex ) {}
 
-  var loStoPrefix   = 'x-font-' + fontName,
-      loStoUrlKey   = loStoPrefix + 'url',
-      loStoCssKey   = loStoPrefix + 'css',
-      storedFontUrl = loSto[ loStoUrlKey ],
-      storedFontCss = loSto[ loStoCssKey ],
-      styleElement  = document.createElement( 'style' );
+  var loStoPrefix    = 'x-font-' + fontName,
+      loStoUrlKey    = loStoPrefix + 'url',
+      loStoCssKey    = loStoPrefix + 'css',
+      storedFontUrl  = loSto[ loStoUrlKey ],
+      storedFontCss  = loSto[ loStoCssKey ],
+      storedUrlMatch = storedFontUrl === woffUrl || storedFontUrl === woff2Url,
+      styleElement   = document.createElement( 'style' );
 
   // Make <style> element & apply base64 encoded font data
   styleElement.rel  = 'stylesheet';
   document.head.appendChild( styleElement );
 
   // CSS in LocalStorage & loaded from one of the current URLs
-  if ( storedFontCss && ( storedFontUrl === woffUrl || storedFontUrl === woff2Url ) ) {
+  if ( storedFontCss && storedUrlMatch ) {
 
     styleElement.textContent = storedFontCss;
 
@@ -68,5 +82,4 @@ var loadFont = function( fontName, woffUrl, woff2Url, onlyLoadFontOnSecondPagelo
   }
 };
 
-// Public API
-module.exports = loadFont;
+module.exports = loadFont

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

@@ -6,17 +6,10 @@
  * i. Utility
  * ------------------------------------- */
 
-// Point at which mobile menu is visible
-$breakpoint-xlg: 1500px;
-$breakpoint-lg: 1100px;
-$breakpoint: 800px;
-$breakpoint-sm: 550px;
-$breakpoint-xsm: 400px;
-
 // Transparent headers (for use with hero banners)
 @mixin transparent-header {
   margin-bottom: -$header-height;
-  z-index: 2;
+  z-index: 3;
 
   &,
   &:before {
@@ -37,7 +30,7 @@ $breakpoint-xsm: 400px;
   cursor: pointer;
   flex-shrink: 0;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 600;
   // text-transform: uppercase;
 }
 
@@ -45,6 +38,7 @@ $breakpoint-xsm: 400px;
 %logo {
   height: $header-height;
   z-index: 4;
+  display: inline-block;
 
   // SVG inherits structure & color
   svg {
@@ -56,7 +50,7 @@ $breakpoint-xsm: 400px;
 // Header button styles
 %header-button {
   @include button($size: small, $color: $white, $fill: off, $bevel: on);
-  font-weight: 400;
+  font-weight: 600;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -124,6 +118,9 @@ $breakpoint-xsm: 400px;
   padding: 0;
   outline: 0;
   box-sizing: border-box;
+  transition-duration: .25s;
+  transition-property: none;
+  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
 /* ===================================== *
@@ -261,23 +258,4 @@ header[role=banner] > nav[role=navigation] {
 // Main content
 main {
   flex: 1;
-  padding-top:    $header-height;
-  padding-bottom: $header-height;
-}
-
-/* ===================================== *
- * vii. Ratchet Footer
- * ------------------------------------- */
-
-// Main site footer
-footer[role=contentinfo] {
-  color: $pewter;
-  font-size: vr(1);
-  @include padded-module; // 1100px width & 30px padding
-  @include cover-background($shark);
-
-  > * {
-    @include grid;
-    padding: vr(3) 0;
-  }
-}
+}

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

@@ -1,10 +1,9 @@
 $text-inputs: 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password], input[type=search]';
 
-$formBlue:  $cerulean;//#4392f9;
-//$steel:     darken($page-border, 25); // Blue-Gray
-$alabaster: hsl(0, 0%, 79%); // Light Blue
-$isabella:  #dde8eb; // Off-Cream
-$duration: .2s;
+// $formBlue:  $cerulean;//#4392f9;
+// //$steel:     darken($page-border, 25); // Blue-Gray
+// // $alabaster: hsl(0, 0%, 79%); // Light Blue // $isabella:  #dde8eb; // Off-Cream
+// $duration: .2s;
 
 @mixin input-active {
   &:focus,
@@ -14,37 +13,23 @@ $duration: .2s;
   }
 }
 
-$input-weight-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-$empty-shadow: 0 0 0 transparent;
-$background-shadow: 0 0 0 1000px $white inset;
+ $input-weight-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ $empty-shadow: 0 0 0 transparent;
+ $background-shadow: 0 0 0 1000px $white inset;
 
-@function input-shadow($color: $alabaster, $size: 1px) {
-  @return 0 0 0 $size $color inset, $empty-shadow, $background-shadow;
-}
-@function input-focus-shadow($color: $steel) {
-  @return 0 0 0 1px $color inset, $input-weight-shadow, $background-shadow;
-}
-
-@function select-shadow($color: $alabaster, $size: 1px) {
-  @return 0 0 0 $size $color inset, $empty-shadow;
-}
-@function select-focus-shadow($color: $steel) {
-  @return 0 0 0 1px $color inset, $input-weight-shadow;
-}
-
-*, *:before, *:after {
-  transition-duration: .25s;
-  transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-
-form {
-  width: 100%;
-
-  &.max {
-    max-width: 100%;
-  }
+ @function input-shadow($color: $alabaster, $size: 1px) {
+   @return 0 0 0 $size $color inset, $empty-shadow, $background-shadow;
+ }
+ @function input-focus-shadow($color: $steel) {
+   @return 0 0 0 1px $color inset, $input-weight-shadow, $background-shadow;
+ }
 
-}
+ @function select-shadow($color: $alabaster, $size: 1px) {
+   @return 0 0 0 $size $color inset, $empty-shadow;
+ }
+ @function select-focus-shadow($color: $steel) {
+   @return 0 0 0 1px $color inset, $input-weight-shadow;
+ }
 
 .switch-label, .tick-label {
   pointer-events: none;
@@ -66,7 +51,7 @@ label {
     opacity: 0;
     z-index: -1;
   }
-} 
+}
 
 fieldset {
   border: 0;
@@ -102,7 +87,6 @@ fieldset h2, legend.header {
   + * { clear: both; }
 }
 
-
 @mixin input-base {
   width: 100%;
   font-size: 16px;
@@ -114,7 +98,7 @@ fieldset h2, legend.header {
   appearance: none;
 
   &:disabled:not([type="submit"]) {
-    color: $isabella;
+    // color: $isabella;
     cursor: default;
   }
 }
@@ -131,34 +115,34 @@ input, select, textarea {
 
 }
 
-#{$text-inputs}, select, textarea {
-  @include input-base;
-}
+ #{$text-inputs}, select, textarea {
+   @include input-base;
+ }
 
-#{$text-inputs}, textarea {
-  box-shadow: input-shadow();
+ #{$text-inputs}, textarea {
+   box-shadow: input-shadow();
 
-  &:-webkit-autofill {
-    box-shadow: input-shadow();
-  }
+   &:-webkit-autofill {
+     box-shadow: input-shadow();
+   }
 
-  @include input-active {
-    box-shadow: input-focus-shadow();
-  }
-}
+   @include input-active {
+     box-shadow: input-focus-shadow();
+   }
+ }
 
-select {
-  box-shadow: select-shadow();
+ select {
+   box-shadow: select-shadow();
 
-  &:-webkit-autofill {
-    box-shadow: select-shadow();
-  }
+   &:-webkit-autofill {
+     box-shadow: select-shadow();
+   }
 
-  @include input-active {
-    box-shadow: select-focus-shadow();
-  }
+   @include input-active {
+     box-shadow: select-focus-shadow();
+   }
 
-}
+ }
 
 textarea {
   line-height: vr(1.5);