Move into nested docroot
This commit is contained in:
Rob Davies
parent
83a0d3a149
commit
c8b70abde9
13405 changed files with 0 additions and 0 deletions
web/core/misc
252
web/core/misc/vertical-tabs.js
Normal file
252
web/core/misc/vertical-tabs.js
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
/**
|
||||
* @file
|
||||
* Define vertical tabs 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
|
||||
*/
|
||||
|
||||
(function ($, Drupal, drupalSettings) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* 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.verticalTabs = {
|
||||
attach: function (context) {
|
||||
var width = drupalSettings.widthBreakpoint || 640;
|
||||
var mq = '(max-width: ' + width + 'px)';
|
||||
|
||||
if (window.matchMedia(mq).matches) {
|
||||
return;
|
||||
}
|
||||
|
||||
$(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function () {
|
||||
var $this = $(this).addClass('vertical-tabs__panes');
|
||||
var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
|
||||
var tab_focus;
|
||||
|
||||
// Check if there are some details that can be converted to
|
||||
// vertical-tabs.
|
||||
var $details = $this.find('> details');
|
||||
if ($details.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the tab column.
|
||||
var tab_list = $('<ul class="vertical-tabs__menu"></ul>');
|
||||
$this.wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);
|
||||
|
||||
// Transform each details into a tab.
|
||||
$details.each(function () {
|
||||
var $that = $(this);
|
||||
var vertical_tab = new Drupal.verticalTab({
|
||||
title: $that.find('> summary').text(),
|
||||
details: $that
|
||||
});
|
||||
tab_list.append(vertical_tab.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)
|
||||
.addClass('vertical-tabs__pane')
|
||||
.data('verticalTab', vertical_tab);
|
||||
if (this.id === focusID) {
|
||||
tab_focus = $that;
|
||||
}
|
||||
});
|
||||
|
||||
$(tab_list).find('> li').eq(0).addClass('first');
|
||||
$(tab_list).find('> li').eq(-1).addClass('last');
|
||||
|
||||
if (!tab_focus) {
|
||||
// If the current URL has a fragment and one of the tabs contains an
|
||||
// element that matches the URL fragment, activate that tab.
|
||||
var $locationHash = $this.find(window.location.hash);
|
||||
if (window.location.hash && $locationHash.length) {
|
||||
tab_focus = $locationHash.closest('.vertical-tabs__pane');
|
||||
}
|
||||
else {
|
||||
tab_focus = $this.find('> .vertical-tabs__pane').eq(0);
|
||||
}
|
||||
}
|
||||
if (tab_focus.length) {
|
||||
tab_focus.data('verticalTab').focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 (settings) {
|
||||
var self = this;
|
||||
$.extend(this, settings, Drupal.theme('verticalTab', settings));
|
||||
|
||||
this.link.attr('href', '#' + settings.details.attr('id'));
|
||||
|
||||
this.link.on('click', function (e) {
|
||||
e.preventDefault();
|
||||
self.focus();
|
||||
});
|
||||
|
||||
// Keyboard events added:
|
||||
// Pressing the Enter key will open the tab pane.
|
||||
this.link.on('keydown', function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
event.preventDefault();
|
||||
self.focus();
|
||||
// Set focus on the first input field of the visible details/tab pane.
|
||||
$('.vertical-tabs__pane :input:visible:enabled').eq(0).trigger('focus');
|
||||
}
|
||||
});
|
||||
|
||||
this.details
|
||||
.on('summaryUpdated', function () {
|
||||
self.updateSummary();
|
||||
})
|
||||
.trigger('summaryUpdated');
|
||||
};
|
||||
|
||||
Drupal.verticalTab.prototype = {
|
||||
|
||||
/**
|
||||
* Displays the tab's content pane.
|
||||
*/
|
||||
focus: function () {
|
||||
this.details
|
||||
.siblings('.vertical-tabs__pane')
|
||||
.each(function () {
|
||||
var tab = $(this).data('verticalTab');
|
||||
tab.details.hide();
|
||||
tab.item.removeClass('is-selected');
|
||||
})
|
||||
.end()
|
||||
.show()
|
||||
.siblings(':hidden.vertical-tabs__active-tab')
|
||||
.val(this.details.attr('id'));
|
||||
this.item.addClass('is-selected');
|
||||
// Mark the active tab for screen readers.
|
||||
$('#active-vertical-tab').remove();
|
||||
this.link.append('<span id="active-vertical-tab" class="visually-hidden">' + Drupal.t('(active tab)') + '</span>');
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the tab's summary.
|
||||
*/
|
||||
updateSummary: function () {
|
||||
this.summary.html(this.details.drupalGetSummary());
|
||||
},
|
||||
|
||||
/**
|
||||
* Shows a vertical tab pane.
|
||||
*
|
||||
* @return {Drupal.verticalTab}
|
||||
* The verticalTab instance.
|
||||
*/
|
||||
tabShow: function () {
|
||||
// Display the tab.
|
||||
this.item.show();
|
||||
// Show the vertical tabs.
|
||||
this.item.closest('.js-form-type-vertical-tabs').show();
|
||||
// Update .first marker for items. We need recurse from parent to retain
|
||||
// the actual DOM element order as jQuery implements sortOrder, but not
|
||||
// as public method.
|
||||
this.item.parent().children('.vertical-tabs__menu-item').removeClass('first')
|
||||
.filter(':visible').eq(0).addClass('first');
|
||||
// Display the details element.
|
||||
this.details.removeClass('vertical-tab--hidden').show();
|
||||
// Focus this tab.
|
||||
this.focus();
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Hides a vertical tab pane.
|
||||
*
|
||||
* @return {Drupal.verticalTab}
|
||||
* The verticalTab instance.
|
||||
*/
|
||||
tabHide: function () {
|
||||
// Hide this tab.
|
||||
this.item.hide();
|
||||
// Update .first marker for items. We need recurse from parent to retain
|
||||
// the actual DOM element order as jQuery implements sortOrder, but not
|
||||
// as public method.
|
||||
this.item.parent().children('.vertical-tabs__menu-item').removeClass('first')
|
||||
.filter(':visible').eq(0).addClass('first');
|
||||
// Hide the details element.
|
||||
this.details.addClass('vertical-tab--hidden').hide();
|
||||
// Focus the first visible tab (if there is one).
|
||||
var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);
|
||||
if ($firstTab.length) {
|
||||
$firstTab.data('verticalTab').focus();
|
||||
}
|
||||
// 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.
|
||||
*
|
||||
* @param {object} settings
|
||||
* An object with the following keys:
|
||||
* @param {string} settings.title
|
||||
* The name of the tab.
|
||||
*
|
||||
* @return {object}
|
||||
* This function has to return an object with at least these keys:
|
||||
* - item: The root tab jQuery element
|
||||
* - link: The anchor tag that acts as the clickable area of the tab
|
||||
* (jQuery version)
|
||||
* - summary: The jQuery element that contains the tab summary
|
||||
*/
|
||||
Drupal.theme.verticalTab = function (settings) {
|
||||
var tab = {};
|
||||
tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>')
|
||||
.append(tab.link = $('<a href="#"></a>')
|
||||
.append(tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>').text(settings.title))
|
||||
.append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')
|
||||
)
|
||||
);
|
||||
return tab;
|
||||
};
|
||||
|
||||
})(jQuery, Drupal, drupalSettings);
|
||||
Reference in a new issue