ratchet_design 0.1.5 → 0.1.6

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

@@ -1,165 +0,0 @@
-/**
- * Lightbox 0.0.1
- * A simple lightbox module
- * @author Kyle Foster (@hkfoster)
- * @license MIT
- **/
-
-// Dependencies
-var toolbox = require( 'compose-toolbox' ),
-    Event   = toolbox.event,
-    delay   = toolbox.delay,
-    loader  = require( '../utility/loader' );
-
-// 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'
-  },
-
-  // Main variables
-  options    = toolbox.merge( defaults, settings ),
-  selector   = document.querySelector( element ),
-  widthQuery = window.matchMedia( '(max-width: ' + options.initWidth + ')' ),
-  spinner    = loader({ loadingMessage: 'Loading image', failureMessage : 'No image found' }),
-  docBody    = document.body,
-  tempImg;
-
-  // Only run when selectors exist
-  if ( !selector ) return false;
-
-  // 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() {
-
-    // Insert lightbox container into body
-    docBody.insertAdjacentHTML( 'afterbegin', '<aside class="lightbox"><figure><img src="" alt=""><button></button></figure></aside>' );
-
-    // Cache temporary placeholder image
-    tempImg = document.querySelector( '.lightbox img' );
-
-  }
-
-  // Hide lightbox function
-  function hideLightbox( event ) {
-
-    // Don’t apply when image is clicked
-    if ( event && event.target.tagName === 'IMG' ) return false;
-
-    // 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 ) {
-
-    // Wait a second…
-    delay( function() {
-
-      // Show spinner failure state
-      spinner.show( 'failure' );
-
-    }, 1000 );
-
-    // Wait a couple more seconds…
-    delay( function() {
-
-      // Hide the lightbox
-      hideLightbox();
-
-    }, 2500 );
-
-    // Remove image load event listener
-    Event.off( tempImg, 'load', loadSuccess );
-
-    // Remove image error event listener
-    Event.off( tempImg, 'error', loadFailure );
-
-  }
-
-  // Click handler function
-  function clickHandler( event ) {
-
-    // Prevent default behavior
-    event.preventDefault();
-
-    // If viewport is smaller than <initWidth>, abort
-    if ( widthQuery.matches ) return false;
-
-    // If lightbox hasn’t already been instantiated, :doit:
-    if ( !document.querySelector( '.lightbox' ) ) init();
-
-    // Allow escape to close lightbox
-    Event.keyOne( 'esc', hideLightbox );
-
-    // 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
-      Event.on( tempImg, 'load', loadSuccess );
-
-      // Listen for image error event
-      Event.on( tempImg, 'error', loadFailure );
-
-    }
-
-  }
-
-};
-
-// Public API
-module.exports = lightbox;

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

@@ -1,94 +0,0 @@
-/**
- * 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/base/_multistep-form.scss

@@ -1,64 +0,0 @@
-fieldset.form-step {
-  left: 0;
-  right: 0;
-
-  &[disabled] {
-    position: absolute;
-    left: -9999px;
-    opacity: 0;
-  }
-
-
-  // Transition to form step
-  &.arrived { animation: fade-in-right .5s forwards; }
-  
-  // Revisit form step
-  &.revisted, &.step-visited.arrived { animation: .5s fade-in-left forwards; }
-
-  // Transition away from form step
-  &.departed { animation: fade-out-left .5s forwards; }
-}
-
-// Transition to form step
-@keyframes fade-in-right {
-  0% {
-    opacity: 0;
-    transform: perspective(1px) translate3d(200px, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: perspective(1px) translate3d(0, 0, 0);
-  }
-}
-
-// Transition away from form step
-@keyframes fade-out-left {
-  0% {
-    opacity: 1;
-    transform: perspective(1px) translate3d(0, 0, 0);
-  }
-
-  99% {
-    opacity: 0;
-    transform: perspective(1px) translate3d(-200px, 0, 0);
-  }
-
-  100% {
-    opacity: 0;
-    transform: perspective(1px) translate3d(-9999px, 0, 0);
-  }
-}
-
-// Return to previous form step
-@keyframes fade-in-left {
-  0% {
-    opacity: 0;
-    transform: perspective(1px) translate3d(-200px, 0, 0);
-  }
-
-  100% {
-    opacity: 1;
-    transform: perspective(1px) translate3d(0, 0, 0);
-  }
-}

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

@@ -1,98 +0,0 @@
-/* ========================================================================== *
- * Lightbox module
- * -------------------------------------------------------------------------- */
-
-/* ===================================== *
- * a. Common
- * ------------------------------------- */
-
-// Main lightbox element
-.lightbox {
-  @extend %hidden;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, .9);
-  visibility: hidden; // Hidden by default
-  cursor: pointer;
-
-  // Container figure
-  figure {
-    position: relative;
-    margin: 0;
-  }
-
-  // Main image
-  img {
-    max-width: 90vw;
-    max-height: 90vh;
-    cursor: default;
-    visibility: hidden; // Hidden by default
-
-    // Make visible once loaded
-    &.loaded,
-    &.loaded + button {
-      visibility: visible;
-    }
-  }
-
-  // Close button
-  button {
-    position: absolute;
-    margin: 10px 0 0 10px;
-    width: 20px;
-    height: 20px;
-    appearance: none;
-    outline: none;
-    border: 0;
-    visibility: hidden; // Hidden by default
-    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' fill='#FFF'%3E%3Cpath d='M2.663.005c.176.021.349.045.519.095.316.091.613.249.868.455l.184.166 10.765 10.765 10.768-10.768.187-.164c.262-.21.559-.368.882-.46.279-.079.567-.106.856-.089.228.014.456.065.671.143.257.094.498.23.712.401.578.467.922 1.186.925 1.928.001.239-.033.478-.1.707-.093.316-.249.611-.456.867l-.165.184-10.766 10.765 10.768 10.768.165.187c.224.279.388.599.477.947.078.308.097.631.055.946-.041.301-.136.593-.282.859-.113.208-.256.399-.424.566-.152.153-.324.285-.511.393-.584.337-1.296.423-1.945.235-.316-.092-.612-.25-.868-.456l-.183-.166-10.766-10.765-10.768 10.768-.186.165c-.28.224-.599.388-.947.477-.316.08-.646.098-.968.052-.293-.042-.578-.137-.838-.279-.242-.132-.462-.306-.648-.511-.16-.177-.294-.377-.398-.592-.307-.636-.328-1.387-.054-2.039.091-.218.214-.422.362-.606l.166-.183 10.765-10.766-10.765-10.765-.111-.119c-.208-.245-.372-.521-.476-.826-.204-.594-.172-1.259.087-1.832.098-.217.229-.42.385-.601.174-.201.381-.374.61-.51.279-.166.594-.278.916-.323l.353-.025.179.006z'/%3E%3C/svg%3E") 0 0 / 16px 16px no-repeat;
-  }
-}
-
-// Active state
-.lightbox-active {
-
-  // Prevent scrolling
-  overflow: hidden;
-
-  // Reposition lightbox
-  .lightbox {
-    position: fixed;
-    left: 0;
-    top: 0;
-    z-index: 13;
-    visibility: visible; // Shown while active
-  }
-
-  // Default loader state
-  .loader {
-    z-index: 14;
-  }
-
-  // Loader failure state
-  .loader.failure {
-    &:before {
-      border-color: transparent;
-      background: rgba($white, .2)
-    }
-
-    &:after {
-      content: '';
-      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#FFF' d='M30.51 6.423l5.099-5.099.202-.16c.146-.09.313-.145.485-.16l.129-.004.128.011.126.026c.125.034.243.089.349.163.106.074.198.166.272.272.2.285.254.655.145.984-.041.123-.103.238-.183.339l-.086.096-35.284 35.285-.202.159c-.183.113-.398.171-.614.165-.347-.01-.676-.188-.876-.472l-.122-.227c-.047-.12-.074-.248-.078-.377-.003-.129.016-.258.056-.381.041-.122.103-.237.183-.339l.086-.096 3.989-3.989c-.337-.385-.538-.887-.538-1.424v-22.611c0-1.219.998-2.161 2.161-2.161h24.573zm3.857 26.933h-24.573l1.774-1.773h22.799c.222 0 .388-.166.333-.388v-1.884l-.166-.222-6.429-6.429c-.111-.11-.332-.11-.499 0l-2.937 2.439c-.831.72-2.106.665-2.882-.111l-1.832-1.792 1.295-1.295 1.867 1.812c.111.111.333.111.499 0l2.937-2.383c.832-.72 2.106-.665 2.882.111l5.32 5.32v-18.177l-.031-.158 1.267-1.266c.337.384.538.886.538 1.424v22.611c0 1.219-.998 2.161-2.162 2.161zm-17.556-13.234l-2.561-2.505c-.11-.111-.332-.111-.498 0l-8.202 7.703v5.875l.03.157 11.231-11.23zm1.284-1.284l10.642-10.642h-22.8c-.166 0-.332.166-.332.388v14.243l6.927-6.54c.832-.776 2.162-.776 2.993.056l2.57 2.495zm-8.089-8.465c1.101 0 1.995.894 1.995 1.996 0 1.101-.894 1.995-1.995 1.995s-1.995-.894-1.995-1.995c0-1.102.894-1.996 1.995-1.996z' /%3E%3C/svg%3E") 50% 50% / 28px 28px no-repeat;
-    }
-  }
-}
-
-// 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/helpers/ratchet/form_helper.rb

@@ -1,140 +0,0 @@
-module Ratchet
-  module FormHelper
-
-    INPUT_OPTIONS = {
-      email: {
-        type: "email",
-        placeholder: "Email address",
-        pattern: "[^@]+@[^@]+\\.[a-zA-Z]{2,}",
-        data: { message: "Please enter a valid email address." }
-      },
-
-      password: {
-        type: "password",
-        placeholder: "Password"
-      },
-
-      text: {
-        type: "text"
-      },
-
-      card_number: {
-        type: "text",
-        required: true,
-        pattern: "[0-9 -]{13,20}",
-        placeholder: "Credit Card Number",
-        data: {
-          stripe: "number",
-          message: "Please enter a valid credit card number."
-        }
-      },
-
-      card_month: {
-        type: "text",
-        required: true,
-        pattern: "0[1-9]|1[012]",
-        placeholder: "MM",
-        data: {
-          stripe: "exp_month",
-          message: "Please enter a valid expiration month."
-        }
-      },
-
-      card_year: {
-        type: "text",
-        required: true,
-        pattern: "[0-9]{4}",
-        placeholder: "YYYY",
-        data: {
-          stripe: "exp_year",
-          message: "Please enter a valid expiration year."
-        }
-      },
-
-      card_cvc: {
-        type: "text",
-        required: true,
-        pattern: "[0-9]{3,4}",
-        data: {
-          stripe: "cvc",
-          message: "Please enter a valid security code."
-        }
-      },
-
-      select_country: {
-        country_options: {
-          include_blank: "Select a country",
-          priority_countries: ["US", "GB", "CA"],
-        },
-
-        html_options: {}
-      }
-    }
-
-    # Country select
-    def select_country_tag(name, options = {}, country_options = {})
-      country_options.reverse_merge! INPUT_OPTIONS[:select_country][:country_options]
-
-      options = INPUT_OPTIONS[:select_country][:html_options].deep_merge options
-
-      content_tag(:label) do
-        country_select :user, :country, country_options, options
-      end
-    end
-
-    # Email inputs
-    def email_input_tag(name, value = nil, options = {})
-      base_input_tag(name, value, options, :email)
-    end
-
-    # Passowrd inputs
-    def password_input_tag(name, value = nil, options = {})
-      base_input_tag(name, value, options, :password)
-    end
-
-    def text_input_tag(name, value = nil, options = {})
-      base_input_tag(name, value, options, :text)
-    end
-
-    def card_number_tag(name, value=nil, options={})
-      base_input_tag(name, value, options, :card_number)
-    end
-
-    def card_month_tag(name, value=nil, options={})
-      base_input_tag(name, value, options, :card_month)
-    end
-
-    def card_year_tag(name, value=nil, options={})
-      base_input_tag(name, value, options, :card_year)
-    end
-
-    def card_cvc_tag(name, value=nil, options={})
-      base_input_tag(name, value, options, :card_cvc)
-    end
-
-    private
-
-    def base_input_tag(name, value, options, type)
-      if value.is_a? Hash
-        options = value
-        value = nil
-      end
-
-      options = (INPUT_OPTIONS[type]||{}).deep_merge options
-
-      label = options.delete(:label)
-      tag = text_field_tag(name, value, options)
-
-      if label
-        options[:placeholder] = label
-
-        content_tag(:label) do
-          tag + content_tag(:span) { label }
-        end
-      else
-        tag
-      end
-
-    end
-  end
-end