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.
Files changed (105) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +2 -1
  3. data/Rakefile +5 -6
  4. data/lib/foundation/rails/version.rb +1 -1
  5. data/vendor/assets/js/foundation.abide.js +781 -0
  6. data/vendor/assets/js/foundation.accordion.js +511 -0
  7. data/vendor/assets/js/foundation.accordionMenu.js +527 -0
  8. data/vendor/assets/js/foundation.core.js +860 -0
  9. data/vendor/assets/js/foundation.drilldown.js +759 -0
  10. data/vendor/assets/js/foundation.dropdown.js +1131 -0
  11. data/vendor/assets/js/foundation.dropdownMenu.js +678 -0
  12. data/vendor/assets/js/foundation.equalizer.js +542 -0
  13. data/vendor/assets/js/foundation.interchange.js +399 -0
  14. data/vendor/assets/js/{foundation.js.es6 → foundation.js} +11 -12
  15. data/vendor/assets/js/foundation.magellan.js +449 -0
  16. data/vendor/assets/js/foundation.offcanvas.js +1052 -0
  17. data/vendor/assets/js/foundation.orbit.js +767 -0
  18. data/vendor/assets/js/foundation.responsiveAccordionTabs.js +440 -0
  19. data/vendor/assets/js/foundation.responsiveMenu.js +362 -0
  20. data/vendor/assets/js/foundation.responsiveToggle.js +336 -0
  21. data/vendor/assets/js/foundation.reveal.js +1066 -0
  22. data/vendor/assets/js/foundation.slider.js +1236 -0
  23. data/vendor/assets/js/foundation.smoothScroll.js +303 -0
  24. data/vendor/assets/js/foundation.sticky.js +1001 -0
  25. data/vendor/assets/js/foundation.tabs.js +678 -0
  26. data/vendor/assets/js/foundation.toggler.js +602 -0
  27. data/vendor/assets/js/foundation.tooltip.js +1195 -0
  28. data/vendor/assets/js/{foundation.util.box.js.es6 → foundation.util.box.js} +154 -41
  29. data/vendor/assets/js/foundation.util.imageLoader.js +163 -0
  30. data/vendor/assets/js/foundation.util.keyboard.js +298 -0
  31. data/vendor/assets/js/foundation.util.mediaQuery.js +353 -0
  32. data/vendor/assets/js/foundation.util.motion.js +231 -0
  33. data/vendor/assets/js/foundation.util.nest.js +181 -0
  34. data/vendor/assets/js/foundation.util.timer.js +170 -0
  35. data/vendor/assets/js/foundation.util.timerAndImageLoader.js +90 -0
  36. data/vendor/assets/js/foundation.util.touch.js +275 -0
  37. data/vendor/assets/js/foundation.util.triggers.js +399 -0
  38. data/vendor/assets/js/foundation.zf.responsiveAccordionTabs.js +262 -0
  39. metadata +37 -71
  40. data/vendor/assets/js/entries/foundation-plugins.js +0 -25
  41. data/vendor/assets/js/entries/foundation.js +0 -101
  42. data/vendor/assets/js/entries/plugins/foundation.abide.js +0 -4
  43. data/vendor/assets/js/entries/plugins/foundation.accordion.js +0 -4
  44. data/vendor/assets/js/entries/plugins/foundation.accordionMenu.js +0 -5
  45. data/vendor/assets/js/entries/plugins/foundation.core.js +0 -21
  46. data/vendor/assets/js/entries/plugins/foundation.drilldown.js +0 -4
  47. data/vendor/assets/js/entries/plugins/foundation.dropdown.js +0 -5
  48. data/vendor/assets/js/entries/plugins/foundation.dropdownMenu.js +0 -4
  49. data/vendor/assets/js/entries/plugins/foundation.equalizer.js +0 -4
  50. data/vendor/assets/js/entries/plugins/foundation.interchange.js +0 -4
  51. data/vendor/assets/js/entries/plugins/foundation.magellan.js +0 -4
  52. data/vendor/assets/js/entries/plugins/foundation.offcanvas.js +0 -4
  53. data/vendor/assets/js/entries/plugins/foundation.orbit.js +0 -5
  54. data/vendor/assets/js/entries/plugins/foundation.responsiveAccordionTabs.js +0 -5
  55. data/vendor/assets/js/entries/plugins/foundation.responsiveMenu.js +0 -5
  56. data/vendor/assets/js/entries/plugins/foundation.responsiveToggle.js +0 -5
  57. data/vendor/assets/js/entries/plugins/foundation.reveal.js +0 -4
  58. data/vendor/assets/js/entries/plugins/foundation.slider.js +0 -5
  59. data/vendor/assets/js/entries/plugins/foundation.smoothScroll.js +0 -5
  60. data/vendor/assets/js/entries/plugins/foundation.sticky.js +0 -5
  61. data/vendor/assets/js/entries/plugins/foundation.tabs.js +0 -5
  62. data/vendor/assets/js/entries/plugins/foundation.toggler.js +0 -5
  63. data/vendor/assets/js/entries/plugins/foundation.tooltip.js +0 -4
  64. data/vendor/assets/js/entries/plugins/foundation.util.box.js +0 -4
  65. data/vendor/assets/js/entries/plugins/foundation.util.imageLoader.js +0 -5
  66. data/vendor/assets/js/entries/plugins/foundation.util.keyboard.js +0 -4
  67. data/vendor/assets/js/entries/plugins/foundation.util.mediaQuery.js +0 -4
  68. data/vendor/assets/js/entries/plugins/foundation.util.motion.js +0 -5
  69. data/vendor/assets/js/entries/plugins/foundation.util.nest.js +0 -5
  70. data/vendor/assets/js/entries/plugins/foundation.util.timer.js +0 -5
  71. data/vendor/assets/js/entries/plugins/foundation.util.touch.js +0 -7
  72. data/vendor/assets/js/entries/plugins/foundation.util.triggers.js +0 -5
  73. data/vendor/assets/js/foundation.abide.js.es6 +0 -587
  74. data/vendor/assets/js/foundation.accordion.js.es6 +0 -329
  75. data/vendor/assets/js/foundation.accordionMenu.js.es6 +0 -328
  76. data/vendor/assets/js/foundation.core.js.es6 +0 -337
  77. data/vendor/assets/js/foundation.drilldown.js.es6 +0 -536
  78. data/vendor/assets/js/foundation.dropdown.js.es6 +0 -394
  79. data/vendor/assets/js/foundation.dropdownMenu.js.es6 +0 -458
  80. data/vendor/assets/js/foundation.equalizer.js.es6 +0 -318
  81. data/vendor/assets/js/foundation.interchange.js.es6 +0 -210
  82. data/vendor/assets/js/foundation.magellan.js.es6 +0 -257
  83. data/vendor/assets/js/foundation.offcanvas.js.es6 +0 -546
  84. data/vendor/assets/js/foundation.orbit.js.es6 +0 -531
  85. data/vendor/assets/js/foundation.plugin.js.es6 +0 -54
  86. data/vendor/assets/js/foundation.positionable.js.es6 +0 -206
  87. data/vendor/assets/js/foundation.responsiveAccordionTabs.js.es6 +0 -243
  88. data/vendor/assets/js/foundation.responsiveMenu.js.es6 +0 -155
  89. data/vendor/assets/js/foundation.responsiveToggle.js.es6 +0 -156
  90. data/vendor/assets/js/foundation.reveal.js.es6 +0 -585
  91. data/vendor/assets/js/foundation.slider.js.es6 +0 -712
  92. data/vendor/assets/js/foundation.smoothScroll.js.es6 +0 -135
  93. data/vendor/assets/js/foundation.sticky.js.es6 +0 -507
  94. data/vendor/assets/js/foundation.tabs.js.es6 +0 -498
  95. data/vendor/assets/js/foundation.toggler.js.es6 +0 -150
  96. data/vendor/assets/js/foundation.tooltip.js.es6 +0 -462
  97. data/vendor/assets/js/foundation.util.core.js.es6 +0 -52
  98. data/vendor/assets/js/foundation.util.imageLoader.js.es6 +0 -45
  99. data/vendor/assets/js/foundation.util.keyboard.js.es6 +0 -162
  100. data/vendor/assets/js/foundation.util.mediaQuery.js.es6 +0 -234
  101. data/vendor/assets/js/foundation.util.motion.js.es6 +0 -104
  102. data/vendor/assets/js/foundation.util.nest.js.es6 +0 -67
  103. data/vendor/assets/js/foundation.util.timer.js.es6 +0 -48
  104. data/vendor/assets/js/foundation.util.touch.js.es6 +0 -149
  105. data/vendor/assets/js/foundation.util.triggers.js.es6 +0 -268
@@ -1,155 +0,0 @@
1
- 'use strict';
2
-
3
- import $ from 'jquery';
4
-
5
- import { MediaQuery } from './foundation.util.mediaQuery';
6
- import { GetYoDigits } from './foundation.util.core';
7
- import { Plugin } from './foundation.plugin';
8
-
9
- import { DropdownMenu } from './foundation.dropdownMenu';
10
- import { Drilldown } from './foundation.drilldown';
11
- import { AccordionMenu } from './foundation.accordionMenu';
12
-
13
- let MenuPlugins = {
14
- dropdown: {
15
- cssClass: 'dropdown',
16
- plugin: DropdownMenu
17
- },
18
- drilldown: {
19
- cssClass: 'drilldown',
20
- plugin: Drilldown
21
- },
22
- accordion: {
23
- cssClass: 'accordion-menu',
24
- plugin: AccordionMenu
25
- }
26
- };
27
-
28
- // import "foundation.util.triggers.js";
29
-
30
-
31
- /**
32
- * ResponsiveMenu module.
33
- * @module foundation.responsiveMenu
34
- * @requires foundation.util.triggers
35
- * @requires foundation.util.mediaQuery
36
- */
37
-
38
- class ResponsiveMenu extends Plugin {
39
- /**
40
- * Creates a new instance of a responsive menu.
41
- * @class
42
- * @name ResponsiveMenu
43
- * @fires ResponsiveMenu#init
44
- * @param {jQuery} element - jQuery object to make into a dropdown menu.
45
- * @param {Object} options - Overrides to the default plugin settings.
46
- */
47
- _setup(element, options) {
48
- this.$element = $(element);
49
- this.rules = this.$element.data('responsive-menu');
50
- this.currentMq = null;
51
- this.currentPlugin = null;
52
- this.className = 'ResponsiveMenu'; // ie9 back compat
53
-
54
- this._init();
55
- this._events();
56
- }
57
-
58
- /**
59
- * Initializes the Menu by parsing the classes from the 'data-ResponsiveMenu' attribute on the element.
60
- * @function
61
- * @private
62
- */
63
- _init() {
64
-
65
- MediaQuery._init();
66
- // The first time an Interchange plugin is initialized, this.rules is converted from a string of "classes" to an object of rules
67
- if (typeof this.rules === 'string') {
68
- let rulesTree = {};
69
-
70
- // Parse rules from "classes" pulled from data attribute
71
- let rules = this.rules.split(' ');
72
-
73
- // Iterate through every rule found
74
- for (let i = 0; i < rules.length; i++) {
75
- let rule = rules[i].split('-');
76
- let ruleSize = rule.length > 1 ? rule[0] : 'small';
77
- let rulePlugin = rule.length > 1 ? rule[1] : rule[0];
78
-
79
- if (MenuPlugins[rulePlugin] !== null) {
80
- rulesTree[ruleSize] = MenuPlugins[rulePlugin];
81
- }
82
- }
83
-
84
- this.rules = rulesTree;
85
- }
86
-
87
- if (!$.isEmptyObject(this.rules)) {
88
- this._checkMediaQueries();
89
- }
90
- // Add data-mutate since children may need it.
91
- this.$element.attr('data-mutate', (this.$element.attr('data-mutate') || GetYoDigits(6, 'responsive-menu')));
92
- }
93
-
94
- /**
95
- * Initializes events for the Menu.
96
- * @function
97
- * @private
98
- */
99
- _events() {
100
- var _this = this;
101
-
102
- $(window).on('changed.zf.mediaquery', function() {
103
- _this._checkMediaQueries();
104
- });
105
- // $(window).on('resize.zf.ResponsiveMenu', function() {
106
- // _this._checkMediaQueries();
107
- // });
108
- }
109
-
110
- /**
111
- * Checks the current screen width against available media queries. If the media query has changed, and the plugin needed has changed, the plugins will swap out.
112
- * @function
113
- * @private
114
- */
115
- _checkMediaQueries() {
116
- var matchedMq, _this = this;
117
- // Iterate through each rule and find the last matching rule
118
- $.each(this.rules, function(key) {
119
- if (MediaQuery.atLeast(key)) {
120
- matchedMq = key;
121
- }
122
- });
123
-
124
- // No match? No dice
125
- if (!matchedMq) return;
126
-
127
- // Plugin already initialized? We good
128
- if (this.currentPlugin instanceof this.rules[matchedMq].plugin) return;
129
-
130
- // Remove existing plugin-specific CSS classes
131
- $.each(MenuPlugins, function(key, value) {
132
- _this.$element.removeClass(value.cssClass);
133
- });
134
-
135
- // Add the CSS class for the new plugin
136
- this.$element.addClass(this.rules[matchedMq].cssClass);
137
-
138
- // Create an instance of the new plugin
139
- if (this.currentPlugin) this.currentPlugin.destroy();
140
- this.currentPlugin = new this.rules[matchedMq].plugin(this.$element, {});
141
- }
142
-
143
- /**
144
- * Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.
145
- * @function
146
- */
147
- _destroy() {
148
- this.currentPlugin.destroy();
149
- $(window).off('.zf.ResponsiveMenu');
150
- }
151
- }
152
-
153
- ResponsiveMenu.defaults = {};
154
-
155
- export {ResponsiveMenu};
@@ -1,156 +0,0 @@
1
- 'use strict';
2
-
3
- import $ from 'jquery';
4
-
5
- import { MediaQuery } from './foundation.util.mediaQuery';
6
- import { Motion } from './foundation.util.motion';
7
- import { Plugin } from './foundation.plugin';
8
-
9
- /**
10
- * ResponsiveToggle module.
11
- * @module foundation.responsiveToggle
12
- * @requires foundation.util.mediaQuery
13
- * @requires foundation.util.motion
14
- */
15
-
16
- class ResponsiveToggle extends Plugin {
17
- /**
18
- * Creates a new instance of Tab Bar.
19
- * @class
20
- * @name ResponsiveToggle
21
- * @fires ResponsiveToggle#init
22
- * @param {jQuery} element - jQuery object to attach tab bar functionality to.
23
- * @param {Object} options - Overrides to the default plugin settings.
24
- */
25
- _setup(element, options) {
26
- this.$element = $(element);
27
- this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
28
- this.className = 'ResponsiveToggle'; // ie9 back compat
29
-
30
- this._init();
31
- this._events();
32
- }
33
-
34
- /**
35
- * Initializes the tab bar by finding the target element, toggling element, and running update().
36
- * @function
37
- * @private
38
- */
39
- _init() {
40
- MediaQuery._init();
41
- var targetID = this.$element.data('responsive-toggle');
42
- if (!targetID) {
43
- console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
44
- }
45
-
46
- this.$targetMenu = $(`#${targetID}`);
47
- this.$toggler = this.$element.find('[data-toggle]').filter(function() {
48
- var target = $(this).data('toggle');
49
- return (target === targetID || target === "");
50
- });
51
- this.options = $.extend({}, this.options, this.$targetMenu.data());
52
-
53
- // If they were set, parse the animation classes
54
- if(this.options.animate) {
55
- let input = this.options.animate.split(' ');
56
-
57
- this.animationIn = input[0];
58
- this.animationOut = input[1] || null;
59
- }
60
-
61
- this._update();
62
- }
63
-
64
- /**
65
- * Adds necessary event handlers for the tab bar to work.
66
- * @function
67
- * @private
68
- */
69
- _events() {
70
- var _this = this;
71
-
72
- this._updateMqHandler = this._update.bind(this);
73
-
74
- $(window).on('changed.zf.mediaquery', this._updateMqHandler);
75
-
76
- this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
77
- }
78
-
79
- /**
80
- * Checks the current media query to determine if the tab bar should be visible or hidden.
81
- * @function
82
- * @private
83
- */
84
- _update() {
85
- // Mobile
86
- if (!MediaQuery.atLeast(this.options.hideFor)) {
87
- this.$element.show();
88
- this.$targetMenu.hide();
89
- }
90
-
91
- // Desktop
92
- else {
93
- this.$element.hide();
94
- this.$targetMenu.show();
95
- }
96
- }
97
-
98
- /**
99
- * Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
100
- * @function
101
- * @fires ResponsiveToggle#toggled
102
- */
103
- toggleMenu() {
104
- if (!MediaQuery.atLeast(this.options.hideFor)) {
105
- /**
106
- * Fires when the element attached to the tab bar toggles.
107
- * @event ResponsiveToggle#toggled
108
- */
109
- if(this.options.animate) {
110
- if (this.$targetMenu.is(':hidden')) {
111
- Motion.animateIn(this.$targetMenu, this.animationIn, () => {
112
- this.$element.trigger('toggled.zf.responsiveToggle');
113
- this.$targetMenu.find('[data-mutate]').triggerHandler('mutateme.zf.trigger');
114
- });
115
- }
116
- else {
117
- Motion.animateOut(this.$targetMenu, this.animationOut, () => {
118
- this.$element.trigger('toggled.zf.responsiveToggle');
119
- });
120
- }
121
- }
122
- else {
123
- this.$targetMenu.toggle(0);
124
- this.$targetMenu.find('[data-mutate]').trigger('mutateme.zf.trigger');
125
- this.$element.trigger('toggled.zf.responsiveToggle');
126
- }
127
- }
128
- };
129
-
130
- _destroy() {
131
- this.$element.off('.zf.responsiveToggle');
132
- this.$toggler.off('.zf.responsiveToggle');
133
-
134
- $(window).off('changed.zf.mediaquery', this._updateMqHandler);
135
- }
136
- }
137
-
138
- ResponsiveToggle.defaults = {
139
- /**
140
- * The breakpoint after which the menu is always shown, and the tab bar is hidden.
141
- * @option
142
- * @type {string}
143
- * @default 'medium'
144
- */
145
- hideFor: 'medium',
146
-
147
- /**
148
- * To decide if the toggle should be animated or not.
149
- * @option
150
- * @type {boolean}
151
- * @default false
152
- */
153
- animate: false
154
- };
155
-
156
- export { ResponsiveToggle };
@@ -1,585 +0,0 @@
1
- 'use strict';
2
-
3
- import $ from 'jquery';
4
- import { Keyboard } from './foundation.util.keyboard';
5
- import { MediaQuery } from './foundation.util.mediaQuery';
6
- import { Motion } from './foundation.util.motion';
7
- import { Plugin } from './foundation.plugin';
8
- import { Triggers } from './foundation.util.triggers';
9
-
10
- /**
11
- * Reveal module.
12
- * @module foundation.reveal
13
- * @requires foundation.util.keyboard
14
- * @requires foundation.util.triggers
15
- * @requires foundation.util.mediaQuery
16
- * @requires foundation.util.motion if using animations
17
- */
18
-
19
- class Reveal extends Plugin {
20
- /**
21
- * Creates a new instance of Reveal.
22
- * @class
23
- * @name Reveal
24
- * @param {jQuery} element - jQuery object to use for the modal.
25
- * @param {Object} options - optional parameters.
26
- */
27
- _setup(element, options) {
28
- this.$element = element;
29
- this.options = $.extend({}, Reveal.defaults, this.$element.data(), options);
30
- this.className = 'Reveal'; // ie9 back compat
31
- this._init();
32
-
33
- // Triggers init is idempotent, just need to make sure it is initialized
34
- Triggers.init($);
35
-
36
- Keyboard.register('Reveal', {
37
- 'ESCAPE': 'close',
38
- });
39
- }
40
-
41
- /**
42
- * Initializes the modal by adding the overlay and close buttons, (if selected).
43
- * @private
44
- */
45
- _init() {
46
- MediaQuery._init();
47
- this.id = this.$element.attr('id');
48
- this.isActive = false;
49
- this.cached = {mq: MediaQuery.current};
50
- this.isMobile = mobileSniff();
51
-
52
- this.$anchor = $(`[data-open="${this.id}"]`).length ? $(`[data-open="${this.id}"]`) : $(`[data-toggle="${this.id}"]`);
53
- this.$anchor.attr({
54
- 'aria-controls': this.id,
55
- 'aria-haspopup': true,
56
- 'tabindex': 0
57
- });
58
-
59
- if (this.options.fullScreen || this.$element.hasClass('full')) {
60
- this.options.fullScreen = true;
61
- this.options.overlay = false;
62
- }
63
- if (this.options.overlay && !this.$overlay) {
64
- this.$overlay = this._makeOverlay(this.id);
65
- }
66
-
67
- this.$element.attr({
68
- 'role': 'dialog',
69
- 'aria-hidden': true,
70
- 'data-yeti-box': this.id,
71
- 'data-resize': this.id
72
- });
73
-
74
- if(this.$overlay) {
75
- this.$element.detach().appendTo(this.$overlay);
76
- } else {
77
- this.$element.detach().appendTo($(this.options.appendTo));
78
- this.$element.addClass('without-overlay');
79
- }
80
- this._events();
81
- if (this.options.deepLink && window.location.hash === ( `#${this.id}`)) {
82
- $(window).one('load.zf.reveal', this.open.bind(this));
83
- }
84
- }
85
-
86
- /**
87
- * Creates an overlay div to display behind the modal.
88
- * @private
89
- */
90
- _makeOverlay() {
91
- var additionalOverlayClasses = '';
92
-
93
- if (this.options.additionalOverlayClasses) {
94
- additionalOverlayClasses = ' ' + this.options.additionalOverlayClasses;
95
- }
96
-
97
- return $('<div></div>')
98
- .addClass('reveal-overlay' + additionalOverlayClasses)
99
- .appendTo(this.options.appendTo);
100
- }
101
-
102
- /**
103
- * Updates position of modal
104
- * TODO: Figure out if we actually need to cache these values or if it doesn't matter
105
- * @private
106
- */
107
- _updatePosition() {
108
- var width = this.$element.outerWidth();
109
- var outerWidth = $(window).width();
110
- var height = this.$element.outerHeight();
111
- var outerHeight = $(window).height();
112
- var left, top;
113
- if (this.options.hOffset === 'auto') {
114
- left = parseInt((outerWidth - width) / 2, 10);
115
- } else {
116
- left = parseInt(this.options.hOffset, 10);
117
- }
118
- if (this.options.vOffset === 'auto') {
119
- if (height > outerHeight) {
120
- top = parseInt(Math.min(100, outerHeight / 10), 10);
121
- } else {
122
- top = parseInt((outerHeight - height) / 4, 10);
123
- }
124
- } else {
125
- top = parseInt(this.options.vOffset, 10);
126
- }
127
- this.$element.css({top: top + 'px'});
128
- // only worry about left if we don't have an overlay or we havea horizontal offset,
129
- // otherwise we're perfectly in the middle
130
- if(!this.$overlay || (this.options.hOffset !== 'auto')) {
131
- this.$element.css({left: left + 'px'});
132
- this.$element.css({margin: '0px'});
133
- }
134
-
135
- }
136
-
137
- /**
138
- * Adds event handlers for the modal.
139
- * @private
140
- */
141
- _events() {
142
- var _this = this;
143
-
144
- this.$element.on({
145
- 'open.zf.trigger': this.open.bind(this),
146
- 'close.zf.trigger': (event, $element) => {
147
- if ((event.target === _this.$element[0]) ||
148
- ($(event.target).parents('[data-closable]')[0] === $element)) { // only close reveal when it's explicitly called
149
- return this.close.apply(this);
150
- }
151
- },
152
- 'toggle.zf.trigger': this.toggle.bind(this),
153
- 'resizeme.zf.trigger': function() {
154
- _this._updatePosition();
155
- }
156
- });
157
-
158
- if (this.options.closeOnClick && this.options.overlay) {
159
- this.$overlay.off('.zf.reveal').on('click.zf.reveal', function(e) {
160
- if (e.target === _this.$element[0] ||
161
- $.contains(_this.$element[0], e.target) ||
162
- !$.contains(document, e.target)) {
163
- return;
164
- }
165
- _this.close();
166
- });
167
- }
168
- if (this.options.deepLink) {
169
- $(window).on(`popstate.zf.reveal:${this.id}`, this._handleState.bind(this));
170
- }
171
- }
172
-
173
- /**
174
- * Handles modal methods on back/forward button clicks or any other event that triggers popstate.
175
- * @private
176
- */
177
- _handleState(e) {
178
- if(window.location.hash === ( '#' + this.id) && !this.isActive){ this.open(); }
179
- else{ this.close(); }
180
- }
181
-
182
-
183
- /**
184
- * Opens the modal controlled by `this.$anchor`, and closes all others by default.
185
- * @function
186
- * @fires Reveal#closeme
187
- * @fires Reveal#open
188
- */
189
- open() {
190
- // either update or replace browser history
191
- if (this.options.deepLink) {
192
- var hash = `#${this.id}`;
193
-
194
- if (window.history.pushState) {
195
- if (this.options.updateHistory) {
196
- window.history.pushState({}, '', hash);
197
- } else {
198
- window.history.replaceState({}, '', hash);
199
- }
200
- } else {
201
- window.location.hash = hash;
202
- }
203
- }
204
-
205
- this.isActive = true;
206
-
207
- // Make elements invisible, but remove display: none so we can get size and positioning
208
- this.$element
209
- .css({ 'visibility': 'hidden' })
210
- .show()
211
- .scrollTop(0);
212
- if (this.options.overlay) {
213
- this.$overlay.css({'visibility': 'hidden'}).show();
214
- }
215
-
216
- this._updatePosition();
217
-
218
- this.$element
219
- .hide()
220
- .css({ 'visibility': '' });
221
-
222
- if(this.$overlay) {
223
- this.$overlay.css({'visibility': ''}).hide();
224
- if(this.$element.hasClass('fast')) {
225
- this.$overlay.addClass('fast');
226
- } else if (this.$element.hasClass('slow')) {
227
- this.$overlay.addClass('slow');
228
- }
229
- }
230
-
231
-
232
- if (!this.options.multipleOpened) {
233
- /**
234
- * Fires immediately before the modal opens.
235
- * Closes any other modals that are currently open
236
- * @event Reveal#closeme
237
- */
238
- this.$element.trigger('closeme.zf.reveal', this.id);
239
- }
240
-
241
- var _this = this;
242
-
243
- function addRevealOpenClasses() {
244
- if (_this.isMobile) {
245
- if(!_this.originalScrollPos) {
246
- _this.originalScrollPos = window.pageYOffset;
247
- }
248
- $('html, body').addClass('is-reveal-open');
249
- }
250
- else {
251
- $('body').addClass('is-reveal-open');
252
- }
253
- }
254
- // Motion UI method of reveal
255
- if (this.options.animationIn) {
256
- function afterAnimation(){
257
- _this.$element
258
- .attr({
259
- 'aria-hidden': false,
260
- 'tabindex': -1
261
- })
262
- .focus();
263
- addRevealOpenClasses();
264
- Keyboard.trapFocus(_this.$element);
265
- }
266
- if (this.options.overlay) {
267
- Motion.animateIn(this.$overlay, 'fade-in');
268
- }
269
- Motion.animateIn(this.$element, this.options.animationIn, () => {
270
- if(this.$element) { // protect against object having been removed
271
- this.focusableElements = Keyboard.findFocusable(this.$element);
272
- afterAnimation();
273
- }
274
- });
275
- }
276
- // jQuery method of reveal
277
- else {
278
- if (this.options.overlay) {
279
- this.$overlay.show(0);
280
- }
281
- this.$element.show(this.options.showDelay);
282
- }
283
-
284
- // handle accessibility
285
- this.$element
286
- .attr({
287
- 'aria-hidden': false,
288
- 'tabindex': -1
289
- })
290
- .focus();
291
- Keyboard.trapFocus(this.$element);
292
-
293
- addRevealOpenClasses();
294
-
295
- this._extraHandlers();
296
-
297
- /**
298
- * Fires when the modal has successfully opened.
299
- * @event Reveal#open
300
- */
301
- this.$element.trigger('open.zf.reveal');
302
- }
303
-
304
- /**
305
- * Adds extra event handlers for the body and window if necessary.
306
- * @private
307
- */
308
- _extraHandlers() {
309
- var _this = this;
310
- if(!this.$element) { return; } // If we're in the middle of cleanup, don't freak out
311
- this.focusableElements = Keyboard.findFocusable(this.$element);
312
-
313
- if (!this.options.overlay && this.options.closeOnClick && !this.options.fullScreen) {
314
- $('body').on('click.zf.reveal', function(e) {
315
- if (e.target === _this.$element[0] ||
316
- $.contains(_this.$element[0], e.target) ||
317
- !$.contains(document, e.target)) { return; }
318
- _this.close();
319
- });
320
- }
321
-
322
- if (this.options.closeOnEsc) {
323
- $(window).on('keydown.zf.reveal', function(e) {
324
- Keyboard.handleKey(e, 'Reveal', {
325
- close: function() {
326
- if (_this.options.closeOnEsc) {
327
- _this.close();
328
- }
329
- }
330
- });
331
- });
332
- }
333
- }
334
-
335
- /**
336
- * Closes the modal.
337
- * @function
338
- * @fires Reveal#closed
339
- */
340
- close() {
341
- if (!this.isActive || !this.$element.is(':visible')) {
342
- return false;
343
- }
344
- var _this = this;
345
-
346
- // Motion UI method of hiding
347
- if (this.options.animationOut) {
348
- if (this.options.overlay) {
349
- Motion.animateOut(this.$overlay, 'fade-out');
350
- }
351
-
352
- Motion.animateOut(this.$element, this.options.animationOut, finishUp);
353
- }
354
- // jQuery method of hiding
355
- else {
356
- this.$element.hide(this.options.hideDelay);
357
-
358
- if (this.options.overlay) {
359
- this.$overlay.hide(0, finishUp);
360
- }
361
- else {
362
- finishUp();
363
- }
364
- }
365
-
366
- // Conditionals to remove extra event listeners added on open
367
- if (this.options.closeOnEsc) {
368
- $(window).off('keydown.zf.reveal');
369
- }
370
-
371
- if (!this.options.overlay && this.options.closeOnClick) {
372
- $('body').off('click.zf.reveal');
373
- }
374
-
375
- this.$element.off('keydown.zf.reveal');
376
-
377
- function finishUp() {
378
- if (_this.isMobile) {
379
- if ($('.reveal:visible').length === 0) {
380
- $('html, body').removeClass('is-reveal-open');
381
- }
382
- if(_this.originalScrollPos) {
383
- $('body').scrollTop(_this.originalScrollPos);
384
- _this.originalScrollPos = null;
385
- }
386
- }
387
- else {
388
- if ($('.reveal:visible').length === 0) {
389
- $('body').removeClass('is-reveal-open');
390
- }
391
- }
392
-
393
-
394
- Keyboard.releaseFocus(_this.$element);
395
-
396
- _this.$element.attr('aria-hidden', true);
397
-
398
- /**
399
- * Fires when the modal is done closing.
400
- * @event Reveal#closed
401
- */
402
- _this.$element.trigger('closed.zf.reveal');
403
- }
404
-
405
- /**
406
- * Resets the modal content
407
- * This prevents a running video to keep going in the background
408
- */
409
- if (this.options.resetOnClose) {
410
- this.$element.html(this.$element.html());
411
- }
412
-
413
- this.isActive = false;
414
- if (_this.options.deepLink) {
415
- if (window.history.replaceState) {
416
- window.history.replaceState('', document.title, window.location.href.replace(`#${this.id}`, ''));
417
- } else {
418
- window.location.hash = '';
419
- }
420
- }
421
-
422
- this.$anchor.focus();
423
- }
424
-
425
- /**
426
- * Toggles the open/closed state of a modal.
427
- * @function
428
- */
429
- toggle() {
430
- if (this.isActive) {
431
- this.close();
432
- } else {
433
- this.open();
434
- }
435
- };
436
-
437
- /**
438
- * Destroys an instance of a modal.
439
- * @function
440
- */
441
- _destroy() {
442
- if (this.options.overlay) {
443
- this.$element.appendTo($(this.options.appendTo)); // move $element outside of $overlay to prevent error unregisterPlugin()
444
- this.$overlay.hide().off().remove();
445
- }
446
- this.$element.hide().off();
447
- this.$anchor.off('.zf');
448
- $(window).off(`.zf.reveal:${this.id}`);
449
- };
450
- }
451
-
452
- Reveal.defaults = {
453
- /**
454
- * Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
455
- * @option
456
- * @type {string}
457
- * @default ''
458
- */
459
- animationIn: '',
460
- /**
461
- * Motion-UI class to use for animated elements. If none used, defaults to simple show/hide.
462
- * @option
463
- * @type {string}
464
- * @default ''
465
- */
466
- animationOut: '',
467
- /**
468
- * Time, in ms, to delay the opening of a modal after a click if no animation used.
469
- * @option
470
- * @type {number}
471
- * @default 0
472
- */
473
- showDelay: 0,
474
- /**
475
- * Time, in ms, to delay the closing of a modal after a click if no animation used.
476
- * @option
477
- * @type {number}
478
- * @default 0
479
- */
480
- hideDelay: 0,
481
- /**
482
- * Allows a click on the body/overlay to close the modal.
483
- * @option
484
- * @type {boolean}
485
- * @default true
486
- */
487
- closeOnClick: true,
488
- /**
489
- * Allows the modal to close if the user presses the `ESCAPE` key.
490
- * @option
491
- * @type {boolean}
492
- * @default true
493
- */
494
- closeOnEsc: true,
495
- /**
496
- * If true, allows multiple modals to be displayed at once.
497
- * @option
498
- * @type {boolean}
499
- * @default false
500
- */
501
- multipleOpened: false,
502
- /**
503
- * Distance, in pixels, the modal should push down from the top of the screen.
504
- * @option
505
- * @type {number|string}
506
- * @default auto
507
- */
508
- vOffset: 'auto',
509
- /**
510
- * Distance, in pixels, the modal should push in from the side of the screen.
511
- * @option
512
- * @type {number|string}
513
- * @default auto
514
- */
515
- hOffset: 'auto',
516
- /**
517
- * Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.
518
- * @option
519
- * @type {boolean}
520
- * @default false
521
- */
522
- fullScreen: false,
523
- /**
524
- * Percentage of screen height the modal should push up from the bottom of the view.
525
- * @option
526
- * @type {number}
527
- * @default 10
528
- */
529
- btmOffsetPct: 10,
530
- /**
531
- * Allows the modal to generate an overlay div, which will cover the view when modal opens.
532
- * @option
533
- * @type {boolean}
534
- * @default true
535
- */
536
- overlay: true,
537
- /**
538
- * Allows the modal to remove and reinject markup on close. Should be true if using video elements w/o using provider's api, otherwise, videos will continue to play in the background.
539
- * @option
540
- * @type {boolean}
541
- * @default false
542
- */
543
- resetOnClose: false,
544
- /**
545
- * Allows the modal to alter the url on open/close, and allows the use of the `back` button to close modals. ALSO, allows a modal to auto-maniacally open on page load IF the hash === the modal's user-set id.
546
- * @option
547
- * @type {boolean}
548
- * @default false
549
- */
550
- deepLink: false,
551
- /**
552
- * Update the browser history with the open modal
553
- * @option
554
- * @default false
555
- */
556
- updateHistory: false,
557
- /**
558
- * Allows the modal to append to custom div.
559
- * @option
560
- * @type {string}
561
- * @default "body"
562
- */
563
- appendTo: "body",
564
- /**
565
- * Allows adding additional class names to the reveal overlay.
566
- * @option
567
- * @type {string}
568
- * @default ''
569
- */
570
- additionalOverlayClasses: ''
571
- };
572
-
573
- function iPhoneSniff() {
574
- return /iP(ad|hone|od).*OS/.test(window.navigator.userAgent);
575
- }
576
-
577
- function androidSniff() {
578
- return /Android/.test(window.navigator.userAgent);
579
- }
580
-
581
- function mobileSniff() {
582
- return iPhoneSniff() || androidSniff();
583
- }
584
-
585
- export {Reveal};