foundation-rails 6.1.2.0 → 6.2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.travis.yml +7 -6
- data/README.md +1 -1
- data/Rakefile +5 -1
- data/bower.json +3 -3
- data/foundation-rails.gemspec +1 -0
- data/lib/foundation-rails.rb +1 -0
- data/lib/foundation/rails/version.rb +1 -1
- data/lib/generators/foundation/templates/foundation_and_overrides.scss +2 -2
- data/vendor/assets/js/foundation.abide.js.es6 +462 -0
- data/vendor/assets/js/{foundation.accordion.js → foundation.accordion.js.es6} +55 -47
- data/vendor/assets/js/{foundation.accordionMenu.js → foundation.accordionMenu.js.es6} +46 -35
- data/vendor/assets/js/{foundation.core.js → foundation.core.js.es6} +10 -8
- data/vendor/assets/js/{foundation.drilldown.js → foundation.drilldown.js.es6} +75 -49
- data/vendor/assets/js/{foundation.dropdown.js → foundation.dropdown.js.es6} +100 -88
- data/vendor/assets/js/{foundation.dropdownMenu.js → foundation.dropdownMenu.js.es6} +134 -128
- data/vendor/assets/js/{foundation.equalizer.js → foundation.equalizer.js.es6} +72 -61
- data/vendor/assets/js/{foundation.interchange.js → foundation.interchange.js.es6} +44 -45
- data/vendor/assets/js/{foundation.js → foundation.js.es6} +0 -0
- data/vendor/assets/js/{foundation.magellan.js → foundation.magellan.js.es6} +80 -83
- data/vendor/assets/js/foundation.offcanvas.js.es6 +395 -0
- data/vendor/assets/js/foundation.orbit.js.es6 +445 -0
- data/vendor/assets/js/{foundation.responsiveMenu.js → foundation.responsiveMenu.js.es6} +37 -31
- data/vendor/assets/js/foundation.responsiveToggle.js.es6 +112 -0
- data/vendor/assets/js/foundation.reveal.js.es6 +544 -0
- data/vendor/assets/js/{foundation.slider.js → foundation.slider.js.es6} +235 -184
- data/vendor/assets/js/{foundation.sticky.js → foundation.sticky.js.es6} +177 -166
- data/vendor/assets/js/{foundation.tabs.js → foundation.tabs.js.es6} +138 -118
- data/vendor/assets/js/{foundation.toggler.js → foundation.toggler.js.es6} +34 -37
- data/vendor/assets/js/{foundation.tooltip.js → foundation.tooltip.js.es6} +162 -153
- data/vendor/assets/js/foundation.util.box.js.es6 +183 -0
- data/vendor/assets/js/{foundation.util.keyboard.js → foundation.util.keyboard.js.es6} +54 -54
- data/vendor/assets/js/{foundation.util.mediaQuery.js → foundation.util.mediaQuery.js.es6} +46 -46
- data/vendor/assets/js/{foundation.util.motion.js → foundation.util.motion.js.es6} +58 -48
- data/vendor/assets/js/foundation.util.nest.js.es6 +76 -0
- data/vendor/assets/js/foundation.util.timerAndImageLoader.js.es6 +86 -0
- data/vendor/assets/js/{foundation.util.touch.js → foundation.util.touch.js.es6} +2 -2
- data/vendor/assets/js/foundation.util.triggers.js.es6 +239 -0
- data/vendor/assets/scss/_global.scss +28 -27
- data/vendor/assets/scss/components/_badge.scss +1 -1
- data/vendor/assets/scss/components/_button-group.scss +77 -26
- data/vendor/assets/scss/components/_button.scss +8 -8
- data/vendor/assets/scss/components/_callout.scss +2 -2
- data/vendor/assets/scss/components/_drilldown.scss +4 -0
- data/vendor/assets/scss/components/_dropdown-menu.scss +104 -54
- data/vendor/assets/scss/components/_flex.scss +28 -0
- data/vendor/assets/scss/components/_label.scss +1 -1
- data/vendor/assets/scss/components/_media-object.scss +37 -7
- data/vendor/assets/scss/components/_menu-icon.scss +9 -0
- data/vendor/assets/scss/components/_menu.scss +127 -29
- data/vendor/assets/scss/components/_off-canvas.scss +1 -0
- data/vendor/assets/scss/components/_pagination.scss +3 -3
- data/vendor/assets/scss/components/_progress-bar.scss +1 -25
- data/vendor/assets/scss/components/_reveal.scss +12 -6
- data/vendor/assets/scss/components/_slider.scss +3 -35
- data/vendor/assets/scss/components/_table.scss +8 -0
- data/vendor/assets/scss/components/_tabs.scss +5 -10
- data/vendor/assets/scss/components/_title-bar.scss +27 -10
- data/vendor/assets/scss/components/_tooltip.scss +0 -4
- data/vendor/assets/scss/components/_top-bar.scss +93 -21
- data/vendor/assets/scss/components/_visibility.scss +1 -1
- data/vendor/assets/scss/forms/_checkbox.scss +1 -1
- data/vendor/assets/scss/forms/_error.scss +7 -5
- data/vendor/assets/scss/forms/_forms.scss +3 -0
- data/vendor/assets/scss/forms/_help-text.scss +1 -1
- data/vendor/assets/scss/forms/_input-group.scss +44 -9
- data/vendor/assets/scss/forms/_meter.scss +109 -0
- data/vendor/assets/scss/forms/_progress.scss +85 -0
- data/vendor/assets/scss/forms/_range.scss +144 -0
- data/vendor/assets/scss/forms/_select.scss +1 -1
- data/vendor/assets/scss/forms/_text.scss +10 -1
- data/vendor/assets/scss/foundation.scss +16 -5
- data/vendor/assets/scss/grid/_classes.scss +5 -18
- data/vendor/assets/scss/grid/_column.scss +13 -11
- data/vendor/assets/scss/grid/_flex-grid.scss +54 -80
- data/vendor/assets/scss/grid/_grid.scss +22 -10
- data/vendor/assets/scss/grid/_layout.scss +18 -0
- data/vendor/assets/scss/grid/_row.scss +11 -15
- data/vendor/assets/scss/motion-ui/_classes.scss +10 -3
- data/vendor/assets/scss/motion-ui/effects/_fade.scss +4 -1
- data/vendor/assets/scss/motion-ui/effects/_zoom.scss +1 -1
- data/vendor/assets/scss/motion-ui/transitions/_slide.scss +1 -1
- data/vendor/assets/scss/motion-ui/util/_transition.scss +1 -1
- data/vendor/assets/scss/settings/_settings.scss +64 -47
- data/vendor/assets/scss/typography/_base.scss +4 -0
- data/vendor/assets/scss/typography/_print.scss +9 -5
- data/vendor/assets/scss/util/_breakpoint.scss +31 -25
- data/vendor/assets/scss/util/_color.scss +19 -0
- data/vendor/assets/scss/util/_flex.scss +68 -0
- data/vendor/assets/scss/util/_mixins.scss +13 -7
- data/vendor/assets/scss/util/_util.scss +1 -5
- data/vendor/assets/scss/util/_value.scss +9 -28
- metadata +51 -31
- data/vendor/assets/js/foundation.abide.js +0 -418
- data/vendor/assets/js/foundation.offcanvas.js +0 -376
- data/vendor/assets/js/foundation.orbit.js +0 -421
- data/vendor/assets/js/foundation.responsiveToggle.js +0 -106
- data/vendor/assets/js/foundation.reveal.js +0 -514
- data/vendor/assets/js/foundation.util.box.js +0 -169
- data/vendor/assets/js/foundation.util.nest.js +0 -63
- data/vendor/assets/js/foundation.util.timerAndImageLoader.js +0 -82
- data/vendor/assets/js/foundation.util.triggers.js +0 -224
@@ -46,12 +46,12 @@
|
|
46
46
|
|
47
47
|
/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing. <div class="docs-example-burger"></div>
|
48
48
|
///
|
49
|
-
/// @param {Color} $color - Color to use for the icon.
|
50
|
-
/// @param {Color} $color-hover - Color to use when the icon is hovered over.
|
51
|
-
/// @param {Number} $width - Width of the icon.
|
52
|
-
/// @param {Number} $height - Height of the icon.
|
53
|
-
/// @param {Number} $weight - Height of individual bars in the icon.
|
54
|
-
/// @param {Number} $bars - Number of bars in the icon.
|
49
|
+
/// @param {Color} $color [$black] - Color to use for the icon.
|
50
|
+
/// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over.
|
51
|
+
/// @param {Number} $width [20px] - Width of the icon.
|
52
|
+
/// @param {Number} $height [16px] - Height of the icon.
|
53
|
+
/// @param {Number} $weight [2px] - Height of individual bars in the icon.
|
54
|
+
/// @param {Number} $bars [3] - Number of bars in the icon.
|
55
55
|
@mixin hamburger(
|
56
56
|
$color: $black,
|
57
57
|
$color-hover: $dark-gray,
|
@@ -119,22 +119,28 @@
|
|
119
119
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: #{$rgb}"></polygon></svg>');
|
120
120
|
|
121
121
|
@media screen and (min-width:0\0) {
|
122
|
-
@if lightness($color) <
|
122
|
+
@if lightness($color) < 60% {
|
123
|
+
// White triangle
|
123
124
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');
|
124
125
|
}
|
125
126
|
@else {
|
127
|
+
// Black triangle
|
126
128
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');
|
127
129
|
}
|
128
130
|
}
|
129
131
|
}
|
130
132
|
|
131
133
|
/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.
|
134
|
+
/// The clearfix is augmented with specific styles to prevent borders in flexbox environments
|
132
135
|
/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack
|
136
|
+
/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix
|
133
137
|
@mixin clearfix {
|
134
138
|
&::before,
|
135
139
|
&::after {
|
136
140
|
content: ' ';
|
137
141
|
display: table;
|
142
|
+
flex-basis: 0;
|
143
|
+
order: 1;
|
138
144
|
}
|
139
145
|
|
140
146
|
&::after {
|
@@ -2,14 +2,10 @@
|
|
2
2
|
// foundation.zurb.com
|
3
3
|
// Licensed under MIT Open Source
|
4
4
|
|
5
|
-
// Utilities
|
6
5
|
@import 'unit';
|
7
6
|
@import 'value';
|
8
7
|
@import 'color';
|
9
8
|
@import 'selector';
|
10
|
-
|
11
|
-
// Libraries
|
9
|
+
@import 'flex';
|
12
10
|
@import 'breakpoint';
|
13
|
-
|
14
|
-
// Mixins
|
15
11
|
@import 'mixins';
|
@@ -89,38 +89,19 @@
|
|
89
89
|
style: solid,
|
90
90
|
color: #000,
|
91
91
|
);
|
92
|
-
@return map-get($defaults, $elem);
|
93
|
-
}
|
94
92
|
|
95
|
-
|
96
|
-
/// @access private
|
97
|
-
///
|
98
|
-
/// @param {Number} $base - Base number (x).
|
99
|
-
/// @param {Number} $power - Exponent (y).
|
100
|
-
@function pow($base, $power) {
|
101
|
-
@if $power == 0 { @return 1; }
|
102
|
-
@return $base * pow($base, $power - 1);
|
93
|
+
@return map-get($defaults, $elem);
|
103
94
|
}
|
104
95
|
|
105
|
-
|
106
|
-
///
|
107
|
-
/// @access private
|
96
|
+
/// Finds a value in a nested map.
|
97
|
+
/// @link https://css-tricks.com/snippets/sass/deep-getset-maps/ Deep Get/Set in Maps
|
108
98
|
///
|
109
|
-
/// @param {
|
110
|
-
/// @param {
|
111
|
-
///
|
112
|
-
|
113
|
-
@
|
114
|
-
|
115
|
-
$opts: ($opts);
|
116
|
-
}
|
117
|
-
|
118
|
-
$map: ();
|
119
|
-
@each $keyword in $seeking {
|
120
|
-
$val: if(index($opts, $keyword) != null, true, false);
|
121
|
-
$item: ($keyword: $val);
|
122
|
-
$map: map-merge($map, $item);
|
99
|
+
/// @param {Map} $map - Map to pull a value from.
|
100
|
+
/// @param {String} $keys... - Keys to use when looking for a value.
|
101
|
+
/// @return The value found in the map.
|
102
|
+
@function map-deep-get($map, $keys...) {
|
103
|
+
@each $key in $keys {
|
104
|
+
$map: map-get($map, $key);
|
123
105
|
}
|
124
|
-
|
125
106
|
@return $map;
|
126
107
|
}
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: foundation-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 6.
|
4
|
+
version: 6.2.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- ZURB
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2016-01
|
11
|
+
date: 2016-03-01 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
@@ -44,6 +44,20 @@ dependencies:
|
|
44
44
|
- - ">="
|
45
45
|
- !ruby/object:Gem::Version
|
46
46
|
version: 3.1.0
|
47
|
+
- !ruby/object:Gem::Dependency
|
48
|
+
name: sprockets-es6
|
49
|
+
requirement: !ruby/object:Gem::Requirement
|
50
|
+
requirements:
|
51
|
+
- - ">="
|
52
|
+
- !ruby/object:Gem::Version
|
53
|
+
version: 0.9.0
|
54
|
+
type: :runtime
|
55
|
+
prerelease: false
|
56
|
+
version_requirements: !ruby/object:Gem::Requirement
|
57
|
+
requirements:
|
58
|
+
- - ">="
|
59
|
+
- !ruby/object:Gem::Version
|
60
|
+
version: 0.9.0
|
47
61
|
- !ruby/object:Gem::Dependency
|
48
62
|
name: bundler
|
49
63
|
requirement: !ruby/object:Gem::Requirement
|
@@ -146,35 +160,35 @@ files:
|
|
146
160
|
- spec/features/generator_spec.rb
|
147
161
|
- spec/spec_helper.rb
|
148
162
|
- spec/support/helpers.rb
|
149
|
-
- vendor/assets/js/foundation.abide.js
|
150
|
-
- vendor/assets/js/foundation.accordion.js
|
151
|
-
- vendor/assets/js/foundation.accordionMenu.js
|
152
|
-
- vendor/assets/js/foundation.core.js
|
153
|
-
- vendor/assets/js/foundation.drilldown.js
|
154
|
-
- vendor/assets/js/foundation.dropdown.js
|
155
|
-
- vendor/assets/js/foundation.dropdownMenu.js
|
156
|
-
- vendor/assets/js/foundation.equalizer.js
|
157
|
-
- vendor/assets/js/foundation.interchange.js
|
158
|
-
- vendor/assets/js/foundation.js
|
159
|
-
- vendor/assets/js/foundation.magellan.js
|
160
|
-
- vendor/assets/js/foundation.offcanvas.js
|
161
|
-
- vendor/assets/js/foundation.orbit.js
|
162
|
-
- vendor/assets/js/foundation.responsiveMenu.js
|
163
|
-
- vendor/assets/js/foundation.responsiveToggle.js
|
164
|
-
- vendor/assets/js/foundation.reveal.js
|
165
|
-
- vendor/assets/js/foundation.slider.js
|
166
|
-
- vendor/assets/js/foundation.sticky.js
|
167
|
-
- vendor/assets/js/foundation.tabs.js
|
168
|
-
- vendor/assets/js/foundation.toggler.js
|
169
|
-
- vendor/assets/js/foundation.tooltip.js
|
170
|
-
- vendor/assets/js/foundation.util.box.js
|
171
|
-
- vendor/assets/js/foundation.util.keyboard.js
|
172
|
-
- vendor/assets/js/foundation.util.mediaQuery.js
|
173
|
-
- vendor/assets/js/foundation.util.motion.js
|
174
|
-
- vendor/assets/js/foundation.util.nest.js
|
175
|
-
- vendor/assets/js/foundation.util.timerAndImageLoader.js
|
176
|
-
- vendor/assets/js/foundation.util.touch.js
|
177
|
-
- vendor/assets/js/foundation.util.triggers.js
|
163
|
+
- vendor/assets/js/foundation.abide.js.es6
|
164
|
+
- vendor/assets/js/foundation.accordion.js.es6
|
165
|
+
- vendor/assets/js/foundation.accordionMenu.js.es6
|
166
|
+
- vendor/assets/js/foundation.core.js.es6
|
167
|
+
- vendor/assets/js/foundation.drilldown.js.es6
|
168
|
+
- vendor/assets/js/foundation.dropdown.js.es6
|
169
|
+
- vendor/assets/js/foundation.dropdownMenu.js.es6
|
170
|
+
- vendor/assets/js/foundation.equalizer.js.es6
|
171
|
+
- vendor/assets/js/foundation.interchange.js.es6
|
172
|
+
- vendor/assets/js/foundation.js.es6
|
173
|
+
- vendor/assets/js/foundation.magellan.js.es6
|
174
|
+
- vendor/assets/js/foundation.offcanvas.js.es6
|
175
|
+
- vendor/assets/js/foundation.orbit.js.es6
|
176
|
+
- vendor/assets/js/foundation.responsiveMenu.js.es6
|
177
|
+
- vendor/assets/js/foundation.responsiveToggle.js.es6
|
178
|
+
- vendor/assets/js/foundation.reveal.js.es6
|
179
|
+
- vendor/assets/js/foundation.slider.js.es6
|
180
|
+
- vendor/assets/js/foundation.sticky.js.es6
|
181
|
+
- vendor/assets/js/foundation.tabs.js.es6
|
182
|
+
- vendor/assets/js/foundation.toggler.js.es6
|
183
|
+
- vendor/assets/js/foundation.tooltip.js.es6
|
184
|
+
- vendor/assets/js/foundation.util.box.js.es6
|
185
|
+
- vendor/assets/js/foundation.util.keyboard.js.es6
|
186
|
+
- vendor/assets/js/foundation.util.mediaQuery.js.es6
|
187
|
+
- vendor/assets/js/foundation.util.motion.js.es6
|
188
|
+
- vendor/assets/js/foundation.util.nest.js.es6
|
189
|
+
- vendor/assets/js/foundation.util.timerAndImageLoader.js.es6
|
190
|
+
- vendor/assets/js/foundation.util.touch.js.es6
|
191
|
+
- vendor/assets/js/foundation.util.triggers.js.es6
|
178
192
|
- vendor/assets/scss/_global.scss
|
179
193
|
- vendor/assets/scss/components/_accordion-menu.scss
|
180
194
|
- vendor/assets/scss/components/_accordion.scss
|
@@ -188,9 +202,11 @@ files:
|
|
188
202
|
- vendor/assets/scss/components/_dropdown-menu.scss
|
189
203
|
- vendor/assets/scss/components/_dropdown.scss
|
190
204
|
- vendor/assets/scss/components/_flex-video.scss
|
205
|
+
- vendor/assets/scss/components/_flex.scss
|
191
206
|
- vendor/assets/scss/components/_float.scss
|
192
207
|
- vendor/assets/scss/components/_label.scss
|
193
208
|
- vendor/assets/scss/components/_media-object.scss
|
209
|
+
- vendor/assets/scss/components/_menu-icon.scss
|
194
210
|
- vendor/assets/scss/components/_menu.scss
|
195
211
|
- vendor/assets/scss/components/_off-canvas.scss
|
196
212
|
- vendor/assets/scss/components/_orbit.scss
|
@@ -214,6 +230,9 @@ files:
|
|
214
230
|
- vendor/assets/scss/forms/_help-text.scss
|
215
231
|
- vendor/assets/scss/forms/_input-group.scss
|
216
232
|
- vendor/assets/scss/forms/_label.scss
|
233
|
+
- vendor/assets/scss/forms/_meter.scss
|
234
|
+
- vendor/assets/scss/forms/_progress.scss
|
235
|
+
- vendor/assets/scss/forms/_range.scss
|
217
236
|
- vendor/assets/scss/forms/_select.scss
|
218
237
|
- vendor/assets/scss/forms/_text.scss
|
219
238
|
- vendor/assets/scss/foundation.scss
|
@@ -256,6 +275,7 @@ files:
|
|
256
275
|
- vendor/assets/scss/typography/_typography.scss
|
257
276
|
- vendor/assets/scss/util/_breakpoint.scss
|
258
277
|
- vendor/assets/scss/util/_color.scss
|
278
|
+
- vendor/assets/scss/util/_flex.scss
|
259
279
|
- vendor/assets/scss/util/_mixins.scss
|
260
280
|
- vendor/assets/scss/util/_selector.scss
|
261
281
|
- vendor/assets/scss/util/_unit.scss
|
@@ -1,418 +0,0 @@
|
|
1
|
-
!function(Foundation, $) {
|
2
|
-
'use strict';
|
3
|
-
|
4
|
-
/**
|
5
|
-
* Creates a new instance of Abide.
|
6
|
-
* @class
|
7
|
-
* @fires Abide#init
|
8
|
-
* @param {Object} element - jQuery object to add the trigger to.
|
9
|
-
* @param {Object} options - Overrides to the default plugin settings.
|
10
|
-
*/
|
11
|
-
function Abide(element, options) {
|
12
|
-
this.$element = element;
|
13
|
-
this.options = $.extend({}, Abide.defaults, this.$element.data(), options);
|
14
|
-
|
15
|
-
this._init();
|
16
|
-
|
17
|
-
Foundation.registerPlugin(this, 'Abide');
|
18
|
-
}
|
19
|
-
|
20
|
-
/**
|
21
|
-
* Default settings for plugin
|
22
|
-
*/
|
23
|
-
Abide.defaults = {
|
24
|
-
/**
|
25
|
-
* The default event to validate inputs. Checkboxes and radios validate immediately.
|
26
|
-
* Remove or change this value for manual validation.
|
27
|
-
* @option
|
28
|
-
* @example 'fieldChange'
|
29
|
-
*/
|
30
|
-
validateOn: 'fieldChange',
|
31
|
-
/**
|
32
|
-
* Class to be applied to input labels on failed validation.
|
33
|
-
* @option
|
34
|
-
* @example 'is-invalid-label'
|
35
|
-
*/
|
36
|
-
labelErrorClass: 'is-invalid-label',
|
37
|
-
/**
|
38
|
-
* Class to be applied to inputs on failed validation.
|
39
|
-
* @option
|
40
|
-
* @example 'is-invalid-input'
|
41
|
-
*/
|
42
|
-
inputErrorClass: 'is-invalid-input',
|
43
|
-
/**
|
44
|
-
* Class selector to use to target Form Errors for show/hide.
|
45
|
-
* @option
|
46
|
-
* @example '.form-error'
|
47
|
-
*/
|
48
|
-
formErrorSelector: '.form-error',
|
49
|
-
/**
|
50
|
-
* Class added to Form Errors on failed validation.
|
51
|
-
* @option
|
52
|
-
* @example 'is-visible'
|
53
|
-
*/
|
54
|
-
formErrorClass: 'is-visible',
|
55
|
-
/**
|
56
|
-
* Set to true to validate text inputs on any value change.
|
57
|
-
* @option
|
58
|
-
* @example false
|
59
|
-
*/
|
60
|
-
liveValidate: false,
|
61
|
-
|
62
|
-
patterns: {
|
63
|
-
alpha : /^[a-zA-Z]+$/,
|
64
|
-
alpha_numeric : /^[a-zA-Z0-9]+$/,
|
65
|
-
integer : /^[-+]?\d+$/,
|
66
|
-
number : /^[-+]?\d*(?:[\.\,]\d+)?$/,
|
67
|
-
|
68
|
-
// amex, visa, diners
|
69
|
-
card : /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/,
|
70
|
-
cvv : /^([0-9]){3,4}$/,
|
71
|
-
|
72
|
-
// http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#valid-e-mail-address
|
73
|
-
email : /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/,
|
74
|
-
|
75
|
-
url : /^(https?|ftp|file|ssh):\/\/(((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-zA-Z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-zA-Z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/,
|
76
|
-
// abc.de
|
77
|
-
domain : /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,8}$/,
|
78
|
-
|
79
|
-
datetime : /^([0-2][0-9]{3})\-([0-1][0-9])\-([0-3][0-9])T([0-5][0-9])\:([0-5][0-9])\:([0-5][0-9])(Z|([\-\+]([0-1][0-9])\:00))$/,
|
80
|
-
// YYYY-MM-DD
|
81
|
-
date : /(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))$/,
|
82
|
-
// HH:MM:SS
|
83
|
-
time : /^(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9]){2}$/,
|
84
|
-
dateISO : /^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/,
|
85
|
-
// MM/DD/YYYY
|
86
|
-
month_day_year : /^(0[1-9]|1[012])[- \/.](0[1-9]|[12][0-9]|3[01])[- \/.]\d{4}$/,
|
87
|
-
// DD/MM/YYYY
|
88
|
-
day_month_year : /^(0[1-9]|[12][0-9]|3[01])[- \/.](0[1-9]|1[012])[- \/.]\d{4}$/,
|
89
|
-
|
90
|
-
// #FFF or #FFFFFF
|
91
|
-
color : /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
|
92
|
-
},
|
93
|
-
/**
|
94
|
-
* Optional validation functions to be used. `equalTo` being the only default included function.
|
95
|
-
* Functions should return only a boolean if the input is valid or not. Functions are given the following arguments:
|
96
|
-
* el : The jQuery element to validate.
|
97
|
-
* required : Boolean value of the required attribute be present or not.
|
98
|
-
* parent : The direct parent of the input.
|
99
|
-
* @option
|
100
|
-
*/
|
101
|
-
validators: {
|
102
|
-
equalTo: function (el, required, parent) {
|
103
|
-
return $('#' + el.attr('data-equalto')).val() === el.val();
|
104
|
-
}
|
105
|
-
}
|
106
|
-
};
|
107
|
-
|
108
|
-
|
109
|
-
/**
|
110
|
-
* Initializes the Abide plugin and calls functions to get Abide functioning on load.
|
111
|
-
* @private
|
112
|
-
*/
|
113
|
-
Abide.prototype._init = function(){
|
114
|
-
this.$inputs = this.$element.find('input, textarea, select').not('[data-abide-ignore]');
|
115
|
-
|
116
|
-
this._events();
|
117
|
-
};
|
118
|
-
|
119
|
-
/**
|
120
|
-
* Initializes events for Abide.
|
121
|
-
* @private
|
122
|
-
*/
|
123
|
-
Abide.prototype._events = function() {
|
124
|
-
var _this = this;
|
125
|
-
|
126
|
-
this.$element.off('.abide')
|
127
|
-
.on('reset.zf.abide', function(e){
|
128
|
-
_this.resetForm();
|
129
|
-
})
|
130
|
-
.on('submit.zf.abide', function(e){
|
131
|
-
return _this.validateForm();
|
132
|
-
});
|
133
|
-
|
134
|
-
if(this.options.validateOn === 'fieldChange'){
|
135
|
-
this.$inputs.off('change.zf.abide')
|
136
|
-
.on('change.zf.abide', function(e){
|
137
|
-
_this.validateInput($(this));
|
138
|
-
});
|
139
|
-
}
|
140
|
-
|
141
|
-
if(this.options.liveValidate){
|
142
|
-
this.$inputs.off('input.zf.abide')
|
143
|
-
.on('input.zf.abide', function(e){
|
144
|
-
_this.validateInput($(this));
|
145
|
-
});
|
146
|
-
}
|
147
|
-
},
|
148
|
-
/**
|
149
|
-
* Calls necessary functions to update Abide upon DOM change
|
150
|
-
* @private
|
151
|
-
*/
|
152
|
-
Abide.prototype._reflow = function() {
|
153
|
-
this._init();
|
154
|
-
};
|
155
|
-
/**
|
156
|
-
* Checks whether or not a form element has the required attribute and if it's checked or not
|
157
|
-
* @param {Object} element - jQuery object to check for required attribute
|
158
|
-
* @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
|
159
|
-
*/
|
160
|
-
Abide.prototype.requiredCheck = function($el) {
|
161
|
-
if(!$el.attr('required')) return true;
|
162
|
-
var isGood = true;
|
163
|
-
switch ($el[0].type) {
|
164
|
-
|
165
|
-
case 'checkbox':
|
166
|
-
case 'radio':
|
167
|
-
isGood = $el[0].checked;
|
168
|
-
break;
|
169
|
-
|
170
|
-
case 'select':
|
171
|
-
case 'select-one':
|
172
|
-
case 'select-multiple':
|
173
|
-
var opt = $el.find('option:selected');
|
174
|
-
if(!opt.length || !opt.val()) isGood = false;
|
175
|
-
break;
|
176
|
-
|
177
|
-
default:
|
178
|
-
if(!$el.val() || !$el.val().length) isGood = false;
|
179
|
-
}
|
180
|
-
return isGood;
|
181
|
-
};
|
182
|
-
/**
|
183
|
-
* Based on $el, get the first element with selector in this order:
|
184
|
-
* 1. The element's direct sibling('s).
|
185
|
-
* 3. The element's parent's children.
|
186
|
-
*
|
187
|
-
* This allows for multiple form errors per input, though if none are found, no form errors will be shown.
|
188
|
-
*
|
189
|
-
* @param {Object} $el - jQuery object to use as reference to find the form error selector.
|
190
|
-
* @returns {Object} jQuery object with the selector.
|
191
|
-
*/
|
192
|
-
Abide.prototype.findFormError = function($el){
|
193
|
-
var $error = $el.siblings(this.options.formErrorSelector);
|
194
|
-
if(!$error.length){
|
195
|
-
$error = $el.parent().find(this.options.formErrorSelector);
|
196
|
-
}
|
197
|
-
return $error;
|
198
|
-
};
|
199
|
-
/**
|
200
|
-
* Get the first element in this order:
|
201
|
-
* 2. The <label> with the attribute `[for="someInputId"]`
|
202
|
-
* 3. The `.closest()` <label>
|
203
|
-
*
|
204
|
-
* @param {Object} $el - jQuery object to check for required attribute
|
205
|
-
* @returns {Boolean} Boolean value depends on whether or not attribute is checked or empty
|
206
|
-
*/
|
207
|
-
Abide.prototype.findLabel = function($el) {
|
208
|
-
var $label = this.$element.find('label[for="' + $el[0].id + '"]');
|
209
|
-
if(!$label.length){
|
210
|
-
return $el.closest('label');
|
211
|
-
}
|
212
|
-
return $label;
|
213
|
-
};
|
214
|
-
/**
|
215
|
-
* Adds the CSS error class as specified by the Abide settings to the label, input, and the form
|
216
|
-
* @param {Object} $el - jQuery object to add the class to
|
217
|
-
*/
|
218
|
-
Abide.prototype.addErrorClasses = function($el){
|
219
|
-
var $label = this.findLabel($el),
|
220
|
-
$formError = this.findFormError($el);
|
221
|
-
|
222
|
-
if($label.length){
|
223
|
-
$label.addClass(this.options.labelErrorClass);
|
224
|
-
}
|
225
|
-
if($formError.length){
|
226
|
-
$formError.addClass(this.options.formErrorClass);
|
227
|
-
}
|
228
|
-
$el.addClass(this.options.inputErrorClass).attr('data-invalid', '');
|
229
|
-
};
|
230
|
-
/**
|
231
|
-
* Removes CSS error class as specified by the Abide settings from the label, input, and the form
|
232
|
-
* @param {Object} $el - jQuery object to remove the class from
|
233
|
-
*/
|
234
|
-
Abide.prototype.removeErrorClasses = function($el){
|
235
|
-
var $label = this.findLabel($el),
|
236
|
-
$formError = this.findFormError($el);
|
237
|
-
|
238
|
-
if($label.length){
|
239
|
-
$label.removeClass(this.options.labelErrorClass);
|
240
|
-
}
|
241
|
-
if($formError.length){
|
242
|
-
$formError.removeClass(this.options.formErrorClass);
|
243
|
-
}
|
244
|
-
$el.removeClass(this.options.inputErrorClass).removeAttr('data-invalid');
|
245
|
-
};
|
246
|
-
/**
|
247
|
-
* Goes through a form to find inputs and proceeds to validate them in ways specific to their type
|
248
|
-
* @fires Abide#invalid
|
249
|
-
* @fires Abide#valid
|
250
|
-
* @param {Object} element - jQuery object to validate, should be an HTML input
|
251
|
-
* @returns {Boolean} goodToGo - If the input is valid or not.
|
252
|
-
*/
|
253
|
-
Abide.prototype.validateInput = function($el){
|
254
|
-
var clearRequire = this.requiredCheck($el),
|
255
|
-
validated = false,
|
256
|
-
customValidator = true,
|
257
|
-
validator = $el.attr('data-validator'),
|
258
|
-
equalTo = true;
|
259
|
-
|
260
|
-
switch ($el[0].type) {
|
261
|
-
|
262
|
-
case 'radio':
|
263
|
-
validated = this.validateRadio($el.attr('name'));
|
264
|
-
break;
|
265
|
-
|
266
|
-
case 'checkbox':
|
267
|
-
validated = clearRequire;
|
268
|
-
break;
|
269
|
-
|
270
|
-
case 'select':
|
271
|
-
case 'select-one':
|
272
|
-
case 'select-multiple':
|
273
|
-
validated = clearRequire;
|
274
|
-
break;
|
275
|
-
|
276
|
-
default:
|
277
|
-
validated = this.validateText($el);
|
278
|
-
}
|
279
|
-
|
280
|
-
if(validator){ customValidator = this.matchValidation($el, validator, $el.attr('required')); }
|
281
|
-
if($el.attr('data-equalto')){ equalTo = this.options.validators.equalTo($el); }
|
282
|
-
|
283
|
-
var goodToGo = [clearRequire, validated, customValidator, equalTo].indexOf(false) === -1,
|
284
|
-
message = (goodToGo ? 'valid' : 'invalid') + '.zf.abide';
|
285
|
-
|
286
|
-
this[goodToGo ? 'removeErrorClasses' : 'addErrorClasses']($el);
|
287
|
-
|
288
|
-
/**
|
289
|
-
* Fires when the input is done checking for validation. Event trigger is either `valid.zf.abide` or `invalid.zf.abide`
|
290
|
-
* Trigger includes the DOM element of the input.
|
291
|
-
* @event Abide#valid
|
292
|
-
* @event Abide#invalid
|
293
|
-
*/
|
294
|
-
$el.trigger(message, [$el]);
|
295
|
-
|
296
|
-
return goodToGo;
|
297
|
-
};
|
298
|
-
/**
|
299
|
-
* Goes through a form and if there are any invalid inputs, it will display the form error element
|
300
|
-
* @returns {Boolean} noError - true if no errors were detected...
|
301
|
-
* @fires Abide#formvalid
|
302
|
-
* @fires Abide#forminvalid
|
303
|
-
*/
|
304
|
-
Abide.prototype.validateForm = function(){
|
305
|
-
var acc = [],
|
306
|
-
_this = this;
|
307
|
-
|
308
|
-
this.$inputs.each(function(){
|
309
|
-
acc.push(_this.validateInput($(this)));
|
310
|
-
});
|
311
|
-
|
312
|
-
var noError = acc.indexOf(false) === -1;
|
313
|
-
|
314
|
-
this.$element.find('[data-abide-error]').css('display', (noError ? 'none' : 'block'));
|
315
|
-
/**
|
316
|
-
* Fires when the form is finished validating. Event trigger is either `formvalid.zf.abide` or `forminvalid.zf.abide`.
|
317
|
-
* Trigger includes the element of the form.
|
318
|
-
* @event Abide#formvalid
|
319
|
-
* @event Abide#forminvalid
|
320
|
-
*/
|
321
|
-
this.$element.trigger((noError ? 'formvalid' : 'forminvalid') + '.zf.abide', [this.$element]);
|
322
|
-
|
323
|
-
return noError;
|
324
|
-
};
|
325
|
-
/**
|
326
|
-
* Determines whether or a not a text input is valid based on the pattern specified in the attribute. If no matching pattern is found, returns true.
|
327
|
-
* @param {Object} $el - jQuery object to validate, should be a text input HTML element
|
328
|
-
* @param {String} pattern - string value of one of the RegEx patterns in Abide.options.patterns
|
329
|
-
* @returns {Boolean} Boolean value depends on whether or not the input value matches the pattern specified
|
330
|
-
*/
|
331
|
-
Abide.prototype.validateText = function($el, pattern){
|
332
|
-
// pattern = pattern ? pattern : $el.attr('pattern') ? $el.attr('pattern') : $el.attr('type');
|
333
|
-
pattern = (pattern || $el.attr('pattern') || $el.attr('type'));
|
334
|
-
var inputText = $el.val();
|
335
|
-
|
336
|
-
return inputText.length ?//if text, check if the pattern exists, if so, test it, if no text or no pattern, return true.
|
337
|
-
this.options.patterns.hasOwnProperty(pattern) ? this.options.patterns[pattern].test(inputText) :
|
338
|
-
pattern && pattern !== $el.attr('type') ? new RegExp(pattern).test(inputText) : true : true;
|
339
|
-
}; /**
|
340
|
-
* Determines whether or a not a radio input is valid based on whether or not it is required and selected
|
341
|
-
* @param {String} groupName - A string that specifies the name of a radio button group
|
342
|
-
* @returns {Boolean} Boolean value depends on whether or not at least one radio input has been selected (if it's required)
|
343
|
-
*/
|
344
|
-
Abide.prototype.validateRadio = function(groupName){
|
345
|
-
var $group = this.$element.find(':radio[name="' + groupName + '"]'),
|
346
|
-
counter = [],
|
347
|
-
_this = this;
|
348
|
-
|
349
|
-
$group.each(function(){
|
350
|
-
var rdio = $(this),
|
351
|
-
clear = _this.requiredCheck(rdio);
|
352
|
-
counter.push(clear);
|
353
|
-
if(clear) _this.removeErrorClasses(rdio);
|
354
|
-
});
|
355
|
-
|
356
|
-
return counter.indexOf(false) === -1;
|
357
|
-
};
|
358
|
-
/**
|
359
|
-
* Determines if a selected input passes a custom validation function. Multiple validations can be used, if passed to the element with `data-validator="foo bar baz"` in a space separated listed.
|
360
|
-
* @param {Object} $el - jQuery input element.
|
361
|
-
* @param {String} validators - a string of function names matching functions in the Abide.options.validators object.
|
362
|
-
* @param {Boolean} required - self explanatory?
|
363
|
-
* @returns {Boolean} - true if validations passed.
|
364
|
-
*/
|
365
|
-
Abide.prototype.matchValidation = function($el, validators, required){
|
366
|
-
var _this = this;
|
367
|
-
required = required ? true : false;
|
368
|
-
var clear = validators.split(' ').map(function(v){
|
369
|
-
return _this.options.validators[v]($el, required, $el.parent());
|
370
|
-
});
|
371
|
-
return clear.indexOf(false) === -1;
|
372
|
-
};
|
373
|
-
/**
|
374
|
-
* Resets form inputs and styles
|
375
|
-
* @fires Abide#formreset
|
376
|
-
*/
|
377
|
-
Abide.prototype.resetForm = function() {
|
378
|
-
var $form = this.$element,
|
379
|
-
opts = this.options;
|
380
|
-
|
381
|
-
$('.' + opts.labelErrorClass, $form).not('small').removeClass(opts.labelErrorClass);
|
382
|
-
$('.' + opts.inputErrorClass, $form).not('small').removeClass(opts.inputErrorClass);
|
383
|
-
$(opts.formErrorSelector + '.' + opts.formErrorClass).removeClass(opts.formErrorClass);
|
384
|
-
$form.find('[data-abide-error]').css('display', 'none');
|
385
|
-
$(':input', $form).not(':button, :submit, :reset, :hidden, [data-abide-ignore]').val('').removeAttr('data-invalid');
|
386
|
-
/**
|
387
|
-
* Fires when the form has been reset.
|
388
|
-
* @event Abide#formreset
|
389
|
-
*/
|
390
|
-
$form.trigger('formreset.zf.abide', [$form]);
|
391
|
-
};
|
392
|
-
/**
|
393
|
-
* Destroys an instance of Abide.
|
394
|
-
* Removes error styles and classes from elements, without resetting their values.
|
395
|
-
*/
|
396
|
-
Abide.prototype.destroy = function(){
|
397
|
-
var _this = this;
|
398
|
-
this.$element.off('.abide')
|
399
|
-
.find('[data-abide-error]').css('display', 'none');
|
400
|
-
this.$inputs.off('.abide')
|
401
|
-
.each(function(){
|
402
|
-
_this.removeErrorClasses($(this));
|
403
|
-
});
|
404
|
-
|
405
|
-
Foundation.unregisterPlugin(this);
|
406
|
-
};
|
407
|
-
|
408
|
-
Foundation.plugin(Abide, 'Abide');
|
409
|
-
|
410
|
-
// Exports for AMD/Browserify
|
411
|
-
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
|
412
|
-
module.exports = Abide;
|
413
|
-
if (typeof define === 'function')
|
414
|
-
define(['foundation'], function() {
|
415
|
-
return Abide;
|
416
|
-
});
|
417
|
-
|
418
|
-
}(Foundation, jQuery);
|