ratchet_design 0.1.5 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/images/ratchet/favicon.ico +0 -0
- data/app/assets/javascripts/ratchet/base/form.js +117 -8
- data/app/assets/javascripts/ratchet/base/mobilemenu.js +50 -12
- data/app/assets/javascripts/ratchet/base/validation.js +263 -0
- data/app/assets/javascripts/ratchet/core.js +78 -57
- data/app/assets/javascripts/ratchet/enhancement/_collapse.js +6 -3
- data/app/assets/javascripts/ratchet/enhancement/_lightbox.js +93 -0
- data/app/assets/javascripts/ratchet/enhancement/_swap.js +7 -3
- data/app/assets/javascripts/ratchet/{utility → enhancement}/loader.js +8 -15
- data/app/assets/javascripts/ratchet/enhancement/notice.js +3 -8
- data/app/assets/javascripts/ratchet/enhancement/sticky.js +35 -18
- data/app/assets/javascripts/ratchet/enhancement/waypoints.js +162 -125
- data/app/assets/javascripts/ratchet/shim/classlist.js +234 -0
- data/app/assets/javascripts/ratchet/shim/object.assign.js +30 -0
- data/app/assets/javascripts/ratchet/utility/ajax.js +122 -0
- data/app/assets/javascripts/ratchet/utility/compile_data.js +40 -0
- data/app/assets/javascripts/ratchet/utility/from_top.js +14 -0
- data/app/assets/javascripts/ratchet/utility/full_stop.js +55 -0
- data/app/assets/javascripts/ratchet/utility/get_closest.js +20 -0
- data/app/assets/javascripts/ratchet/utility/get_next.js +17 -0
- data/app/assets/javascripts/ratchet/utility/matches.js +15 -0
- data/app/assets/javascripts/ratchet/utility/scroll_to.js +74 -0
- data/app/assets/javascripts/ratchet/utility/throttle.js +25 -0
- data/app/assets/javascripts/ratchet/utility/timeout.js +45 -0
- data/app/assets/javascripts/ratchet/utility/unhover.js +56 -0
- data/app/assets/javascripts/ratchet/utility/word_count.js +15 -0
- data/app/assets/stylesheets/ratchet/_core.scss +2 -4
- data/app/assets/stylesheets/ratchet/base/_button.scss +1 -1
- data/app/assets/stylesheets/ratchet/base/_form.scss +50 -61
- data/app/assets/stylesheets/ratchet/base/_text.scss +8 -8
- data/app/assets/stylesheets/ratchet/{utility → enhancement}/_loader.scss +1 -1
- data/app/assets/stylesheets/ratchet/enhancement/_tooltip.scss +1 -6
- data/app/assets/stylesheets/ratchet/utility/_global.scss +12 -2
- data/app/helpers/ratchet/application_helper.rb +2 -28
- data/app/views/layouts/ratchet/default.html.slim +4 -5
- data/app/views/shared/ratchet/_footer.html.slim +2 -3
- data/app/views/shared/ratchet/_header.html.slim +1 -1
- data/lib/ratchet_design/version.rb +1 -1
- data/lib/ratchet_design.rb +0 -1
- data/public/assets/ratchet/core-0.1.6.js +105 -0
- data/public/assets/ratchet/core-0.1.6.js.gz +0 -0
- data/public/assets/ratchet/core-0.1.6.map.json +1 -0
- data/public/assets/ratchet/{fonts-woff-0.1.5.css → fonts-woff-0.1.6.css} +0 -0
- data/public/assets/ratchet/{fonts-woff-0.1.5.css.gz → fonts-woff-0.1.6.css.gz} +0 -0
- data/public/assets/ratchet/{fonts-woff2-0.1.5.css → fonts-woff2-0.1.6.css} +0 -0
- data/public/assets/ratchet/{fonts-woff2-0.1.5.css.gz → fonts-woff2-0.1.6.css.gz} +0 -0
- metadata +28 -47
- data/app/assets/images/ratchet/safari-pinned-tab.svg +0 -1
- data/app/assets/javascripts/ratchet/base/sync-input-value.js +0 -30
- data/app/assets/javascripts/ratchet/enhancement/lightbox.js +0 -165
- data/app/assets/javascripts/ratchet/shim/scope.js +0 -94
- data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +0 -64
- data/app/assets/stylesheets/ratchet/enhancement/_lightbox.scss +0 -98
- data/app/helpers/ratchet/form_helper.rb +0 -140
- data/public/assets/ratchet/core-0.1.5.js +0 -133
- data/public/assets/ratchet/core-0.1.5.js.gz +0 -0
- data/public/assets/ratchet/core-0.1.5.map.json +0 -1
@@ -0,0 +1,30 @@
|
|
1
|
+
/**
|
2
|
+
* Object.assign polyfill
|
3
|
+
* Cross-browser full Object.assign implementation
|
4
|
+
* @source https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill
|
5
|
+
* @license MIT
|
6
|
+
**/
|
7
|
+
|
8
|
+
if ( typeof Object.assign != 'function' ) {
|
9
|
+
( function() {
|
10
|
+
Object.assign = function( target ) {
|
11
|
+
'use strict';
|
12
|
+
if ( target === undefined || target === null ) {
|
13
|
+
throw new TypeError( 'Cannot convert undefined or null to object' );
|
14
|
+
}
|
15
|
+
|
16
|
+
var output = Object( target );
|
17
|
+
for ( var index = 1; index < arguments.length; index++ ) {
|
18
|
+
var source = arguments[ index ];
|
19
|
+
if ( source !== undefined && source !== null ) {
|
20
|
+
for ( var nextKey in source ) {
|
21
|
+
if ( Object.prototype.hasOwnProperty.call( source, nextKey ) ) {
|
22
|
+
output[ nextKey ] = source[ nextKey ];
|
23
|
+
}
|
24
|
+
}
|
25
|
+
}
|
26
|
+
}
|
27
|
+
return output;
|
28
|
+
};
|
29
|
+
})();
|
30
|
+
}
|
@@ -0,0 +1,122 @@
|
|
1
|
+
/**
|
2
|
+
* Ajax 0.0.1
|
3
|
+
* Ajax module in Vanilla JS
|
4
|
+
* @author Fernando Daciuk (@fdaciuk) & Kyle Foster (@hkfoster)
|
5
|
+
* @source https://github.com/fdaciuk/ajax
|
6
|
+
* @license MIT
|
7
|
+
**/
|
8
|
+
|
9
|
+
// Public API function
|
10
|
+
var ajax = function( options ) {
|
11
|
+
var methods = [ 'get', 'post', 'put', 'delete' ];
|
12
|
+
options = options || {};
|
13
|
+
options.baseUrl = options.baseUrl || '';
|
14
|
+
if ( options.method && options.url ) {
|
15
|
+
return xhrConnection(
|
16
|
+
options.method,
|
17
|
+
options.baseUrl + options.url,
|
18
|
+
maybeData( options.data ),
|
19
|
+
options
|
20
|
+
);
|
21
|
+
}
|
22
|
+
return methods.reduce( function( acc, method ) {
|
23
|
+
acc[ method ] = function( url, data ) {
|
24
|
+
return xhrConnection(
|
25
|
+
method,
|
26
|
+
options.baseUrl + url,
|
27
|
+
maybeData( data ),
|
28
|
+
options
|
29
|
+
);
|
30
|
+
};
|
31
|
+
return acc;
|
32
|
+
}, {});
|
33
|
+
|
34
|
+
function maybeData( data ) {
|
35
|
+
return data || null;
|
36
|
+
}
|
37
|
+
|
38
|
+
function xhrConnection( type, url, data, options ) {
|
39
|
+
var returnMethods = [ 'then', 'catch', 'always' ];
|
40
|
+
var promiseMethods = returnMethods.reduce( function( promise, method ) {
|
41
|
+
promise[ method ] = function( callback ) {
|
42
|
+
promise[ method ] = callback;
|
43
|
+
return promise;
|
44
|
+
};
|
45
|
+
return promise;
|
46
|
+
}, {});
|
47
|
+
var xhr = new XMLHttpRequest();
|
48
|
+
xhr.open( type, url, true );
|
49
|
+
xhr.withCredentials = options.hasOwnProperty( 'withCredentials' );
|
50
|
+
setHeaders( xhr, options.headers );
|
51
|
+
xhr.addEventListener( 'readystatechange', ready( promiseMethods, xhr ), false );
|
52
|
+
xhr.send( objectToQueryString( data ) );
|
53
|
+
promiseMethods.abort = function() {
|
54
|
+
return xhr.abort();
|
55
|
+
};
|
56
|
+
return promiseMethods;
|
57
|
+
}
|
58
|
+
|
59
|
+
function setHeaders( xhr, headers ) {
|
60
|
+
headers = headers || {};
|
61
|
+
if ( !hasContentType( headers ) ) {
|
62
|
+
headers[ 'Content-Type' ] = 'application/x-www-form-urlencoded';
|
63
|
+
}
|
64
|
+
Object.keys( headers ).forEach( function( name ) {
|
65
|
+
( headers[ name ] && xhr.setRequestHeader( name, headers[ name ] ) );
|
66
|
+
});
|
67
|
+
}
|
68
|
+
|
69
|
+
function hasContentType( headers ) {
|
70
|
+
return Object.keys( headers ).some( function( name ) {
|
71
|
+
return name.toLowerCase() === 'content-type';
|
72
|
+
});
|
73
|
+
}
|
74
|
+
|
75
|
+
function ready( promiseMethods, xhr ) {
|
76
|
+
return function handleReady() {
|
77
|
+
if ( xhr.readyState === xhr.DONE ) {
|
78
|
+
xhr.removeEventListener( 'readystatechange', handleReady, false );
|
79
|
+
promiseMethods.always.apply( promiseMethods, parseResponse( xhr ) );
|
80
|
+
|
81
|
+
if ( xhr.status >= 200 && xhr.status < 300 ) {
|
82
|
+
promiseMethods.then.apply( promiseMethods, parseResponse( xhr ) );
|
83
|
+
} else {
|
84
|
+
promiseMethods.catch.apply( promiseMethods, parseResponse( xhr ) );
|
85
|
+
}
|
86
|
+
}
|
87
|
+
};
|
88
|
+
}
|
89
|
+
|
90
|
+
function parseResponse( xhr ) {
|
91
|
+
var result;
|
92
|
+
try {
|
93
|
+
result = JSON.parse( xhr.responseText );
|
94
|
+
} catch ( e ) {
|
95
|
+
result = xhr.responseText;
|
96
|
+
}
|
97
|
+
return [ result, xhr ];
|
98
|
+
}
|
99
|
+
|
100
|
+
function objectToQueryString( data ) {
|
101
|
+
return isObject( data ) ? getQueryString( data ) : data;
|
102
|
+
}
|
103
|
+
|
104
|
+
function isObject( data ) {
|
105
|
+
return Object.prototype.toString.call( data ) === '[ object Object ]';
|
106
|
+
}
|
107
|
+
|
108
|
+
function getQueryString( object ) {
|
109
|
+
return Object.keys( object ).reduce( function( acc, item ) {
|
110
|
+
var prefix = !acc ? '' : acc + '&';
|
111
|
+
return prefix + encode( item ) + '=' + encode( object[ item ] );
|
112
|
+
}, '' );
|
113
|
+
}
|
114
|
+
|
115
|
+
function encode( value ) {
|
116
|
+
return encodeURIComponent( value );
|
117
|
+
}
|
118
|
+
|
119
|
+
};
|
120
|
+
|
121
|
+
// Public API
|
122
|
+
module.exports = ajax;
|
@@ -0,0 +1,40 @@
|
|
1
|
+
/**
|
2
|
+
* CompileData 0.0.1
|
3
|
+
* Compile input data from a given parent element
|
4
|
+
* @author Kyle Foster (@hkfoster)
|
5
|
+
* @license MIT
|
6
|
+
**/
|
7
|
+
|
8
|
+
// Public API function
|
9
|
+
var compileData = function( parent, debug ) {
|
10
|
+
|
11
|
+
// Scoped variables
|
12
|
+
var formData = new FormData(),
|
13
|
+
allFields = parent.querySelectorAll( 'input:not([type=submit])' );
|
14
|
+
|
15
|
+
// Loop over fields
|
16
|
+
for ( var i = 0; i < allFields.length; i++ ) {
|
17
|
+
|
18
|
+
// Cache current field
|
19
|
+
var field = allFields[ i ];
|
20
|
+
|
21
|
+
// If a name attribute is present
|
22
|
+
if ( field.name ) {
|
23
|
+
|
24
|
+
// Debug mode logging
|
25
|
+
if ( debug ) console.log( 'Name: ' + field.name + '\n' + 'Value: ' + field.value );
|
26
|
+
|
27
|
+
// Append current field’s name/value to new formData object
|
28
|
+
formData.append( field.name, field.value );
|
29
|
+
|
30
|
+
}
|
31
|
+
|
32
|
+
}
|
33
|
+
|
34
|
+
// Then return said formData object
|
35
|
+
return formData;
|
36
|
+
|
37
|
+
};
|
38
|
+
|
39
|
+
// Public API
|
40
|
+
module.exports = compileData;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
/**
|
2
|
+
* FromTop 0.0.1
|
3
|
+
* Find element’s distance from top of document
|
4
|
+
* @author Kyle Foster (@hkfoster)
|
5
|
+
* @license MIT
|
6
|
+
**/
|
7
|
+
|
8
|
+
// Public API function
|
9
|
+
var fromTop = function( elem ) {
|
10
|
+
return Math.round( elem.getBoundingClientRect().top + window.pageYOffset );
|
11
|
+
};
|
12
|
+
|
13
|
+
// Public API
|
14
|
+
module.exports = fromTop;
|
@@ -0,0 +1,55 @@
|
|
1
|
+
/**
|
2
|
+
* FullStop 0.0.2
|
3
|
+
* Prevent CSS transitions from occurring during a window resize
|
4
|
+
* @author Kyle Foster (@hkfoster)
|
5
|
+
* @license MIT
|
6
|
+
**/
|
7
|
+
|
8
|
+
// Dependencies
|
9
|
+
var throttle = require( '../utility/throttle' ),
|
10
|
+
timeout = require( '../utility/timeout' );
|
11
|
+
|
12
|
+
// Public API function
|
13
|
+
var fullStop = function( settings ) {
|
14
|
+
|
15
|
+
// Overridable defaults
|
16
|
+
var defaults = {
|
17
|
+
resizeDelay : 250,
|
18
|
+
resizeClass : 'no-transitions'
|
19
|
+
};
|
20
|
+
|
21
|
+
// Scoped variables
|
22
|
+
var options = Object.assign( {}, defaults, settings ),
|
23
|
+
docBody = document.body,
|
24
|
+
resizeTimer;
|
25
|
+
|
26
|
+
// Resize handler function
|
27
|
+
function resizeHandler() {
|
28
|
+
|
29
|
+
// Clear timer (if it exists)
|
30
|
+
if ( resizeTimer ) timeout.clear( resizeTimer );
|
31
|
+
|
32
|
+
// Add body class while resizing
|
33
|
+
docBody.classList.add( options.resizeClass );
|
34
|
+
|
35
|
+
// Check to see if resize is over
|
36
|
+
resizeTimer = timeout.set( function() {
|
37
|
+
|
38
|
+
// And remove body class upon completion
|
39
|
+
docBody.classList.remove( options.resizeClass );
|
40
|
+
|
41
|
+
// Delay firing function based on argument passed
|
42
|
+
}, options.resizeDelay );
|
43
|
+
|
44
|
+
}
|
45
|
+
|
46
|
+
// Resize throttle function init
|
47
|
+
throttle( 'resize', 'optimizedResize' );
|
48
|
+
|
49
|
+
// Resize function listener
|
50
|
+
window.addEventListener( 'optimizedResize', resizeHandler, false );
|
51
|
+
|
52
|
+
};
|
53
|
+
|
54
|
+
// Public API
|
55
|
+
module.exports = fullStop;
|
@@ -0,0 +1,20 @@
|
|
1
|
+
/**
|
2
|
+
* GetClosest 0.0.1
|
3
|
+
* Get closest DOM element up the tree that matches a given selector
|
4
|
+
* @author Kyle Foster (@hkfoster)
|
5
|
+
* @license MIT
|
6
|
+
**/
|
7
|
+
|
8
|
+
// Dependencies
|
9
|
+
var matches = require( './matches' );
|
10
|
+
|
11
|
+
// Public API function
|
12
|
+
var getClosest = function ( elem, selector ) {
|
13
|
+
for ( ; elem && elem !== document; elem = elem.parentNode ) {
|
14
|
+
if ( matches( elem, selector ) ) return elem;
|
15
|
+
}
|
16
|
+
return false;
|
17
|
+
};
|
18
|
+
|
19
|
+
// Public API
|
20
|
+
module.exports = getClosest;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
/**
|
2
|
+
* GetNext 0.0.1
|
3
|
+
* Get next DOM element that matches a given selector
|
4
|
+
* @author Kyle Foster (@hkfoster)
|
5
|
+
* @license MIT
|
6
|
+
**/
|
7
|
+
|
8
|
+
// Public API function
|
9
|
+
var getNext = function( elem, selector ) {
|
10
|
+
for ( ; elem && elem !== document; elem = elem.parentNode ) {
|
11
|
+
if ( elem.querySelector( selector ) ) return elem.querySelector( selector );
|
12
|
+
}
|
13
|
+
return false;
|
14
|
+
};
|
15
|
+
|
16
|
+
// Public API
|
17
|
+
module.exports = getNext;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
/**
|
2
|
+
* Matches 0.0.1
|
3
|
+
* Matches selector function
|
4
|
+
* @author Kyle Foster (@hkfoster)
|
5
|
+
* @reference https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
|
6
|
+
* @license MIT
|
7
|
+
**/
|
8
|
+
|
9
|
+
// Public API function
|
10
|
+
var matches = function ( el, selector ) {
|
11
|
+
return ( el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector ).call( el, selector );
|
12
|
+
};
|
13
|
+
|
14
|
+
// Public API
|
15
|
+
module.exports = matches;
|
@@ -0,0 +1,74 @@
|
|
1
|
+
/**
|
2
|
+
* ScrollTo 0.0.1
|
3
|
+
* Scroll to element function
|
4
|
+
* @author James Doyle (@james2doyle) & Kyle Foster (@hkfoster)
|
5
|
+
* @source https://goo.gl/CeY8fY
|
6
|
+
* @license MIT
|
7
|
+
**/
|
8
|
+
|
9
|
+
// Public API function
|
10
|
+
var scrollTo = function( to, callback, duration ) {
|
11
|
+
|
12
|
+
// Scoped variables
|
13
|
+
var start = position(),
|
14
|
+
change = to - start,
|
15
|
+
currTime = 0,
|
16
|
+
increment = 20;
|
17
|
+
duration = ( typeof( duration ) === 'undefined' ) ? 500 : duration;
|
18
|
+
|
19
|
+
// Kick off scroll animation
|
20
|
+
animateScroll();
|
21
|
+
|
22
|
+
// Easing function - http://goo.gl/5HLl8
|
23
|
+
function easeInOutQuad( t, b, c, d ) {
|
24
|
+
t /= d / 2;
|
25
|
+
if ( t < 1 ) {
|
26
|
+
return c / 2 * t * t + b;
|
27
|
+
}
|
28
|
+
t--;
|
29
|
+
return -c / 2 * ( t * ( t - 2 ) - 1 ) + b;
|
30
|
+
}
|
31
|
+
|
32
|
+
// Get current scroll position
|
33
|
+
function position() {
|
34
|
+
return document.documentElement.scrollTop ||
|
35
|
+
document.body.parentNode.scrollTop ||
|
36
|
+
document.body.scrollTop;
|
37
|
+
}
|
38
|
+
|
39
|
+
// Move scroll position
|
40
|
+
function move( amount ) {
|
41
|
+
document.documentElement.scrollTop = amount;
|
42
|
+
document.body.parentNode.scrollTop = amount;
|
43
|
+
document.body.scrollTop = amount;
|
44
|
+
}
|
45
|
+
|
46
|
+
// Scroll animation function
|
47
|
+
function animateScroll() {
|
48
|
+
|
49
|
+
// Increment the time
|
50
|
+
currTime += increment;
|
51
|
+
|
52
|
+
// Find the value with the quadratic in-out easing function
|
53
|
+
var val = easeInOutQuad( currTime, start, change, duration );
|
54
|
+
|
55
|
+
// Move the document.body
|
56
|
+
move( val );
|
57
|
+
|
58
|
+
// Do the animation unless its over
|
59
|
+
if ( currTime < duration ) {
|
60
|
+
requestAnimationFrame( animateScroll );
|
61
|
+
}
|
62
|
+
|
63
|
+
// The animation is done so let’s callback
|
64
|
+
else {
|
65
|
+
if ( callback && typeof( callback ) === 'function' ) {
|
66
|
+
callback();
|
67
|
+
}
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
};
|
72
|
+
|
73
|
+
// Public API
|
74
|
+
module.exports = scrollTo;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
/**
|
2
|
+
* Throttle 0.0.1
|
3
|
+
* Event throttle function
|
4
|
+
* @author Kyle Foster (@hkfoster)
|
5
|
+
* @reference http://www.html5rocks.com/en/tutorials/speed/animations/
|
6
|
+
* @license MIT
|
7
|
+
**/
|
8
|
+
|
9
|
+
// Public API function
|
10
|
+
var throttle = function ( type, name, obj ) {
|
11
|
+
obj = obj || window;
|
12
|
+
var running = false;
|
13
|
+
var func = function () {
|
14
|
+
if ( running ) { return; }
|
15
|
+
running = true;
|
16
|
+
requestAnimationFrame( function () {
|
17
|
+
obj.dispatchEvent( new CustomEvent( name ) );
|
18
|
+
running = false;
|
19
|
+
});
|
20
|
+
};
|
21
|
+
obj.addEventListener( type, func );
|
22
|
+
};
|
23
|
+
|
24
|
+
// Public API
|
25
|
+
module.exports = throttle;
|
@@ -0,0 +1,45 @@
|
|
1
|
+
/**
|
2
|
+
* Timeout 0.0.1
|
3
|
+
* Just like setTimeout & clearTimeout, but with requestAnimationFrame()
|
4
|
+
* @author Joe Lambert (@joelambert) & Kyle Foster (@hkfoster)
|
5
|
+
* @source https://gist.github.com/joelambert/1002116#file-requesttimeout-js
|
6
|
+
* @license MIT
|
7
|
+
**/
|
8
|
+
|
9
|
+
// Public API object
|
10
|
+
var timeout = {
|
11
|
+
|
12
|
+
// Set timeout function
|
13
|
+
set : function( fn, delay, args ) {
|
14
|
+
|
15
|
+
var start = Date.now(),
|
16
|
+
handle = {};
|
17
|
+
|
18
|
+
function loop() {
|
19
|
+
|
20
|
+
var current = Date.now(),
|
21
|
+
delta = current - start;
|
22
|
+
|
23
|
+
if ( delta >= delay ) {
|
24
|
+
if ( args !== undefined ) {
|
25
|
+
fn.call( fn, args );
|
26
|
+
} else {
|
27
|
+
fn.call( fn );
|
28
|
+
}
|
29
|
+
} else {
|
30
|
+
handle.value = requestAnimationFrame( loop );
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
handle.value = requestAnimationFrame( loop );
|
35
|
+
return handle;
|
36
|
+
},
|
37
|
+
|
38
|
+
// Clear timeout function
|
39
|
+
clear : function( handle ) {
|
40
|
+
window.cancelAnimationFrame( handle.value );
|
41
|
+
}
|
42
|
+
};
|
43
|
+
|
44
|
+
// Public API
|
45
|
+
module.exports = timeout;
|