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.
Files changed (139) hide show
  1. checksums.yaml +4 -4
  2. data/bower.json +3 -3
  3. data/lib/foundation/rails/version.rb +1 -1
  4. data/lib/generators/foundation/install_generator.rb +1 -1
  5. data/lib/generators/foundation/templates/_settings.scss +291 -48
  6. data/vendor/assets/js/entries/foundation-plugins.js +25 -0
  7. data/vendor/assets/js/entries/foundation.js +101 -0
  8. data/vendor/assets/js/entries/plugins/foundation.abide.js +4 -0
  9. data/vendor/assets/js/entries/plugins/foundation.accordion.js +4 -0
  10. data/vendor/assets/js/entries/plugins/foundation.accordionMenu.js +5 -0
  11. data/vendor/assets/js/entries/plugins/foundation.core.js +21 -0
  12. data/vendor/assets/js/entries/plugins/foundation.drilldown.js +4 -0
  13. data/vendor/assets/js/entries/plugins/foundation.dropdown.js +5 -0
  14. data/vendor/assets/js/entries/plugins/foundation.dropdownMenu.js +4 -0
  15. data/vendor/assets/js/entries/plugins/foundation.equalizer.js +4 -0
  16. data/vendor/assets/js/entries/plugins/foundation.interchange.js +4 -0
  17. data/vendor/assets/js/entries/plugins/foundation.magellan.js +4 -0
  18. data/vendor/assets/js/entries/plugins/foundation.offcanvas.js +4 -0
  19. data/vendor/assets/js/entries/plugins/foundation.orbit.js +5 -0
  20. data/vendor/assets/js/entries/plugins/foundation.responsiveAccordionTabs.js +5 -0
  21. data/vendor/assets/js/entries/plugins/foundation.responsiveMenu.js +5 -0
  22. data/vendor/assets/js/entries/plugins/foundation.responsiveToggle.js +5 -0
  23. data/vendor/assets/js/entries/plugins/foundation.reveal.js +4 -0
  24. data/vendor/assets/js/entries/plugins/foundation.slider.js +5 -0
  25. data/vendor/assets/js/entries/plugins/foundation.smoothScroll.js +5 -0
  26. data/vendor/assets/js/entries/plugins/foundation.sticky.js +5 -0
  27. data/vendor/assets/js/entries/plugins/foundation.tabs.js +5 -0
  28. data/vendor/assets/js/entries/plugins/foundation.toggler.js +5 -0
  29. data/vendor/assets/js/entries/plugins/foundation.tooltip.js +4 -0
  30. data/vendor/assets/js/entries/plugins/foundation.util.box.js +4 -0
  31. data/vendor/assets/js/entries/plugins/foundation.util.imageLoader.js +5 -0
  32. data/vendor/assets/js/entries/plugins/foundation.util.keyboard.js +4 -0
  33. data/vendor/assets/js/entries/plugins/foundation.util.mediaQuery.js +4 -0
  34. data/vendor/assets/js/entries/plugins/foundation.util.motion.js +5 -0
  35. data/vendor/assets/js/entries/plugins/foundation.util.nest.js +5 -0
  36. data/vendor/assets/js/entries/plugins/foundation.util.timer.js +5 -0
  37. data/vendor/assets/js/entries/plugins/foundation.util.touch.js +7 -0
  38. data/vendor/assets/js/entries/plugins/foundation.util.triggers.js +5 -0
  39. data/vendor/assets/js/foundation.abide.js.es6 +18 -15
  40. data/vendor/assets/js/foundation.accordion.js.es6 +37 -23
  41. data/vendor/assets/js/foundation.accordionMenu.js.es6 +96 -51
  42. data/vendor/assets/js/foundation.core.js.es6 +46 -87
  43. data/vendor/assets/js/foundation.drilldown.js.es6 +47 -29
  44. data/vendor/assets/js/foundation.dropdown.js.es6 +84 -122
  45. data/vendor/assets/js/foundation.dropdownMenu.js.es6 +44 -28
  46. data/vendor/assets/js/foundation.equalizer.js.es6 +18 -17
  47. data/vendor/assets/js/foundation.interchange.js.es6 +26 -19
  48. data/vendor/assets/js/foundation.js.es6 +8 -3
  49. data/vendor/assets/js/foundation.magellan.js.es6 +36 -30
  50. data/vendor/assets/js/foundation.offcanvas.js.es6 +148 -36
  51. data/vendor/assets/js/foundation.orbit.js.es6 +26 -18
  52. data/vendor/assets/js/foundation.plugin.js.es6 +54 -0
  53. data/vendor/assets/js/foundation.positionable.js.es6 +206 -0
  54. data/vendor/assets/js/{foundation.zf.responsiveAccordionTabs.js.es6 → foundation.responsiveAccordionTabs.js.es6} +33 -30
  55. data/vendor/assets/js/foundation.responsiveMenu.js.es6 +37 -29
  56. data/vendor/assets/js/foundation.responsiveToggle.js.es6 +17 -16
  57. data/vendor/assets/js/foundation.reveal.js.es6 +61 -79
  58. data/vendor/assets/js/foundation.slider.js.es6 +33 -18
  59. data/vendor/assets/js/foundation.smoothScroll.js.es6 +135 -0
  60. data/vendor/assets/js/foundation.sticky.js.es6 +25 -17
  61. data/vendor/assets/js/foundation.tabs.js.es6 +35 -27
  62. data/vendor/assets/js/foundation.toggler.js.es6 +15 -13
  63. data/vendor/assets/js/foundation.tooltip.js.es6 +100 -108
  64. data/vendor/assets/js/foundation.util.box.js.es6 +114 -78
  65. data/vendor/assets/js/foundation.util.core.js.es6 +52 -0
  66. data/vendor/assets/js/foundation.util.imageLoader.js.es6 +45 -0
  67. data/vendor/assets/js/foundation.util.keyboard.js.es6 +41 -31
  68. data/vendor/assets/js/foundation.util.mediaQuery.js.es6 +59 -55
  69. data/vendor/assets/js/foundation.util.motion.js.es6 +4 -5
  70. data/vendor/assets/js/foundation.util.nest.js.es6 +9 -23
  71. data/vendor/assets/js/{foundation.util.timerAndImageLoader.js.es6 → foundation.util.timer.js.es6} +2 -42
  72. data/vendor/assets/js/foundation.util.touch.js.es6 +91 -294
  73. data/vendor/assets/js/foundation.util.triggers.js.es6 +199 -141
  74. data/vendor/assets/scss/_global.scss +29 -1
  75. data/vendor/assets/scss/components/_accordion-menu.scss +148 -13
  76. data/vendor/assets/scss/components/_accordion.scss +5 -0
  77. data/vendor/assets/scss/components/_breadcrumbs.scss +26 -9
  78. data/vendor/assets/scss/components/_button-group.scss +4 -4
  79. data/vendor/assets/scss/components/_button.scss +59 -12
  80. data/vendor/assets/scss/components/_card.scss +10 -2
  81. data/vendor/assets/scss/components/_drilldown.scss +90 -41
  82. data/vendor/assets/scss/components/_dropdown-menu.scss +52 -6
  83. data/vendor/assets/scss/components/_dropdown.scss +8 -1
  84. data/vendor/assets/scss/components/_flex.scss +85 -2
  85. data/vendor/assets/scss/components/_menu.scss +267 -162
  86. data/vendor/assets/scss/components/_off-canvas.scss +159 -45
  87. data/vendor/assets/scss/components/_pagination.scss +1 -1
  88. data/vendor/assets/scss/components/_reveal.scss +13 -11
  89. data/vendor/assets/scss/components/_slider.scss +0 -1
  90. data/vendor/assets/scss/components/_sticky.scss +1 -0
  91. data/vendor/assets/scss/components/_table.scss +7 -6
  92. data/vendor/assets/scss/components/_tabs.scss +1 -1
  93. data/vendor/assets/scss/components/_title-bar.scss +1 -1
  94. data/vendor/assets/scss/components/_tooltip.scss +74 -21
  95. data/vendor/assets/scss/components/_top-bar.scss +2 -0
  96. data/vendor/assets/scss/forms/_fieldset.scss +0 -1
  97. data/vendor/assets/scss/forms/_meter.scss +7 -1
  98. data/vendor/assets/scss/forms/_select.scss +4 -3
  99. data/vendor/assets/scss/forms/_text.scss +11 -2
  100. data/vendor/assets/scss/foundation.scss +17 -3
  101. data/vendor/assets/scss/grid/_flex-grid.scss +3 -52
  102. data/vendor/assets/scss/prototype/_arrow.scss +36 -0
  103. data/vendor/assets/scss/prototype/_border-box.scss +35 -0
  104. data/vendor/assets/scss/prototype/_border-none.scss +35 -0
  105. data/vendor/assets/scss/prototype/_bordered.scss +54 -0
  106. data/vendor/assets/scss/prototype/_box.scss +23 -0
  107. data/vendor/assets/scss/prototype/_display.scss +50 -0
  108. data/vendor/assets/scss/prototype/_font-styling.scss +95 -0
  109. data/vendor/assets/scss/prototype/_list-style-type.scss +95 -0
  110. data/vendor/assets/scss/prototype/_overflow.scss +72 -0
  111. data/vendor/assets/scss/prototype/_position.scss +114 -0
  112. data/vendor/assets/scss/prototype/_prototype.scss +91 -0
  113. data/vendor/assets/scss/prototype/_relation.scss +157 -0
  114. data/vendor/assets/scss/prototype/_rotate.scss +31 -0
  115. data/vendor/assets/scss/prototype/_rounded.scss +54 -0
  116. data/vendor/assets/scss/prototype/_separator.scss +96 -0
  117. data/vendor/assets/scss/prototype/_shadow.scss +43 -0
  118. data/vendor/assets/scss/prototype/_sizing.scss +73 -0
  119. data/vendor/assets/scss/prototype/_spacing.scss +204 -0
  120. data/vendor/assets/scss/prototype/_text-decoration.scss +48 -0
  121. data/vendor/assets/scss/prototype/_text-transformation.scss +48 -0
  122. data/vendor/assets/scss/prototype/_text-utilities.scss +88 -0
  123. data/vendor/assets/scss/prototype/_typescale.scss +20 -0
  124. data/vendor/assets/scss/settings/_settings.scss +291 -48
  125. data/vendor/assets/scss/typography/_base.scss +2 -2
  126. data/vendor/assets/scss/typography/_helpers.scss +6 -4
  127. data/vendor/assets/scss/util/_breakpoint.scss +60 -1
  128. data/vendor/assets/scss/util/_color.scss +8 -5
  129. data/vendor/assets/scss/util/_mixins.scss +45 -5
  130. data/vendor/assets/scss/xy-grid/_cell.scss +179 -0
  131. data/vendor/assets/scss/xy-grid/_classes.scss +455 -0
  132. data/vendor/assets/scss/xy-grid/_collapse.scss +54 -0
  133. data/vendor/assets/scss/xy-grid/_frame.scss +54 -0
  134. data/vendor/assets/scss/xy-grid/_grid.scss +56 -0
  135. data/vendor/assets/scss/xy-grid/_gutters.scss +45 -0
  136. data/vendor/assets/scss/xy-grid/_layout.scss +33 -0
  137. data/vendor/assets/scss/xy-grid/_position.scss +28 -0
  138. data/vendor/assets/scss/xy-grid/_xy-grid.scss +52 -0
  139. metadata +73 -4
@@ -1,33 +1,38 @@
1
1
  'use strict';
2
2
 
3
- !function($) {
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
- constructor(element, options) {
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
- Foundation.Nest.Feather(this.$element, 'accordion');
31
+ Nest.Feather(this.$element, 'accordion');
26
32
 
27
33
  this._init();
28
34
 
29
- Foundation.registerPlugin(this, 'AccordionMenu');
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': 'menu',
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 || Foundation.GetYoDigits(6, 'acc-menu-link'),
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 || Foundation.GetYoDigits(6, 'acc-menu'),
66
+ subId = $sub[0].id || GetYoDigits(6, 'acc-menu'),
60
67
  isActive = $sub.hasClass('is-active');
61
- $elem.attr({
62
- 'aria-controls': subId,
63
- 'aria-expanded': isActive,
64
- 'role': 'menuitem',
65
- 'id': linkId
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': 'menu',
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
- $(this).children('a').off('click.zf.accordionMenu').on('click.zf.accordionMenu', function(e) {
96
- e.preventDefault();
97
-
98
- _this.toggle($submenu);
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
- Foundation.Keyboard.handleKey(e, 'AccordionMenu', {
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
- //Foundation.Move(this.options.slideSpeed, $target, function() {
218
- $target.slideDown(_this.options.slideSpeed, function () {
219
- /**
220
- * Fires when the menu is done opening.
221
- * @event AccordionMenu#down
222
- */
223
- _this.$element.trigger('down.zf.accordionMenu', [$target]);
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
- //Foundation.Move(this.options.slideSpeed, $target, function(){
236
- $target.slideUp(_this.options.slideSpeed, function () {
237
- /**
238
- * Fires when the menu is done collapsing up.
239
- * @event AccordionMenu#up
240
- */
241
- _this.$element.trigger('up.zf.accordionMenu', [$target]);
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
- $menus.parent('.is-accordion-submenu-parent').attr('aria-expanded', false);
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
- destroy() {
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
- Foundation.Nest.Burn(this.$element, 'accordion');
259
- Foundation.unregisterPlugin(this);
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
- // Window exports
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
- var FOUNDATION_VERSION = '6.3.1';
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 = this.GetYoDigits(6, pluginName);
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
- for (var t in transitions){
208
- if (typeof elem.style[t] !== 'undefined'){
209
- end = transitions[t];
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
- if(end){
213
- return end;
214
- }else{
215
- end = setTimeout(function(){
216
- $elem.triggerHandler('transitionend', [$elem]);
217
- }, 1);
218
- return 'transitionend';
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
- }(jQuery);
337
+ export {Foundation};
@@ -1,32 +1,38 @@
1
1
  'use strict';
2
2
 
3
- !function($) {
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
- constructor(element, options) {
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
- Foundation.Nest.Feather(this.$element, 'drilldown');
31
+ Nest.Feather(this.$element, 'drilldown');
25
32
 
26
33
  this._init();
27
34
 
28
- Foundation.registerPlugin(this, 'Drilldown');
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', 'menuitem').find('a');
50
- this.$element.attr('data-mutate', (this.$element.attr('data-drilldown') || Foundation.GetYoDigits(6, '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': 'menu'
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
- Foundation.Keyboard.handleKey(e, 'Drilldown', {
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(Foundation.transitionend($element), function(){
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(Foundation.transitionend($element), function(){
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(Foundation.transitionend($element), function(){
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(Foundation.transitionend($element), function(){
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(Foundation.transitionend($elem), function(e){
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(Foundation.transitionend($elem), function(){
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 = Foundation.Box.GetDimensions(this).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
- destroy() {
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
- Foundation.Nest.Burn(this.$element, 'drilldown');
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
- // Window exports
516
- Foundation.plugin(Drilldown, 'Drilldown');
517
-
518
- }(jQuery);
536
+ export {Drilldown};