|
13 | 13 |
|
14 | 14 | $(document).ready(function () { |
15 | 15 | var id; |
| 16 | + var isCarouselified = false; |
| 17 | + var isCollapsified = false; |
16 | 18 | carouselify(); |
17 | 19 | collapsify(); |
18 | 20 |
|
|
29 | 31 | function carouselify() { |
30 | 32 | var $tabFocus = $(".tab-focus"), |
31 | 33 | focusIndex = 0; |
32 | | - if($tabFocus && $(window).width() < 767 ) { |
| 34 | + if($tabFocus && $(window).width() <= 767 && !isCarouselified ) { |
| 35 | + isCarouselified = true; |
33 | 36 | $tabFocus.each(function () { |
34 | 37 | var $that = $(this), |
35 | 38 | itemIndex = -1; |
36 | 39 | focusIndex += 1; |
37 | 40 | $that.attr('id', 'tab-focus-'+focusIndex); |
38 | | - $that.next(".nav-tabs").hide(); |
| 41 | + $that.next(".nav-tabs").hide().removeClass('nav-tabs-focus').addClass('focus'); |
39 | 42 | $that.addClass('carousel slide').removeClass('tab-content tab-border'); |
40 | 43 | $that.wrapInner( "<div class='carousel-inner'></div>"); |
41 | 44 | $that.prepend( "<ol class=\"carousel-indicators\"></ol>" ); |
42 | 45 |
|
43 | 46 | $that.find('.tab-pane').each(function () { |
44 | 47 | itemIndex += 1; |
45 | | - $(this).removeClass('tab-pane fade in active').addClass('item'); |
| 48 | + $(this).removeClass('tab-pane in active').addClass('item'); |
46 | 49 | $that.find('.carousel-indicators').append("<li data-target=\"#tab-focus-"+focusIndex+"\" data-slide-to=\""+itemIndex+"\" class=\"\"></li>"); |
47 | 50 | }); |
48 | 51 | $that.find('.item:first').addClass('active'); |
49 | 52 | $that.find('.carousel-indicators li:first-child').addClass('active'); |
50 | 53 |
|
51 | 54 | $that.append( "<a class=\"left carousel-control icon icon--before icon--less\" href=\"#tab-focus-"+focusIndex+"\" data-slide=\"prev\"></a><a class=\"right carousel-control icon icon--before icon--greater\" href=\"#tab-focus-"+focusIndex+"\" data-slide=\"next\"></a>" ); |
52 | 55 | }); |
53 | | - } else if($tabFocus) { |
| 56 | + } else if($tabFocus && $(window).width() > 767 && isCarouselified) { |
| 57 | + isCarouselified = false; |
54 | 58 | $tabFocus.each(function () { |
55 | 59 | var $that = $(this); |
56 | 60 | focusIndex -= 1; |
57 | | - $that.next(".nav-tabs").show(); |
| 61 | + $that.attr('id', ''); |
| 62 | + $that.next(".focus").addClass('nav-tabs-focus').removeClass('focus').css('display', 'flex'); // we can't use .show() because it should be a flex wrapper |
58 | 63 | $that.removeClass('carousel slide').addClass('tab-content tab-border'); |
59 | 64 | $that.find( "ol.carousel-indicators" ).remove(); |
60 | 65 |
|
61 | 66 | $that.find('.item').each(function () { |
62 | | - $(this).addClass('tab-pane fade').removeClass('item'); |
| 67 | + $(this).addClass('tab-pane').removeClass('item'); |
63 | 68 | $(this).css('height', 'auto'); |
64 | 69 | }); |
65 | 70 | $that.find('.tab-pane:first-child').addClass('active in'); |
|
74 | 79 | } |
75 | 80 |
|
76 | 81 | function collapsify() { |
77 | | - var $navTab = $(".nav-tabs"), |
| 82 | + var $navTab = $(".nav-tabs:not(.focus)"), |
78 | 83 | $collapsify = $(".collapsify"), |
79 | 84 | linkIndex = 0; |
80 | | - if($navTab && $(window).width() < 767 ) { |
| 85 | + if($navTab && $(window).width() <= 767 && !isCollapsified ) { |
| 86 | + isCollapsified = true; |
81 | 87 | $navTab.not('.tab-focus').each(function (){ |
82 | 88 | var $that = $(this); |
83 | 89 | $that.removeClass("nav-tabs").addClass('collapsify'); |
|
96 | 102 | }); |
97 | 103 | //$that.find('a:first-child').removeClass('collapse-closed').next('.collapse').addClass('in'); |
98 | 104 | }); |
99 | | - } else if($collapsify) { |
| 105 | + } else if($collapsify && $(window).width() > 767 && isCollapsified) { |
| 106 | + isCollapsified = false; |
100 | 107 | $collapsify.each(function (){ |
101 | 108 | var $that = $(this); |
102 | 109 | $that.addClass("nav-tabs").removeClass('collapsify'); |
|
0 commit comments