foundation-rails 6.4.1.3 → 6.4.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +3 -2
- data/app/views/foundation/rails/styleguide/show.html.erb +8 -8
- data/bower.json +2 -2
- data/lib/foundation/rails/version.rb +1 -1
- data/lib/generators/foundation/install_generator.rb +1 -0
- data/lib/generators/foundation/templates/_settings.scss +9 -3
- data/lib/generators/foundation/templates/browserslist +4 -0
- data/vendor/assets/_vendor/sassy-lists/stylesheets/functions/_contain.scss +31 -0
- data/vendor/assets/js/foundation.abide.js +1 -1
- data/vendor/assets/js/foundation.accordionMenu.js +2 -2
- data/vendor/assets/js/foundation.core.js +1 -1
- data/vendor/assets/js/foundation.drilldown.js +3 -3
- data/vendor/assets/js/foundation.dropdown.js +41 -21
- data/vendor/assets/js/foundation.dropdownMenu.js +4 -5
- data/vendor/assets/js/foundation.js +1 -3
- data/vendor/assets/js/foundation.offcanvas.js +11 -9
- data/vendor/assets/js/foundation.orbit.js +1 -1
- data/vendor/assets/js/foundation.reveal.js +2 -3
- data/vendor/assets/js/foundation.slider.js +8 -9
- data/vendor/assets/js/foundation.sticky.js +2 -3
- data/vendor/assets/js/foundation.toggler.js +2 -3
- data/vendor/assets/js/foundation.tooltip.js +2 -3
- data/vendor/assets/js/foundation.util.box.js +12 -13
- data/vendor/assets/js/foundation.util.mediaQuery.js +1 -0
- data/vendor/assets/js/foundation.util.triggers.js +2 -3
- data/vendor/assets/scss/_global.scss +5 -3
- data/vendor/assets/scss/components/_button-group.scss +1 -1
- data/vendor/assets/scss/components/_button.scss +6 -0
- data/vendor/assets/scss/components/_dropdown-menu.scss +2 -0
- data/vendor/assets/scss/components/_menu.scss +15 -1
- data/vendor/assets/scss/components/_off-canvas.scss +106 -43
- data/vendor/assets/scss/forms/_input-group.scss +9 -2
- data/vendor/assets/scss/foundation.scss +2 -1
- data/vendor/assets/scss/grid/_flex-grid.scss +0 -4
- data/vendor/assets/scss/grid/_position.scss +1 -1
- data/vendor/assets/scss/prototype/_prototype.scss +0 -4
- data/vendor/assets/scss/prototype/_rounded.scss +1 -1
- data/vendor/assets/scss/settings/_settings.scss +9 -3
- data/vendor/assets/scss/typography/_base.scss +8 -8
- data/vendor/assets/scss/util/_breakpoint.scss +11 -3
- data/vendor/assets/scss/util/_mixins.scss +3 -6
- data/vendor/assets/scss/xy-grid/_cell.scss +2 -12
- data/vendor/assets/scss/xy-grid/_classes.scss +40 -19
- data/vendor/assets/scss/xy-grid/_collapse.scss +35 -15
- data/vendor/assets/scss/xy-grid/_frame.scss +40 -9
- data/vendor/assets/scss/xy-grid/_grid.scss +4 -25
- data/vendor/assets/scss/xy-grid/_gutters.scss +2 -2
- data/vendor/assets/scss/xy-grid/_layout.scss +1 -1
- data/vendor/assets/scss/xy-grid/_xy-grid.scss +3 -4
- metadata +5 -5
- data/vendor/assets/js/foundation.util.timerAndImageLoader.js +0 -90
- data/vendor/assets/js/foundation.zf.responsiveAccordionTabs.js +0 -262
@@ -2,21 +2,52 @@
|
|
2
2
|
///
|
3
3
|
/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
|
4
4
|
/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.
|
5
|
+
/// @param {Number|Map} $gutters [null] - Map or single value for gutters.
|
6
|
+
/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.
|
7
|
+
/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.
|
5
8
|
@mixin xy-grid-frame(
|
6
9
|
$vertical: false,
|
7
|
-
$nested: false
|
10
|
+
$nested: false,
|
11
|
+
$gutters: null,
|
12
|
+
$breakpoint: null,
|
13
|
+
$include-base: true
|
8
14
|
) {
|
9
15
|
|
10
|
-
@if $
|
11
|
-
|
12
|
-
|
13
|
-
|
16
|
+
@if $include-base {
|
17
|
+
overflow: hidden;
|
18
|
+
position: relative;
|
19
|
+
flex-wrap: nowrap;
|
20
|
+
align-items: stretch;
|
14
21
|
}
|
15
22
|
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
23
|
+
@if $breakpoint == null and type-of($gutters) == 'map' {
|
24
|
+
@include -zf-each-breakpoint() {
|
25
|
+
@include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);
|
26
|
+
}
|
27
|
+
} @else {
|
28
|
+
// Get our gutters if applicable
|
29
|
+
$gutter: -zf-get-bp-val($gutters, $breakpoint);
|
30
|
+
|
31
|
+
// If we have a gutter, add it to the width/height
|
32
|
+
@if $gutter {
|
33
|
+
@if $vertical == true {
|
34
|
+
$unit: if($nested == true, 100%, 100vh);
|
35
|
+
$gutter: rem-calc($gutter);
|
36
|
+
height: calc(#{$unit} + #{$gutter});
|
37
|
+
} @else {
|
38
|
+
$unit: if($nested == true, 100%, 100vw);
|
39
|
+
$gutter: rem-calc($gutter);
|
40
|
+
width: calc(#{$unit} + #{$gutter});
|
41
|
+
}
|
42
|
+
}
|
43
|
+
@else {
|
44
|
+
@if $vertical == true {
|
45
|
+
height: if($nested == true, 100%, 100vh);
|
46
|
+
} @else {
|
47
|
+
width: if($nested == true, 100%, 100vw);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
}
|
20
51
|
}
|
21
52
|
|
22
53
|
/// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
|
@@ -10,36 +10,15 @@
|
|
10
10
|
///
|
11
11
|
/// @param {Number} $width [$grid-container] - a width to limit the container to.
|
12
12
|
@mixin xy-grid-container(
|
13
|
-
$width: $grid-container
|
13
|
+
$width: $grid-container,
|
14
|
+
$padding: $grid-container-padding
|
14
15
|
) {
|
16
|
+
@include xy-gutters($gutters: $padding, $gutter-type: padding);
|
17
|
+
|
15
18
|
max-width: $width;
|
16
19
|
margin: 0 auto;
|
17
20
|
}
|
18
21
|
|
19
|
-
/// Add padding to your container, up to a particular size
|
20
|
-
///
|
21
|
-
/// @param {Number} $width [$grid-container] - a width to limit the container to.
|
22
|
-
@mixin xy-grid-container-padding(
|
23
|
-
$padding: $grid-container-padding,
|
24
|
-
$max: $grid-container-max
|
25
|
-
) {
|
26
|
-
// Output our margin gutters.
|
27
|
-
@if (type-of($padding) == 'map') {
|
28
|
-
@include -zf-breakpoint-value(auto, $padding) {
|
29
|
-
padding-left: rem-calc($-zf-bp-value / 2);
|
30
|
-
padding-right: rem-calc($-zf-bp-value / 2);
|
31
|
-
}
|
32
|
-
}
|
33
|
-
@elseif (type-of($padding) == 'number') {
|
34
|
-
padding-left: rem-calc($padding) / 2;
|
35
|
-
padding-right: rem-calc($padding) / 2;
|
36
|
-
}
|
37
|
-
@include breakpoint($max) {
|
38
|
-
padding-left: 0;
|
39
|
-
padding-right: 0;
|
40
|
-
}
|
41
|
-
}
|
42
|
-
|
43
22
|
/// Creates a container for your flex cells.
|
44
23
|
///
|
45
24
|
/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.
|
@@ -30,7 +30,7 @@
|
|
30
30
|
|
31
31
|
// Loop through each gutter position
|
32
32
|
@each $value in $gutter-position {
|
33
|
-
#{$gutter-type}-#{$value}: #{$operator}$gutter;
|
33
|
+
#{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
|
34
34
|
}
|
35
35
|
}
|
36
36
|
}
|
@@ -39,7 +39,7 @@
|
|
39
39
|
|
40
40
|
// Loop through each gutter position
|
41
41
|
@each $value in $gutter-position {
|
42
|
-
#{$gutter-type}-#{$value}: #{$operator}$gutter;
|
42
|
+
#{$gutter-type}-#{$value}: unquote("#{$operator}#{$gutter}");
|
43
43
|
}
|
44
44
|
}
|
45
45
|
}
|
@@ -28,6 +28,6 @@
|
|
28
28
|
$size: percentage(1/$n);
|
29
29
|
|
30
30
|
& > #{$selector} {
|
31
|
-
@include xy-cell($size, $gutter-output, $
|
31
|
+
@include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
|
32
32
|
}
|
33
33
|
}
|
@@ -33,14 +33,13 @@ $grid-padding-gutters: $grid-margin-gutters !default;
|
|
33
33
|
/// @type Map | Length
|
34
34
|
$grid-container-padding: $grid-padding-gutters !default;
|
35
35
|
|
36
|
-
|
37
|
-
/// The maximum width to apply padding to a grid container
|
36
|
+
/// The maximum width to apply to a grid container
|
38
37
|
/// @type Number
|
39
38
|
$grid-container-max: $global-width !default;
|
40
39
|
|
41
|
-
/// The maximum number of cells in
|
40
|
+
/// The maximum number of cells in an XY block grid.
|
42
41
|
/// @type Number
|
43
|
-
$block-grid-max: 8 !default;
|
42
|
+
$xy-block-grid-max: 8 !default;
|
44
43
|
|
45
44
|
@import 'gutters';
|
46
45
|
@import 'grid';
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: foundation-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 6.4.
|
4
|
+
version: 6.4.3.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- ZURB
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
11
|
+
date: 2018-03-13 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
@@ -156,6 +156,7 @@ files:
|
|
156
156
|
- lib/generators/foundation/templates/application.html.erb
|
157
157
|
- lib/generators/foundation/templates/application.html.haml
|
158
158
|
- lib/generators/foundation/templates/application.html.slim
|
159
|
+
- lib/generators/foundation/templates/browserslist
|
159
160
|
- lib/generators/foundation/templates/foundation_and_overrides.scss
|
160
161
|
- spec/features/generator_spec.rb
|
161
162
|
- spec/spec_helper.rb
|
@@ -165,6 +166,7 @@ files:
|
|
165
166
|
- vendor/assets/_vendor/normalize-scss/sass/normalize/_normalize-mixin.scss
|
166
167
|
- vendor/assets/_vendor/normalize-scss/sass/normalize/_variables.scss
|
167
168
|
- vendor/assets/_vendor/normalize-scss/sass/normalize/_vertical-rhythm.scss
|
169
|
+
- vendor/assets/_vendor/sassy-lists/stylesheets/functions/_contain.scss
|
168
170
|
- vendor/assets/_vendor/sassy-lists/stylesheets/functions/_purge.scss
|
169
171
|
- vendor/assets/_vendor/sassy-lists/stylesheets/functions/_remove.scss
|
170
172
|
- vendor/assets/_vendor/sassy-lists/stylesheets/functions/_replace.scss
|
@@ -201,10 +203,8 @@ files:
|
|
201
203
|
- vendor/assets/js/foundation.util.motion.js
|
202
204
|
- vendor/assets/js/foundation.util.nest.js
|
203
205
|
- vendor/assets/js/foundation.util.timer.js
|
204
|
-
- vendor/assets/js/foundation.util.timerAndImageLoader.js
|
205
206
|
- vendor/assets/js/foundation.util.touch.js
|
206
207
|
- vendor/assets/js/foundation.util.triggers.js
|
207
|
-
- vendor/assets/js/foundation.zf.responsiveAccordionTabs.js
|
208
208
|
- vendor/assets/scss/_global.scss
|
209
209
|
- vendor/assets/scss/components/_accordion-menu.scss
|
210
210
|
- vendor/assets/scss/components/_accordion.scss
|
@@ -353,7 +353,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
353
353
|
version: '0'
|
354
354
|
requirements: []
|
355
355
|
rubyforge_project:
|
356
|
-
rubygems_version: 2.
|
356
|
+
rubygems_version: 2.5.2
|
357
357
|
signing_key:
|
358
358
|
specification_version: 4
|
359
359
|
summary: ZURB Foundation on Sass/Compass
|
@@ -1,90 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
!function ($) {
|
4
|
-
|
5
|
-
function Timer(elem, options, cb) {
|
6
|
-
var _this = this,
|
7
|
-
duration = options.duration,
|
8
|
-
//options is an object for easily adding features later.
|
9
|
-
nameSpace = Object.keys(elem.data())[0] || 'timer',
|
10
|
-
remain = -1,
|
11
|
-
start,
|
12
|
-
timer;
|
13
|
-
|
14
|
-
this.isPaused = false;
|
15
|
-
|
16
|
-
this.restart = function () {
|
17
|
-
remain = -1;
|
18
|
-
clearTimeout(timer);
|
19
|
-
this.start();
|
20
|
-
};
|
21
|
-
|
22
|
-
this.start = function () {
|
23
|
-
this.isPaused = false;
|
24
|
-
// if(!elem.data('paused')){ return false; }//maybe implement this sanity check if used for other things.
|
25
|
-
clearTimeout(timer);
|
26
|
-
remain = remain <= 0 ? duration : remain;
|
27
|
-
elem.data('paused', false);
|
28
|
-
start = Date.now();
|
29
|
-
timer = setTimeout(function () {
|
30
|
-
if (options.infinite) {
|
31
|
-
_this.restart(); //rerun the timer.
|
32
|
-
}
|
33
|
-
if (cb && typeof cb === 'function') {
|
34
|
-
cb();
|
35
|
-
}
|
36
|
-
}, remain);
|
37
|
-
elem.trigger('timerstart.zf.' + nameSpace);
|
38
|
-
};
|
39
|
-
|
40
|
-
this.pause = function () {
|
41
|
-
this.isPaused = true;
|
42
|
-
//if(elem.data('paused')){ return false; }//maybe implement this sanity check if used for other things.
|
43
|
-
clearTimeout(timer);
|
44
|
-
elem.data('paused', true);
|
45
|
-
var end = Date.now();
|
46
|
-
remain = remain - (end - start);
|
47
|
-
elem.trigger('timerpaused.zf.' + nameSpace);
|
48
|
-
};
|
49
|
-
}
|
50
|
-
|
51
|
-
/**
|
52
|
-
* Runs a callback function when images are fully loaded.
|
53
|
-
* @param {Object} images - Image(s) to check if loaded.
|
54
|
-
* @param {Func} callback - Function to execute when image is fully loaded.
|
55
|
-
*/
|
56
|
-
function onImagesLoaded(images, callback) {
|
57
|
-
var self = this,
|
58
|
-
unloaded = images.length;
|
59
|
-
|
60
|
-
if (unloaded === 0) {
|
61
|
-
callback();
|
62
|
-
}
|
63
|
-
|
64
|
-
images.each(function () {
|
65
|
-
// Check if image is loaded
|
66
|
-
if (this.complete || this.readyState === 4 || this.readyState === 'complete') {
|
67
|
-
singleImageLoaded();
|
68
|
-
}
|
69
|
-
// Force load the image
|
70
|
-
else {
|
71
|
-
// fix for IE. See https://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
|
72
|
-
var src = $(this).attr('src');
|
73
|
-
$(this).attr('src', src + (src.indexOf('?') >= 0 ? '&' : '?') + new Date().getTime());
|
74
|
-
$(this).one('load', function () {
|
75
|
-
singleImageLoaded();
|
76
|
-
});
|
77
|
-
}
|
78
|
-
});
|
79
|
-
|
80
|
-
function singleImageLoaded() {
|
81
|
-
unloaded--;
|
82
|
-
if (unloaded === 0) {
|
83
|
-
callback();
|
84
|
-
}
|
85
|
-
}
|
86
|
-
}
|
87
|
-
|
88
|
-
Foundation.Timer = Timer;
|
89
|
-
Foundation.onImagesLoaded = onImagesLoaded;
|
90
|
-
}(jQuery);
|
@@ -1,262 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
4
|
-
|
5
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
6
|
-
|
7
|
-
!function ($) {
|
8
|
-
|
9
|
-
/**
|
10
|
-
* ResponsiveAccordionTabs module.
|
11
|
-
* @module foundation.responsiveAccordionTabs
|
12
|
-
* @requires foundation.util.keyboard
|
13
|
-
* @requires foundation.util.timerAndImageLoader
|
14
|
-
* @requires foundation.util.motion
|
15
|
-
* @requires foundation.accordion
|
16
|
-
* @requires foundation.tabs
|
17
|
-
*/
|
18
|
-
|
19
|
-
var ResponsiveAccordionTabs = function () {
|
20
|
-
/**
|
21
|
-
* Creates a new instance of a responsive accordion tabs.
|
22
|
-
* @class
|
23
|
-
* @fires ResponsiveAccordionTabs#init
|
24
|
-
* @param {jQuery} element - jQuery object to make into a dropdown menu.
|
25
|
-
* @param {Object} options - Overrides to the default plugin settings.
|
26
|
-
*/
|
27
|
-
function ResponsiveAccordionTabs(element, options) {
|
28
|
-
_classCallCheck(this, ResponsiveAccordionTabs);
|
29
|
-
|
30
|
-
this.$element = $(element);
|
31
|
-
this.options = $.extend({}, this.$element.data(), options);
|
32
|
-
this.rules = this.$element.data('responsive-accordion-tabs');
|
33
|
-
this.currentMq = null;
|
34
|
-
this.currentPlugin = null;
|
35
|
-
if (!this.$element.attr('id')) {
|
36
|
-
this.$element.attr('id', Foundation.GetYoDigits(6, 'responsiveaccordiontabs'));
|
37
|
-
};
|
38
|
-
|
39
|
-
this._init();
|
40
|
-
this._events();
|
41
|
-
|
42
|
-
Foundation.registerPlugin(this, 'ResponsiveAccordionTabs');
|
43
|
-
}
|
44
|
-
|
45
|
-
/**
|
46
|
-
* Initializes the Menu by parsing the classes from the 'data-responsive-accordion-tabs' attribute on the element.
|
47
|
-
* @function
|
48
|
-
* @private
|
49
|
-
*/
|
50
|
-
|
51
|
-
|
52
|
-
_createClass(ResponsiveAccordionTabs, [{
|
53
|
-
key: '_init',
|
54
|
-
value: function _init() {
|
55
|
-
// The first time an Interchange plugin is initialized, this.rules is converted from a string of "classes" to an object of rules
|
56
|
-
if (typeof this.rules === 'string') {
|
57
|
-
var rulesTree = {};
|
58
|
-
|
59
|
-
// Parse rules from "classes" pulled from data attribute
|
60
|
-
var rules = this.rules.split(' ');
|
61
|
-
|
62
|
-
// Iterate through every rule found
|
63
|
-
for (var i = 0; i < rules.length; i++) {
|
64
|
-
var rule = rules[i].split('-');
|
65
|
-
var ruleSize = rule.length > 1 ? rule[0] : 'small';
|
66
|
-
var rulePlugin = rule.length > 1 ? rule[1] : rule[0];
|
67
|
-
|
68
|
-
if (MenuPlugins[rulePlugin] !== null) {
|
69
|
-
rulesTree[ruleSize] = MenuPlugins[rulePlugin];
|
70
|
-
}
|
71
|
-
}
|
72
|
-
|
73
|
-
this.rules = rulesTree;
|
74
|
-
}
|
75
|
-
|
76
|
-
this._getAllOptions();
|
77
|
-
|
78
|
-
if (!$.isEmptyObject(this.rules)) {
|
79
|
-
this._checkMediaQueries();
|
80
|
-
}
|
81
|
-
}
|
82
|
-
}, {
|
83
|
-
key: '_getAllOptions',
|
84
|
-
value: function _getAllOptions() {
|
85
|
-
//get all defaults and options
|
86
|
-
var _this = this;
|
87
|
-
_this.allOptions = {};
|
88
|
-
for (var key in MenuPlugins) {
|
89
|
-
if (MenuPlugins.hasOwnProperty(key)) {
|
90
|
-
var obj = MenuPlugins[key];
|
91
|
-
try {
|
92
|
-
var dummyPlugin = $('<ul></ul>');
|
93
|
-
var tmpPlugin = new obj.plugin(dummyPlugin, _this.options);
|
94
|
-
for (var keyKey in tmpPlugin.options) {
|
95
|
-
if (tmpPlugin.options.hasOwnProperty(keyKey) && keyKey !== 'zfPlugin') {
|
96
|
-
var objObj = tmpPlugin.options[keyKey];
|
97
|
-
_this.allOptions[keyKey] = objObj;
|
98
|
-
}
|
99
|
-
}
|
100
|
-
tmpPlugin.destroy();
|
101
|
-
} catch (e) {}
|
102
|
-
}
|
103
|
-
}
|
104
|
-
}
|
105
|
-
|
106
|
-
/**
|
107
|
-
* Initializes events for the Menu.
|
108
|
-
* @function
|
109
|
-
* @private
|
110
|
-
*/
|
111
|
-
|
112
|
-
}, {
|
113
|
-
key: '_events',
|
114
|
-
value: function _events() {
|
115
|
-
var _this = this;
|
116
|
-
|
117
|
-
$(window).on('changed.zf.mediaquery', function () {
|
118
|
-
_this._checkMediaQueries();
|
119
|
-
});
|
120
|
-
}
|
121
|
-
|
122
|
-
/**
|
123
|
-
* 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.
|
124
|
-
* @function
|
125
|
-
* @private
|
126
|
-
*/
|
127
|
-
|
128
|
-
}, {
|
129
|
-
key: '_checkMediaQueries',
|
130
|
-
value: function _checkMediaQueries() {
|
131
|
-
var matchedMq,
|
132
|
-
_this = this;
|
133
|
-
// Iterate through each rule and find the last matching rule
|
134
|
-
$.each(this.rules, function (key) {
|
135
|
-
if (Foundation.MediaQuery.atLeast(key)) {
|
136
|
-
matchedMq = key;
|
137
|
-
}
|
138
|
-
});
|
139
|
-
|
140
|
-
// No match? No dice
|
141
|
-
if (!matchedMq) return;
|
142
|
-
|
143
|
-
// Plugin already initialized? We good
|
144
|
-
if (this.currentPlugin instanceof this.rules[matchedMq].plugin) return;
|
145
|
-
|
146
|
-
// Remove existing plugin-specific CSS classes
|
147
|
-
$.each(MenuPlugins, function (key, value) {
|
148
|
-
_this.$element.removeClass(value.cssClass);
|
149
|
-
});
|
150
|
-
|
151
|
-
// Add the CSS class for the new plugin
|
152
|
-
this.$element.addClass(this.rules[matchedMq].cssClass);
|
153
|
-
|
154
|
-
// Create an instance of the new plugin
|
155
|
-
if (this.currentPlugin) {
|
156
|
-
//don't know why but on nested elements data zfPlugin get's lost
|
157
|
-
if (!this.currentPlugin.$element.data('zfPlugin') && this.storezfData) this.currentPlugin.$element.data('zfPlugin', this.storezfData);
|
158
|
-
this.currentPlugin.destroy();
|
159
|
-
}
|
160
|
-
this._handleMarkup(this.rules[matchedMq].cssClass);
|
161
|
-
this.currentPlugin = new this.rules[matchedMq].plugin(this.$element, {});
|
162
|
-
this.storezfData = this.currentPlugin.$element.data('zfPlugin');
|
163
|
-
}
|
164
|
-
}, {
|
165
|
-
key: '_handleMarkup',
|
166
|
-
value: function _handleMarkup(toSet) {
|
167
|
-
var _this = this,
|
168
|
-
fromString = 'accordion';
|
169
|
-
var $panels = $('[data-tabs-content=' + this.$element.attr('id') + ']');
|
170
|
-
if ($panels.length) fromString = 'tabs';
|
171
|
-
if (fromString === toSet) {
|
172
|
-
return;
|
173
|
-
};
|
174
|
-
|
175
|
-
var tabsTitle = _this.allOptions.linkClass ? _this.allOptions.linkClass : 'tabs-title';
|
176
|
-
var tabsPanel = _this.allOptions.panelClass ? _this.allOptions.panelClass : 'tabs-panel';
|
177
|
-
|
178
|
-
this.$element.removeAttr('role');
|
179
|
-
var $liHeads = this.$element.children('.' + tabsTitle + ',[data-accordion-item]').removeClass(tabsTitle).removeClass('accordion-item').removeAttr('data-accordion-item');
|
180
|
-
var $liHeadsA = $liHeads.children('a').removeClass('accordion-title');
|
181
|
-
|
182
|
-
if (fromString === 'tabs') {
|
183
|
-
$panels = $panels.children('.' + tabsPanel).removeClass(tabsPanel).removeAttr('role').removeAttr('aria-hidden').removeAttr('aria-labelledby');
|
184
|
-
$panels.children('a').removeAttr('role').removeAttr('aria-controls').removeAttr('aria-selected');
|
185
|
-
} else {
|
186
|
-
$panels = $liHeads.children('[data-tab-content]').removeClass('accordion-content');
|
187
|
-
};
|
188
|
-
|
189
|
-
$panels.css({ display: '', visibility: '' });
|
190
|
-
$liHeads.css({ display: '', visibility: '' });
|
191
|
-
if (toSet === 'accordion') {
|
192
|
-
$panels.each(function (key, value) {
|
193
|
-
$(value).appendTo($liHeads.get(key)).addClass('accordion-content').attr('data-tab-content', '').removeClass('is-active').css({ height: '' });
|
194
|
-
$('[data-tabs-content=' + _this.$element.attr('id') + ']').after('<div id="tabs-placeholder-' + _this.$element.attr('id') + '"></div>').remove();
|
195
|
-
$liHeads.addClass('accordion-item').attr('data-accordion-item', '');
|
196
|
-
$liHeadsA.addClass('accordion-title');
|
197
|
-
});
|
198
|
-
} else if (toSet === 'tabs') {
|
199
|
-
var $tabsContent = $('[data-tabs-content=' + _this.$element.attr('id') + ']');
|
200
|
-
var $placeholder = $('#tabs-placeholder-' + _this.$element.attr('id'));
|
201
|
-
if ($placeholder.length) {
|
202
|
-
$tabsContent = $('<div class="tabs-content"></div>').insertAfter($placeholder).attr('data-tabs-content', _this.$element.attr('id'));
|
203
|
-
$placeholder.remove();
|
204
|
-
} else {
|
205
|
-
$tabsContent = $('<div class="tabs-content"></div>').insertAfter(_this.$element).attr('data-tabs-content', _this.$element.attr('id'));
|
206
|
-
};
|
207
|
-
$panels.each(function (key, value) {
|
208
|
-
var tempValue = $(value).appendTo($tabsContent).addClass(tabsPanel);
|
209
|
-
var hash = $liHeadsA.get(key).hash.slice(1);
|
210
|
-
var id = $(value).attr('id') || Foundation.GetYoDigits(6, 'accordion');
|
211
|
-
if (hash !== id) {
|
212
|
-
if (hash !== '') {
|
213
|
-
$(value).attr('id', hash);
|
214
|
-
} else {
|
215
|
-
hash = id;
|
216
|
-
$(value).attr('id', hash);
|
217
|
-
$($liHeadsA.get(key)).attr('href', $($liHeadsA.get(key)).attr('href').replace('#', '') + '#' + hash);
|
218
|
-
};
|
219
|
-
};
|
220
|
-
var isActive = $($liHeads.get(key)).hasClass('is-active');
|
221
|
-
if (isActive) {
|
222
|
-
tempValue.addClass('is-active');
|
223
|
-
};
|
224
|
-
});
|
225
|
-
$liHeads.addClass(tabsTitle);
|
226
|
-
};
|
227
|
-
}
|
228
|
-
|
229
|
-
/**
|
230
|
-
* Destroys the instance of the current plugin on this element, as well as the window resize handler that switches the plugins out.
|
231
|
-
* @function
|
232
|
-
*/
|
233
|
-
|
234
|
-
}, {
|
235
|
-
key: 'destroy',
|
236
|
-
value: function destroy() {
|
237
|
-
if (this.currentPlugin) this.currentPlugin.destroy();
|
238
|
-
$(window).off('.zf.ResponsiveAccordionTabs');
|
239
|
-
Foundation.unregisterPlugin(this);
|
240
|
-
}
|
241
|
-
}]);
|
242
|
-
|
243
|
-
return ResponsiveAccordionTabs;
|
244
|
-
}();
|
245
|
-
|
246
|
-
ResponsiveAccordionTabs.defaults = {};
|
247
|
-
|
248
|
-
// The plugin matches the plugin classes with these plugin instances.
|
249
|
-
var MenuPlugins = {
|
250
|
-
tabs: {
|
251
|
-
cssClass: 'tabs',
|
252
|
-
plugin: Foundation._plugins.tabs || null
|
253
|
-
},
|
254
|
-
accordion: {
|
255
|
-
cssClass: 'accordion',
|
256
|
-
plugin: Foundation._plugins.accordion || null
|
257
|
-
}
|
258
|
-
};
|
259
|
-
|
260
|
-
// Window exports
|
261
|
-
Foundation.plugin(ResponsiveAccordionTabs, 'ResponsiveAccordionTabs');
|
262
|
-
}(jQuery);
|