foundation-rails 6.4.1.0 → 6.4.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +2 -1
- data/Rakefile +5 -6
- data/lib/foundation/rails/version.rb +1 -1
- data/vendor/assets/js/foundation.abide.js +781 -0
- data/vendor/assets/js/foundation.accordion.js +511 -0
- data/vendor/assets/js/foundation.accordionMenu.js +527 -0
- data/vendor/assets/js/foundation.core.js +860 -0
- data/vendor/assets/js/foundation.drilldown.js +759 -0
- data/vendor/assets/js/foundation.dropdown.js +1131 -0
- data/vendor/assets/js/foundation.dropdownMenu.js +678 -0
- data/vendor/assets/js/foundation.equalizer.js +542 -0
- data/vendor/assets/js/foundation.interchange.js +399 -0
- data/vendor/assets/js/{foundation.js.es6 → foundation.js} +11 -12
- data/vendor/assets/js/foundation.magellan.js +449 -0
- data/vendor/assets/js/foundation.offcanvas.js +1052 -0
- data/vendor/assets/js/foundation.orbit.js +767 -0
- data/vendor/assets/js/foundation.responsiveAccordionTabs.js +440 -0
- data/vendor/assets/js/foundation.responsiveMenu.js +362 -0
- data/vendor/assets/js/foundation.responsiveToggle.js +336 -0
- data/vendor/assets/js/foundation.reveal.js +1066 -0
- data/vendor/assets/js/foundation.slider.js +1236 -0
- data/vendor/assets/js/foundation.smoothScroll.js +303 -0
- data/vendor/assets/js/foundation.sticky.js +1001 -0
- data/vendor/assets/js/foundation.tabs.js +678 -0
- data/vendor/assets/js/foundation.toggler.js +602 -0
- data/vendor/assets/js/foundation.tooltip.js +1195 -0
- data/vendor/assets/js/{foundation.util.box.js.es6 → foundation.util.box.js} +154 -41
- data/vendor/assets/js/foundation.util.imageLoader.js +163 -0
- data/vendor/assets/js/foundation.util.keyboard.js +298 -0
- data/vendor/assets/js/foundation.util.mediaQuery.js +353 -0
- data/vendor/assets/js/foundation.util.motion.js +231 -0
- data/vendor/assets/js/foundation.util.nest.js +181 -0
- data/vendor/assets/js/foundation.util.timer.js +170 -0
- data/vendor/assets/js/foundation.util.timerAndImageLoader.js +90 -0
- data/vendor/assets/js/foundation.util.touch.js +275 -0
- data/vendor/assets/js/foundation.util.triggers.js +399 -0
- data/vendor/assets/js/foundation.zf.responsiveAccordionTabs.js +262 -0
- metadata +37 -71
- data/vendor/assets/js/entries/foundation-plugins.js +0 -25
- data/vendor/assets/js/entries/foundation.js +0 -101
- data/vendor/assets/js/entries/plugins/foundation.abide.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.accordion.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.accordionMenu.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.core.js +0 -21
- data/vendor/assets/js/entries/plugins/foundation.drilldown.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.dropdown.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.dropdownMenu.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.equalizer.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.interchange.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.magellan.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.offcanvas.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.orbit.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.responsiveAccordionTabs.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.responsiveMenu.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.responsiveToggle.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.reveal.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.slider.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.smoothScroll.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.sticky.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.tabs.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.toggler.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.tooltip.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.util.box.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.util.imageLoader.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.util.keyboard.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.util.mediaQuery.js +0 -4
- data/vendor/assets/js/entries/plugins/foundation.util.motion.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.util.nest.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.util.timer.js +0 -5
- data/vendor/assets/js/entries/plugins/foundation.util.touch.js +0 -7
- data/vendor/assets/js/entries/plugins/foundation.util.triggers.js +0 -5
- data/vendor/assets/js/foundation.abide.js.es6 +0 -587
- data/vendor/assets/js/foundation.accordion.js.es6 +0 -329
- data/vendor/assets/js/foundation.accordionMenu.js.es6 +0 -328
- data/vendor/assets/js/foundation.core.js.es6 +0 -337
- data/vendor/assets/js/foundation.drilldown.js.es6 +0 -536
- data/vendor/assets/js/foundation.dropdown.js.es6 +0 -394
- data/vendor/assets/js/foundation.dropdownMenu.js.es6 +0 -458
- data/vendor/assets/js/foundation.equalizer.js.es6 +0 -318
- data/vendor/assets/js/foundation.interchange.js.es6 +0 -210
- data/vendor/assets/js/foundation.magellan.js.es6 +0 -257
- data/vendor/assets/js/foundation.offcanvas.js.es6 +0 -546
- data/vendor/assets/js/foundation.orbit.js.es6 +0 -531
- data/vendor/assets/js/foundation.plugin.js.es6 +0 -54
- data/vendor/assets/js/foundation.positionable.js.es6 +0 -206
- data/vendor/assets/js/foundation.responsiveAccordionTabs.js.es6 +0 -243
- data/vendor/assets/js/foundation.responsiveMenu.js.es6 +0 -155
- data/vendor/assets/js/foundation.responsiveToggle.js.es6 +0 -156
- data/vendor/assets/js/foundation.reveal.js.es6 +0 -585
- data/vendor/assets/js/foundation.slider.js.es6 +0 -712
- data/vendor/assets/js/foundation.smoothScroll.js.es6 +0 -135
- data/vendor/assets/js/foundation.sticky.js.es6 +0 -507
- data/vendor/assets/js/foundation.tabs.js.es6 +0 -498
- data/vendor/assets/js/foundation.toggler.js.es6 +0 -150
- data/vendor/assets/js/foundation.tooltip.js.es6 +0 -462
- data/vendor/assets/js/foundation.util.core.js.es6 +0 -52
- data/vendor/assets/js/foundation.util.imageLoader.js.es6 +0 -45
- data/vendor/assets/js/foundation.util.keyboard.js.es6 +0 -162
- data/vendor/assets/js/foundation.util.mediaQuery.js.es6 +0 -234
- data/vendor/assets/js/foundation.util.motion.js.es6 +0 -104
- data/vendor/assets/js/foundation.util.nest.js.es6 +0 -67
- data/vendor/assets/js/foundation.util.timer.js.es6 +0 -48
- data/vendor/assets/js/foundation.util.touch.js.es6 +0 -149
- data/vendor/assets/js/foundation.util.triggers.js.es6 +0 -268
@@ -1,329 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
import $ from 'jquery';
|
4
|
-
import { Keyboard } from './foundation.util.keyboard';
|
5
|
-
import { GetYoDigits } from './foundation.util.core';
|
6
|
-
import { Plugin } from './foundation.plugin';
|
7
|
-
|
8
|
-
/**
|
9
|
-
* Accordion module.
|
10
|
-
* @module foundation.accordion
|
11
|
-
* @requires foundation.util.keyboard
|
12
|
-
*/
|
13
|
-
|
14
|
-
class Accordion extends Plugin {
|
15
|
-
/**
|
16
|
-
* Creates a new instance of an accordion.
|
17
|
-
* @class
|
18
|
-
* @name Accordion
|
19
|
-
* @fires Accordion#init
|
20
|
-
* @param {jQuery} element - jQuery object to make into an accordion.
|
21
|
-
* @param {Object} options - a plain object with settings to override the default options.
|
22
|
-
*/
|
23
|
-
_setup(element, options) {
|
24
|
-
this.$element = element;
|
25
|
-
this.options = $.extend({}, Accordion.defaults, this.$element.data(), options);
|
26
|
-
|
27
|
-
this.className = 'Accordion'; // ie9 back compat
|
28
|
-
this._init();
|
29
|
-
|
30
|
-
Keyboard.register('Accordion', {
|
31
|
-
'ENTER': 'toggle',
|
32
|
-
'SPACE': 'toggle',
|
33
|
-
'ARROW_DOWN': 'next',
|
34
|
-
'ARROW_UP': 'previous'
|
35
|
-
});
|
36
|
-
}
|
37
|
-
|
38
|
-
/**
|
39
|
-
* Initializes the accordion by animating the preset active pane(s).
|
40
|
-
* @private
|
41
|
-
*/
|
42
|
-
_init() {
|
43
|
-
this.$element.attr('role', 'tablist');
|
44
|
-
this.$tabs = this.$element.children('[data-accordion-item]');
|
45
|
-
|
46
|
-
this.$tabs.each(function(idx, el) {
|
47
|
-
var $el = $(el),
|
48
|
-
$content = $el.children('[data-tab-content]'),
|
49
|
-
id = $content[0].id || GetYoDigits(6, 'accordion'),
|
50
|
-
linkId = el.id || `${id}-label`;
|
51
|
-
|
52
|
-
$el.find('a:first').attr({
|
53
|
-
'aria-controls': id,
|
54
|
-
'role': 'tab',
|
55
|
-
'id': linkId,
|
56
|
-
'aria-expanded': false,
|
57
|
-
'aria-selected': false
|
58
|
-
});
|
59
|
-
|
60
|
-
$content.attr({'role': 'tabpanel', 'aria-labelledby': linkId, 'aria-hidden': true, 'id': id});
|
61
|
-
});
|
62
|
-
var $initActive = this.$element.find('.is-active').children('[data-tab-content]');
|
63
|
-
this.firstTimeInit = true;
|
64
|
-
if($initActive.length){
|
65
|
-
this.down($initActive, this.firstTimeInit);
|
66
|
-
this.firstTimeInit = false;
|
67
|
-
}
|
68
|
-
|
69
|
-
this._checkDeepLink = () => {
|
70
|
-
var anchor = window.location.hash;
|
71
|
-
//need a hash and a relevant anchor in this tabset
|
72
|
-
if(anchor.length) {
|
73
|
-
var $link = this.$element.find('[href$="'+anchor+'"]'),
|
74
|
-
$anchor = $(anchor);
|
75
|
-
|
76
|
-
if ($link.length && $anchor) {
|
77
|
-
if (!$link.parent('[data-accordion-item]').hasClass('is-active')) {
|
78
|
-
this.down($anchor, this.firstTimeInit);
|
79
|
-
this.firstTimeInit = false;
|
80
|
-
};
|
81
|
-
|
82
|
-
//roll up a little to show the titles
|
83
|
-
if (this.options.deepLinkSmudge) {
|
84
|
-
var _this = this;
|
85
|
-
$(window).load(function() {
|
86
|
-
var offset = _this.$element.offset();
|
87
|
-
$('html, body').animate({ scrollTop: offset.top }, _this.options.deepLinkSmudgeDelay);
|
88
|
-
});
|
89
|
-
}
|
90
|
-
|
91
|
-
/**
|
92
|
-
* Fires when the zplugin has deeplinked at pageload
|
93
|
-
* @event Accordion#deeplink
|
94
|
-
*/
|
95
|
-
this.$element.trigger('deeplink.zf.accordion', [$link, $anchor]);
|
96
|
-
}
|
97
|
-
}
|
98
|
-
}
|
99
|
-
|
100
|
-
//use browser to open a tab, if it exists in this tabset
|
101
|
-
if (this.options.deepLink) {
|
102
|
-
this._checkDeepLink();
|
103
|
-
}
|
104
|
-
|
105
|
-
this._events();
|
106
|
-
}
|
107
|
-
|
108
|
-
/**
|
109
|
-
* Adds event handlers for items within the accordion.
|
110
|
-
* @private
|
111
|
-
*/
|
112
|
-
_events() {
|
113
|
-
var _this = this;
|
114
|
-
|
115
|
-
this.$tabs.each(function() {
|
116
|
-
var $elem = $(this);
|
117
|
-
var $tabContent = $elem.children('[data-tab-content]');
|
118
|
-
if ($tabContent.length) {
|
119
|
-
$elem.children('a').off('click.zf.accordion keydown.zf.accordion')
|
120
|
-
.on('click.zf.accordion', function(e) {
|
121
|
-
e.preventDefault();
|
122
|
-
_this.toggle($tabContent);
|
123
|
-
}).on('keydown.zf.accordion', function(e){
|
124
|
-
Keyboard.handleKey(e, 'Accordion', {
|
125
|
-
toggle: function() {
|
126
|
-
_this.toggle($tabContent);
|
127
|
-
},
|
128
|
-
next: function() {
|
129
|
-
var $a = $elem.next().find('a').focus();
|
130
|
-
if (!_this.options.multiExpand) {
|
131
|
-
$a.trigger('click.zf.accordion')
|
132
|
-
}
|
133
|
-
},
|
134
|
-
previous: function() {
|
135
|
-
var $a = $elem.prev().find('a').focus();
|
136
|
-
if (!_this.options.multiExpand) {
|
137
|
-
$a.trigger('click.zf.accordion')
|
138
|
-
}
|
139
|
-
},
|
140
|
-
handled: function() {
|
141
|
-
e.preventDefault();
|
142
|
-
e.stopPropagation();
|
143
|
-
}
|
144
|
-
});
|
145
|
-
});
|
146
|
-
}
|
147
|
-
});
|
148
|
-
if(this.options.deepLink) {
|
149
|
-
$(window).on('popstate', this._checkDeepLink);
|
150
|
-
}
|
151
|
-
}
|
152
|
-
|
153
|
-
/**
|
154
|
-
* Toggles the selected content pane's open/close state.
|
155
|
-
* @param {jQuery} $target - jQuery object of the pane to toggle (`.accordion-content`).
|
156
|
-
* @function
|
157
|
-
*/
|
158
|
-
toggle($target) {
|
159
|
-
if ($target.closest('[data-accordion]').is('[disabled]')) {
|
160
|
-
console.info('Cannot toggle an accordion that is disabled.');
|
161
|
-
return;
|
162
|
-
}
|
163
|
-
if($target.parent().hasClass('is-active')) {
|
164
|
-
this.up($target);
|
165
|
-
} else {
|
166
|
-
this.down($target);
|
167
|
-
}
|
168
|
-
//either replace or update browser history
|
169
|
-
if (this.options.deepLink) {
|
170
|
-
var anchor = $target.prev('a').attr('href');
|
171
|
-
|
172
|
-
if (this.options.updateHistory) {
|
173
|
-
history.pushState({}, '', anchor);
|
174
|
-
} else {
|
175
|
-
history.replaceState({}, '', anchor);
|
176
|
-
}
|
177
|
-
}
|
178
|
-
}
|
179
|
-
|
180
|
-
/**
|
181
|
-
* Opens the accordion tab defined by `$target`.
|
182
|
-
* @param {jQuery} $target - Accordion pane to open (`.accordion-content`).
|
183
|
-
* @param {Boolean} firstTime - flag to determine if reflow should happen.
|
184
|
-
* @fires Accordion#down
|
185
|
-
* @function
|
186
|
-
*/
|
187
|
-
down($target, firstTime) {
|
188
|
-
/**
|
189
|
-
* checking firstTime allows for initial render of the accordion
|
190
|
-
* to render preset is-active panes.
|
191
|
-
*/
|
192
|
-
if ($target.closest('[data-accordion]').is('[disabled]') && !firstTime) {
|
193
|
-
console.info('Cannot call down on an accordion that is disabled.');
|
194
|
-
return;
|
195
|
-
}
|
196
|
-
$target
|
197
|
-
.attr('aria-hidden', false)
|
198
|
-
.parent('[data-tab-content]')
|
199
|
-
.addBack()
|
200
|
-
.parent().addClass('is-active');
|
201
|
-
|
202
|
-
if (!this.options.multiExpand && !firstTime) {
|
203
|
-
var $currentActive = this.$element.children('.is-active').children('[data-tab-content]');
|
204
|
-
if ($currentActive.length) {
|
205
|
-
this.up($currentActive.not($target));
|
206
|
-
}
|
207
|
-
}
|
208
|
-
|
209
|
-
$target.slideDown(this.options.slideSpeed, () => {
|
210
|
-
/**
|
211
|
-
* Fires when the tab is done opening.
|
212
|
-
* @event Accordion#down
|
213
|
-
*/
|
214
|
-
this.$element.trigger('down.zf.accordion', [$target]);
|
215
|
-
});
|
216
|
-
|
217
|
-
$(`#${$target.attr('aria-labelledby')}`).attr({
|
218
|
-
'aria-expanded': true,
|
219
|
-
'aria-selected': true
|
220
|
-
});
|
221
|
-
}
|
222
|
-
|
223
|
-
/**
|
224
|
-
* Closes the tab defined by `$target`.
|
225
|
-
* @param {jQuery} $target - Accordion tab to close (`.accordion-content`).
|
226
|
-
* @fires Accordion#up
|
227
|
-
* @function
|
228
|
-
*/
|
229
|
-
up($target) {
|
230
|
-
if ($target.closest('[data-accordion]').is('[disabled]')) {
|
231
|
-
console.info('Cannot call up on an accordion that is disabled.');
|
232
|
-
return;
|
233
|
-
}
|
234
|
-
|
235
|
-
var $aunts = $target.parent().siblings(),
|
236
|
-
_this = this;
|
237
|
-
|
238
|
-
if((!this.options.allowAllClosed && !$aunts.hasClass('is-active')) || !$target.parent().hasClass('is-active')) {
|
239
|
-
return;
|
240
|
-
}
|
241
|
-
|
242
|
-
$target.slideUp(_this.options.slideSpeed, function () {
|
243
|
-
/**
|
244
|
-
* Fires when the tab is done collapsing up.
|
245
|
-
* @event Accordion#up
|
246
|
-
*/
|
247
|
-
_this.$element.trigger('up.zf.accordion', [$target]);
|
248
|
-
});
|
249
|
-
|
250
|
-
$target.attr('aria-hidden', true)
|
251
|
-
.parent().removeClass('is-active');
|
252
|
-
|
253
|
-
$(`#${$target.attr('aria-labelledby')}`).attr({
|
254
|
-
'aria-expanded': false,
|
255
|
-
'aria-selected': false
|
256
|
-
});
|
257
|
-
}
|
258
|
-
|
259
|
-
/**
|
260
|
-
* Destroys an instance of an accordion.
|
261
|
-
* @fires Accordion#destroyed
|
262
|
-
* @function
|
263
|
-
*/
|
264
|
-
_destroy() {
|
265
|
-
this.$element.find('[data-tab-content]').stop(true).slideUp(0).css('display', '');
|
266
|
-
this.$element.find('a').off('.zf.accordion');
|
267
|
-
if(this.options.deepLink) {
|
268
|
-
$(window).off('popstate', this._checkDeepLink);
|
269
|
-
}
|
270
|
-
|
271
|
-
}
|
272
|
-
}
|
273
|
-
|
274
|
-
Accordion.defaults = {
|
275
|
-
/**
|
276
|
-
* Amount of time to animate the opening of an accordion pane.
|
277
|
-
* @option
|
278
|
-
* @type {number}
|
279
|
-
* @default 250
|
280
|
-
*/
|
281
|
-
slideSpeed: 250,
|
282
|
-
/**
|
283
|
-
* Allow the accordion to have multiple open panes.
|
284
|
-
* @option
|
285
|
-
* @type {boolean}
|
286
|
-
* @default false
|
287
|
-
*/
|
288
|
-
multiExpand: false,
|
289
|
-
/**
|
290
|
-
* Allow the accordion to close all panes.
|
291
|
-
* @option
|
292
|
-
* @type {boolean}
|
293
|
-
* @default false
|
294
|
-
*/
|
295
|
-
allowAllClosed: false,
|
296
|
-
/**
|
297
|
-
* Allows the window to scroll to content of pane specified by hash anchor
|
298
|
-
* @option
|
299
|
-
* @type {boolean}
|
300
|
-
* @default false
|
301
|
-
*/
|
302
|
-
deepLink: false,
|
303
|
-
|
304
|
-
/**
|
305
|
-
* Adjust the deep link scroll to make sure the top of the accordion panel is visible
|
306
|
-
* @option
|
307
|
-
* @type {boolean}
|
308
|
-
* @default false
|
309
|
-
*/
|
310
|
-
deepLinkSmudge: false,
|
311
|
-
|
312
|
-
/**
|
313
|
-
* Animation time (ms) for the deep link adjustment
|
314
|
-
* @option
|
315
|
-
* @type {number}
|
316
|
-
* @default 300
|
317
|
-
*/
|
318
|
-
deepLinkSmudgeDelay: 300,
|
319
|
-
|
320
|
-
/**
|
321
|
-
* Update the browser history with the open accordion
|
322
|
-
* @option
|
323
|
-
* @type {boolean}
|
324
|
-
* @default false
|
325
|
-
*/
|
326
|
-
updateHistory: false
|
327
|
-
};
|
328
|
-
|
329
|
-
export {Accordion};
|
@@ -1,328 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
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';
|
9
|
-
|
10
|
-
/**
|
11
|
-
* AccordionMenu module.
|
12
|
-
* @module foundation.accordionMenu
|
13
|
-
* @requires foundation.util.keyboard
|
14
|
-
* @requires foundation.util.nest
|
15
|
-
*/
|
16
|
-
|
17
|
-
class AccordionMenu extends Plugin {
|
18
|
-
/**
|
19
|
-
* Creates a new instance of an accordion menu.
|
20
|
-
* @class
|
21
|
-
* @name AccordionMenu
|
22
|
-
* @fires AccordionMenu#init
|
23
|
-
* @param {jQuery} element - jQuery object to make into an accordion menu.
|
24
|
-
* @param {Object} options - Overrides to the default plugin settings.
|
25
|
-
*/
|
26
|
-
_setup(element, options) {
|
27
|
-
this.$element = element;
|
28
|
-
this.options = $.extend({}, AccordionMenu.defaults, this.$element.data(), options);
|
29
|
-
this.className = 'AccordionMenu'; // ie9 back compat
|
30
|
-
|
31
|
-
Nest.Feather(this.$element, 'accordion');
|
32
|
-
|
33
|
-
this._init();
|
34
|
-
|
35
|
-
Keyboard.register('AccordionMenu', {
|
36
|
-
'ENTER': 'toggle',
|
37
|
-
'SPACE': 'toggle',
|
38
|
-
'ARROW_RIGHT': 'open',
|
39
|
-
'ARROW_UP': 'up',
|
40
|
-
'ARROW_DOWN': 'down',
|
41
|
-
'ARROW_LEFT': 'close',
|
42
|
-
'ESCAPE': 'closeAll'
|
43
|
-
});
|
44
|
-
}
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
/**
|
49
|
-
* Initializes the accordion menu by hiding all nested menus.
|
50
|
-
* @private
|
51
|
-
*/
|
52
|
-
_init() {
|
53
|
-
var _this = this;
|
54
|
-
|
55
|
-
this.$element.find('[data-submenu]').not('.is-active').slideUp(0);//.find('a').css('padding-left', '1rem');
|
56
|
-
this.$element.attr({
|
57
|
-
'role': 'tree',
|
58
|
-
'aria-multiselectable': this.options.multiOpen
|
59
|
-
});
|
60
|
-
|
61
|
-
this.$menuLinks = this.$element.find('.is-accordion-submenu-parent');
|
62
|
-
this.$menuLinks.each(function(){
|
63
|
-
var linkId = this.id || GetYoDigits(6, 'acc-menu-link'),
|
64
|
-
$elem = $(this),
|
65
|
-
$sub = $elem.children('[data-submenu]'),
|
66
|
-
subId = $sub[0].id || GetYoDigits(6, 'acc-menu'),
|
67
|
-
isActive = $sub.hasClass('is-active');
|
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
|
-
}
|
80
|
-
$sub.attr({
|
81
|
-
'aria-labelledby': linkId,
|
82
|
-
'aria-hidden': !isActive,
|
83
|
-
'role': 'group',
|
84
|
-
'id': subId
|
85
|
-
});
|
86
|
-
});
|
87
|
-
this.$element.find('li').attr({
|
88
|
-
'role': 'treeitem'
|
89
|
-
});
|
90
|
-
var initPanes = this.$element.find('.is-active');
|
91
|
-
if(initPanes.length){
|
92
|
-
var _this = this;
|
93
|
-
initPanes.each(function(){
|
94
|
-
_this.down($(this));
|
95
|
-
});
|
96
|
-
}
|
97
|
-
this._events();
|
98
|
-
}
|
99
|
-
|
100
|
-
/**
|
101
|
-
* Adds event handlers for items within the menu.
|
102
|
-
* @private
|
103
|
-
*/
|
104
|
-
_events() {
|
105
|
-
var _this = this;
|
106
|
-
|
107
|
-
this.$element.find('li').each(function() {
|
108
|
-
var $submenu = $(this).children('[data-submenu]');
|
109
|
-
|
110
|
-
if ($submenu.length) {
|
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
|
-
}
|
121
|
-
}
|
122
|
-
}).on('keydown.zf.accordionmenu', function(e){
|
123
|
-
var $element = $(this),
|
124
|
-
$elements = $element.parent('ul').children('li'),
|
125
|
-
$prevElement,
|
126
|
-
$nextElement,
|
127
|
-
$target = $element.children('[data-submenu]');
|
128
|
-
|
129
|
-
$elements.each(function(i) {
|
130
|
-
if ($(this).is($element)) {
|
131
|
-
$prevElement = $elements.eq(Math.max(0, i-1)).find('a').first();
|
132
|
-
$nextElement = $elements.eq(Math.min(i+1, $elements.length-1)).find('a').first();
|
133
|
-
|
134
|
-
if ($(this).children('[data-submenu]:visible').length) { // has open sub menu
|
135
|
-
$nextElement = $element.find('li:first-child').find('a').first();
|
136
|
-
}
|
137
|
-
if ($(this).is(':first-child')) { // is first element of sub menu
|
138
|
-
$prevElement = $element.parents('li').first().find('a').first();
|
139
|
-
} else if ($prevElement.parents('li').first().children('[data-submenu]:visible').length) { // if previous element has open sub menu
|
140
|
-
$prevElement = $prevElement.parents('li').find('li:last-child').find('a').first();
|
141
|
-
}
|
142
|
-
if ($(this).is(':last-child')) { // is last element of sub menu
|
143
|
-
$nextElement = $element.parents('li').first().next('li').find('a').first();
|
144
|
-
}
|
145
|
-
|
146
|
-
return;
|
147
|
-
}
|
148
|
-
});
|
149
|
-
|
150
|
-
Keyboard.handleKey(e, 'AccordionMenu', {
|
151
|
-
open: function() {
|
152
|
-
if ($target.is(':hidden')) {
|
153
|
-
_this.down($target);
|
154
|
-
$target.find('li').first().find('a').first().focus();
|
155
|
-
}
|
156
|
-
},
|
157
|
-
close: function() {
|
158
|
-
if ($target.length && !$target.is(':hidden')) { // close active sub of this item
|
159
|
-
_this.up($target);
|
160
|
-
} else if ($element.parent('[data-submenu]').length) { // close currently open sub
|
161
|
-
_this.up($element.parent('[data-submenu]'));
|
162
|
-
$element.parents('li').first().find('a').first().focus();
|
163
|
-
}
|
164
|
-
},
|
165
|
-
up: function() {
|
166
|
-
$prevElement.focus();
|
167
|
-
return true;
|
168
|
-
},
|
169
|
-
down: function() {
|
170
|
-
$nextElement.focus();
|
171
|
-
return true;
|
172
|
-
},
|
173
|
-
toggle: function() {
|
174
|
-
if (_this.options.submenuToggle) {
|
175
|
-
return false;
|
176
|
-
}
|
177
|
-
if ($element.children('[data-submenu]').length) {
|
178
|
-
_this.toggle($element.children('[data-submenu]'));
|
179
|
-
return true;
|
180
|
-
}
|
181
|
-
},
|
182
|
-
closeAll: function() {
|
183
|
-
_this.hideAll();
|
184
|
-
},
|
185
|
-
handled: function(preventDefault) {
|
186
|
-
if (preventDefault) {
|
187
|
-
e.preventDefault();
|
188
|
-
}
|
189
|
-
e.stopImmediatePropagation();
|
190
|
-
}
|
191
|
-
});
|
192
|
-
});//.attr('tabindex', 0);
|
193
|
-
}
|
194
|
-
|
195
|
-
/**
|
196
|
-
* Closes all panes of the menu.
|
197
|
-
* @function
|
198
|
-
*/
|
199
|
-
hideAll() {
|
200
|
-
this.up(this.$element.find('[data-submenu]'));
|
201
|
-
}
|
202
|
-
|
203
|
-
/**
|
204
|
-
* Opens all panes of the menu.
|
205
|
-
* @function
|
206
|
-
*/
|
207
|
-
showAll() {
|
208
|
-
this.down(this.$element.find('[data-submenu]'));
|
209
|
-
}
|
210
|
-
|
211
|
-
/**
|
212
|
-
* Toggles the open/close state of a submenu.
|
213
|
-
* @function
|
214
|
-
* @param {jQuery} $target - the submenu to toggle
|
215
|
-
*/
|
216
|
-
toggle($target){
|
217
|
-
if(!$target.is(':animated')) {
|
218
|
-
if (!$target.is(':hidden')) {
|
219
|
-
this.up($target);
|
220
|
-
}
|
221
|
-
else {
|
222
|
-
this.down($target);
|
223
|
-
}
|
224
|
-
}
|
225
|
-
}
|
226
|
-
|
227
|
-
/**
|
228
|
-
* Opens the sub-menu defined by `$target`.
|
229
|
-
* @param {jQuery} $target - Sub-menu to open.
|
230
|
-
* @fires AccordionMenu#down
|
231
|
-
*/
|
232
|
-
down($target) {
|
233
|
-
var _this = this;
|
234
|
-
|
235
|
-
if(!this.options.multiOpen) {
|
236
|
-
this.up(this.$element.find('.is-active').not($target.parentsUntil(this.$element).add($target)));
|
237
|
-
}
|
238
|
-
|
239
|
-
$target.addClass('is-active').attr({'aria-hidden': false});
|
240
|
-
|
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
|
-
});
|
255
|
-
}
|
256
|
-
|
257
|
-
/**
|
258
|
-
* Closes the sub-menu defined by `$target`. All sub-menus inside the target will be closed as well.
|
259
|
-
* @param {jQuery} $target - Sub-menu to close.
|
260
|
-
* @fires AccordionMenu#up
|
261
|
-
*/
|
262
|
-
up($target) {
|
263
|
-
var _this = this;
|
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
|
-
});
|
271
|
-
|
272
|
-
var $menus = $target.find('[data-submenu]').slideUp(0).addBack().attr('aria-hidden', true);
|
273
|
-
|
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
|
-
}
|
280
|
-
}
|
281
|
-
|
282
|
-
/**
|
283
|
-
* Destroys an instance of accordion menu.
|
284
|
-
* @fires AccordionMenu#destroyed
|
285
|
-
*/
|
286
|
-
_destroy() {
|
287
|
-
this.$element.find('[data-submenu]').slideDown(0).css('display', '');
|
288
|
-
this.$element.find('a').off('click.zf.accordionMenu');
|
289
|
-
|
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');
|
296
|
-
}
|
297
|
-
}
|
298
|
-
|
299
|
-
AccordionMenu.defaults = {
|
300
|
-
/**
|
301
|
-
* Amount of time to animate the opening of a submenu in ms.
|
302
|
-
* @option
|
303
|
-
* @type {number}
|
304
|
-
* @default 250
|
305
|
-
*/
|
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',
|
319
|
-
/**
|
320
|
-
* Allow the menu to have multiple open panes.
|
321
|
-
* @option
|
322
|
-
* @type {boolean}
|
323
|
-
* @default true
|
324
|
-
*/
|
325
|
-
multiOpen: true
|
326
|
-
};
|
327
|
-
|
328
|
-
export {AccordionMenu};
|