foundation-rails 6.3.1.0 → 6.4.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/bower.json +3 -3
- data/lib/foundation/rails/version.rb +1 -1
- data/lib/generators/foundation/install_generator.rb +1 -1
- data/lib/generators/foundation/templates/_settings.scss +291 -48
- data/vendor/assets/js/entries/foundation-plugins.js +25 -0
- data/vendor/assets/js/entries/foundation.js +101 -0
- data/vendor/assets/js/entries/plugins/foundation.abide.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.accordion.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.accordionMenu.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.core.js +21 -0
- data/vendor/assets/js/entries/plugins/foundation.drilldown.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.dropdown.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.dropdownMenu.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.equalizer.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.interchange.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.magellan.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.offcanvas.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.orbit.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.responsiveAccordionTabs.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.responsiveMenu.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.responsiveToggle.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.reveal.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.slider.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.smoothScroll.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.sticky.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.tabs.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.toggler.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.tooltip.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.util.box.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.util.imageLoader.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.util.keyboard.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.util.mediaQuery.js +4 -0
- data/vendor/assets/js/entries/plugins/foundation.util.motion.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.util.nest.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.util.timer.js +5 -0
- data/vendor/assets/js/entries/plugins/foundation.util.touch.js +7 -0
- data/vendor/assets/js/entries/plugins/foundation.util.triggers.js +5 -0
- data/vendor/assets/js/foundation.abide.js.es6 +18 -15
- data/vendor/assets/js/foundation.accordion.js.es6 +37 -23
- data/vendor/assets/js/foundation.accordionMenu.js.es6 +96 -51
- data/vendor/assets/js/foundation.core.js.es6 +46 -87
- data/vendor/assets/js/foundation.drilldown.js.es6 +47 -29
- data/vendor/assets/js/foundation.dropdown.js.es6 +84 -122
- data/vendor/assets/js/foundation.dropdownMenu.js.es6 +44 -28
- data/vendor/assets/js/foundation.equalizer.js.es6 +18 -17
- data/vendor/assets/js/foundation.interchange.js.es6 +26 -19
- data/vendor/assets/js/foundation.js.es6 +8 -3
- data/vendor/assets/js/foundation.magellan.js.es6 +36 -30
- data/vendor/assets/js/foundation.offcanvas.js.es6 +148 -36
- data/vendor/assets/js/foundation.orbit.js.es6 +26 -18
- data/vendor/assets/js/foundation.plugin.js.es6 +54 -0
- data/vendor/assets/js/foundation.positionable.js.es6 +206 -0
- data/vendor/assets/js/{foundation.zf.responsiveAccordionTabs.js.es6 → foundation.responsiveAccordionTabs.js.es6} +33 -30
- data/vendor/assets/js/foundation.responsiveMenu.js.es6 +37 -29
- data/vendor/assets/js/foundation.responsiveToggle.js.es6 +17 -16
- data/vendor/assets/js/foundation.reveal.js.es6 +61 -79
- data/vendor/assets/js/foundation.slider.js.es6 +33 -18
- data/vendor/assets/js/foundation.smoothScroll.js.es6 +135 -0
- data/vendor/assets/js/foundation.sticky.js.es6 +25 -17
- data/vendor/assets/js/foundation.tabs.js.es6 +35 -27
- data/vendor/assets/js/foundation.toggler.js.es6 +15 -13
- data/vendor/assets/js/foundation.tooltip.js.es6 +100 -108
- data/vendor/assets/js/foundation.util.box.js.es6 +114 -78
- data/vendor/assets/js/foundation.util.core.js.es6 +52 -0
- data/vendor/assets/js/foundation.util.imageLoader.js.es6 +45 -0
- data/vendor/assets/js/foundation.util.keyboard.js.es6 +41 -31
- data/vendor/assets/js/foundation.util.mediaQuery.js.es6 +59 -55
- data/vendor/assets/js/foundation.util.motion.js.es6 +4 -5
- data/vendor/assets/js/foundation.util.nest.js.es6 +9 -23
- data/vendor/assets/js/{foundation.util.timerAndImageLoader.js.es6 → foundation.util.timer.js.es6} +2 -42
- data/vendor/assets/js/foundation.util.touch.js.es6 +91 -294
- data/vendor/assets/js/foundation.util.triggers.js.es6 +199 -141
- data/vendor/assets/scss/_global.scss +29 -1
- data/vendor/assets/scss/components/_accordion-menu.scss +148 -13
- data/vendor/assets/scss/components/_accordion.scss +5 -0
- data/vendor/assets/scss/components/_breadcrumbs.scss +26 -9
- data/vendor/assets/scss/components/_button-group.scss +4 -4
- data/vendor/assets/scss/components/_button.scss +59 -12
- data/vendor/assets/scss/components/_card.scss +10 -2
- data/vendor/assets/scss/components/_drilldown.scss +90 -41
- data/vendor/assets/scss/components/_dropdown-menu.scss +52 -6
- data/vendor/assets/scss/components/_dropdown.scss +8 -1
- data/vendor/assets/scss/components/_flex.scss +85 -2
- data/vendor/assets/scss/components/_menu.scss +267 -162
- data/vendor/assets/scss/components/_off-canvas.scss +159 -45
- data/vendor/assets/scss/components/_pagination.scss +1 -1
- data/vendor/assets/scss/components/_reveal.scss +13 -11
- data/vendor/assets/scss/components/_slider.scss +0 -1
- data/vendor/assets/scss/components/_sticky.scss +1 -0
- data/vendor/assets/scss/components/_table.scss +7 -6
- data/vendor/assets/scss/components/_tabs.scss +1 -1
- data/vendor/assets/scss/components/_title-bar.scss +1 -1
- data/vendor/assets/scss/components/_tooltip.scss +74 -21
- data/vendor/assets/scss/components/_top-bar.scss +2 -0
- data/vendor/assets/scss/forms/_fieldset.scss +0 -1
- data/vendor/assets/scss/forms/_meter.scss +7 -1
- data/vendor/assets/scss/forms/_select.scss +4 -3
- data/vendor/assets/scss/forms/_text.scss +11 -2
- data/vendor/assets/scss/foundation.scss +17 -3
- data/vendor/assets/scss/grid/_flex-grid.scss +3 -52
- data/vendor/assets/scss/prototype/_arrow.scss +36 -0
- data/vendor/assets/scss/prototype/_border-box.scss +35 -0
- data/vendor/assets/scss/prototype/_border-none.scss +35 -0
- data/vendor/assets/scss/prototype/_bordered.scss +54 -0
- data/vendor/assets/scss/prototype/_box.scss +23 -0
- data/vendor/assets/scss/prototype/_display.scss +50 -0
- data/vendor/assets/scss/prototype/_font-styling.scss +95 -0
- data/vendor/assets/scss/prototype/_list-style-type.scss +95 -0
- data/vendor/assets/scss/prototype/_overflow.scss +72 -0
- data/vendor/assets/scss/prototype/_position.scss +114 -0
- data/vendor/assets/scss/prototype/_prototype.scss +91 -0
- data/vendor/assets/scss/prototype/_relation.scss +157 -0
- data/vendor/assets/scss/prototype/_rotate.scss +31 -0
- data/vendor/assets/scss/prototype/_rounded.scss +54 -0
- data/vendor/assets/scss/prototype/_separator.scss +96 -0
- data/vendor/assets/scss/prototype/_shadow.scss +43 -0
- data/vendor/assets/scss/prototype/_sizing.scss +73 -0
- data/vendor/assets/scss/prototype/_spacing.scss +204 -0
- data/vendor/assets/scss/prototype/_text-decoration.scss +48 -0
- data/vendor/assets/scss/prototype/_text-transformation.scss +48 -0
- data/vendor/assets/scss/prototype/_text-utilities.scss +88 -0
- data/vendor/assets/scss/prototype/_typescale.scss +20 -0
- data/vendor/assets/scss/settings/_settings.scss +291 -48
- data/vendor/assets/scss/typography/_base.scss +2 -2
- data/vendor/assets/scss/typography/_helpers.scss +6 -4
- data/vendor/assets/scss/util/_breakpoint.scss +60 -1
- data/vendor/assets/scss/util/_color.scss +8 -5
- data/vendor/assets/scss/util/_mixins.scss +45 -5
- data/vendor/assets/scss/xy-grid/_cell.scss +179 -0
- data/vendor/assets/scss/xy-grid/_classes.scss +455 -0
- data/vendor/assets/scss/xy-grid/_collapse.scss +54 -0
- data/vendor/assets/scss/xy-grid/_frame.scss +54 -0
- data/vendor/assets/scss/xy-grid/_grid.scss +56 -0
- data/vendor/assets/scss/xy-grid/_gutters.scss +45 -0
- data/vendor/assets/scss/xy-grid/_layout.scss +33 -0
- data/vendor/assets/scss/xy-grid/_position.scss +28 -0
- data/vendor/assets/scss/xy-grid/_xy-grid.scss +52 -0
- metadata +73 -4
@@ -1,33 +1,38 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
|
-
|
3
|
+
|
4
|
+
import $ from 'jquery';
|
5
|
+
import { Keyboard } from './foundation.util.keyboard';
|
6
|
+
import { Nest } from './foundation.util.nest';
|
7
|
+
import { GetYoDigits } from './foundation.util.core';
|
8
|
+
import { Plugin } from './foundation.plugin';
|
4
9
|
|
5
10
|
/**
|
6
11
|
* AccordionMenu module.
|
7
12
|
* @module foundation.accordionMenu
|
8
13
|
* @requires foundation.util.keyboard
|
9
|
-
* @requires foundation.util.motion
|
10
14
|
* @requires foundation.util.nest
|
11
15
|
*/
|
12
16
|
|
13
|
-
class AccordionMenu {
|
17
|
+
class AccordionMenu extends Plugin {
|
14
18
|
/**
|
15
19
|
* Creates a new instance of an accordion menu.
|
16
20
|
* @class
|
21
|
+
* @name AccordionMenu
|
17
22
|
* @fires AccordionMenu#init
|
18
23
|
* @param {jQuery} element - jQuery object to make into an accordion menu.
|
19
24
|
* @param {Object} options - Overrides to the default plugin settings.
|
20
25
|
*/
|
21
|
-
|
26
|
+
_setup(element, options) {
|
22
27
|
this.$element = element;
|
23
28
|
this.options = $.extend({}, AccordionMenu.defaults, this.$element.data(), options);
|
29
|
+
this.className = 'AccordionMenu'; // ie9 back compat
|
24
30
|
|
25
|
-
|
31
|
+
Nest.Feather(this.$element, 'accordion');
|
26
32
|
|
27
33
|
this._init();
|
28
34
|
|
29
|
-
|
30
|
-
Foundation.Keyboard.register('AccordionMenu', {
|
35
|
+
Keyboard.register('AccordionMenu', {
|
31
36
|
'ENTER': 'toggle',
|
32
37
|
'SPACE': 'toggle',
|
33
38
|
'ARROW_RIGHT': 'open',
|
@@ -45,32 +50,43 @@ class AccordionMenu {
|
|
45
50
|
* @private
|
46
51
|
*/
|
47
52
|
_init() {
|
53
|
+
var _this = this;
|
54
|
+
|
48
55
|
this.$element.find('[data-submenu]').not('.is-active').slideUp(0);//.find('a').css('padding-left', '1rem');
|
49
56
|
this.$element.attr({
|
50
|
-
'role': '
|
57
|
+
'role': 'tree',
|
51
58
|
'aria-multiselectable': this.options.multiOpen
|
52
59
|
});
|
53
60
|
|
54
61
|
this.$menuLinks = this.$element.find('.is-accordion-submenu-parent');
|
55
62
|
this.$menuLinks.each(function(){
|
56
|
-
var linkId = this.id ||
|
63
|
+
var linkId = this.id || GetYoDigits(6, 'acc-menu-link'),
|
57
64
|
$elem = $(this),
|
58
65
|
$sub = $elem.children('[data-submenu]'),
|
59
|
-
subId = $sub[0].id ||
|
66
|
+
subId = $sub[0].id || GetYoDigits(6, 'acc-menu'),
|
60
67
|
isActive = $sub.hasClass('is-active');
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
'
|
65
|
-
'id'
|
66
|
-
}
|
68
|
+
|
69
|
+
|
70
|
+
if(_this.options.submenuToggle) {
|
71
|
+
$elem.addClass('has-submenu-toggle');
|
72
|
+
$elem.children('a').after('<button id="' + linkId + '" class="submenu-toggle" aria-controls="' + subId + '" aria-expanded="' + isActive + '" title="' + _this.options.submenuToggleText + '"><span class="submenu-toggle-text">' + _this.options.submenuToggleText + '</span></button>');
|
73
|
+
} else {
|
74
|
+
$elem.attr({
|
75
|
+
'aria-controls': subId,
|
76
|
+
'aria-expanded': isActive,
|
77
|
+
'id': linkId
|
78
|
+
});
|
79
|
+
}
|
67
80
|
$sub.attr({
|
68
81
|
'aria-labelledby': linkId,
|
69
82
|
'aria-hidden': !isActive,
|
70
|
-
'role': '
|
83
|
+
'role': 'group',
|
71
84
|
'id': subId
|
72
85
|
});
|
73
86
|
});
|
87
|
+
this.$element.find('li').attr({
|
88
|
+
'role': 'treeitem'
|
89
|
+
});
|
74
90
|
var initPanes = this.$element.find('.is-active');
|
75
91
|
if(initPanes.length){
|
76
92
|
var _this = this;
|
@@ -92,11 +108,16 @@ class AccordionMenu {
|
|
92
108
|
var $submenu = $(this).children('[data-submenu]');
|
93
109
|
|
94
110
|
if ($submenu.length) {
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
}
|
111
|
+
if(_this.options.submenuToggle) {
|
112
|
+
$(this).children('.submenu-toggle').off('click.zf.accordionMenu').on('click.zf.accordionMenu', function(e) {
|
113
|
+
_this.toggle($submenu);
|
114
|
+
});
|
115
|
+
} else {
|
116
|
+
$(this).children('a').off('click.zf.accordionMenu').on('click.zf.accordionMenu', function(e) {
|
117
|
+
e.preventDefault();
|
118
|
+
_this.toggle($submenu);
|
119
|
+
});
|
120
|
+
}
|
100
121
|
}
|
101
122
|
}).on('keydown.zf.accordionmenu', function(e){
|
102
123
|
var $element = $(this),
|
@@ -126,7 +147,7 @@ class AccordionMenu {
|
|
126
147
|
}
|
127
148
|
});
|
128
149
|
|
129
|
-
|
150
|
+
Keyboard.handleKey(e, 'AccordionMenu', {
|
130
151
|
open: function() {
|
131
152
|
if ($target.is(':hidden')) {
|
132
153
|
_this.down($target);
|
@@ -150,8 +171,12 @@ class AccordionMenu {
|
|
150
171
|
return true;
|
151
172
|
},
|
152
173
|
toggle: function() {
|
174
|
+
if (_this.options.submenuToggle) {
|
175
|
+
return false;
|
176
|
+
}
|
153
177
|
if ($element.children('[data-submenu]').length) {
|
154
178
|
_this.toggle($element.children('[data-submenu]'));
|
179
|
+
return true;
|
155
180
|
}
|
156
181
|
},
|
157
182
|
closeAll: function() {
|
@@ -211,18 +236,22 @@ class AccordionMenu {
|
|
211
236
|
this.up(this.$element.find('.is-active').not($target.parentsUntil(this.$element).add($target)));
|
212
237
|
}
|
213
238
|
|
214
|
-
$target.addClass('is-active').attr({'aria-hidden': false})
|
215
|
-
.parent('.is-accordion-submenu-parent').attr({'aria-expanded': true});
|
239
|
+
$target.addClass('is-active').attr({'aria-hidden': false});
|
216
240
|
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
241
|
+
if(this.options.submenuToggle) {
|
242
|
+
$target.prev('.submenu-toggle').attr({'aria-expanded': true});
|
243
|
+
}
|
244
|
+
else {
|
245
|
+
$target.parent('.is-accordion-submenu-parent').attr({'aria-expanded': true});
|
246
|
+
}
|
247
|
+
|
248
|
+
$target.slideDown(_this.options.slideSpeed, function () {
|
249
|
+
/**
|
250
|
+
* Fires when the menu is done opening.
|
251
|
+
* @event AccordionMenu#down
|
252
|
+
*/
|
253
|
+
_this.$element.trigger('down.zf.accordionMenu', [$target]);
|
254
|
+
});
|
226
255
|
}
|
227
256
|
|
228
257
|
/**
|
@@ -232,31 +261,38 @@ class AccordionMenu {
|
|
232
261
|
*/
|
233
262
|
up($target) {
|
234
263
|
var _this = this;
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
});
|
243
|
-
//});
|
264
|
+
$target.slideUp(_this.options.slideSpeed, function () {
|
265
|
+
/**
|
266
|
+
* Fires when the menu is done collapsing up.
|
267
|
+
* @event AccordionMenu#up
|
268
|
+
*/
|
269
|
+
_this.$element.trigger('up.zf.accordionMenu', [$target]);
|
270
|
+
});
|
244
271
|
|
245
272
|
var $menus = $target.find('[data-submenu]').slideUp(0).addBack().attr('aria-hidden', true);
|
246
273
|
|
247
|
-
|
274
|
+
if(this.options.submenuToggle) {
|
275
|
+
$menus.prev('.submenu-toggle').attr('aria-expanded', false);
|
276
|
+
}
|
277
|
+
else {
|
278
|
+
$menus.parent('.is-accordion-submenu-parent').attr('aria-expanded', false);
|
279
|
+
}
|
248
280
|
}
|
249
281
|
|
250
282
|
/**
|
251
283
|
* Destroys an instance of accordion menu.
|
252
284
|
* @fires AccordionMenu#destroyed
|
253
285
|
*/
|
254
|
-
|
286
|
+
_destroy() {
|
255
287
|
this.$element.find('[data-submenu]').slideDown(0).css('display', '');
|
256
288
|
this.$element.find('a').off('click.zf.accordionMenu');
|
257
289
|
|
258
|
-
|
259
|
-
|
290
|
+
if(this.options.submenuToggle) {
|
291
|
+
this.$element.find('.has-submenu-toggle').removeClass('has-submenu-toggle');
|
292
|
+
this.$element.find('.submenu-toggle').remove();
|
293
|
+
}
|
294
|
+
|
295
|
+
Nest.Burn(this.$element, 'accordion');
|
260
296
|
}
|
261
297
|
}
|
262
298
|
|
@@ -268,6 +304,18 @@ AccordionMenu.defaults = {
|
|
268
304
|
* @default 250
|
269
305
|
*/
|
270
306
|
slideSpeed: 250,
|
307
|
+
/**
|
308
|
+
* Adds a separate submenu toggle button. This allows the parent item to have a link.
|
309
|
+
* @option
|
310
|
+
* @example true
|
311
|
+
*/
|
312
|
+
submenuToggle: false,
|
313
|
+
/**
|
314
|
+
* The text used for the submenu toggle if enabled. This is used for screen readers only.
|
315
|
+
* @option
|
316
|
+
* @example true
|
317
|
+
*/
|
318
|
+
submenuToggleText: 'Toggle menu',
|
271
319
|
/**
|
272
320
|
* Allow the menu to have multiple open panes.
|
273
321
|
* @option
|
@@ -277,7 +325,4 @@ AccordionMenu.defaults = {
|
|
277
325
|
multiOpen: true
|
278
326
|
};
|
279
327
|
|
280
|
-
|
281
|
-
Foundation.plugin(AccordionMenu, 'AccordionMenu');
|
282
|
-
|
283
|
-
}(jQuery);
|
328
|
+
export {AccordionMenu};
|
@@ -1,8 +1,10 @@
|
|
1
|
-
!function($) {
|
2
|
-
|
3
1
|
"use strict";
|
4
2
|
|
5
|
-
|
3
|
+
import $ from 'jquery';
|
4
|
+
import { GetYoDigits } from './foundation.util.core';
|
5
|
+
import { MediaQuery } from './foundation.util.mediaQuery';
|
6
|
+
|
7
|
+
var FOUNDATION_VERSION = '6.4.1';
|
6
8
|
|
7
9
|
// Global Foundation object
|
8
10
|
// This is attached to the window, or used as a module for AMD/Browserify
|
@@ -19,12 +21,6 @@ var Foundation = {
|
|
19
21
|
*/
|
20
22
|
_uuids: [],
|
21
23
|
|
22
|
-
/**
|
23
|
-
* Returns a boolean for RTL support
|
24
|
-
*/
|
25
|
-
rtl: function(){
|
26
|
-
return $('html').attr('dir') === 'rtl';
|
27
|
-
},
|
28
24
|
/**
|
29
25
|
* Defines a Foundation plugin, adding it to the `Foundation` namespace and the list of plugins to initialize when reflowing.
|
30
26
|
* @param {Object} plugin - The constructor of the plugin.
|
@@ -51,7 +47,7 @@ var Foundation = {
|
|
51
47
|
*/
|
52
48
|
registerPlugin: function(plugin, name){
|
53
49
|
var pluginName = name ? hyphenate(name) : functionName(plugin.constructor).toLowerCase();
|
54
|
-
plugin.uuid =
|
50
|
+
plugin.uuid = GetYoDigits(6, pluginName);
|
55
51
|
|
56
52
|
if(!plugin.$element.attr(`data-${pluginName}`)){ plugin.$element.attr(`data-${pluginName}`, plugin.uuid); }
|
57
53
|
if(!plugin.$element.data('zfPlugin')){ plugin.$element.data('zfPlugin', plugin); }
|
@@ -129,18 +125,6 @@ var Foundation = {
|
|
129
125
|
}
|
130
126
|
},
|
131
127
|
|
132
|
-
/**
|
133
|
-
* returns a random base-36 uid with namespacing
|
134
|
-
* @function
|
135
|
-
* @param {Number} length - number of random base-36 digits desired. Increase for more random strings.
|
136
|
-
* @param {String} namespace - name of plugin to be incorporated in uid, optional.
|
137
|
-
* @default {String} '' - if no plugin name is provided, nothing is appended to the uid.
|
138
|
-
* @returns {String} - unique id
|
139
|
-
*/
|
140
|
-
GetYoDigits: function(length, namespace){
|
141
|
-
length = length || 6;
|
142
|
-
return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1) + (namespace ? `-${namespace}` : '');
|
143
|
-
},
|
144
128
|
/**
|
145
129
|
* Initialize plugins on any elements within `elem` (and `elem` itself) that aren't already initialized.
|
146
130
|
* @param {Object} elem - jQuery object containing the element to check inside. Also checks the element itself, unless it's the `document` object.
|
@@ -194,29 +178,47 @@ var Foundation = {
|
|
194
178
|
});
|
195
179
|
},
|
196
180
|
getFnName: functionName,
|
197
|
-
transitionend: function($elem){
|
198
|
-
var transitions = {
|
199
|
-
'transition': 'transitionend',
|
200
|
-
'WebkitTransition': 'webkitTransitionEnd',
|
201
|
-
'MozTransition': 'transitionend',
|
202
|
-
'OTransition': 'otransitionend'
|
203
|
-
};
|
204
|
-
var elem = document.createElement('div'),
|
205
|
-
end;
|
206
181
|
|
207
|
-
|
208
|
-
|
209
|
-
|
182
|
+
addToJquery: function($) {
|
183
|
+
// TODO: consider not making this a jQuery function
|
184
|
+
// TODO: need way to reflow vs. re-initialize
|
185
|
+
/**
|
186
|
+
* The Foundation jQuery method.
|
187
|
+
* @param {String|Array} method - An action to perform on the current jQuery object.
|
188
|
+
*/
|
189
|
+
var foundation = function(method) {
|
190
|
+
var type = typeof method,
|
191
|
+
$noJS = $('.no-js');
|
192
|
+
|
193
|
+
if($noJS.length){
|
194
|
+
$noJS.removeClass('no-js');
|
210
195
|
}
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
196
|
+
|
197
|
+
if(type === 'undefined'){//needs to initialize the Foundation object, or an individual plugin.
|
198
|
+
MediaQuery._init();
|
199
|
+
Foundation.reflow(this);
|
200
|
+
}else if(type === 'string'){//an individual method to invoke on a plugin or group of plugins
|
201
|
+
var args = Array.prototype.slice.call(arguments, 1);//collect all the arguments, if necessary
|
202
|
+
var plugClass = this.data('zfPlugin');//determine the class of plugin
|
203
|
+
|
204
|
+
if(plugClass !== undefined && plugClass[method] !== undefined){//make sure both the class and method exist
|
205
|
+
if(this.length === 1){//if there's only one, call it directly.
|
206
|
+
plugClass[method].apply(plugClass, args);
|
207
|
+
}else{
|
208
|
+
this.each(function(i, el){//otherwise loop through the jQuery collection and invoke the method on each
|
209
|
+
plugClass[method].apply($(el).data('zfPlugin'), args);
|
210
|
+
});
|
211
|
+
}
|
212
|
+
}else{//error for no class or no method
|
213
|
+
throw new ReferenceError("We're sorry, '" + method + "' is not an available method for " + (plugClass ? functionName(plugClass) : 'this element') + '.');
|
214
|
+
}
|
215
|
+
}else{//error for invalid argument type
|
216
|
+
throw new TypeError(`We're sorry, ${type} is not a valid parameter. You must use a string representing the method you wish to invoke.`);
|
217
|
+
}
|
218
|
+
return this;
|
219
|
+
};
|
220
|
+
$.fn.foundation = foundation;
|
221
|
+
return $;
|
220
222
|
}
|
221
223
|
};
|
222
224
|
|
@@ -244,50 +246,7 @@ Foundation.util = {
|
|
244
246
|
}
|
245
247
|
};
|
246
248
|
|
247
|
-
// TODO: consider not making this a jQuery function
|
248
|
-
// TODO: need way to reflow vs. re-initialize
|
249
|
-
/**
|
250
|
-
* The Foundation jQuery method.
|
251
|
-
* @param {String|Array} method - An action to perform on the current jQuery object.
|
252
|
-
*/
|
253
|
-
var foundation = function(method) {
|
254
|
-
var type = typeof method,
|
255
|
-
$meta = $('meta.foundation-mq'),
|
256
|
-
$noJS = $('.no-js');
|
257
|
-
|
258
|
-
if(!$meta.length){
|
259
|
-
$('<meta class="foundation-mq">').appendTo(document.head);
|
260
|
-
}
|
261
|
-
if($noJS.length){
|
262
|
-
$noJS.removeClass('no-js');
|
263
|
-
}
|
264
|
-
|
265
|
-
if(type === 'undefined'){//needs to initialize the Foundation object, or an individual plugin.
|
266
|
-
Foundation.MediaQuery._init();
|
267
|
-
Foundation.reflow(this);
|
268
|
-
}else if(type === 'string'){//an individual method to invoke on a plugin or group of plugins
|
269
|
-
var args = Array.prototype.slice.call(arguments, 1);//collect all the arguments, if necessary
|
270
|
-
var plugClass = this.data('zfPlugin');//determine the class of plugin
|
271
|
-
|
272
|
-
if(plugClass !== undefined && plugClass[method] !== undefined){//make sure both the class and method exist
|
273
|
-
if(this.length === 1){//if there's only one, call it directly.
|
274
|
-
plugClass[method].apply(plugClass, args);
|
275
|
-
}else{
|
276
|
-
this.each(function(i, el){//otherwise loop through the jQuery collection and invoke the method on each
|
277
|
-
plugClass[method].apply($(el).data('zfPlugin'), args);
|
278
|
-
});
|
279
|
-
}
|
280
|
-
}else{//error for no class or no method
|
281
|
-
throw new ReferenceError("We're sorry, '" + method + "' is not an available method for " + (plugClass ? functionName(plugClass) : 'this element') + '.');
|
282
|
-
}
|
283
|
-
}else{//error for invalid argument type
|
284
|
-
throw new TypeError(`We're sorry, ${type} is not a valid parameter. You must use a string representing the method you wish to invoke.`);
|
285
|
-
}
|
286
|
-
return this;
|
287
|
-
};
|
288
|
-
|
289
249
|
window.Foundation = Foundation;
|
290
|
-
$.fn.foundation = foundation;
|
291
250
|
|
292
251
|
// Polyfill for requestAnimationFrame
|
293
252
|
(function() {
|
@@ -375,4 +334,4 @@ function hyphenate(str) {
|
|
375
334
|
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
376
335
|
}
|
377
336
|
|
378
|
-
}
|
337
|
+
export {Foundation};
|
@@ -1,32 +1,38 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
|
-
|
3
|
+
import $ from 'jquery';
|
4
|
+
import { Keyboard } from './foundation.util.keyboard';
|
5
|
+
import { Nest } from './foundation.util.nest';
|
6
|
+
import { GetYoDigits, transitionend } from './foundation.util.core';
|
7
|
+
import { Box } from './foundation.util.box';
|
8
|
+
import { Plugin } from './foundation.plugin';
|
4
9
|
|
5
10
|
/**
|
6
11
|
* Drilldown module.
|
7
12
|
* @module foundation.drilldown
|
8
13
|
* @requires foundation.util.keyboard
|
9
|
-
* @requires foundation.util.motion
|
10
14
|
* @requires foundation.util.nest
|
15
|
+
* @requires foundation.util.box
|
11
16
|
*/
|
12
17
|
|
13
|
-
class Drilldown {
|
18
|
+
class Drilldown extends Plugin {
|
14
19
|
/**
|
15
20
|
* Creates a new instance of a drilldown menu.
|
16
21
|
* @class
|
22
|
+
* @name Drilldown
|
17
23
|
* @param {jQuery} element - jQuery object to make into an accordion menu.
|
18
24
|
* @param {Object} options - Overrides to the default plugin settings.
|
19
25
|
*/
|
20
|
-
|
26
|
+
_setup(element, options) {
|
21
27
|
this.$element = element;
|
22
28
|
this.options = $.extend({}, Drilldown.defaults, this.$element.data(), options);
|
29
|
+
this.className = 'Drilldown'; // ie9 back compat
|
23
30
|
|
24
|
-
|
31
|
+
Nest.Feather(this.$element, 'drilldown');
|
25
32
|
|
26
33
|
this._init();
|
27
34
|
|
28
|
-
|
29
|
-
Foundation.Keyboard.register('Drilldown', {
|
35
|
+
Keyboard.register('Drilldown', {
|
30
36
|
'ENTER': 'open',
|
31
37
|
'SPACE': 'open',
|
32
38
|
'ARROW_RIGHT': 'next',
|
@@ -44,10 +50,18 @@ class Drilldown {
|
|
44
50
|
* @private
|
45
51
|
*/
|
46
52
|
_init() {
|
53
|
+
if(this.options.autoApplyClass) {
|
54
|
+
this.$element.addClass('drilldown');
|
55
|
+
}
|
56
|
+
|
57
|
+
this.$element.attr({
|
58
|
+
'role': 'tree',
|
59
|
+
'aria-multiselectable': false
|
60
|
+
});
|
47
61
|
this.$submenuAnchors = this.$element.find('li.is-drilldown-submenu-parent').children('a');
|
48
|
-
this.$submenus = this.$submenuAnchors.parent('li').children('[data-submenu]');
|
49
|
-
this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', '
|
50
|
-
this.$element.attr('data-mutate', (this.$element.attr('data-drilldown') ||
|
62
|
+
this.$submenus = this.$submenuAnchors.parent('li').children('[data-submenu]').attr('role', 'group');
|
63
|
+
this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'treeitem').find('a');
|
64
|
+
this.$element.attr('data-mutate', (this.$element.attr('data-drilldown') || GetYoDigits(6, 'drilldown')));
|
51
65
|
|
52
66
|
this._prepareMenu();
|
53
67
|
this._registerEvents();
|
@@ -78,7 +92,7 @@ class Drilldown {
|
|
78
92
|
.attr({
|
79
93
|
'aria-hidden': true,
|
80
94
|
'tabindex': 0,
|
81
|
-
'role': '
|
95
|
+
'role': 'group'
|
82
96
|
});
|
83
97
|
_this._events($link);
|
84
98
|
});
|
@@ -153,7 +167,6 @@ class Drilldown {
|
|
153
167
|
});
|
154
168
|
}
|
155
169
|
});
|
156
|
-
this.$element.on('mutateme.zf.trigger', this._resize.bind(this));
|
157
170
|
}
|
158
171
|
|
159
172
|
/**
|
@@ -166,6 +179,7 @@ class Drilldown {
|
|
166
179
|
this._bindHandler = this._scrollTop.bind(this);
|
167
180
|
this.$element.on('open.zf.drilldown hide.zf.drilldown closed.zf.drilldown',this._bindHandler);
|
168
181
|
}
|
182
|
+
this.$element.on('mutateme.zf.trigger', this._resize.bind(this));
|
169
183
|
}
|
170
184
|
|
171
185
|
/**
|
@@ -176,7 +190,7 @@ class Drilldown {
|
|
176
190
|
_scrollTop() {
|
177
191
|
var _this = this;
|
178
192
|
var $scrollTopElement = _this.options.scrollTopElement!=''?$(_this.options.scrollTopElement):_this.$element,
|
179
|
-
scrollPos = parseInt($scrollTopElement.offset().top+_this.options.scrollTopOffset);
|
193
|
+
scrollPos = parseInt($scrollTopElement.offset().top+_this.options.scrollTopOffset, 10);
|
180
194
|
$('html, body').stop(true).animate({ scrollTop: scrollPos }, _this.options.animationDuration, _this.options.animationEasing,function(){
|
181
195
|
/**
|
182
196
|
* Fires after the menu has scrolled
|
@@ -207,11 +221,11 @@ class Drilldown {
|
|
207
221
|
}
|
208
222
|
});
|
209
223
|
|
210
|
-
|
224
|
+
Keyboard.handleKey(e, 'Drilldown', {
|
211
225
|
next: function() {
|
212
226
|
if ($element.is(_this.$submenuAnchors)) {
|
213
227
|
_this._show($element.parent('li'));
|
214
|
-
$element.parent('li').one(
|
228
|
+
$element.parent('li').one(transitionend($element), function(){
|
215
229
|
$element.parent('li').find('ul li a').filter(_this.$menuItems).first().focus();
|
216
230
|
});
|
217
231
|
return true;
|
@@ -219,7 +233,7 @@ class Drilldown {
|
|
219
233
|
},
|
220
234
|
previous: function() {
|
221
235
|
_this._hide($element.parent('li').parent('ul'));
|
222
|
-
$element.parent('li').parent('ul').one(
|
236
|
+
$element.parent('li').parent('ul').one(transitionend($element), function(){
|
223
237
|
setTimeout(function() {
|
224
238
|
$element.parent('li').parent('ul').parent('li').children('a').first().focus();
|
225
239
|
}, 1);
|
@@ -246,7 +260,7 @@ class Drilldown {
|
|
246
260
|
open: function() {
|
247
261
|
if (!$element.is(_this.$menuItems)) { // not menu item means back button
|
248
262
|
_this._hide($element.parent('li').parent('ul'));
|
249
|
-
$element.parent('li').parent('ul').one(
|
263
|
+
$element.parent('li').parent('ul').one(transitionend($element), function(){
|
250
264
|
setTimeout(function() {
|
251
265
|
$element.parent('li').parent('ul').parent('li').children('a').first().focus();
|
252
266
|
}, 1);
|
@@ -254,7 +268,7 @@ class Drilldown {
|
|
254
268
|
return true;
|
255
269
|
} else if ($element.is(_this.$submenuAnchors)) {
|
256
270
|
_this._show($element.parent('li'));
|
257
|
-
$element.parent('li').one(
|
271
|
+
$element.parent('li').one(transitionend($element), function(){
|
258
272
|
$element.parent('li').find('ul li a').filter(_this.$menuItems).first().focus();
|
259
273
|
});
|
260
274
|
return true;
|
@@ -278,7 +292,7 @@ class Drilldown {
|
|
278
292
|
_hideAll() {
|
279
293
|
var $elem = this.$element.find('.is-drilldown-submenu.is-active').addClass('is-closing');
|
280
294
|
if(this.options.autoHeight) this.$wrapper.css({height:$elem.parent().closest('ul').data('calcHeight')});
|
281
|
-
$elem.one(
|
295
|
+
$elem.one(transitionend($elem), function(e){
|
282
296
|
$elem.removeClass('is-active is-closing');
|
283
297
|
});
|
284
298
|
/**
|
@@ -357,7 +371,7 @@ class Drilldown {
|
|
357
371
|
$elem.parent('li').attr('aria-expanded', false);
|
358
372
|
$elem.attr('aria-hidden', true).addClass('is-closing')
|
359
373
|
$elem.addClass('is-closing')
|
360
|
-
.one(
|
374
|
+
.one(transitionend($elem), function(){
|
361
375
|
$elem.removeClass('is-active is-closing');
|
362
376
|
$elem.blur().addClass('invisible');
|
363
377
|
});
|
@@ -378,7 +392,7 @@ class Drilldown {
|
|
378
392
|
var maxHeight = 0, result = {}, _this = this;
|
379
393
|
this.$submenus.add(this.$element).each(function(){
|
380
394
|
var numOfElems = $(this).children('li').length;
|
381
|
-
var height =
|
395
|
+
var height = Box.GetDimensions(this).height;
|
382
396
|
maxHeight = height > maxHeight ? height : maxHeight;
|
383
397
|
if(_this.options.autoHeight) {
|
384
398
|
$(this).data('calcHeight',height);
|
@@ -397,11 +411,11 @@ class Drilldown {
|
|
397
411
|
* Destroys the Drilldown Menu
|
398
412
|
* @function
|
399
413
|
*/
|
400
|
-
|
414
|
+
_destroy() {
|
401
415
|
if(this.options.scrollTop) this.$element.off('.zf.drilldown',this._bindHandler);
|
402
416
|
this._hideAll();
|
403
417
|
this.$element.off('mutateme.zf.trigger');
|
404
|
-
|
418
|
+
Nest.Burn(this.$element, 'drilldown');
|
405
419
|
this.$element.unwrap()
|
406
420
|
.find('.js-drilldown-back, .is-submenu-parent-item').remove()
|
407
421
|
.end().find('.is-active, .is-closing, .is-drilldown-submenu').removeClass('is-active is-closing is-drilldown-submenu')
|
@@ -410,7 +424,7 @@ class Drilldown {
|
|
410
424
|
$(this).off('.zf.drilldown');
|
411
425
|
});
|
412
426
|
|
413
|
-
this.$submenus.removeClass('drilldown-submenu-cover-previous');
|
427
|
+
this.$submenus.removeClass('drilldown-submenu-cover-previous invisible');
|
414
428
|
|
415
429
|
this.$element.find('a').each(function(){
|
416
430
|
var $link = $(this);
|
@@ -419,11 +433,18 @@ class Drilldown {
|
|
419
433
|
$link.attr('href', $link.data('savedHref')).removeData('savedHref');
|
420
434
|
}else{ return; }
|
421
435
|
});
|
422
|
-
Foundation.unregisterPlugin(this);
|
423
436
|
};
|
424
437
|
}
|
425
438
|
|
426
439
|
Drilldown.defaults = {
|
440
|
+
/**
|
441
|
+
* Drilldowns depend on styles in order to function properly; in the default build of Foundation these are
|
442
|
+
* on the `drilldown` class. This option auto-applies this class to the drilldown upon initialization.
|
443
|
+
* @option
|
444
|
+
* @type {boolian}
|
445
|
+
* @default true
|
446
|
+
*/
|
447
|
+
autoApplyClass: true,
|
427
448
|
/**
|
428
449
|
* Markup used for JS generated back button. Prepended or appended (see backButtonPosition) to submenu lists and deleted on `destroy` method, 'js-drilldown-back' class required. Remove the backslash (`\`) if copy and pasting.
|
429
450
|
* @option
|
@@ -512,7 +533,4 @@ Drilldown.defaults = {
|
|
512
533
|
// holdOpen: false
|
513
534
|
};
|
514
535
|
|
515
|
-
|
516
|
-
Foundation.plugin(Drilldown, 'Drilldown');
|
517
|
-
|
518
|
-
}(jQuery);
|
536
|
+
export {Drilldown};
|