www.aleph1.co.uk Git - yaffs-website/blob - web/core/misc/vertical-tabs.js

   1 /**
   2 * DO NOT EDIT THIS FILE.
   3 * See the following change record for more information,
   4 * https://www.drupal.org/node/2815083
   5 * @preserve
   6 **/
   7
   8 (function ($, Drupal, drupalSettings) {
   9   var handleFragmentLinkClickOrHashChange = function handleFragmentLinkClickOrHashChange(e, $target) {
  10     $target.parents('.vertical-tabs__pane').each(function (index, pane) {
  11       $(pane).data('verticalTab').focus();
  12     });
  13   };
  14
  15   Drupal.behaviors.verticalTabs = {
  16     attach: function attach(context) {
  17       var width = drupalSettings.widthBreakpoint || 640;
  18       var mq = '(max-width: ' + width + 'px)';
  19
  20       if (window.matchMedia(mq).matches) {
  21         return;
  22       }
  23
  24       $('body').once('vertical-tabs-fragments').on('formFragmentLinkClickOrHashChange.verticalTabs', handleFragmentLinkClickOrHashChange);
  25
  26       $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function () {
  27         var $this = $(this).addClass('vertical-tabs__panes');
  28         var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();
  29         var tab_focus = void 0;
  30
  31         var $details = $this.find('> details');
  32         if ($details.length === 0) {
  33           return;
  34         }
  35
  36         var tab_list = $('<ul class="vertical-tabs__menu"></ul>');
  37         $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);
  38
  39         $details.each(function () {
  40           var $that = $(this);
  41           var vertical_tab = new Drupal.verticalTab({
  42             title: $that.find('> summary').text(),
  43             details: $that
  44           });
  45           tab_list.append(vertical_tab.item);
  46           $that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', vertical_tab);
  47           if (this.id === focusID) {
  48             tab_focus = $that;
  49           }
  50         });
  51
  52         $(tab_list).find('> li').eq(0).addClass('first');
  53         $(tab_list).find('> li').eq(-1).addClass('last');
  54
  55         if (!tab_focus) {
  56           var $locationHash = $this.find(window.location.hash);
  57           if (window.location.hash && $locationHash.length) {
  58             tab_focus = $locationHash.closest('.vertical-tabs__pane');
  59           } else {
  60             tab_focus = $this.find('> .vertical-tabs__pane').eq(0);
  61           }
  62         }
  63         if (tab_focus.length) {
  64           tab_focus.data('verticalTab').focus();
  65         }
  66       });
  67     }
  68   };
  69
  70   Drupal.verticalTab = function (settings) {
  71     var self = this;
  72     $.extend(this, settings, Drupal.theme('verticalTab', settings));
  73
  74     this.link.attr('href', '#' + settings.details.attr('id'));
  75
  76     this.link.on('click', function (e) {
  77       e.preventDefault();
  78       self.focus();
  79     });
  80
  81     this.link.on('keydown', function (event) {
  82       if (event.keyCode === 13) {
  83         event.preventDefault();
  84         self.focus();
  85
  86         $('.vertical-tabs__pane :input:visible:enabled').eq(0).trigger('focus');
  87       }
  88     });
  89
  90     this.details.on('summaryUpdated', function () {
  91       self.updateSummary();
  92     }).trigger('summaryUpdated');
  93   };
  94
  95   Drupal.verticalTab.prototype = {
  96     focus: function focus() {
  97       this.details.siblings('.vertical-tabs__pane').each(function () {
  98         var tab = $(this).data('verticalTab');
  99         tab.details.hide();
 100         tab.item.removeClass('is-selected');
 101       }).end().show().siblings(':hidden.vertical-tabs__active-tab').val(this.details.attr('id'));
 102       this.item.addClass('is-selected');
 103
 104       $('#active-vertical-tab').remove();
 105       this.link.append('<span id="active-vertical-tab" class="visually-hidden">' + Drupal.t('(active tab)') + '</span>');
 106     },
 107     updateSummary: function updateSummary() {
 108       this.summary.html(this.details.drupalGetSummary());
 109     },
 110     tabShow: function tabShow() {
 111       this.item.show();
 112
 113       this.item.closest('.js-form-type-vertical-tabs').show();
 114
 115       this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
 116
 117       this.details.removeClass('vertical-tab--hidden').show();
 118
 119       this.focus();
 120       return this;
 121     },
 122     tabHide: function tabHide() {
 123       this.item.hide();
 124
 125       this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
 126
 127       this.details.addClass('vertical-tab--hidden').hide();
 128
 129       var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);
 130       if ($firstTab.length) {
 131         $firstTab.data('verticalTab').focus();
 132       } else {
 133           this.item.closest('.js-form-type-vertical-tabs').hide();
 134         }
 135       return this;
 136     }
 137   };
 138
 139   Drupal.theme.verticalTab = function (settings) {
 140     var tab = {};
 141     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>')));
 142     return tab;
 143   };
 144 })(jQuery, Drupal, drupalSettings);