/*! * WPMU DEV Shared UI * Copyright 2018 - 2021 Incsub (https://incsub.com) * Licensed under GPL v3 (http://www.gnu.org/licenses/gpl-3.0.html) */ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } (function ($) { // Enable strict mode. 'use strict'; // Create the defaults once var pluginName = 'SUIAccordion', defaults = {}; // The actual plugin constructor function SUIAccordion(element, options) { this.element = element; this.$element = $(this.element); this.settings = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this.init(); } // Avoid Plugin.prototype conflicts $.extend(SUIAccordion.prototype, { init: function init() { var self = this; this.$element.on('click', 'div.sui-accordion-item-header, tr.sui-accordion-item', function (event) { var getItem = $(this).closest('.sui-accordion-item'), getContent = getItem.nextUntil('.sui-accordion-item').filter('.sui-accordion-item-content'), getParent = getItem.closest('.sui-accordion'), getChart = getItem.find('.sui-chartjs-animated'); var clickedTarget = $(event.target); var flexHeader = $(this), flexItem = flexHeader.parent(), flexChart = flexItem.find('.sui-chartjs-animated'), flexParent = flexItem.parent(), flexContent = flexHeader.next('.sui-accordion-item-body'); var tableItem = $(this), tableContent = tableItem.nextUntil('.sui-accordion-item').filter('.sui-accordion-item-content'); var button = $(this).find('.sui-accordion-open-indicator > .sui-screen-reader-text'), buttonText = button === null || button === void 0 ? void 0 : button.text(), dataContent = button === null || button === void 0 ? void 0 : button.data('content'); if (clickedTarget.closest('.sui-accordion-item-action').length) { return true; } // CHECK: Flexbox if (flexHeader.hasClass('sui-accordion-item-header')) { if (flexItem.hasClass('sui-accordion-item--disabled')) { flexItem.removeClass('sui-accordion-item--open'); } else { if (flexItem.hasClass('sui-accordion-item--open')) { flexItem.removeClass('sui-accordion-item--open'); } else { flexItem.addClass('sui-accordion-item--open'); flexContent.attr('tabindex', '0').trigger('focus'); } } // CHECK: Accordion Blocks if (flexParent.hasClass('sui-accordion-block') && 0 !== flexChart.length) { flexItem.find('.sui-accordion-item-data').addClass('sui-onload'); flexChart.removeClass('sui-chartjs-loaded'); if (flexItem.hasClass('sui-accordion-item--open')) { setTimeout(function () { flexItem.find('.sui-accordion-item-data').removeClass('sui-onload'); flexChart.addClass('sui-chartjs-loaded'); }, 1200); } } } // CHECK: Table if (tableItem.hasClass('sui-accordion-item')) { if (tableItem.hasClass('sui-accordion-item--disabled')) { tableContent.removeClass('sui-accordion-item--open'); } else { if (tableItem.hasClass('sui-accordion-item--open')) { tableItem.removeClass('sui-accordion-item--open'); tableContent.removeClass('sui-accordion-item--open'); } else { tableItem.addClass('sui-accordion-item--open'); tableContent.addClass('sui-accordion-item--open'); tableContent.attr('tabindex', '0').trigger('focus'); } } } // Change button accessiblity content based on accordin open and close. if (dataContent) { button.html(dataContent); button.data('content', buttonText); } event.stopPropagation(); }); } }); // A really lightweight plugin wrapper around the constructor, // preventing against multiple instantiations $.fn[pluginName] = function (options) { return this.each(function () { // instance of SUIAccordion can be called with $(element).data('SUIAccordion') if (!$.data(this, pluginName)) { $.data(this, pluginName, new SUIAccordion(this, options)); } }); }; })(jQuery, window, document); (function ($) { // Enable strict mode. 'use strict'; // Define global SUI object if it doesn't exist. if ('object' !== _typeof(window.SUI)) { window.SUI = {}; } SUI.suiAccordion = function (el) { var accordionTable = $(el); function init() { accordionTable.SUIAccordion({}); } init(); return this; }; if (0 !== $('.sui-2-12-24 .sui-accordion').length) { $('.sui-2-12-24 .sui-accordion').each(function () { SUI.suiAccordion(this); }); } })(jQuery); function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } // the semi-colon before function invocation is a safety net against concatenated // scripts and/or other plugins which may not be closed properly. ; (function ($, ClipboardJS, window, document, undefined) { 'use strict'; // undefined is used here as the undefined global variable in ECMAScript 3 is // mutable (ie. it can be changed by someone else). undefined isn't really being // passed in so we can ensure the value of it is truly undefined. In ES5, undefined // can no longer be modified. // window and document are passed through as local variables rather than global // as this (slightly) quickens the resolution process and can be more efficiently // minified (especially when both are regularly referenced in your plugin). // Create the defaults once var pluginName = 'SUICodeSnippet', defaults = { copyText: 'Copy', copiedText: 'Copied!' }; // The actual plugin constructor function SUICodeSnippet(element, options) { this.element = element; this.$element = $(this.element); // jQuery has an extend method which merges the contents of two or // more objects, storing the result in the first object. The first object // is generally empty as we don't want to alter the default options for // future instances of the plugin this.settings = $.extend({}, defaults, options); this._defaults = defaults; this._name = pluginName; this._clipboardJs = null; this._clipboardId = ''; this.init(); } // Avoid Plugin.prototype conflicts $.extend(SUICodeSnippet.prototype, { init: function init() { var self = this, button = ''; // check if its already wrapped if (0 === this.$element.parent('sui-code-snippet-wrapper').length) { // build markup this.$element.wrap('
'); this._clipboardId = this.generateUniqueId(); button = ''; this.$element.attr('id', 'sui-code-snippet-' + this._clipboardId).after(button); this._clipboardJs = new ClipboardJS('#sui-code-snippet-button-' + this._clipboardId); // attach events this._clipboardJs.on('success', function (e) { e.clearSelection(); self.showTooltip(e.trigger, self.settings.copiedText); }); $('#sui-code-snippet-button-' + this._clipboardId).on('mouseleave.SUICodeSnippet', function () { $(this).removeClass('sui-tooltip'); $(this).removeAttr('aria-label'); $(this).removeAttr('data-tooltip'); }); } }, getClipboardJs: function getClipboardJs() { return this._clipboardJs; }, showTooltip: function showTooltip(e, msg) { $(e).addClass('sui-tooltip'); $(e).attr('aria-label', msg); $(e).attr('data-tooltip', msg); }, generateUniqueId: function generateUniqueId() { // Math.random should be unique because of its seeding algorithm. // Convert it to base 36 (numbers + letters), and grab the first 9 characters // after the decimal. return '_' + Math.random().toString(36).substr(2, 9); }, destroy: function destroy() { if (null !== this._clipboardJs) { this._clipboardJs.destroy(); this.$element.attr('id', ''); this.$element.unwrap('.sui-code-snippet-wrapper'); $('#sui-code-snippet-button-' + this._clipboardId).remove(); } } }); // A really lightweight plugin wrapper around the constructor, // preventing against multiple instantiations $.fn[pluginName] = function (options) { return this.each(function () { // instance of SUICodeSnippet can be called with $(element).data('SUICodeSnippet') if (!$.data(this, pluginName)) { $.data(this, pluginName, new SUICodeSnippet(this, options)); } }); }; })(jQuery, ClipboardJS, window, document); (function ($) { // Enable strict mode. 'use strict'; // Define global SUI object if it doesn't exist. if ('object' !== _typeof(window.SUI)) { window.SUI = {}; } SUI.suiCodeSnippet = function () { // Convert all code snippet. $('.sui-2-12-24 .sui-code-snippet:not(.sui-no-copy)').each(function () { // backward compat of instantiate new accordion $(this).SUICodeSnippet({}); }); }; // wait document ready first $(document).ready(function () { SUI.suiCodeSnippet(); }); })(jQuery); function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } (function ($) { // Enable strict mode. 'use strict'; // Define global SUI object if it doesn't exist. if ('object' !== _typeof(window.SUI)) { window.SUI = {}; } SUI.sliderBack = function (el) { var slider = $(el), dialog = slider.closest('.sui-dialog'), slides = slider.find('.sui-slider-content > li'); var navigation = slider.find('.sui-slider-navigation'), navButtons = navigation.find('button'), btnBack = navigation.find('.sui-prev'), btnNext = navigation.find('.sui-next'); if (!dialog.hasClass('sui-dialog-onboard')) { return; } function init() { var currSlide = slider.find('.sui-slider-content > li.sui-current'), prevSlide = currSlide.prev(); if (!prevSlide.length) { if (slider.hasClass('sui-infinite')) { prevSlide = slider.find('.sui-slider-content > li:last'); currSlide.removeClass('sui-current'); currSlide.removeClass('sui-loaded'); prevSlide.addClass('sui-current'); prevSlide.addClass('fadeInLeft'); navButtons.prop('disabled', true); setTimeout(function () { prevSlide.addClass('sui-loaded'); prevSlide.removeClass('fadeInLeft'); }, 600); setTimeout(function () { navButtons.prop('disabled', false); }, 650); } } else { currSlide.removeClass('sui-current'); currSlide.removeClass('sui-loaded'); prevSlide.addClass('sui-current'); prevSlide.addClass('fadeInLeft'); navButtons.prop('disabled', true); if (!slider.hasClass('sui-infinite')) { btnNext.removeClass('sui-hidden'); if (slides.first().data('slide') === prevSlide.data('slide')) { btnBack.addClass('sui-hidden'); } } setTimeout(function () { prevSlide.addClass('sui-loaded'); prevSlide.removeClass('fadeInLeft'); }, 600); setTimeout(function () { navButtons.prop('disabled', false); }, 650); } } init(); return this; }; SUI.sliderNext = function (el) { var slider = $(el), dialog = slider.closest('.sui-dialog'), slides = slider.find('.sui-slider-content > li'); var navigation = slider.find('.sui-slider-navigation'), navButtons = navigation.find('button'), btnBack = navigation.find('.sui-prev'), btnNext = navigation.find('.sui-next'); if (!dialog.hasClass('sui-dialog-onboard')) { return; } function init() { var currSlide = slider.find('.sui-slider-content > li.sui-current'), nextSlide = currSlide.next(); if (!nextSlide.length) { if (slider.hasClass('sui-infinite')) { nextSlide = slider.find('.sui-slider-content > li:first'); currSlide.removeClass('sui-current'); currSlide.removeClass('sui-loaded'); nextSlide.addClass('sui-current'); nextSlide.addClass('fadeInRight'); navButtons.prop('disabled', true); setTimeout(function () { nextSlide.addClass('sui-loaded'); nextSlide.removeClass('fadeInRight'); }, 600); setTimeout(function () { navButtons.prop('disabled', false); }, 650); } } else { currSlide.removeClass('sui-current'); currSlide.removeClass('sui-loaded'); nextSlide.addClass('sui-current'); nextSlide.addClass('fadeInRight'); navButtons.prop('disabled', true); if (!slider.hasClass('sui-infinite')) { btnBack.removeClass('sui-hidden'); if (slides.length === nextSlide.data('slide')) { btnNext.addClass('sui-hidden'); } } setTimeout(function () { nextSlide.addClass('sui-loaded'); nextSlide.removeClass('fadeInRight'); }, 600); setTimeout(function () { navButtons.prop('disabled', false); }, 650); } } init(); return this; }; SUI.sliderStep = function (el) { var slider = $(el), dialog = slider.closest('.sui-dialog'); var slides = slider.find('.sui-slider-content'), slide = slides.find('> li'); var steps = slider.find('.sui-slider-steps'), step = steps.find('li'), button = step.find('button'); var navigation = slider.find('.sui-slider-navigation'), navButtons = navigation.find('button'), navBack = navigation.find('.sui-prev'), navNext = navigation.find('.sui-next'); if (!dialog.hasClass('sui-dialog-onboard') && !steps.hasClass('sui-clickable')) { return; } function reset() { // Remove current class slide.removeClass('sui-current'); // Remove loaded state slide.removeClass('sui-loaded'); } function load(element) { var button = $(element), index = button.data('slide'); var curSlide = button.closest('li[data-slide]'), newSlide = slides.find('> li[data-slide="' + index + '"]'); newSlide.addClass('sui-current'); if (curSlide.data('slide') < newSlide.data('slide')) { newSlide.addClass('fadeInRight'); } else { newSlide.addClass('fadeInLeft'); } navButtons.prop('disabled', true); if (!slider.hasClass('sui-infinite')) { if (1 === newSlide.data('slide')) { navBack.addClass('sui-hidden'); navNext.removeClass('sui-hidden'); } if (slide.length === newSlide.data('slide')) { navBack.removeClass('sui-hidden'); navNext.addClass('sui-hidden'); } } setTimeout(function () { newSlide.addClass('sui-loaded'); if (curSlide.data('slide') < newSlide.data('slide')) { newSlide.removeClass('fadeInRight'); } else { newSlide.removeClass('fadeInLeft'); } }, 600); setTimeout(function () { navButtons.prop('disabled', false); }, 650); } function init() { if (button.length) { button.on('click', function (e) { reset(); load(this); e.preventDefault(); e.stopPropagation(); }); } } init(); return this; }; SUI.dialogSlider = function (el) { var slider = $(el), dialog = slider.closest('.sui-dialog'), btnBack = slider.find('.sui-slider-navigation .sui-prev'), btnNext = slider.find('.sui-slider-navigation .sui-next'), tourBack = slider.find('*[data-a11y-dialog-tour-back]'), tourNext = slider.find('*[data-a11y-dialog-tour-next]'), steps = slider.find('.sui-slider-steps'); if (!dialog.hasClass('sui-dialog-onboard') || slider.hasClass('sui-slider-off')) { return; } function init() { if (btnBack.length) { btnBack.on('click', function (e) { SUI.sliderBack(slider); e.preventDefault(); }); } if (tourBack.length) { tourBack.on('click', function (e) { SUI.sliderBack(slider); e.preventDefault(); }); } if (btnNext.length) { btnNext.on('click', function (e) { SUI.sliderNext(slider); e.preventDefault(); }); } if (tourNext.length) { tourNext.on('click', function (e) { SUI.sliderNext(slider); e.preventDefault(); }); } if (steps.length) { SUI.sliderStep(slider); } } init(); return this; }; $('.sui-2-12-24 .sui-slider').each(function () { SUI.dialogSlider(this); }); })(jQuery); function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } (function ($) { // Enable strict mode. 'use strict'; // Define global SUI object if it doesn't exist. if ('object' !== _typeof(window.SUI)) { window.SUI = {}; } SUI.linkDropdown = function () { function closeAllDropdowns($except) { var $dropdowns = $('.sui-2-12-24 .sui-dropdown'); if ($except) { $dropdowns = $dropdowns.not($except); } $dropdowns.removeClass('open'); } $('body').on('click', '.sui-dropdown-anchor', function (e) { var $button = $(this), $parent = $button.parent(); closeAllDropdowns($parent); if ($parent.hasClass('sui-dropdown')) { $parent.toggleClass('open'); } e.preventDefault(); }); $('body').on('mouseup', function (e) { var $anchor = $('.sui-2-12-24 .sui-dropdown-anchor'); if (!$anchor.is(e.target) && 0 === $anchor.has(e.target).length) { closeAllDropdowns(); } }); }; SUI.linkDropdown(); })(jQuery); // This file is to be used for fixing up issues with IE11. (function ($) { var colorpickers = $('.sui-colorpicker-wrap'); // If IE11 remove SUI colorpicker styles. if (!!navigator.userAgent.match(/Trident\/7\./) && colorpickers[0]) { colorpickers.find('.sui-colorpicker').hide(); colorpickers.removeClass('sui-colorpicker-wrap'); } })(jQuery); function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } (function () { // Enable strict mode. 'use strict'; if ('object' !== _typeof(window.SUI)) { window.SUI = {}; } /** * @namespace aria */ var aria = aria || {}; // REF: Key codes. aria.KeyCode = { BACKSPACE: 8, TAB: 9, RETURN: 13, ESC: 27, SPACE: 32, PAGE_UP: 33, PAGE_DOWN: 34, END: 35, HOME: 36, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, DELETE: 46 }; aria.Utils = aria.Utils || {}; // UTILS: Remove function. aria.Utils.remove = function (item) { if (item.remove && 'function' === typeof item.remove) { return item.remove(); } if (item.parentNode && item.parentNode.removeChild && 'function' === typeof item.parentNode.removeChild) { return item.parentNode.removeChild(item); } return false; }; // UTILS: Verify if element can be focused. aria.Utils.isFocusable = function (element) { if (0 < element.tabIndex || 0 === element.tabIndex && null !== element.getAttribute('tabIndex')) { return true; } if (element.disabled) { return false; } switch (element.nodeName) { case 'A': return !!element.href && 'ignore' != element.rel; case 'INPUT': return 'hidden' != element.type && 'file' != element.type; case 'BUTTON': case 'SELECT': case 'TEXTAREA': return true; default: return false; } }; /** * Simulate a click event. * @public * @param {Element} element the element to simulate a click on */ aria.Utils.simulateClick = function (element) { // Create our event (with options) var evt = new MouseEvent('click', { bubbles: true, cancelable: true, view: window }); // If cancelled, don't dispatch our event var canceled = !element.dispatchEvent(evt); }; // When util functions move focus around, set this true so // the focus listener can ignore the events. aria.Utils.IgnoreUtilFocusChanges = false; aria.Utils.dialogOpenClass = 'sui-has-modal'; /** * @desc Set focus on descendant nodes until the first * focusable element is found. * * @param element * DOM node for which to find the first focusable descendant. * * @returns * true if a focusable element is found and focus is set. */ aria.Utils.focusFirstDescendant = function (element) { for (var i = 0; i < element.childNodes.length; i++) { var child = element.childNodes[i]; if (aria.Utils.attemptFocus(child) || aria.Utils.focusFirstDescendant(child)) { return true; } } return false; }; // end focusFirstDescendant /** * @desc Find the last descendant node that is focusable. * * @param element * DOM node for which to find the last focusable descendant. * * @returns * true if a focusable element is found and focus is set. */ aria.Utils.focusLastDescendant = function (element) { for (var i = element.childNodes.length - 1; 0 <= i; i--) { var child = element.childNodes[i]; if (aria.Utils.attemptFocus(child) || aria.Utils.focusLastDescendant(child)) { return true; } } return false; }; // end focusLastDescendant /** * @desc Set Attempt to set focus on the current node. * * @param element * The node to attempt to focus on. * * @returns * true if element is focused. */ aria.Utils.attemptFocus = function (element) { if (!aria.Utils.isFocusable(element)) { return false; } aria.Utils.IgnoreUtilFocusChanges = true; try { element.focus(); } catch (e) {// Done. } aria.Utils.IgnoreUtilFocusChanges = false; return document.activeElement === element; }; // end attemptFocus // Modals can open modals. Keep track of them with this array. aria.OpenDialogList = aria.OpenDialogList || new Array(0); /** * @returns the last opened dialog (the current dialog) */ aria.getCurrentDialog = function () { if (aria.OpenDialogList && aria.OpenDialogList.length) { return aria.OpenDialogList[aria.OpenDialogList.length - 1]; } }; aria.closeCurrentDialog = function () { var currentDialog = aria.getCurrentDialog(); if (currentDialog) { currentDialog.close(); return true; } return false; }; aria.handleEscape = function (event) { var key = event.which || event.keyCode; if (key === aria.KeyCode.ESC && aria.closeCurrentDialog()) { event.stopPropagation(); } }; /** * @constructor * @desc Dialog object providing modal focus management. * * Assumptions: The element serving as the dialog container is present in the * DOM and hidden. The dialog container has role='dialog'. * * @param dialogId * The ID of the element serving as the dialog container. * * @param focusAfterClosed * Either the DOM node or the ID of the DOM node to focus when the * dialog closes. * * @param focusFirst * Optional parameter containing either the DOM node or the ID of the * DOM node to focus when the dialog opens. If not specified, the * first focusable element in the dialog will receive focus. * * @param hasOverlayMask * Optional boolean parameter that when is set to "true" will enable * a clickable overlay mask. This mask will fire close modal function * when you click on it. * * @param isCloseOnEsc * Default: true * Optional boolean parameter that when it's set to "true", it will enable closing the * dialog with the Esc key. * * @param isAnimated * Default: true * Optional boolean parameter that when it's set to "true", it will enable animation in dialog box. */ aria.Dialog = function (dialogId, focusAfterClosed, focusFirst, hasOverlayMask) { var isCloseOnEsc = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true; var isAnimated = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true; this.dialogNode = document.getElementById(dialogId); if (null === this.dialogNode) { throw new Error('No element found with id="' + dialogId + '".'); } var validRoles = ['dialog', 'alertdialog']; var isDialog = (this.dialogNode.getAttribute('role') || '').trim().split(/\s+/g).some(function (token) { return validRoles.some(function (role) { return token === role; }); }); if (!isDialog) { throw new Error('Dialog() requires a DOM element with ARIA role of dialog or alertdialog.'); } this.isCloseOnEsc = isCloseOnEsc; // Trigger the 'open' event at the beginning of the opening process. // After validating the modal's attributes. var openEvent = new Event('open'); this.dialogNode.dispatchEvent(openEvent); // Wrap in an individual backdrop element if one doesn't exist // Native elements use the ::backdrop pseudo-element, which // works similarly. var backdropClass = 'sui-modal'; if (this.dialogNode.parentNode.classList.contains(backdropClass)) { this.backdropNode = this.dialogNode.parentNode; } else { this.backdropNode = document.createElement('div'); this.backdropNode.className = backdropClass; this.backdropNode.setAttribute('data-markup', 'new'); this.dialogNode.parentNode.insertBefore(this.backdropNode, this.dialogNodev); this.backdropNode.appendChild(this.dialogNode); } this.backdropNode.classList.add('sui-active'); // Disable scroll on the body element document.body.parentNode.classList.add(aria.Utils.dialogOpenClass); if ('string' === typeof focusAfterClosed) { this.focusAfterClosed = document.getElementById(focusAfterClosed); } else if ('object' === _typeof(focusAfterClosed)) { this.focusAfterClosed = focusAfterClosed; } else { throw new Error('the focusAfterClosed parameter is required for the aria.Dialog constructor.'); } if ('string' === typeof focusFirst) { this.focusFirst = document.getElementById(focusFirst); } else if ('object' === _typeof(focusFirst)) { this.focusFirst = focusFirst; } else { this.focusFirst = null; } // Bracket the dialog node with two invisible, focusable nodes. // While this dialog is open, we use these to make sure that focus never // leaves the document even if dialogNode is the first or last node. var preDiv = document.createElement('div'); this.preNode = this.dialogNode.parentNode.insertBefore(preDiv, this.dialogNode); this.preNode.tabIndex = 0; if ('boolean' === typeof hasOverlayMask && true === hasOverlayMask) { this.preNode.classList.add('sui-modal-overlay'); this.preNode.onclick = function () { aria.getCurrentDialog().close(); }; } var postDiv = document.createElement('div'); this.postNode = this.dialogNode.parentNode.insertBefore(postDiv, this.dialogNode.nextSibling); this.postNode.tabIndex = 0; // If this modal is opening on top of one that is already open, // get rid of the document focus listener of the open dialog. if (0 < aria.OpenDialogList.length) { aria.getCurrentDialog().removeListeners(); } this.addListeners(); aria.OpenDialogList.push(this); // If isAnimated is set true then modal box will animate. if (isAnimated) { this.dialogNode.classList.add('sui-content-fade-in'); // make visible this.dialogNode.classList.remove('sui-content-fade-out'); } else { this.dialogNode.classList.remove('sui-content-fade-in'); this.dialogNode.classList.remove('sui-content-fade-out'); } if (this.focusFirst) { this.focusFirst.focus(); } else { aria.Utils.focusFirstDescendant(this.dialogNode); } this.lastFocus = document.activeElement; // Trigger the 'afteropen' event at the end of the opening process. var afterOpenEvent = new Event('afterOpen'); this.dialogNode.dispatchEvent(afterOpenEvent); }; // end Dialog constructor. /** * @desc Hides the current top dialog, removes listeners of the top dialog, * restore listeners of a parent dialog if one was open under the one that * just closed, and sets focus on the element specified for focusAfterClosed. * * @param isAnimated * Default: true * Optional boolean parameter that when it's set to "true", it will enable animation in dialog box. */ aria.Dialog.prototype.close = function () { var isAnimated = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; var self = this; // Trigger the 'close' event at the beginning of the closing process. var closeEvent = new Event('close'); this.dialogNode.dispatchEvent(closeEvent); aria.OpenDialogList.pop(); this.removeListeners(); this.preNode.parentNode.removeChild(this.preNode); this.postNode.parentNode.removeChild(this.postNode); // If isAnimated is set true then modal box will animate. if (isAnimated) { this.dialogNode.classList.add('sui-content-fade-out'); this.dialogNode.classList.remove('sui-content-fade-in'); } else { this.dialogNode.classList.remove('sui-content-fade-in'); this.dialogNode.classList.remove('sui-content-fade-out'); } this.focusAfterClosed.focus(); setTimeout(function () { self.backdropNode.classList.remove('sui-active'); }, 300); setTimeout(function () { var slides = self.dialogNode.querySelectorAll('.sui-modal-slide'); if (0 < slides.length) { // Hide all slides. for (var i = 0; i < slides.length; i++) { slides[i].setAttribute('disabled', true); slides[i].classList.remove('sui-loaded'); slides[i].classList.remove('sui-active'); slides[i].setAttribute('tabindex', '-1'); slides[i].setAttribute('aria-hidden', true); } // Change modal size. if (slides[0].hasAttribute('data-modal-size')) { var newDialogSize = slides[0].getAttribute('data-modal-size'); switch (newDialogSize) { case 'sm': case 'small': newDialogSize = 'sm'; break; case 'md': case 'med': case 'medium': newDialogSize = 'md'; break; case 'lg': case 'large': newDialogSize = 'lg'; break; case 'xl': case 'extralarge': case 'extraLarge': case 'extra-large': newDialogSize = 'xl'; break; default: newDialogSize = undefined; } if (undefined !== newDialogSize) { // Remove others sizes from dialog to prevent any conflicts with styles. self.dialogNode.parentNode.classList.remove('sui-modal-sm'); self.dialogNode.parentNode.classList.remove('sui-modal-md'); self.dialogNode.parentNode.classList.remove('sui-modal-lg'); self.dialogNode.parentNode.classList.remove('sui-modal-xl'); // Apply the new size to dialog. self.dialogNode.parentNode.classList.add('sui-modal-' + newDialogSize); } } // Show first slide. slides[0].classList.add('sui-active'); slides[0].classList.add('sui-loaded'); slides[0].removeAttribute('disabled'); slides[0].removeAttribute('tabindex'); slides[0].removeAttribute('aria-hidden'); // Change modal label. if (slides[0].hasAttribute('data-modal-labelledby')) { var newDialogLabel, getDialogLabel; newDialogLabel = ''; getDialogLabel = slides[0].getAttribute('data-modal-labelledby'); if ('' !== getDialogLabel || undefined !== getDialogLabel) { newDialogLabel = getDialogLabel; } self.dialogNode.setAttribute('aria-labelledby', newDialogLabel); } // Change modal description. if (slides[0].hasAttribute('data-modal-describedby')) { var newDialogDesc, getDialogDesc; newDialogDesc = ''; getDialogDesc = slides[0].getAttribute('data-modal-describedby'); if ('' !== getDialogDesc || undefined !== getDialogDesc) { newDialogDesc = getDialogDesc; } self.dialogNode.setAttribute('aria-describedby', newDialogDesc); } } }, 350); // If a dialog was open underneath this one, restore its listeners. if (0 < aria.OpenDialogList.length) { aria.getCurrentDialog().addListeners(); } else { document.body.parentNode.classList.remove(aria.Utils.dialogOpenClass); } // Trigger the 'afterclose' event at the end of the closing process. var afterCloseEvent = new Event('afterClose'); this.dialogNode.dispatchEvent(afterCloseEvent); }; // end close. /** * @desc Hides the current dialog and replaces it with another. * * @param newDialogId * ID of the dialog that will replace the currently open top dialog. * * @param newFocusAfterClosed * Optional ID or DOM node specifying where to place focus when the new dialog closes. * If not specified, focus will be placed on the element specified by the dialog being replaced. * * @param newFocusFirst * Optional ID or DOM node specifying where to place focus in the new dialog when it opens. * If not specified, the first focusable element will receive focus. * * @param hasOverlayMask * Optional boolean parameter that when is set to "true" will enable a clickable overlay * mask to the new opened dialog. This mask will fire close dialog function when you click it. * * @param isCloseOnEsc * Default: true * Optional boolean parameter that when it's set to "true", it will enable closing the * dialog with the Esc key. * * @param isAnimated * Default: true * Optional boolean parameter that when it's set to "true", it will enable animation in dialog box. */ aria.Dialog.prototype.replace = function (newDialogId, newFocusAfterClosed, newFocusFirst, hasOverlayMask) { var isCloseOnEsc = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true; var isAnimated = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true; var self = this; aria.OpenDialogList.pop(); this.removeListeners(); aria.Utils.remove(this.preNode); aria.Utils.remove(this.postNode); // If isAnimated is set true then modal box will animate. if (isAnimated) { this.dialogNode.classList.add('sui-content-fade-in'); // make visible this.dialogNode.classList.remove('sui-content-fade-out'); } else { this.dialogNode.classList.remove('sui-content-fade-in'); this.dialogNode.classList.remove('sui-content-fade-out'); } this.backdropNode.classList.remove('sui-active'); setTimeout(function () { var slides = self.dialogNode.querySelectorAll('.sui-modal-slide'); if (0 < slides.length) { // Hide all slides. for (var i = 0; i < slides.length; i++) { slides[i].setAttribute('disabled', true); slides[i].classList.remove('sui-loaded'); slides[i].classList.remove('sui-active'); slides[i].setAttribute('tabindex', '-1'); slides[i].setAttribute('aria-hidden', true); } // Change modal size. if (slides[0].hasAttribute('data-modal-size')) { var newDialogSize = slides[0].getAttribute('data-modal-size'); switch (newDialogSize) { case 'sm': case 'small': newDialogSize = 'sm'; break; case 'md': case 'med': case 'medium': newDialogSize = 'md'; break; case 'lg': case 'large': newDialogSize = 'lg'; break; case 'xl': case 'extralarge': case 'extraLarge': case 'extra-large': newDialogSize = 'xl'; break; default: newDialogSize = undefined; } if (undefined !== newDialogSize) { // Remove others sizes from dialog to prevent any conflicts with styles. self.dialogNode.parentNode.classList.remove('sui-modal-sm'); self.dialogNode.parentNode.classList.remove('sui-modal-md'); self.dialogNode.parentNode.classList.remove('sui-modal-lg'); self.dialogNode.parentNode.classList.remove('sui-modal-xl'); // Apply the new size to dialog. self.dialogNode.parentNode.classList.add('sui-modal-' + newDialogSize); } } // Show first slide. slides[0].classList.add('sui-active'); slides[0].classList.add('sui-loaded'); slides[0].removeAttribute('disabled'); slides[0].removeAttribute('tabindex'); slides[0].removeAttribute('aria-hidden'); // Change modal label. if (slides[0].hasAttribute('data-modal-labelledby')) { var newDialogLabel, getDialogLabel; newDialogLabel = ''; getDialogLabel = slides[0].getAttribute('data-modal-labelledby'); if ('' !== getDialogLabel || undefined !== getDialogLabel) { newDialogLabel = getDialogLabel; } self.dialogNode.setAttribute('aria-labelledby', newDialogLabel); } // Change modal description. if (slides[0].hasAttribute('data-modal-describedby')) { var newDialogDesc, getDialogDesc; newDialogDesc = ''; getDialogDesc = slides[0].getAttribute('data-modal-describedby'); if ('' !== getDialogDesc || undefined !== getDialogDesc) { newDialogDesc = getDialogDesc; } self.dialogNode.setAttribute('aria-describedby', newDialogDesc); } } }, 350); var focusAfterClosed = newFocusAfterClosed || this.focusAfterClosed; var dialog = new aria.Dialog(newDialogId, focusAfterClosed, newFocusFirst, hasOverlayMask, isCloseOnEsc, isAnimated); }; // end replace /** * @desc Uses the same dialog to display different content that will slide to show. * * @param newSlideId * ID of the slide that will replace the currently active slide content. * * @param newSlideFocus * Optional ID or DOM node specifying where to place focus in the new slide when it shows. * If not specified, the first focusable element will receive focus. * * @param newSlideEntrance * Determine if the new slide will show up from "left" or "right" of the screen. * If not specified, the slide entrance animation will be "fade in". */ aria.Dialog.prototype.slide = function (newSlideId, newSlideFocus, newSlideEntrance) { var animation = 'sui-fadein', currentDialog = aria.getCurrentDialog(), getAllSlides = this.dialogNode.querySelectorAll('.sui-modal-slide'), getNewSlide = document.getElementById(newSlideId); switch (newSlideEntrance) { case 'back': case 'left': animation = 'sui-fadein-left'; break; case 'next': case 'right': animation = 'sui-fadein-right'; break; default: animation = 'sui-fadein'; break; } // Hide all slides. for (var i = 0; i < getAllSlides.length; i++) { getAllSlides[i].setAttribute('disabled', true); getAllSlides[i].classList.remove('sui-loaded'); getAllSlides[i].classList.remove('sui-active'); getAllSlides[i].setAttribute('tabindex', '-1'); getAllSlides[i].setAttribute('aria-hidden', true); } // Change modal size. if (getNewSlide.hasAttribute('data-modal-size')) { var newDialogSize = getNewSlide.getAttribute('data-modal-size'); switch (newDialogSize) { case 'sm': case 'small': newDialogSize = 'sm'; break; case 'md': case 'med': case 'medium': newDialogSize = 'md'; break; case 'lg': case 'large': newDialogSize = 'lg'; break; case 'xl': case 'extralarge': case 'extraLarge': case 'extra-large': newDialogSize = 'xl'; break; default: newDialogSize = undefined; } if (undefined !== newDialogSize) { // Remove others sizes from dialog to prevent any conflicts with styles. this.dialogNode.parentNode.classList.remove('sui-modal-sm'); this.dialogNode.parentNode.classList.remove('sui-modal-md'); this.dialogNode.parentNode.classList.remove('sui-modal-lg'); this.dialogNode.parentNode.classList.remove('sui-modal-xl'); // Apply the new size to dialog. this.dialogNode.parentNode.classList.add('sui-modal-' + newDialogSize); } } // Change modal label. if (getNewSlide.hasAttribute('data-modal-labelledby')) { var newDialogLabel, getDialogLabel; newDialogLabel = ''; getDialogLabel = getNewSlide.getAttribute('data-modal-labelledby'); if ('' !== getDialogLabel || undefined !== getDialogLabel) { newDialogLabel = getDialogLabel; } this.dialogNode.setAttribute('aria-labelledby', newDialogLabel); } // Change modal description. if (getNewSlide.hasAttribute('data-modal-describedby')) { var newDialogDesc, getDialogDesc; newDialogDesc = ''; getDialogDesc = getNewSlide.getAttribute('data-modal-describedby'); if ('' !== getDialogDesc || undefined !== getDialogDesc) { newDialogDesc = getDialogDesc; } this.dialogNode.setAttribute('aria-describedby', newDialogDesc); } // Show new slide. getNewSlide.classList.add('sui-active'); getNewSlide.classList.add(animation); getNewSlide.removeAttribute('tabindex'); getNewSlide.removeAttribute('aria-hidden'); setTimeout(function () { getNewSlide.classList.add('sui-loaded'); getNewSlide.classList.remove(animation); getNewSlide.removeAttribute('disabled'); }, 600); if ('string' === typeof newSlideFocus) { this.newSlideFocus = document.getElementById(newSlideFocus); } else if ('object' === _typeof(newSlideFocus)) { this.newSlideFocus = newSlideFocus; } else { this.newSlideFocus = null; } if (this.newSlideFocus) { this.newSlideFocus.focus(); } else { aria.Utils.focusFirstDescendant(this.dialogNode); } }; // end slide. aria.Dialog.prototype.addListeners = function () { document.addEventListener('focus', this.trapFocus, true); if (this.isCloseOnEsc) { this.dialogNode.addEventListener('keyup', aria.handleEscape); } }; // end addListeners. aria.Dialog.prototype.removeListeners = function () { document.removeEventListener('focus', this.trapFocus, true); }; // end removeListeners. aria.Dialog.prototype.trapFocus = function (event) { if (aria.Utils.IgnoreUtilFocusChanges) { return; } var currentDialog = aria.getCurrentDialog(); if (currentDialog.dialogNode.contains(event.target)) { currentDialog.lastFocus = event.target; } else { aria.Utils.focusFirstDescendant(currentDialog.dialogNode); if (currentDialog.lastFocus == document.activeElement) { aria.Utils.focusLastDescendant(currentDialog.dialogNode); } currentDialog.lastFocus = document.activeElement; } }; // end trapFocus. SUI.openModal = function (dialogId, focusAfterClosed, focusFirst, dialogOverlay) { var isCloseOnEsc = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true; var isAnimated = arguments.length > 5 ? arguments[5] : undefined; var dialog = new aria.Dialog(dialogId, focusAfterClosed, focusFirst, dialogOverlay, isCloseOnEsc, isAnimated); }; // end openModal. SUI.closeModal = function (isAnimated) { var topDialog = aria.getCurrentDialog(); if (!topDialog) { return; } topDialog.close(isAnimated); }; // end closeDialog. SUI.replaceModal = function (newDialogId, newFocusAfterClosed, newFocusFirst, hasOverlayMask) { var isCloseOnEsc = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true; var isAnimated = arguments.length > 5 ? arguments[5] : undefined; var topDialog = aria.getCurrentDialog(); /** * BUG #1: * When validating document.activeElement it always returns "false" but * even when "false" on Chrome function is fired correctly while on Firefox * and Safari this validation prevents function to be fired on click. * * if ( topDialog.dialogNode.contains( document.activeElement ) ) { ... } */ topDialog.replace(newDialogId, newFocusAfterClosed, newFocusFirst, hasOverlayMask, isCloseOnEsc, isAnimated); }; // end replaceModal. SUI.slideModal = function (newSlideId, newSlideFocus, newSlideEntrance) { var topDialog = aria.getCurrentDialog(); topDialog.slide(newSlideId, newSlideFocus, newSlideEntrance); }; // end slideModal. })(); (function ($) { // Enable strict mode. 'use strict'; if ('object' !== _typeof(window.SUI)) { window.SUI = {}; } SUI.modalDialog = function () { function init() { var button, buttonOpen, buttonClose, buttonReplace, buttonSlide, overlayMask, modalId, slideId, closeFocus, newFocus, animation, isAnimated; buttonOpen = $('[data-modal-open]'); buttonClose = $('[data-modal-close]'); buttonReplace = $('[data-modal-replace]'); buttonSlide = $('[data-modal-slide]'); overlayMask = $('.sui-modal-overlay'); buttonOpen.on('click', function (e) { button = $(this); modalId = button.attr('data-modal-open'); closeFocus = button.attr('data-modal-close-focus'); newFocus = button.attr('data-modal-open-focus'); overlayMask = button.attr('data-modal-mask'); isAnimated = button.attr('data-modal-animated'); var isCloseOnEsc = 'false' === button.attr('data-esc-close') ? false : true; if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) === _typeof(closeFocus) || false === closeFocus || '' === closeFocus) { closeFocus = this; } if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) === _typeof(newFocus) || false === newFocus || '' === newFocus) { newFocus = undefined; } if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) !== _typeof(overlayMask) && false !== overlayMask && 'true' === overlayMask) { overlayMask = true; } else { overlayMask = false; } if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) !== _typeof(isAnimated) && false !== isAnimated && 'false' === isAnimated) { isAnimated = false; } else { isAnimated = true; } if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) !== _typeof(modalId) && false !== modalId && '' !== modalId) { SUI.openModal(modalId, closeFocus, newFocus, overlayMask, isCloseOnEsc, isAnimated); } e.preventDefault(); }); buttonReplace.on('click', function (e) { button = $(this); modalId = button.attr('data-modal-replace'); closeFocus = button.attr('data-modal-close-focus'); newFocus = button.attr('data-modal-open-focus'); overlayMask = button.attr('data-modal-replace-mask'); var isCloseOnEsc = 'false' === button.attr('data-esc-close') ? false : true; if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) === _typeof(closeFocus) || false === closeFocus || '' === closeFocus) { closeFocus = undefined; } if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) === _typeof(newFocus) || false === newFocus || '' === newFocus) { newFocus = undefined; } if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) !== _typeof(overlayMask) && false !== overlayMask && 'true' === overlayMask) { overlayMask = true; } else { overlayMask = false; } if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) !== _typeof(modalId) && false !== modalId && '' !== modalId) { SUI.replaceModal(modalId, closeFocus, newFocus, overlayMask, isCloseOnEsc, isAnimated); } e.preventDefault(); }); buttonSlide.on('click', function (e) { button = $(this); slideId = button.attr('data-modal-slide'); newFocus = button.attr('data-modal-slide-focus'); animation = button.attr('data-modal-slide-intro'); if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) === _typeof(newFocus) || false === newFocus || '' === newFocus) { newFocus = undefined; } if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) === _typeof(animation) || false === animation || '' === animation) { animation = ''; } if ((typeof undefined === "undefined" ? "undefined" : _typeof(undefined)) !== _typeof(slideId) && false !== slideId && '' !== slideId) { SUI.slideModal(slideId, newFocus, animation); } e.preventDefault(); }); buttonClose.on('click', function (e) { SUI.closeModal(isAnimated); e.preventDefault(); }); } init(); return this; }; SUI.modalDialog(); })(jQuery); function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } (function ($) { // Enable strict mode. 'use strict'; // Define global SUI object if it doesn't exists. if ('object' !== _typeof(window.SUI)) { window.SUI = {}; } SUI.multistrings = function () { function buildWrapper(textarea, uniqid) { var parent = textarea.parent(), label = parent.find('> .sui-label'), description = parent.find('> .sui-description'); /** * Build main wrapper for the whole multistring element. */ parent.wrap('
'); /** * Build ARIA-ready element. */ // Hide field. parent.addClass('sui-multistrings-aria').removeClass('sui-form-field'); /** * Build visual-ready element. */ // Build a new field. $('