diff --git a/assets/css/easy-responsive-tabs.css b/assets/css/easy-responsive-tabs.css new file mode 100644 index 0000000..39f29b9 --- /dev/null +++ b/assets/css/easy-responsive-tabs.css @@ -0,0 +1,191 @@ +:root { + --resp-tab-border-color: #c1c1c1; +} + +ul.resp-tabs-list, p { + margin: 0; + padding: 0; +} + +.resp-tabs-list li { + font-weight: 600; + font-size: 13px; + padding: 13px 15px; + margin: 0; + list-style: none; + cursor: pointer; + display: inline-block; +} + +.resp-tabs-container { + padding: 0; + background-color: #fff; + clear: left; +} + +h2.resp-accordion { + cursor: pointer; + padding: 5px; + display: none; +} + +.resp-tab-content { + display: none; + padding: 15px; +} + +.resp-tab-active { + border: 1px solid var(--resp-tab-border-color); + border-bottom: none; + margin-bottom: -1px !important; + padding: 12px 14px 14px 14px !important; +} + +.resp-tab-active { + border-bottom: none; + background-color: #fff; +} + +.resp-content-active, .resp-accordion-active { + display: block; +} + +.resp-tab-content { + border: 1px solid var(--resp-tab-border-color); +} + +h2.resp-accordion { + font-size: 13px; + border: 1px solid var(--resp-tab-border-color); + border-top: 0; + margin: 0; + padding: 10px 15px; +} + +h2.resp-tab-active { + border-bottom: 0 !important; + margin-bottom: 0 !important; + padding: 10px 15px !important; +} + +h2.resp-tab-title:last-child { + border-bottom: 12px solid var(--resp-tab-border-color) !important; + background: blue; +} + +/*-----------Vertical tabs-----------*/ +.resp-vtabs ul.resp-tabs-list { + float: left; + width: 30%; +} + +.resp-vtabs .resp-tabs-list li { + display: block; + padding: 15px 15px !important; + margin: 0; + cursor: pointer; + float: none; +} + +.resp-vtabs .resp-tabs-container { + padding: 0; + background-color: #fff; + border: 1px solid var(--resp-tab-border-color); + float: left; + width: 68%; + min-height: 250px; + border-radius: 4px; + clear: none; +} + +.resp-vtabs .resp-tab-content { + border: none; +} + +.resp-vtabs li.resp-tab-active { + border: 1px solid var(--resp-tab-border-color); + border-right: none; + background-color: #fff; + position: relative; + z-index: 1; + margin-right: -1px !important; + padding: 14px 15px 15px 14px !important; +} + +.resp-arrow { + width: 0; + height: 0; + float: right; + margin-top: 3px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 12px solid var(--resp-tab-border-color); +} + +h2.resp-tab-active span.resp-arrow { + border: none; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 12px solid #9b9797; +} + +/*-----------Accordion styles-----------*/ +h2.resp-tab-active { + background: #dbdbdb !important; +} + +.resp-easy-accordion h2.resp-accordion { + display: block; +} + +.resp-easy-accordion .resp-tab-content { + border: 1px solid var(--resp-tab-border-color); +} + +.resp-easy-accordion .resp-tab-content:last-child { + border-bottom: 1px solid var(--resp-tab-border-color) !important; +} + +.resp-jfit { + width: 100%; + margin: 0; +} + +.resp-tab-content-active { + display: block; +} + +h2.resp-accordion:first-child { + border-top: 1px solid var(--resp-tab-border-color) !important; +} + +/* Here your can change the breakpoint to set the accordion, when screen resolution changed. */ +@media only screen and (max-width: 768px) { + ul.resp-tabs-list { + display: none; + } + + h2.resp-accordion { + display: block; + } + + .resp-vtabs .resp-tab-content { + border: 1px solid var(--resp-tab-border-color); + } + + .resp-vtabs .resp-tabs-container { + border: none; + float: none; + width: 100%; + min-height: initial; + clear: none; + } + + .resp-accordion-closed { + display: none !important; + } + + .resp-vtabs .resp-tab-content:last-child { + border-bottom: 1px solid var(--resp-tab-border-color) !important; + } +} diff --git a/assets/js/easyResponsiveTabs.js b/assets/js/easyResponsiveTabs.js new file mode 100644 index 0000000..80dd192 --- /dev/null +++ b/assets/js/easyResponsiveTabs.js @@ -0,0 +1,125 @@ +// Easy Responsive Tabs Plugin +// Author: Samson.Onna +(function ($) { + $.fn.extend({ + easyResponsiveTabs: function (options) { + //Set the default values, use comma to separate the settings, example: + var defaults = { + type: 'default', //default, vertical, accordion; + width: 'auto', + fit: true, + closed: false, + activate: function(){} + } + //Variables + var options = $.extend(defaults, options); + var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion'; + + //Events + $(this).bind('tabactivate', function(e, currentTab) { + if(typeof options.activate === 'function') { + options.activate.call(currentTab, e) + } + }); + + //Main function + this.each(function () { + var $respTabs = $(this); + var $respTabsList = $respTabs.find('ul.resp-tabs-list'); + $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item'); + $respTabs.css({ + 'display': 'block', + 'width': jwidth + }); + + $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content'); + jtab_options(); + //Properties Function + function jtab_options() { + if (jtype == vtabs) { + $respTabs.addClass('resp-vtabs'); + } + if (jfit == true) { + $respTabs.css({ width: '100%', margin: '0px' }); + } + if (jtype == accord) { + $respTabs.addClass('resp-easy-accordion'); + $respTabs.find('.resp-tabs-list').css('display', 'none'); + } + } + + //Assigning the h2 markup to accordion title + var $tabItemh2; + $respTabs.find('.resp-tab-content').before(""); + + var itemCount = 0; + $respTabs.find('.resp-accordion').each(function () { + $tabItemh2 = $(this); + var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').html(); + $respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext); + $tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount)); + itemCount++; + }); + + //Assigning the 'aria-controls' to Tab items + var count = 0, + $tabContent; + $respTabs.find('.resp-tab-item').each(function () { + $tabItem = $(this); + $tabItem.attr('aria-controls', 'tab_item-' + (count)); + $tabItem.attr('role', 'tab'); + + //First active tab, keep closed if option = 'closed' or option is 'accordion' and the element is in accordion mode + if(options.closed !== true && !(options.closed === 'accordion' && !$respTabsList.is(':visible')) && !(options.closed === 'tabs' && $respTabsList.is(':visible'))) { + $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active'); + $respTabs.find('.resp-accordion').first().addClass('resp-tab-active'); + $respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block'); + } + + //Assigning the 'aria-labelledby' attr to tab-content + var tabcount = 0; + $respTabs.find('.resp-tab-content').each(function () { + $tabContent = $(this); + $tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount)); + tabcount++; + }); + count++; + }); + + //Tab Click action function + $respTabs.find("[role=tab]").each(function () { + var $currentTab = $(this); + $currentTab.click(function () { + + var $tabAria = $currentTab.attr('aria-controls'); + + if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) { + $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); }); + $currentTab.removeClass('resp-tab-active'); + return false; + } + if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) { + $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); + $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed'); + $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); + + $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active'); + } else { + $respTabs.find('.resp-tab-active').removeClass('resp-tab-active'); + $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed'); + $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active'); + $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block'); + } + //Trigger tab activation event + $currentTab.trigger('tabactivate', $currentTab); + }); + //Window resize function + $(window).resize(function () { + $respTabs.find('.resp-accordion-closed').removeAttr('style'); + }); + }); + }); + } + }); +})(jQuery); + diff --git a/field_group_easy_responsive_tabs.libraries.yml b/field_group_easy_responsive_tabs.libraries.yml index ef4d73a..18da862 100644 --- a/field_group_easy_responsive_tabs.libraries.yml +++ b/field_group_easy_responsive_tabs.libraries.yml @@ -1,9 +1,9 @@ easy-responsive-tabs: css: theme: - /libraries/easy-responsive-tabs/css/easy-responsive-tabs.css: {} + assets/css/easy-responsive-tabs.css: {} js: - /libraries/easy-responsive-tabs/js/easyResponsiveTabs.js: {} + assets/js/easyResponsiveTabs.js: {} dependencies: - core/jquery