Skip to content
Snippets Groups Projects
Commit dffe17cd authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

Issue #3081489 by kostyashupenko, mherchel, justafish, andy-blum,... 

Issue #3081489 by kostyashupenko, mherchel, justafish, andy-blum, yogeshmpawar, lauriii, bnjmnm, huzooka, webchick: Remove duplicate code from veritcal-tabs.js in Claro
parent b6861770
Branches
Tags
37 merge requests!12227Issue #3181946 by jonmcl, mglaman,!7471uncessary 5 files are moved from media-library folder to misc folder,!7452Issue #1797438. HTML5 validation is preventing form submit and not fully...,!54479.5.x SF update,!5014Issue #3071143: Table Render Array Example Is Incorrect,!4868Issue #1428520: Improve menu parent link selection,!4289Issue #1344552 by marcingy, Niklas Fiekas, Ravi.J, aleevas, Eduardo Morales...,!4114Issue #2707291: Disable body-level scrolling when a dialog is open as a modal,!3630Issue #2815301 by Chi, DanielVeza, kostyashupenko, smustgrave: Allow to create...,!3291Issue #3336463: Rewrite rules for gzipped CSS and JavaScript aggregates never match,!3143Issue #3313342: [PHP 8.1] Deprecated function: strpos(): Passing null to parameter #1 LayoutBuilderUiCacheContext.php on line 28,!3102Issue #3164428 by DonAtt, longwave, sahil.goyal, Anchal_gupta, alexpott: Use...,!2853#3274419 Makes BaseFieldOverride inherit the internal property from the base field.,!2719Issue #3110137: Remove Classy from core.,!2437Issue #3238257 by hooroomoo, Wim Leers: Fragment link pointing to <textarea>...,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2074Issue #2707689: NodeForm::actions() checks for delete access on new entities,!2062Issue #3246454: Add weekly granularity to views date sort,!1591Issue #3199697: Add JSON:API Translation experimental module,!1484Exposed filters get values from URL when Ajax is on,!1255Issue #3238922: Refactor (if feasible) uses of the jQuery serialize function to use vanillaJS,!1254Issue #3238915: Refactor (if feasible) uses of the jQuery ready function to use VanillaJS,!1162Issue #3100350: Unable to save '/' root path alias,!1073issue #3191727: Focus states on mobile second level navigation items fixed,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!957Added throwing of InvalidPluginDefinitionException from getDefinition().,!925Issue #2339235: Remove taxonomy hard dependency on node module,!877Issue #2708101: Default value for link text is not saved,!873Issue #2875228: Site install not using batch API service,!872Draft: Issue #3221319: Race condition when creating menu links and editing content deletes menu links,!844Resolve #3036010 "Updaters",!712Issue #2909128: Autocomplete intermittent on Chrome Android,!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493,!485Sets the autocomplete attribute for username/password input field on login form.,!30Issue #3182188: Updates composer usage to point at ./vendor/bin/composer
Hide whitespace changes
Inline Side-by-side
Showing
with 67 additions and 652 deletions
core/misc/vertical-tabs.es6.js
+ 4
− 4
View file @ dffe17cd
......@@ -92,9 +92,7 @@
tabList.append(verticalTab.item);
$that
.removeClass('collapsed')
// prop() can't be used on browsers not supporting details element,
// the style won't apply to them if prop() is used.
.attr('open', true)
.removeAttr('open')
.addClass('vertical-tabs__pane')
.data('verticalTab', verticalTab);
if (this.id === focusID) {
......@@ -178,12 +176,14 @@
.each(function () {
const tab = $(this).data('verticalTab');
tab.details.hide();
tab.details.removeAttr('open');
tab.item.removeClass('is-selected');
})
.end()
.show()
.siblings(':hidden.vertical-tabs__active-tab')[0].value =
this.details.attr('id');
this.details.attr('open', true);
this.item.addClass('is-selected');
// Mark the active tab for screen readers.
$('#active-vertical-tab').remove();
......@@ -249,7 +249,7 @@
.eq(0)
.addClass('first');
// Hide the details element.
this.details.addClass('vertical-tab--hidden').hide();
this.details.addClass('vertical-tab--hidden').hide().removeAttr('open');
// Focus the first visible tab (if there is one).
const $firstTab = this.details
.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)')
......
core/misc/vertical-tabs.js
+ 4
− 2
View file @ dffe17cd
......@@ -42,7 +42,7 @@
details: $that
});
tabList.append(verticalTab.item);
$that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', verticalTab);
$that.removeClass('collapsed').removeAttr('open').addClass('vertical-tabs__pane').data('verticalTab', verticalTab);
if (this.id === focusID) {
tabFocus = $that;
......@@ -94,8 +94,10 @@
this.details.siblings('.vertical-tabs__pane').each(function () {
const tab = $(this).data('verticalTab');
tab.details.hide();
tab.details.removeAttr('open');
tab.item.removeClass('is-selected');
}).end().show().siblings(':hidden.vertical-tabs__active-tab')[0].value = this.details.attr('id');
this.details.attr('open', true);
this.item.addClass('is-selected');
$('#active-vertical-tab').remove();
this.link.append(`<span id="active-vertical-tab" class="visually-hidden">${Drupal.t('(active tab)')}</span>`);
......@@ -117,7 +119,7 @@
tabHide() {
this.item.hide();
this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
this.details.addClass('vertical-tab--hidden').hide();
this.details.addClass('vertical-tab--hidden').hide().removeAttr('open');
const $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);
if ($firstTab.length) {
......
core/themes/claro/claro.info.yml
+ 0
− 2
View file @ dffe17cd
......@@ -52,8 +52,6 @@ libraries-override:
css:
component:
misc/vertical-tabs.css: false
js:
misc/vertical-tabs.js: js/vertical-tabs.js
core/drupal.autocomplete:
css:
......
core/themes/claro/claro.libraries.yml
+ 2
− 0
View file @ dffe17cd
......@@ -264,6 +264,8 @@ vertical-tabs:
css:
component:
css/components/vertical-tabs.css: {}
js:
js/vertical-tabs.js: {}
dependencies:
- claro/global-styling
......
core/themes/claro/css/components/vertical-tabs.css
+ 27
− 38
View file @ dffe17cd
......@@ -35,7 +35,7 @@
.vertical-tabs__menu {
position: relative;
display: none;
display: block;
float: left; /* LTR */
width: var(--vertical-tabs-menu-width);
margin: 0;
......@@ -49,13 +49,6 @@
margin: 0;
}
@media screen and (min-width: 85em) {
.vertical-tabs__menu {
display: block;
width: var(--vertical-tabs-menu-width);
}
}
/**
* Vertical tabs menu item.
*/
......@@ -107,7 +100,7 @@
* Making the separator line visible only if it follows an unhidden menu item.
*/
.vertical-tabs__menu-item:not(.vertical-tabs__menu-item--hidden) ~ .vertical-tabs__menu-item::before {
.vertical-tabs__menu-item:not(.vertical-tab--hidden) ~ .vertical-tabs__menu-item::before {
content: "";
}
......@@ -119,7 +112,7 @@
}
.vertical-tabs__menu-item.is-selected::before,
.vertical-tabs__menu-item:not(.vertical-tabs__menu-item--hidden) ~ .vertical-tabs__menu-item.is-selected::before {
.vertical-tabs__menu-item:not(.vertical-tab--hidden) ~ .vertical-tabs__menu-item.is-selected::before {
content: normal;
}
......@@ -286,7 +279,7 @@
/* This modifier is added by JavaScript (this is inherited from Drupal core). */
.vertical-tabs__items--processed {
.vertical-tabs__panes {
position: relative;
z-index: 1; /* The wrapper of the details of the vertical tabs should be on a higher level than the vertical tabs menu */
top: -1px;
......@@ -296,24 +289,22 @@
/* This clearfix makes the pane wrapper at least as tall as the menu. */
.vertical-tabs__items--processed::after {
.vertical-tabs__panes::after {
display: block;
clear: both;
content: "";
}
@media screen and (min-width: 85em) {
.vertical-tabs__items--processed {
margin-left: var(--vertical-tabs-menu-width); /* LTR */
border-top-left-radius: 0; /* LTR */
}
.vertical-tabs .vertical-tabs__panes {
margin-left: var(--vertical-tabs-menu-width); /* LTR */
border-top-left-radius: 0; /* LTR */
}
.js[dir="rtl"] .vertical-tabs__items--processed {
margin-right: var(--vertical-tabs-menu-width);
margin-left: 0;
border-top-left-radius: var(--vertical-tabs-border-radius);
border-top-right-radius: 0;
}
[dir="rtl"] .vertical-tabs .vertical-tabs__panes {
margin-right: var(--vertical-tabs-menu-width);
margin-left: 0;
border-top-left-radius: var(--vertical-tabs-border-radius);
border-top-right-radius: 0;
}
/**
......@@ -329,30 +320,28 @@
border-radius: 0;
}
.vertical-tabs__item--first {
.vertical-tabs__item.first {
border-top-left-radius: var(--details-accordion-border-size-radius);
border-top-right-radius: var(--details-accordion-border-size-radius);
}
.vertical-tabs__item--last {
.vertical-tabs__item.last {
margin-bottom: calc(var(--vertical-tabs-border-size)*-1);
border-bottom-right-radius: var(--details-accordion-border-size-radius);
border-bottom-left-radius: var(--details-accordion-border-size-radius);
}
@media screen and (min-width: 85em) {
.js .vertical-tabs__item {
overflow: hidden;
margin: 0;
border: 0;
}
.js .vertical-tabs .vertical-tabs__item {
overflow: hidden;
margin: 0;
border: 0;
}
.js .vertical-tabs__item--first,
.js .vertical-tabs__item--last {
border-radius: 0;
}
.js .vertical-tabs .vertical-tabs__item.first,
.js .vertical-tabs .vertical-tabs__item.last {
border-radius: 0;
}
.js .vertical-tabs__item > summary {
display: none;
}
.js .vertical-tabs .vertical-tabs__item > summary {
display: none;
}
core/themes/claro/css/components/vertical-tabs.pcss.css
+ 27
− 38
View file @ dffe17cd
......@@ -26,7 +26,7 @@
*/
.vertical-tabs__menu {
position: relative;
display: none;
display: block;
float: left; /* LTR */
width: var(--vertical-tabs-menu-width);
margin: 0;
......@@ -39,13 +39,6 @@
margin: 0;
}
@media screen and (min-width: 85em) {
.vertical-tabs__menu {
display: block;
width: var(--vertical-tabs-menu-width);
}
}
/**
* Vertical tabs menu item.
*/
......@@ -92,7 +85,7 @@
/**
* Making the separator line visible only if it follows an unhidden menu item.
*/
.vertical-tabs__menu-item:not(.vertical-tabs__menu-item--hidden) ~ .vertical-tabs__menu-item::before {
.vertical-tabs__menu-item:not(.vertical-tab--hidden) ~ .vertical-tabs__menu-item::before {
content: "";
}
......@@ -103,7 +96,7 @@
}
.vertical-tabs__menu-item.is-selected::before,
.vertical-tabs__menu-item:not(.vertical-tabs__menu-item--hidden) ~ .vertical-tabs__menu-item.is-selected::before {
.vertical-tabs__menu-item:not(.vertical-tab--hidden) ~ .vertical-tabs__menu-item.is-selected::before {
content: normal;
}
......@@ -259,7 +252,7 @@
}
/* This modifier is added by JavaScript (this is inherited from Drupal core). */
.vertical-tabs__items--processed {
.vertical-tabs__panes {
position: relative;
z-index: 1; /* The wrapper of the details of the vertical tabs should be on a higher level than the vertical tabs menu */
top: -1px;
......@@ -267,24 +260,22 @@
margin-bottom: 0;
}
/* This clearfix makes the pane wrapper at least as tall as the menu. */
.vertical-tabs__items--processed::after {
.vertical-tabs__panes::after {
display: block;
clear: both;
content: "";
}
@media screen and (min-width: 85em) {
.vertical-tabs__items--processed {
margin-left: var(--vertical-tabs-menu-width); /* LTR */
border-top-left-radius: 0; /* LTR */
}
.vertical-tabs .vertical-tabs__panes {
margin-left: var(--vertical-tabs-menu-width); /* LTR */
border-top-left-radius: 0; /* LTR */
}
.js[dir="rtl"] .vertical-tabs__items--processed {
margin-right: var(--vertical-tabs-menu-width);
margin-left: 0;
border-top-left-radius: var(--vertical-tabs-border-radius);
border-top-right-radius: 0;
}
[dir="rtl"] .vertical-tabs .vertical-tabs__panes {
margin-right: var(--vertical-tabs-menu-width);
margin-left: 0;
border-top-left-radius: var(--vertical-tabs-border-radius);
border-top-right-radius: 0;
}
/**
......@@ -299,30 +290,28 @@
border-radius: 0;
}
.vertical-tabs__item--first {
.vertical-tabs__item.first {
border-top-left-radius: var(--details-accordion-border-size-radius);
border-top-right-radius: var(--details-accordion-border-size-radius);
}
.vertical-tabs__item--last {
.vertical-tabs__item.last {
margin-bottom: calc(var(--vertical-tabs-border-size) * -1);
border-bottom-right-radius: var(--details-accordion-border-size-radius);
border-bottom-left-radius: var(--details-accordion-border-size-radius);
}
@media screen and (min-width: 85em) {
.js .vertical-tabs__item {
overflow: hidden;
margin: 0;
border: 0;
}
.js .vertical-tabs .vertical-tabs__item {
overflow: hidden;
margin: 0;
border: 0;
}
.js .vertical-tabs__item--first,
.js .vertical-tabs__item--last {
border-radius: 0;
}
.js .vertical-tabs .vertical-tabs__item.first,
.js .vertical-tabs .vertical-tabs__item.last {
border-radius: 0;
}
.js .vertical-tabs__item > summary {
display: none;
}
.js .vertical-tabs .vertical-tabs__item > summary {
display: none;
}
core/themes/claro/js/vertical-tabs.es6.js
+ 2
− 402
View file @ dffe17cd
/**
* @file
* Defines vertical tabs functionality.
*
* This file replaces core/misc/vertical-tabs.js to fix some bugs in the
* original implementation, as well as makes minor changes to enable Claro
* designs:
* 1. Replaces hard-coded markup and adds 'js-' prefixed CSS classes for the
* JavaScript functionality (https://www.drupal.org/node/3081489).
* - The original Drupal.behavior and Drupal.verticalTab object hard-code
* markup of the tab list and (the outermost) wrapper of the vertical tabs
* component.
* - The original Drupal.verticalTab object is built on the same (unprefixed)
* CSS classes that should be used only for theming the component:
* - .vertical-tabs__pane - replaced by .js-vertical-tabs-pane;
* - .vertical-tabs__menu-item - replaced by .js-vertical-tabs-menu-item;
* - .vertical-tab--hidden - replaced by .js-vertical-tab-hidden.
* 2. Fixes accessibility bugs (https://www.drupal.org/node/3081500):
* - The original Drupal.verticalTab object doesn't take care of the right
* aria attributes. Every details summary element is described with
* aria-expanded="false" and aria-pressed="false".
* - The original Drupal.verticalTab object uses a non-unique CSS id
* '#active-vertical-tab' for the marker of the active menu tab. This leads
* to broken behavior on filter format and editor configuration form where
* multiple vertical tabs may appear
* (/admin/config/content/formats/manage/basic_html).
* - Auto-focus bug: if the vertical tab is activated by pressing enter on
* the vertical tab menu link, the original Drupal.verticalTab object tries
* to focus the first visible :input element in a vertical tab content. The
* implementation doesn't work in all scenarios. For example, on the
* 'Filter format and editor' form
* (/admin/config/content/formats/manage/basic_html), if the user presses
* the enter key on the last vertical tabs element's menu link ('Filter
* settings'), the focused element will be the first vertical tabs
* ('CKEditor plugin settings') active input, and not the expected one.
* 3. Consistency between browsers (https://www.drupal.org/node/3081508):
* We have to display the setting summary on the 'accordion look' as well.
* Using the original file, these are displayed only on browsers without
* HTML5 details support, where core's built-in core/misc/collapse.js HTML5
* details polyfill is in action.
* 4. Help fulfill our custom needs (https://www.drupal.org/node/3081519):
* The original behavior applies its features only when the actual screen
* width is bigger than 640 pixels (or the value of the
* drupalSettings.widthBreakpoint). But we want to switch between the
* 'accordion look' and 'tab look' dynamically, right after the browser
* viewport was resized, and not only on page load.
* This would be possible even by defining drupalSettings.widthBreakpoint
* with '0' value. But since the name of this configuration does not suggest
* that it is (and will be) used only by vertical tabs, it is much cleaner
* to remove the unneeded condition from the functionality.
*/
/**
* Triggers when form values inside a vertical tab changes.
*
* This is used to update the summary in vertical tabs in order to know what
* are the important fields' values.
*
* @event summaryUpdated
* Overrides vertical tabs theming to enable Claro designs.
*/
(($, Drupal) => {
/**
* Show the parent vertical tab pane of a targeted page fragment.
*
* In order to make sure a targeted element inside a vertical tab pane is
* visible on a hash change or fragment link click, show all parent panes.
*
* @param {jQuery.Event} e
* The event triggered.
* @param {jQuery} $target
* The targeted node as a jQuery object.
*/
const handleFragmentLinkClickOrHashChange = (e, $target) => {
$target.parents('.js-vertical-tabs-pane').each((index, pane) => {
$(pane).data('verticalTab').focus();
});
};
/**
* This script transforms a set of details into a stack of vertical tabs.
*
* Each tab may have a summary which can be updated by another
* script. For that to work, each details element has an associated
* 'verticalTabCallback' (with jQuery.data() attached to the details),
* which is called every time the user performs an update to a form
* element inside the tab pane.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches behaviors for vertical tabs.
*/
Drupal.behaviors.claroVerticalTabs = {
attach(context) {
/**
* Binds a listener to handle fragment link clicks and URL hash changes.
*/
$(once('vertical-tabs-fragments', 'body')).on(
'formFragmentLinkClickOrHashChange.verticalTabs',
handleFragmentLinkClickOrHashChange,
);
once('vertical-tabs', '[data-vertical-tabs-panes]', context).forEach(
(panes) => {
const $this = $(panes).addClass('vertical-tabs__items--processed');
const focusID = $this.find(':hidden.vertical-tabs__active-tab')[0]
.value;
let tabFocus;
// Check if there are some details that can be converted to
// vertical-tabs.
const $details = $this.find('> details');
if ($details.length === 0) {
return;
}
// Create the tab column.
const tabList = $(Drupal.theme.verticalTabListWrapper());
$this
.wrap(
$(Drupal.theme.verticalTabsWrapper()).addClass(
'js-vertical-tabs',
),
)
.before(tabList);
// Transform each details into a tab.
$details.each(function initializeVerticalTabItems() {
const $that = $(this);
/* eslint-disable new-cap */
const verticalTab = new Drupal.verticalTab({
title: $that.find('> summary')[0].textContent,
details: $that,
});
/* eslint-enable new-cap */
tabList.append(verticalTab.item);
$that
// prop() can't be used on browsers not supporting details
// element, the style won't apply to them if prop() is used.
.removeAttr('open')
.addClass('js-vertical-tabs-pane')
.data('verticalTab', verticalTab);
if (this.id === focusID) {
tabFocus = $that;
}
});
if (!tabFocus) {
// If the current URL has a fragment and one of the tabs contains an
// element that matches the URL fragment, activate that tab.
const $locationHash = $this.find(window.location.hash);
if (window.location.hash && $locationHash.length) {
tabFocus = $locationHash.is('.js-vertical-tabs-pane')
? $locationHash
: $locationHash.closest('.js-vertical-tabs-pane');
} else {
tabFocus = $this.find('> .js-vertical-tabs-pane').eq(0);
}
}
if (tabFocus.length) {
tabFocus.data('verticalTab').focus(false);
}
},
);
},
};
/**
* The vertical tab object represents a single tab within a tab group.
*
* @constructor
*
* @param {object} settings
* Settings object.
* @param {string} settings.title
* The name of the tab.
* @param {jQuery} settings.details
* The jQuery object of the details element that is the tab pane.
*
* @fires event:summaryUpdated
*
* @listens event:summaryUpdated
*/
Drupal.verticalTab = function verticalTab(settings) {
const self = this;
$.extend(this, settings, Drupal.theme('verticalTab', settings));
this.item.addClass('js-vertical-tabs-menu-item');
this.link.attr('href', `#${settings.details.attr('id')}`);
this.link.on('click', (event) => {
event.preventDefault();
self.focus();
});
this.details.on('toggle', (event) => {
// We will control this by summary clicks.
event.preventDefault();
});
// Open the tab for every browser, with or without details support.
this.details
.find('> summary')
.on('click', (event) => {
event.preventDefault();
self.details.attr('open', true);
if (self.details.hasClass('collapse-processed')) {
setTimeout(() => {
self.focus();
}, 10);
} else {
self.focus();
}
})
.on('keydown', (event) => {
if (event.keyCode === 13) {
// Set focus on the first input field of the current visible details/tab
// pane.
setTimeout(() => {
self.details.find(':input:visible:enabled').eq(0).trigger('focus');
}, 10);
}
});
// Keyboard events added:
// Pressing the Enter key will open the tab pane.
this.link.on('keydown', (event) => {
if (event.keyCode === 13) {
event.preventDefault();
self.focus();
// Set focus on the first input field of the current visible details/tab
// pane.
self.details.find(':input:visible:enabled').eq(0).trigger('focus');
}
});
this.details
.on('summaryUpdated', () => {
self.updateSummary();
})
.trigger('summaryUpdated');
};
Drupal.verticalTab.prototype = {
/**
* Displays the tab's content pane.
*
* @param {bool} triggerFocus
* Whether focus should be triggered for the summary element.
*/
focus(triggerFocus = true) {
this.details
.siblings('.js-vertical-tabs-pane')
.each(function closeOtherTabs() {
const tab = $(this).data('verticalTab');
if (tab.details.attr('open')) {
tab.details.removeAttr('open').find('> summary').attr({
'aria-expanded': 'false',
'aria-pressed': 'false',
});
tab.item.removeClass('is-selected');
}
})
.end()
.siblings(':hidden.vertical-tabs__active-tab')
.val(this.details.attr('id'));
this.details
.attr('open', true)
.find('> summary')
.attr({
'aria-expanded': 'true',
'aria-pressed': 'true',
})
.closest('.js-vertical-tabs')
.find('.js-vertical-tab-active')
.remove();
if (triggerFocus) {
const $summary = this.details.find('> summary');
if ($summary.is(':visible')) {
$summary.trigger('focus');
}
}
this.item.addClass('is-selected');
// Mark the active tab for screen readers.
this.title.after(
$(Drupal.theme.verticalTabActiveTabIndicator()).addClass(
'js-vertical-tab-active',
),
);
},
/**
* Updates the tab's summary.
*/
updateSummary() {
const summary = this.details.drupalGetSummary();
this.summary.html(summary);
},
/**
* Shows a vertical tab pane.
*
* @return {Drupal.verticalTab}
* The verticalTab instance.
*/
tabShow() {
// Display the tab.
this.item.removeClass('vertical-tabs__menu-item--hidden').show();
// Show the vertical tabs.
this.item.closest('.js-form-type-vertical-tabs').show();
// Display the details element.
this.details
.removeClass('vertical-tab--hidden js-vertical-tab-hidden')
.show();
// Update first and last CSS classes for details.
this.details
.parent()
.children('.js-vertical-tabs-pane')
.removeClass('vertical-tabs__item--first vertical-tabs__item--last')
.filter(':visible')
.eq(0)
.addClass('vertical-tabs__item--first');
this.details
.parent()
.children('.js-vertical-tabs-pane')
.filter(':visible')
.eq(-1)
.addClass('vertical-tabs__item--last');
// Make tab active, but without triggering focus.
this.focus(false);
return this;
},
/**
* Hides a vertical tab pane.
*
* @return {Drupal.verticalTab}
* The verticalTab instance.
*/
tabHide() {
// Hide this tab.
this.item.addClass('vertical-tabs__menu-item--hidden').hide();
// Hide the details element.
this.details
.addClass('vertical-tab--hidden js-vertical-tab-hidden')
.hide();
// Update first and last CSS classes for details.
this.details
.parent()
.children('.js-vertical-tabs-pane')
.removeClass('vertical-tabs__item--first vertical-tabs__item--last')
.filter(':visible')
.eq(0)
.addClass('vertical-tabs__item--first');
this.details
.parent()
.children('.js-vertical-tabs-pane')
.filter(':visible')
.eq(-1)
.addClass('vertical-tabs__item--last');
// Focus the first visible tab (if there is one).
const $firstTab = this.details
.siblings('.js-vertical-tabs-pane:not(.js-vertical-tab-hidden)')
.eq(0);
if ($firstTab.length) {
$firstTab.data('verticalTab').focus(false);
}
// Hide the vertical tabs (if no tabs remain).
else {
this.item.closest('.js-form-type-vertical-tabs').hide();
}
return this;
},
};
/**
* Theme function for a vertical tab.
*
......@@ -394,7 +21,7 @@
*/
Drupal.theme.verticalTab = (settings) => {
const tab = {};
tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>');
tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>');
tab.title[0].textContent = settings.title;
tab.item = $(
'<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
......@@ -411,31 +38,4 @@
);
return tab;
};
/**
* Wrapper of the menu and the panes.
*
* @return {string}
* A string representing the DOM fragment.
*/
Drupal.theme.verticalTabsWrapper = () =>
'<div class="vertical-tabs clearfix"></div>';
/**
* The wrapper of the vertical tab menu items.
*
* @return {string}
* A string representing the DOM fragment.
*/
Drupal.theme.verticalTabListWrapper = () =>
'<ul class="vertical-tabs__menu"></ul>';
/**
* Themes the active vertical tab menu item message.
*
* @return {string}
* A string representing the DOM fragment.
*/
Drupal.theme.verticalTabActiveTabIndicator = () =>
`<span class="visually-hidden">${Drupal.t('(active tab)')}</span>`;
})(jQuery, Drupal);
core/themes/claro/js/vertical-tabs.js
+ 1
− 166
View file @ dffe17cd
......@@ -6,176 +6,11 @@
**/
(($, Drupal) => {
const handleFragmentLinkClickOrHashChange = (e, $target) => {
$target.parents('.js-vertical-tabs-pane').each((index, pane) => {
$(pane).data('verticalTab').focus();
});
};
Drupal.behaviors.claroVerticalTabs = {
attach(context) {
$(once('vertical-tabs-fragments', 'body')).on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange);
once('vertical-tabs', '[data-vertical-tabs-panes]', context).forEach(panes => {
const $this = $(panes).addClass('vertical-tabs__items--processed');
const focusID = $this.find(':hidden.vertical-tabs__active-tab')[0].value;
let tabFocus;
const $details = $this.find('> details');
if ($details.length === 0) {
return;
}
const tabList = $(Drupal.theme.verticalTabListWrapper());
$this.wrap($(Drupal.theme.verticalTabsWrapper()).addClass('js-vertical-tabs')).before(tabList);
$details.each(function initializeVerticalTabItems() {
const $that = $(this);
const verticalTab = new Drupal.verticalTab({
title: $that.find('> summary')[0].textContent,
details: $that
});
tabList.append(verticalTab.item);
$that.removeAttr('open').addClass('js-vertical-tabs-pane').data('verticalTab', verticalTab);
if (this.id === focusID) {
tabFocus = $that;
}
});
if (!tabFocus) {
const $locationHash = $this.find(window.location.hash);
if (window.location.hash && $locationHash.length) {
tabFocus = $locationHash.is('.js-vertical-tabs-pane') ? $locationHash : $locationHash.closest('.js-vertical-tabs-pane');
} else {
tabFocus = $this.find('> .js-vertical-tabs-pane').eq(0);
}
}
if (tabFocus.length) {
tabFocus.data('verticalTab').focus(false);
}
});
}
};
Drupal.verticalTab = function verticalTab(settings) {
const self = this;
$.extend(this, settings, Drupal.theme('verticalTab', settings));
this.item.addClass('js-vertical-tabs-menu-item');
this.link.attr('href', `#${settings.details.attr('id')}`);
this.link.on('click', event => {
event.preventDefault();
self.focus();
});
this.details.on('toggle', event => {
event.preventDefault();
});
this.details.find('> summary').on('click', event => {
event.preventDefault();
self.details.attr('open', true);
if (self.details.hasClass('collapse-processed')) {
setTimeout(() => {
self.focus();
}, 10);
} else {
self.focus();
}
}).on('keydown', event => {
if (event.keyCode === 13) {
setTimeout(() => {
self.details.find(':input:visible:enabled').eq(0).trigger('focus');
}, 10);
}
});
this.link.on('keydown', event => {
if (event.keyCode === 13) {
event.preventDefault();
self.focus();
self.details.find(':input:visible:enabled').eq(0).trigger('focus');
}
});
this.details.on('summaryUpdated', () => {
self.updateSummary();
}).trigger('summaryUpdated');
};
Drupal.verticalTab.prototype = {
focus() {
let triggerFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
this.details.siblings('.js-vertical-tabs-pane').each(function closeOtherTabs() {
const tab = $(this).data('verticalTab');
if (tab.details.attr('open')) {
tab.details.removeAttr('open').find('> summary').attr({
'aria-expanded': 'false',
'aria-pressed': 'false'
});
tab.item.removeClass('is-selected');
}
}).end().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id'));
this.details.attr('open', true).find('> summary').attr({
'aria-expanded': 'true',
'aria-pressed': 'true'
}).closest('.js-vertical-tabs').find('.js-vertical-tab-active').remove();
if (triggerFocus) {
const $summary = this.details.find('> summary');
if ($summary.is(':visible')) {
$summary.trigger('focus');
}
}
this.item.addClass('is-selected');
this.title.after($(Drupal.theme.verticalTabActiveTabIndicator()).addClass('js-vertical-tab-active'));
},
updateSummary() {
const summary = this.details.drupalGetSummary();
this.summary.html(summary);
},
tabShow() {
this.item.removeClass('vertical-tabs__menu-item--hidden').show();
this.item.closest('.js-form-type-vertical-tabs').show();
this.details.removeClass('vertical-tab--hidden js-vertical-tab-hidden').show();
this.details.parent().children('.js-vertical-tabs-pane').removeClass('vertical-tabs__item--first vertical-tabs__item--last').filter(':visible').eq(0).addClass('vertical-tabs__item--first');
this.details.parent().children('.js-vertical-tabs-pane').filter(':visible').eq(-1).addClass('vertical-tabs__item--last');
this.focus(false);
return this;
},
tabHide() {
this.item.addClass('vertical-tabs__menu-item--hidden').hide();
this.details.addClass('vertical-tab--hidden js-vertical-tab-hidden').hide();
this.details.parent().children('.js-vertical-tabs-pane').removeClass('vertical-tabs__item--first vertical-tabs__item--last').filter(':visible').eq(0).addClass('vertical-tabs__item--first');
this.details.parent().children('.js-vertical-tabs-pane').filter(':visible').eq(-1).addClass('vertical-tabs__item--last');
const $firstTab = this.details.siblings('.js-vertical-tabs-pane:not(.js-vertical-tab-hidden)').eq(0);
if ($firstTab.length) {
$firstTab.data('verticalTab').focus(false);
} else {
this.item.closest('.js-form-type-vertical-tabs').hide();
}
return this;
}
};
Drupal.theme.verticalTab = settings => {
const tab = {};
tab.title = $('<strong class="vertical-tabs__menu-link-title"></strong>');
tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>');
tab.title[0].textContent = settings.title;
tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>').append(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append($('<span class="vertical-tabs__menu-link-content"></span>').append(tab.title).append(tab.summary = $('<span class="vertical-tabs__menu-link-summary"></span>'))));
return tab;
};
Drupal.theme.verticalTabsWrapper = () => '<div class="vertical-tabs clearfix"></div>';
Drupal.theme.verticalTabListWrapper = () => '<ul class="vertical-tabs__menu"></ul>';
Drupal.theme.verticalTabActiveTabIndicator = () => `<span class="visually-hidden">${Drupal.t('(active tab)')}</span>`;
})(jQuery, Drupal);
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment