foundation-rails 5.5.3.2 → 6.1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE.txt +1 -1
- data/README.md +2 -8
- data/Rakefile +23 -0
- data/app/views/foundation/rails/styleguide/show.html.erb +2 -5
- data/bower.json +2 -2
- data/lib/foundation/rails/version.rb +1 -1
- data/lib/generators/foundation/install_generator.rb +6 -3
- data/lib/generators/foundation/templates/_settings.scss +546 -0
- data/lib/generators/foundation/templates/application.html.erb +0 -1
- data/lib/generators/foundation/templates/application.html.haml +0 -2
- data/lib/generators/foundation/templates/application.html.slim +0 -2
- data/lib/generators/foundation/templates/foundation_and_overrides.scss +51 -0
- data/vendor/assets/js/foundation.abide.js +418 -0
- data/vendor/assets/js/foundation.accordion.js +229 -0
- data/vendor/assets/js/foundation.accordionMenu.js +262 -0
- data/vendor/assets/js/foundation.core.js +378 -0
- data/vendor/assets/js/foundation.drilldown.js +321 -0
- data/vendor/assets/js/foundation.dropdown.js +390 -0
- data/vendor/assets/js/foundation.dropdownMenu.js +391 -0
- data/vendor/assets/js/foundation.equalizer.js +274 -0
- data/vendor/assets/js/foundation.interchange.js +184 -0
- data/vendor/assets/js/foundation.js +28 -0
- data/vendor/assets/js/foundation.magellan.js +212 -0
- data/vendor/assets/js/foundation.offcanvas.js +371 -0
- data/vendor/assets/js/foundation.orbit.js +419 -0
- data/vendor/assets/js/foundation.responsiveMenu.js +145 -0
- data/vendor/assets/js/foundation.responsiveToggle.js +106 -0
- data/vendor/assets/js/foundation.reveal.js +478 -0
- data/vendor/assets/js/foundation.slider.js +484 -0
- data/vendor/assets/js/foundation.sticky.js +436 -0
- data/vendor/assets/js/foundation.tabs.js +306 -0
- data/vendor/assets/js/foundation.toggler.js +147 -0
- data/vendor/assets/js/foundation.tooltip.js +429 -0
- data/vendor/assets/js/foundation.util.box.js +169 -0
- data/vendor/assets/js/foundation.util.keyboard.js +115 -0
- data/vendor/assets/js/foundation.util.mediaQuery.js +210 -0
- data/vendor/assets/js/foundation.util.motion.js +89 -0
- data/vendor/assets/js/foundation.util.nest.js +64 -0
- data/vendor/assets/js/foundation.util.timerAndImageLoader.js +78 -0
- data/vendor/assets/js/foundation.util.touch.js +339 -0
- data/vendor/assets/js/foundation.util.triggers.js +222 -0
- data/vendor/assets/scss/_global.scss +626 -0
- data/vendor/assets/scss/components/_accordion-menu.scss +32 -0
- data/vendor/assets/scss/components/_accordion.scss +113 -0
- data/vendor/assets/scss/components/_badge.scss +55 -0
- data/vendor/assets/scss/components/_breadcrumbs.scss +94 -0
- data/vendor/assets/scss/components/_button-group.scss +130 -0
- data/vendor/assets/scss/components/_button.scss +265 -0
- data/vendor/assets/scss/components/_callout.scss +105 -0
- data/vendor/assets/scss/components/_close-button.scss +61 -0
- data/vendor/assets/scss/components/_drilldown.scss +75 -0
- data/vendor/assets/scss/components/_dropdown-menu.scss +148 -0
- data/vendor/assets/scss/components/_dropdown.scss +64 -0
- data/vendor/assets/scss/components/_flex-video.scss +63 -0
- data/vendor/assets/scss/components/_float.scss +27 -0
- data/vendor/assets/scss/components/_label.scss +56 -0
- data/vendor/assets/scss/components/_media-object.scss +74 -0
- data/vendor/assets/scss/components/_menu.scss +209 -0
- data/vendor/assets/scss/components/_off-canvas.scss +180 -0
- data/vendor/assets/scss/components/_orbit.scss +193 -0
- data/vendor/assets/scss/components/_pagination.scss +158 -0
- data/vendor/assets/scss/components/_progress-bar.scss +83 -0
- data/vendor/assets/scss/components/_reveal.scss +156 -0
- data/vendor/assets/scss/components/_slider.scss +158 -0
- data/vendor/assets/scss/components/_sticky.scss +38 -0
- data/vendor/assets/scss/components/_switch.scss +232 -0
- data/vendor/assets/scss/components/_table.scss +213 -0
- data/vendor/assets/scss/components/_tabs.scss +170 -0
- data/vendor/assets/scss/components/_thumbnail.scss +54 -0
- data/vendor/assets/scss/components/_title-bar.scss +68 -0
- data/vendor/assets/scss/components/_tooltip.scss +100 -0
- data/vendor/assets/scss/components/_top-bar.scss +89 -0
- data/vendor/assets/scss/components/_visibility.scss +131 -0
- data/vendor/assets/scss/forms/_checkbox.scss +36 -0
- data/vendor/assets/scss/forms/_error.scss +82 -0
- data/vendor/assets/scss/forms/_fieldset.scss +53 -0
- data/vendor/assets/scss/forms/_forms.scss +32 -0
- data/vendor/assets/scss/forms/_help-text.scss +30 -0
- data/vendor/assets/scss/forms/_input-group.scss +91 -0
- data/vendor/assets/scss/forms/_label.scss +48 -0
- data/vendor/assets/scss/forms/_select.scss +63 -0
- data/vendor/assets/scss/forms/_text.scss +154 -0
- data/vendor/assets/scss/foundation.scss +91 -0
- data/vendor/assets/scss/grid/_classes.scss +153 -0
- data/vendor/assets/scss/grid/_column.scss +124 -0
- data/vendor/assets/scss/grid/_flex-grid.scss +281 -0
- data/vendor/assets/scss/grid/_grid.scss +48 -0
- data/vendor/assets/scss/grid/_gutter.scss +34 -0
- data/vendor/assets/scss/grid/_layout.scss +33 -0
- data/vendor/assets/scss/grid/_position.scss +72 -0
- data/vendor/assets/scss/grid/_row.scss +97 -0
- data/vendor/assets/scss/grid/_size.scss +24 -0
- data/vendor/assets/scss/settings/_settings.scss +547 -0
- data/vendor/assets/scss/typography/_alignment.scss +22 -0
- data/vendor/assets/scss/typography/_base.scss +439 -0
- data/vendor/assets/scss/typography/_helpers.scss +77 -0
- data/vendor/assets/scss/typography/_print.scss +73 -0
- data/vendor/assets/scss/typography/_typography.scss +28 -0
- data/vendor/assets/scss/util/_breakpoint.scss +266 -0
- data/vendor/assets/scss/util/_color.scss +41 -0
- data/vendor/assets/scss/util/_mixins.scss +223 -0
- data/vendor/assets/scss/util/_selector.scss +40 -0
- data/vendor/assets/scss/util/_unit.scss +90 -0
- data/vendor/assets/scss/util/_util.scss +15 -0
- data/vendor/assets/scss/util/_value.scss +126 -0
- metadata +97 -64
- data/update-gem.sh +0 -20
- data/vendor/assets/javascripts/foundation.js +0 -17
- data/vendor/assets/javascripts/foundation/foundation.abide.js +0 -426
- data/vendor/assets/javascripts/foundation/foundation.accordion.js +0 -125
- data/vendor/assets/javascripts/foundation/foundation.alert.js +0 -43
- data/vendor/assets/javascripts/foundation/foundation.clearing.js +0 -586
- data/vendor/assets/javascripts/foundation/foundation.dropdown.js +0 -468
- data/vendor/assets/javascripts/foundation/foundation.equalizer.js +0 -104
- data/vendor/assets/javascripts/foundation/foundation.interchange.js +0 -360
- data/vendor/assets/javascripts/foundation/foundation.joyride.js +0 -935
- data/vendor/assets/javascripts/foundation/foundation.js +0 -732
- data/vendor/assets/javascripts/foundation/foundation.magellan.js +0 -214
- data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +0 -225
- data/vendor/assets/javascripts/foundation/foundation.orbit.js +0 -476
- data/vendor/assets/javascripts/foundation/foundation.reveal.js +0 -522
- data/vendor/assets/javascripts/foundation/foundation.slider.js +0 -296
- data/vendor/assets/javascripts/foundation/foundation.tab.js +0 -247
- data/vendor/assets/javascripts/foundation/foundation.tooltip.js +0 -348
- data/vendor/assets/javascripts/foundation/foundation.topbar.js +0 -458
- data/vendor/assets/javascripts/vendor/modernizr.js +0 -1406
- data/vendor/assets/stylesheets/foundation.scss +0 -42
- data/vendor/assets/stylesheets/foundation/_functions.scss +0 -156
- data/vendor/assets/stylesheets/foundation/_settings.scss +0 -1489
- data/vendor/assets/stylesheets/foundation/components/_accordion.scss +0 -161
- data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +0 -128
- data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +0 -133
- data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +0 -132
- data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +0 -208
- data/vendor/assets/stylesheets/foundation/components/_buttons.scss +0 -261
- data/vendor/assets/stylesheets/foundation/components/_clearing.scss +0 -260
- data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +0 -130
- data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +0 -269
- data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +0 -51
- data/vendor/assets/stylesheets/foundation/components/_forms.scss +0 -607
- data/vendor/assets/stylesheets/foundation/components/_global.scss +0 -566
- data/vendor/assets/stylesheets/foundation/components/_grid.scss +0 -292
- data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +0 -460
- data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +0 -58
- data/vendor/assets/stylesheets/foundation/components/_joyride.scss +0 -220
- data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +0 -60
- data/vendor/assets/stylesheets/foundation/components/_labels.scss +0 -106
- data/vendor/assets/stylesheets/foundation/components/_magellan.scss +0 -34
- data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +0 -606
- data/vendor/assets/stylesheets/foundation/components/_orbit.scss +0 -388
- data/vendor/assets/stylesheets/foundation/components/_pagination.scss +0 -163
- data/vendor/assets/stylesheets/foundation/components/_panels.scss +0 -107
- data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +0 -150
- data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +0 -85
- data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +0 -177
- data/vendor/assets/stylesheets/foundation/components/_reveal.scss +0 -212
- data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +0 -120
- data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +0 -203
- data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +0 -125
- data/vendor/assets/stylesheets/foundation/components/_switches.scss +0 -241
- data/vendor/assets/stylesheets/foundation/components/_tables.scss +0 -135
- data/vendor/assets/stylesheets/foundation/components/_tabs.scss +0 -142
- data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +0 -66
- data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +0 -142
- data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +0 -745
- data/vendor/assets/stylesheets/foundation/components/_type.scss +0 -525
- data/vendor/assets/stylesheets/foundation/components/_visibility.scss +0 -425
- data/vendor/assets/stylesheets/normalize.scss +0 -424
@@ -7,7 +7,6 @@
|
|
7
7
|
<title><%%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
|
8
8
|
|
9
9
|
<%%= stylesheet_link_tag "application" %>
|
10
|
-
<%%= javascript_include_tag "vendor/modernizr" %>
|
11
10
|
<%%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
|
12
11
|
<%%= csrf_meta_tags %>
|
13
12
|
</head>
|
@@ -8,11 +8,9 @@
|
|
8
8
|
%title= content_for?(:title) ? yield(:title) : "Untitled"
|
9
9
|
|
10
10
|
= stylesheet_link_tag "application"
|
11
|
-
= javascript_include_tag "vendor/modernizr"
|
12
11
|
= javascript_include_tag "application", 'data-turbolinks-track' => true
|
13
12
|
= csrf_meta_tag
|
14
13
|
|
15
14
|
%body
|
16
15
|
|
17
16
|
= yield
|
18
|
-
|
@@ -7,11 +7,9 @@ html lang="en"
|
|
7
7
|
title == content_for?(:title) ? yield(:title) : "Untitled"
|
8
8
|
|
9
9
|
= stylesheet_link_tag "application"
|
10
|
-
= javascript_include_tag "vendor/modernizr"
|
11
10
|
= javascript_include_tag "application", 'data-turbolinks-track' => true
|
12
11
|
= csrf_meta_tag
|
13
12
|
|
14
13
|
body
|
15
14
|
|
16
15
|
== yield
|
17
|
-
|
@@ -0,0 +1,51 @@
|
|
1
|
+
@charset 'utf-8';
|
2
|
+
|
3
|
+
@import 'settings';
|
4
|
+
@import 'foundation';
|
5
|
+
|
6
|
+
// If you'd like to include motion-ui, you need to install the motion-ui sass package.
|
7
|
+
//
|
8
|
+
//@import 'motion-ui';
|
9
|
+
|
10
|
+
// We include everything by default. To slim your CSS, remove components you don't use.
|
11
|
+
|
12
|
+
@include foundation-global-styles;
|
13
|
+
@include foundation-grid;
|
14
|
+
@include foundation-typography;
|
15
|
+
@include foundation-button;
|
16
|
+
@include foundation-forms;
|
17
|
+
@include foundation-visibility-classes;
|
18
|
+
@include foundation-float-classes;
|
19
|
+
@include foundation-accordion;
|
20
|
+
@include foundation-accordion-menu;
|
21
|
+
@include foundation-badge;
|
22
|
+
@include foundation-breadcrumbs;
|
23
|
+
@include foundation-button-group;
|
24
|
+
@include foundation-callout;
|
25
|
+
@include foundation-close-button;
|
26
|
+
@include foundation-drilldown-menu;
|
27
|
+
@include foundation-dropdown;
|
28
|
+
@include foundation-dropdown-menu;
|
29
|
+
@include foundation-flex-video;
|
30
|
+
@include foundation-label;
|
31
|
+
@include foundation-media-object;
|
32
|
+
@include foundation-menu;
|
33
|
+
@include foundation-off-canvas;
|
34
|
+
@include foundation-orbit;
|
35
|
+
@include foundation-pagination;
|
36
|
+
@include foundation-progress-bar;
|
37
|
+
@include foundation-slider;
|
38
|
+
@include foundation-sticky;
|
39
|
+
@include foundation-reveal;
|
40
|
+
@include foundation-switch;
|
41
|
+
@include foundation-table;
|
42
|
+
@include foundation-tabs;
|
43
|
+
@include foundation-thumbnail;
|
44
|
+
@include foundation-title-bar;
|
45
|
+
@include foundation-tooltip;
|
46
|
+
@include foundation-top-bar;
|
47
|
+
|
48
|
+
// If you'd like to include motion-ui, you need to install the motion-ui sass package.
|
49
|
+
//
|
50
|
+
//@include motion-ui-transitions;
|
51
|
+
//@include motion-ui-animations;
|
@@ -0,0 +1,418 @@
|
|
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[0]);
|
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);
|