ratchet_design 0.1.10 → 0.1.11
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/ratchet/base/form.js +8 -117
- data/app/assets/javascripts/ratchet/base/mobilemenu.js +12 -50
- data/app/assets/javascripts/ratchet/base/sync-input-value.js +30 -0
- data/app/assets/javascripts/ratchet/core.js +55 -78
- data/app/assets/javascripts/ratchet/enhancement/lightbox.js +9 -8
- data/app/assets/javascripts/ratchet/enhancement/notice.js +8 -3
- data/app/assets/javascripts/ratchet/enhancement/sticky.js +18 -35
- data/app/assets/javascripts/ratchet/enhancement/waypoints.js +125 -162
- data/app/assets/javascripts/ratchet/utility/loader.js +4 -2
- data/app/assets/stylesheets/ratchet/_core.scss +2 -1
- data/app/assets/stylesheets/ratchet/base/_form.scss +4 -13
- data/app/assets/stylesheets/ratchet/base/_multistep-form.scss +62 -0
- data/app/assets/stylesheets/ratchet/utility/_global.scss +1 -10
- data/app/helpers/ratchet/application_helper.rb +23 -2
- data/app/views/layouts/ratchet/default.html.slim +2 -2
- data/app/views/shared/ratchet/_footer.html.slim +3 -2
- data/app/views/shared/ratchet/_header.html.slim +1 -1
- data/lib/ratchet_design/version.rb +1 -1
- data/public/assets/ratchet/core-0.1.11.js +133 -0
- data/public/assets/ratchet/core-0.1.11.js.gz +0 -0
- data/public/assets/ratchet/core-0.1.11.map.json +1 -0
- data/public/assets/ratchet/{fonts-woff-0.1.10.css → fonts-woff-0.1.11.css} +0 -0
- data/public/assets/ratchet/{fonts-woff-0.1.10.css.gz → fonts-woff-0.1.11.css.gz} +0 -0
- data/public/assets/ratchet/{fonts-woff2-0.1.10.css → fonts-woff2-0.1.11.css} +0 -0
- data/public/assets/ratchet/{fonts-woff2-0.1.10.css.gz → fonts-woff2-0.1.11.css.gz} +0 -0
- metadata +11 -23
- data/app/assets/javascripts/ratchet/base/validation.js +0 -263
- data/app/assets/javascripts/ratchet/shim/classlist.js +0 -234
- data/app/assets/javascripts/ratchet/shim/object.assign.js +0 -30
- data/app/assets/javascripts/ratchet/utility/compile_data.js +0 -40
- data/app/assets/javascripts/ratchet/utility/from_top.js +0 -14
- data/app/assets/javascripts/ratchet/utility/full_stop.js +0 -55
- data/app/assets/javascripts/ratchet/utility/get_closest.js +0 -20
- data/app/assets/javascripts/ratchet/utility/get_next.js +0 -17
- data/app/assets/javascripts/ratchet/utility/matches.js +0 -15
- data/app/assets/javascripts/ratchet/utility/scroll_to.js +0 -74
- data/app/assets/javascripts/ratchet/utility/throttle.js +0 -25
- data/app/assets/javascripts/ratchet/utility/timeout.js +0 -45
- data/app/assets/javascripts/ratchet/utility/unhover.js +0 -56
- data/app/assets/javascripts/ratchet/utility/word_count.js +0 -15
- data/public/assets/ratchet/core-0.1.10.js +0 -115
- data/public/assets/ratchet/core-0.1.10.js.gz +0 -0
- data/public/assets/ratchet/core-0.1.10.map.json +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ec25d12b82f3d04fbb1c00a3ec6d972875d06cdb
|
4
|
+
data.tar.gz: 65a3eb002e2e5e4af5846f831c21f0572ac51868
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 073a87361ce7d26ba4ab286477c2e44a37c040918f86774ae4011097580d3d5d5c19241da30d7f3ad14663ee45fa65e945a7cdd21a491666d400d469becf98ac
|
7
|
+
data.tar.gz: 847a04f20c510d3b1319b1313fb868acdcdb54fb5781588943a678f0d24f91450887309fe94020b9ba7c27a0848a81bd0166929c9eaa9feafe0a0e5e1c6bb81b
|
@@ -5,14 +5,13 @@
|
|
5
5
|
* @license MIT
|
6
6
|
**/
|
7
7
|
|
8
|
-
|
9
|
-
var evt = require( 'compose-event' );
|
8
|
+
var toolbox = require( 'compose-toolbox' )
|
10
9
|
|
11
10
|
// Public API function
|
12
11
|
var form = function( element, settings ) {
|
13
12
|
|
14
13
|
// Overridable defaults
|
15
|
-
var defaults = {}
|
14
|
+
var defaults = {}
|
16
15
|
|
17
16
|
// Parameter variables
|
18
17
|
var selector = document.querySelector( element ) || document.querySelector( 'form' );
|
@@ -21,22 +20,22 @@ var form = function( element, settings ) {
|
|
21
20
|
if ( !selector ) return false;
|
22
21
|
|
23
22
|
// Scoped variables
|
24
|
-
var options =
|
23
|
+
var options = toolbox.merge( defaults, settings ),
|
25
24
|
rangeEls = document.querySelectorAll( 'input[type=range]' ),
|
26
25
|
tickEls = document.querySelectorAll( 'input[type=checkbox], input[type=radio]' ),
|
27
26
|
docBody = document.body;
|
28
27
|
|
29
28
|
// Prevent non-numeric characters in number fields
|
30
|
-
|
29
|
+
toolbox.event.on( docBody, 'keypress', 'input[type=number]', restrictInput )
|
31
30
|
|
32
31
|
// Run delegated `on input` listener
|
33
|
-
|
32
|
+
toolbox.event.on( docBody, 'input', '[type=range]', rangeHandler )
|
34
33
|
|
35
34
|
// Loop over any range inputs that are present
|
36
35
|
for ( var rangeIndex = 0; rangeIndex < rangeEls.length; rangeIndex++ ) {
|
37
36
|
|
38
37
|
// And run their handler function explicitly at runtime
|
39
|
-
rangeHandler( rangeEls[ rangeIndex ] )
|
38
|
+
rangeHandler( rangeEls[ rangeIndex ] )
|
40
39
|
|
41
40
|
}
|
42
41
|
|
@@ -75,14 +74,9 @@ var form = function( element, settings ) {
|
|
75
74
|
}
|
76
75
|
|
77
76
|
// Keydown handler function
|
78
|
-
function
|
77
|
+
function restrictInput( event ) {
|
79
78
|
|
80
|
-
//
|
81
|
-
if ( event.target.type !== 'number' ) {
|
82
|
-
return false;
|
83
|
-
}
|
84
|
-
|
85
|
-
// If user enters non-numeric characters
|
79
|
+
// If user typing in an input[type=number] and enters non-numeric characters
|
86
80
|
if ( event.which < 48 || event.which > 57 ) {
|
87
81
|
|
88
82
|
// Supress them
|
@@ -111,109 +105,6 @@ var form = function( element, settings ) {
|
|
111
105
|
|
112
106
|
}
|
113
107
|
|
114
|
-
// Rangetouch 0.0.9 - https://github.com/selz/rangetouch
|
115
|
-
function rangeTouch( size ) {
|
116
|
-
|
117
|
-
// Bail if not a touch device
|
118
|
-
if ( !( 'ontouchstart' in document.documentElement ) ) {
|
119
|
-
return;
|
120
|
-
}
|
121
|
-
|
122
|
-
// Scoped variables
|
123
|
-
var rangeInputs = document.querySelectorAll( '[type=range]' ),
|
124
|
-
thumbSize = size || 20;
|
125
|
-
|
126
|
-
// Set touchAction to prevent delays
|
127
|
-
for ( var i = rangeInputs.length - 1; i >= 0; i-- ) {
|
128
|
-
rangeInputs[ i ].style.touchAction = 'manipulation';
|
129
|
-
rangeInputs[ i ].style.webkitUserSelect = 'none';
|
130
|
-
}
|
131
|
-
|
132
|
-
// Listen for events
|
133
|
-
docBody.addEventListener( 'touchstart', setValue, false );
|
134
|
-
docBody.addEventListener( 'touchmove', setValue, false );
|
135
|
-
docBody.addEventListener( 'touchend', setValue, false );
|
136
|
-
|
137
|
-
// Get the number of decimal places
|
138
|
-
function getDecimalPlaces( value ) {
|
139
|
-
var match = ( '' + value ).match( /( ?:\.( \d+ ) )?( ?:[eE]( [+-]?\d+ ) )?$/ );
|
140
|
-
if ( !match ) {
|
141
|
-
return 0;
|
142
|
-
}
|
143
|
-
return Math.max( 0, ( match[ 1 ] ? match[ 1 ].length : 0 ) - ( match[ 2 ] ? +match[ 2 ] : 0 ) );
|
144
|
-
}
|
145
|
-
|
146
|
-
// Round to the nearest step
|
147
|
-
function roundToStep( number, step ) {
|
148
|
-
if ( step < 1 ) {
|
149
|
-
var places = getDecimalPlaces( parseInt( step ) );
|
150
|
-
return parseFloat( number.toFixed( places ) );
|
151
|
-
}
|
152
|
-
return ( Math.round( number / step ) * step );
|
153
|
-
}
|
154
|
-
|
155
|
-
// Get the value based on touch position
|
156
|
-
function getValue( event ) {
|
157
|
-
|
158
|
-
// Scoped variables
|
159
|
-
var input = event.target,
|
160
|
-
touch = event.changedTouches[ 0 ],
|
161
|
-
min = parseFloat( input.getAttribute( 'min' ) ) || 0,
|
162
|
-
max = parseFloat( input.getAttribute( 'max' ) ) || 100,
|
163
|
-
step = parseFloat( input.getAttribute( 'step' ) ) || 1,
|
164
|
-
delta = max - min;
|
165
|
-
|
166
|
-
// Calculate percentage
|
167
|
-
var percent,
|
168
|
-
clientRect = input.getBoundingClientRect(),
|
169
|
-
thumbWidth = ( ( ( 100 / clientRect.width ) * ( thumbSize / 2 ) ) / 100 );
|
170
|
-
|
171
|
-
// Determine left percentage
|
172
|
-
percent = ( ( 100 / clientRect.width ) * ( touch.clientX - clientRect.left ) );
|
173
|
-
|
174
|
-
// Don't allow outside bounds
|
175
|
-
if ( percent < 0 ) {
|
176
|
-
percent = 0;
|
177
|
-
} else if ( percent > 100 ) {
|
178
|
-
percent = 100;
|
179
|
-
}
|
180
|
-
|
181
|
-
// Factor in the thumb offset
|
182
|
-
if ( percent < 50 ) {
|
183
|
-
percent -= ( ( 100 - ( percent * 2 ) ) * thumbWidth );
|
184
|
-
} else if ( percent > 50 ) {
|
185
|
-
percent += ( ( ( percent - 50 ) * 2 ) * thumbWidth );
|
186
|
-
}
|
187
|
-
|
188
|
-
// Find the closest step to the mouse position
|
189
|
-
return min + roundToStep( delta * ( percent / 100 ), step );
|
190
|
-
|
191
|
-
}
|
192
|
-
|
193
|
-
// Update range value based on position
|
194
|
-
function setValue( event ) {
|
195
|
-
|
196
|
-
// Bail if not a range slider
|
197
|
-
if ( event.target.type !== 'range' ) {
|
198
|
-
return;
|
199
|
-
}
|
200
|
-
|
201
|
-
// Prevent text highlight on iOS
|
202
|
-
event.preventDefault();
|
203
|
-
|
204
|
-
// Set value
|
205
|
-
event.target.value = getValue( event );
|
206
|
-
|
207
|
-
// Trigger input event
|
208
|
-
evt.fire( event.target, ( event.type === 'touchend' ? 'change' : 'input' ) );
|
209
|
-
|
210
|
-
}
|
211
|
-
|
212
|
-
}
|
213
|
-
|
214
|
-
// Initialize RangeTouch
|
215
|
-
rangeTouch();
|
216
|
-
|
217
108
|
};
|
218
109
|
|
219
110
|
// Public API
|
@@ -6,69 +6,31 @@
|
|
6
6
|
**/
|
7
7
|
|
8
8
|
// Dependencies
|
9
|
-
var
|
9
|
+
var toolbox = require( 'compose-toolbox' )
|
10
10
|
|
11
11
|
// Public API function
|
12
|
-
var mobileMenu = function(
|
12
|
+
var mobileMenu = function( settings ) {
|
13
13
|
|
14
14
|
// Overridable defaults
|
15
15
|
var defaults = {
|
16
16
|
initWidth : '700px',
|
17
17
|
openClass : 'menu-open',
|
18
|
-
|
18
|
+
nav : '.main-nav',
|
19
|
+
button : '.mobile-menu-button'
|
19
20
|
},
|
20
21
|
|
21
22
|
// Scoped variables
|
22
|
-
options =
|
23
|
-
selector =
|
24
|
-
widthQuery = window.matchMedia( '(max-width: ' + options.initWidth + ')' ),
|
23
|
+
options = toolbox.merge( defaults, settings ),
|
24
|
+
selector = options.button + ', ' + options.openClass + ' ' + options.nav + ' a',
|
25
25
|
docBody = document.body;
|
26
26
|
|
27
27
|
// Attach listeners
|
28
|
-
|
28
|
+
toolbox.event.on( document, 'click', selector, function() {
|
29
|
+
// Toggle body class
|
30
|
+
docBody.classList.toggle( options.openClass )
|
31
|
+
})
|
29
32
|
|
30
|
-
|
31
|
-
queryHandler( widthQuery );
|
32
|
-
|
33
|
-
// Attach listener function to listen in on state changes
|
34
|
-
widthQuery.addListener( queryHandler );
|
35
|
-
|
36
|
-
}
|
37
|
-
|
38
|
-
// Click handler function
|
39
|
-
function clickHandler( event ) {
|
40
|
-
|
41
|
-
// Combine element selector with anchor links
|
42
|
-
var toggleSelector = options.menuButton + ', .' + options.openClass + ' ' + element + ' a[href^="#"]';
|
43
|
-
|
44
|
-
// Only run on menu button
|
45
|
-
if ( matches( event.target, toggleSelector ) ) {
|
46
|
-
|
47
|
-
// Toggle body class
|
48
|
-
docBody.classList.toggle( options.openClass );
|
49
|
-
|
50
|
-
}
|
51
|
-
|
52
|
-
}
|
53
|
-
|
54
|
-
// Media query handler function
|
55
|
-
function queryHandler( condition ) {
|
56
|
-
|
57
|
-
// If media query matches
|
58
|
-
if ( condition.matches ) {
|
59
|
-
|
60
|
-
// Click function listener
|
61
|
-
selector.addEventListener( 'click', clickHandler, false );
|
62
|
-
|
63
|
-
} else {
|
64
|
-
|
65
|
-
// Remove click listener
|
66
|
-
selector.removeEventListener( 'click', clickHandler, false );
|
67
|
-
|
68
|
-
}
|
69
|
-
}
|
70
|
-
|
71
|
-
};
|
33
|
+
}
|
72
34
|
|
73
35
|
// Public API
|
74
|
-
module.exports = mobileMenu
|
36
|
+
module.exports = mobileMenu
|
@@ -0,0 +1,30 @@
|
|
1
|
+
var toolbox = require( 'compose-toolbox' )
|
2
|
+
var Event = toolbox.event
|
3
|
+
var textSelectors = 'textarea, input[type=url], input[type=tel], input[type=text], input[type=email], input[type=number], input[type=password]'
|
4
|
+
|
5
|
+
Event.bubbleFormEvents()
|
6
|
+
|
7
|
+
function textInputs() {
|
8
|
+
return document.querySelectorAll( textSelectors )
|
9
|
+
}
|
10
|
+
|
11
|
+
function syncValue( input ) {
|
12
|
+
|
13
|
+
// Allow calling from event handler
|
14
|
+
if ( input.target ) { input = input.target }
|
15
|
+
|
16
|
+
// If element only contains whitespace, strip value
|
17
|
+
if ( !input.value.replace( /\s/g, '' ).length ) { input.value = ''; }
|
18
|
+
|
19
|
+
input.setAttribute( 'value', input.value )
|
20
|
+
|
21
|
+
}
|
22
|
+
|
23
|
+
Event.change( function() {
|
24
|
+
|
25
|
+
// Ensure that all inputs have a value
|
26
|
+
toolbox.each( textInputs(), syncValue )
|
27
|
+
|
28
|
+
})
|
29
|
+
|
30
|
+
Event.on( document, 'blur', 'input', syncValue )
|
@@ -1,99 +1,76 @@
|
|
1
|
-
// Shim modules
|
2
|
-
require( './shim/classlist' );
|
3
|
-
require( './shim/object.assign' );
|
4
|
-
|
5
1
|
// Utility modules
|
6
|
-
var loadFont = require( './utility/load_font' )
|
7
|
-
var
|
8
|
-
var unhover = require( './utility/unhover' );
|
9
|
-
var throttle = require( './utility/throttle' );
|
10
|
-
var loadScript = require( './utility/load_script' );
|
11
|
-
var fromTop = require( './utility/from_top' );
|
12
|
-
var scrollTo = require( './utility/scroll_to' );
|
13
|
-
var matches = require( './utility/matches' );
|
14
|
-
var getClosest = require( './utility/get_closest' );
|
15
|
-
var getNext = require( './utility/get_next' );
|
16
|
-
var wordCount = require( './utility/word_count' );
|
17
|
-
var compileData = require( './utility/compile_data' );
|
18
|
-
var timeout = require( './utility/timeout' );
|
19
|
-
var ajax = require( 'superagent' );
|
20
|
-
var loader = require( './utility/loader' );
|
2
|
+
var loadFont = require( './utility/load_font' )
|
3
|
+
var loadScript = require( './utility/load_script' )
|
21
4
|
|
22
5
|
// Base modules
|
23
|
-
var mobileMenu = require( './base/mobilemenu' )
|
24
|
-
var form = require( './base/form' )
|
25
|
-
var
|
6
|
+
var mobileMenu = require( './base/mobilemenu' )
|
7
|
+
var form = require( './base/form' )
|
8
|
+
var formUp = require( 'compose-form-up' )
|
9
|
+
form.validate = formUp.validate
|
10
|
+
form.next = formUp.next
|
11
|
+
require( './base/sync-input-value' )
|
26
12
|
|
27
13
|
// Enhancement modules
|
28
|
-
var waypoints = require( './enhancement/waypoints' )
|
29
|
-
var notice = require( './enhancement/notice' )
|
30
|
-
var sticky = require( './enhancement/sticky' )
|
31
|
-
var lightbox = require( './enhancement/lightbox' )
|
32
|
-
var esvg = require( './_svg' )
|
14
|
+
var waypoints = require( './enhancement/waypoints' )
|
15
|
+
var notice = require( './enhancement/notice' )
|
16
|
+
var sticky = require( './enhancement/sticky' )
|
17
|
+
var lightbox = require( './enhancement/lightbox' )
|
18
|
+
var esvg = require( './_svg' )
|
33
19
|
// var swap = require( './enhancement/swap' );
|
34
20
|
|
35
21
|
// Vendor modules
|
36
|
-
var
|
37
|
-
var
|
38
|
-
require( '
|
39
|
-
require( '
|
40
|
-
require( '
|
41
|
-
require( '
|
42
|
-
|
43
|
-
require( 'codemirror/mode/
|
44
|
-
require( 'codemirror/mode/
|
45
|
-
require( 'codemirror/mode/
|
46
|
-
require( 'codemirror/mode/
|
47
|
-
require( 'codemirror/mode/
|
48
|
-
require( 'codemirror/mode/
|
49
|
-
require( 'codemirror/mode/
|
50
|
-
require( 'codemirror/
|
51
|
-
require( 'codemirror/
|
22
|
+
var toolbox = require( 'compose-toolbox' )
|
23
|
+
var event = toolbox.event
|
24
|
+
var ajax = require( 'superagent' )
|
25
|
+
var rangeTouch = require( 'rangetouch' )
|
26
|
+
var highlighter = require( 'compose-code-highlighter' )
|
27
|
+
var loader = require( 'compose-loader' )
|
28
|
+
|
29
|
+
require( 'codemirror/mode/htmlmixed/htmlmixed' )
|
30
|
+
require( 'codemirror/mode/slim/slim' )
|
31
|
+
require( 'codemirror/mode/javascript/javascript' )
|
32
|
+
require( 'codemirror/mode/css/css' )
|
33
|
+
require( 'codemirror/mode/sql/sql' )
|
34
|
+
require( 'codemirror/mode/php/php' )
|
35
|
+
require( 'codemirror/mode/ruby/ruby' )
|
36
|
+
require( 'codemirror/mode/shell/shell' )
|
37
|
+
require( 'codemirror/mode/go/go' )
|
38
|
+
require( 'codemirror/mode/python/python' )
|
39
|
+
require( 'codemirror/mode/yaml/yaml' )
|
40
|
+
require( 'codemirror/mode/clike/clike' )
|
41
|
+
require( 'codemirror/addon/runmode/runmode' )
|
42
|
+
require( 'codemirror/addon/edit/matchbrackets' )
|
43
|
+
|
44
|
+
// Initialize component features
|
45
|
+
rangeTouch.set("thumbWidth", 20); // Annoying hack to make input ranges work smoothly on touch devices
|
46
|
+
|
47
|
+
event.scroll.disablePointer() // disable pointer events on scroll for performance (to avoid extra repaints)
|
48
|
+
event.resize.disableAnimation() // disable animation on resize for performance (to avoid extra repaints)
|
49
|
+
|
50
|
+
// Trigger these events each time the page loads
|
51
|
+
event.change( function() {
|
52
|
+
|
53
|
+
// Form module
|
54
|
+
form()
|
55
|
+
|
56
|
+
// Syntax highlighting
|
57
|
+
highlighter.highlight()
|
58
|
+
});
|
52
59
|
|
53
60
|
// Public API object
|
54
|
-
|
61
|
+
var ratchet = toolbox.merge( {
|
55
62
|
loadFont : loadFont,
|
56
|
-
fullStop : fullStop,
|
57
|
-
unhover : unhover,
|
58
|
-
throttle : throttle,
|
59
63
|
loadScript : loadScript,
|
60
|
-
fromTop : fromTop,
|
61
|
-
scrollTo : scrollTo,
|
62
|
-
matches : matches,
|
63
|
-
getClosest : getClosest,
|
64
|
-
getNext : getNext,
|
65
|
-
wordCount : wordCount,
|
66
|
-
compileData : compileData,
|
67
|
-
timeout : timeout,
|
68
64
|
ajax : ajax,
|
69
65
|
loader : loader,
|
70
66
|
mobileMenu : mobileMenu,
|
71
67
|
form : form,
|
72
|
-
validation :
|
68
|
+
validation : formUp.validate,
|
73
69
|
waypoints : waypoints,
|
74
70
|
notice : notice,
|
75
71
|
sticky : sticky,
|
76
72
|
lightbox : lightbox,
|
77
|
-
esvg : esvg
|
78
|
-
|
79
|
-
}
|
80
|
-
|
81
|
-
// Default events instantiation
|
82
|
-
event.change( function() {
|
83
|
-
|
84
|
-
// Unhover module
|
85
|
-
unhover();
|
86
|
-
|
87
|
-
// FullStop module
|
88
|
-
fullStop();
|
89
|
-
|
90
|
-
// Form module
|
91
|
-
form();
|
92
|
-
|
93
|
-
// Validation module
|
94
|
-
validation();
|
95
|
-
|
96
|
-
// Syntax highlighting
|
97
|
-
highlighter.highlight();
|
73
|
+
esvg : esvg
|
74
|
+
}, toolbox )
|
98
75
|
|
99
|
-
|
76
|
+
window.ratchet = module.exports = ratchet
|
@@ -6,9 +6,10 @@
|
|
6
6
|
**/
|
7
7
|
|
8
8
|
// Dependencies
|
9
|
-
var
|
10
|
-
|
11
|
-
|
9
|
+
var toolbox = require( 'compose-toolbox' ),
|
10
|
+
Event = toolbox.event,
|
11
|
+
delay = toolbox.delay,
|
12
|
+
loader = require( '../utility/loader' );
|
12
13
|
|
13
14
|
// Public API function
|
14
15
|
var lightbox = function( element, settings ) {
|
@@ -22,7 +23,7 @@ var lightbox = function( element, settings ) {
|
|
22
23
|
},
|
23
24
|
|
24
25
|
// Main variables
|
25
|
-
options =
|
26
|
+
options = toolbox.merge( defaults, settings ),
|
26
27
|
selector = document.querySelector( element ),
|
27
28
|
widthQuery = window.matchMedia( '(max-width: ' + options.initWidth + ')' ),
|
28
29
|
spinner = loader({ loadingMessage: 'Loading image', failureMessage : 'No image found' }),
|
@@ -33,7 +34,7 @@ var lightbox = function( element, settings ) {
|
|
33
34
|
if ( !selector ) return false;
|
34
35
|
|
35
36
|
// Attach open lightbox click listener
|
36
|
-
Event.on( document, 'click', 'a[href$=jpg]
|
37
|
+
Event.on( document, 'click', 'a[href$=jpg], a[href$=png], a[href$=gif], a[href$=svg]', clickHandler );
|
37
38
|
|
38
39
|
// Attach close lightbox click listener
|
39
40
|
Event.on( document, 'click', '.lightbox', hideLightbox );
|
@@ -98,7 +99,7 @@ var lightbox = function( element, settings ) {
|
|
98
99
|
function loadFailure( event ) {
|
99
100
|
|
100
101
|
// Wait a second…
|
101
|
-
|
102
|
+
delay( function() {
|
102
103
|
|
103
104
|
// Show spinner failure state
|
104
105
|
spinner.show( 'failure' );
|
@@ -106,7 +107,7 @@ var lightbox = function( element, settings ) {
|
|
106
107
|
}, 1000 );
|
107
108
|
|
108
109
|
// Wait a couple more seconds…
|
109
|
-
|
110
|
+
delay( function() {
|
110
111
|
|
111
112
|
// Hide the lightbox
|
112
113
|
hideLightbox();
|
@@ -161,4 +162,4 @@ var lightbox = function( element, settings ) {
|
|
161
162
|
};
|
162
163
|
|
163
164
|
// Public API
|
164
|
-
module.exports = lightbox;
|
165
|
+
module.exports = lightbox;
|
@@ -5,6 +5,8 @@
|
|
5
5
|
* @license MIT
|
6
6
|
**/
|
7
7
|
|
8
|
+
var toolbox = require( 'compose-toolbox' )
|
9
|
+
|
8
10
|
// Public API function
|
9
11
|
var notice = function( element, settings ) {
|
10
12
|
|
@@ -16,9 +18,10 @@ var notice = function( element, settings ) {
|
|
16
18
|
};
|
17
19
|
|
18
20
|
// Scoped variables
|
19
|
-
var options =
|
21
|
+
var options = toolbox.merge( defaults, settings ),
|
20
22
|
selector = document.querySelector( element ),
|
21
|
-
cookieName = 'dismiss-' + options.noticeName
|
23
|
+
cookieName = 'dismiss-' + options.noticeName,
|
24
|
+
button = selector.querySelector( '.' + options.noticeClass + ' .close-btn' );
|
22
25
|
|
23
26
|
// Only run if selector exists & no dismiss cookie is found
|
24
27
|
if ( !selector || getCookie( cookieName ) ) return false;
|
@@ -31,7 +34,7 @@ var notice = function( element, settings ) {
|
|
31
34
|
document.querySelector( 'main' ).insertAdjacentHTML( 'afterbegin', html );
|
32
35
|
|
33
36
|
// Listen for close button click
|
34
|
-
|
37
|
+
toolbox.event.on( button , 'click', dismissNotice )
|
35
38
|
|
36
39
|
// Dismiss notice on close
|
37
40
|
function dismissNotice( event ) {
|
@@ -47,6 +50,8 @@ var notice = function( element, settings ) {
|
|
47
50
|
|
48
51
|
// Set cookie to prevent it from returning
|
49
52
|
document.cookie = cookieName + '=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
|
53
|
+
|
54
|
+
toolbox.event.off( button )
|
50
55
|
|
51
56
|
}
|
52
57
|
|
@@ -6,8 +6,8 @@
|
|
6
6
|
**/
|
7
7
|
|
8
8
|
// Dependencies
|
9
|
-
var
|
10
|
-
fromTop =
|
9
|
+
var toolbox = require( 'compose-toolbox' ),
|
10
|
+
fromTop = toolbox.fromTop
|
11
11
|
|
12
12
|
// Public API function
|
13
13
|
var sticky = function( element, settings ) {
|
@@ -21,7 +21,7 @@ var sticky = function( element, settings ) {
|
|
21
21
|
};
|
22
22
|
|
23
23
|
// Scoped variables
|
24
|
-
var options =
|
24
|
+
var options = toolbox.merge( defaults, settings ),
|
25
25
|
selector = document.querySelector( element );
|
26
26
|
|
27
27
|
// If selector is not present
|
@@ -40,15 +40,11 @@ var sticky = function( element, settings ) {
|
|
40
40
|
elemHeight = selector.offsetHeight,
|
41
41
|
anchorInit = options.anchorPoint,
|
42
42
|
docBody = document.body,
|
43
|
+
resizeHandler = toolbox.event.resize( resized ),
|
44
|
+
scrollHandler = toolbox.event.scroll( scrolled ),
|
43
45
|
docHeight,
|
44
46
|
winHeight;
|
45
47
|
|
46
|
-
// Resize throttle function init
|
47
|
-
throttle( 'resize', 'optimizedResize' );
|
48
|
-
|
49
|
-
// Scroll throttle function init
|
50
|
-
throttle( 'scroll', 'optimizedScroll' );
|
51
|
-
|
52
48
|
// Call listener function explicitly at run time
|
53
49
|
queryHandler( widthQuery );
|
54
50
|
|
@@ -60,38 +56,25 @@ var sticky = function( element, settings ) {
|
|
60
56
|
// Media query handler function
|
61
57
|
function queryHandler( condition ) {
|
62
58
|
|
63
|
-
//
|
64
|
-
|
65
|
-
|
66
|
-
// Call resize listener function explicitly at run time
|
67
|
-
resizeHandler();
|
59
|
+
// Call resize listener function explicitly at run time
|
60
|
+
resized()
|
68
61
|
|
69
|
-
|
70
|
-
|
62
|
+
// Call scroll listener function explicitly at run time
|
63
|
+
scrolled();
|
64
|
+
|
65
|
+
// Reset styles
|
66
|
+
if ( !condition.matches ) docBody.classList.remove( 'sticky' )
|
71
67
|
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
// Scroll function listener
|
76
|
-
window.addEventListener( 'optimizedScroll', scrollHandler, false );
|
77
|
-
|
78
|
-
} else {
|
68
|
+
// Remove resize listener
|
69
|
+
resizeHandler.toggle( condition.matches )
|
79
70
|
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
// Remove resize listener
|
84
|
-
window.removeEventListener( 'optimizedResize', resizeHandler, false );
|
85
|
-
|
86
|
-
// Remove scroll listener
|
87
|
-
window.removeEventListener( 'optimizedScroll', scrollHandler, false );
|
88
|
-
|
89
|
-
}
|
71
|
+
// Remove scroll listener
|
72
|
+
scrollHandler.toggle( condition.matches )
|
90
73
|
|
91
74
|
}
|
92
75
|
|
93
76
|
// Resize handler function
|
94
|
-
function
|
77
|
+
function resized() {
|
95
78
|
|
96
79
|
// Update document height variable
|
97
80
|
docHeight = document.body.scrollHeight;
|
@@ -102,7 +85,7 @@ var sticky = function( element, settings ) {
|
|
102
85
|
}
|
103
86
|
|
104
87
|
// Scroll handler function
|
105
|
-
function
|
88
|
+
function scrolled() {
|
106
89
|
|
107
90
|
// Scoped variables
|
108
91
|
var newScrollY = window.pageYOffset,
|