Skip to content
Snippets Groups Projects
Commit 682a0146 authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Add modal webcomponent

parent bf6a77f7
No related branches found
No related tags found
No related merge requests found
Pipeline #207472 failed
......@@ -8,6 +8,7 @@ import {InlineNotification} from './src/inline-notification.js';
import {Translated} from './src/translated';
import {Translation} from './src/translation';
import {AdapterLitElement} from './src/adapter-lit-element.js';
import {Modal} from "./src/modal";
export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
export {getIconSVGURL, getIconCSS, Icon};
......@@ -19,3 +20,4 @@ export {Translated, Translation};
export * from './src/logger.js';
export * from './src/utils.js';
export {AdapterLitElement};
export {Modal};
......@@ -7,5 +7,9 @@
"api-documentation-server": "Verbindung zum apiDocumentation API Server {{apiDocUrl}} fehlgeschlagen!",
"error-api-server": "Verbindung zum API Server {{apiUrl}} fehlgeschlagen!",
"error-hydra-documentation-url-not-set": "Hydra apiDocumentation URL wurden für server {{apiUrl}} nicht gesetzt!"
},
"dbp-modal": {
"close": "Schließen"
}
}
......@@ -7,5 +7,9 @@
"api-documentation-server": "Connection to apiDocumentation server {{apiDocUrl}} failed!",
"error-api-server": "Connection to api server {{apiUrl}} failed!",
"error-hydra-documentation-url-not-set": "Hydra apiDocumentation url was not set for server {{apiUrl}}!"
},
"dbp-modal": {
"close": "close"
}
}
// see https://github.com/ghosh/Micromodal/pull/351
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError('Cannot call a class as a function');
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ('value' in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _toConsumableArray(arr) {
return (
_arrayWithoutHoles(arr) ||
_iterableToArray(arr) ||
_unsupportedIterableToArray(arr) ||
_nonIterableSpread()
);
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== 'undefined' && Symbol.iterator in Object(iter)) return Array.from(iter);
}
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(n);
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 _nonIterableSpread() {
throw new TypeError(
'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.'
);
}
var MicroModal = (function () {
var FOCUSABLE_ELEMENTS = [
'a[href]',
'area[href]',
'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
'select:not([disabled]):not([aria-hidden])',
'textarea:not([disabled]):not([aria-hidden])',
'button:not([disabled]):not([aria-hidden])',
'iframe',
'object',
'embed',
'[contenteditable]',
'[tabindex]:not([tabindex^="-"])',
];
var Modal = /*#__PURE__*/ (function () {
function Modal(_ref) {
var targetModal = _ref.targetModal,
_ref$triggers = _ref.triggers,
triggers = _ref$triggers === void 0 ? [] : _ref$triggers,
_ref$onShow = _ref.onShow,
onShow = _ref$onShow === void 0 ? function () {} : _ref$onShow,
_ref$onClose = _ref.onClose,
onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
_ref$openTrigger = _ref.openTrigger,
openTrigger =
_ref$openTrigger === void 0 ? 'data-micromodal-trigger' : _ref$openTrigger,
_ref$closeTrigger = _ref.closeTrigger,
closeTrigger =
_ref$closeTrigger === void 0 ? 'data-micromodal-close' : _ref$closeTrigger,
_ref$openClass = _ref.openClass,
openClass = _ref$openClass === void 0 ? 'is-open' : _ref$openClass,
_ref$disableScroll = _ref.disableScroll,
disableScroll = _ref$disableScroll === void 0 ? false : _ref$disableScroll,
_ref$disableFocus = _ref.disableFocus,
disableFocus = _ref$disableFocus === void 0 ? false : _ref$disableFocus,
_ref$awaitCloseAnimat = _ref.awaitCloseAnimation,
awaitCloseAnimation =
_ref$awaitCloseAnimat === void 0 ? false : _ref$awaitCloseAnimat,
_ref$awaitOpenAnimati = _ref.awaitOpenAnimation,
awaitOpenAnimation =
_ref$awaitOpenAnimati === void 0 ? false : _ref$awaitOpenAnimati,
_ref$debugMode = _ref.debugMode,
debugMode = _ref$debugMode === void 0 ? false : _ref$debugMode;
_classCallCheck(this, Modal);
// Save a reference of the modal
this.modal = this.modal =
typeof targetModal === 'string'
? document.getElementById(targetModal)
: targetModal; // Save a reference to the passed config
this.config = {
debugMode: debugMode,
disableScroll: disableScroll,
openTrigger: openTrigger,
closeTrigger: closeTrigger,
openClass: openClass,
onShow: onShow,
onClose: onClose,
awaitCloseAnimation: awaitCloseAnimation,
awaitOpenAnimation: awaitOpenAnimation,
disableFocus: disableFocus,
}; // Register click events only if pre binding eventListeners
if (triggers.length > 0)
this.registerTriggers.apply(this, _toConsumableArray(triggers)); // pre bind functions for event listeners
this.onClick = this.onClick.bind(this);
this.onKeydown = this.onKeydown.bind(this);
}
/**
* Loops through all openTriggers and binds click event
* @param {array} triggers [Array of node elements]
* @return {void}
*/
_createClass(Modal, [
{
key: 'registerTriggers',
value: function registerTriggers() {
var _this = this;
for (
var _len = arguments.length, triggers = new Array(_len), _key = 0;
_key < _len;
_key++
) {
triggers[_key] = arguments[_key];
}
triggers.filter(Boolean).forEach(function (trigger) {
trigger.addEventListener('click', function (event) {
return _this.showModal(event);
});
});
},
},
{
key: 'showModal',
value: function showModal() {
var _this2 = this;
var event =
arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
this.activeElement = document.activeElement;
this.modal.setAttribute('aria-hidden', 'false');
this.modal.classList.add(this.config.openClass);
this.scrollBehaviour('disable');
this.addEventListeners();
if (this.config.awaitOpenAnimation) {
var handler = function handler() {
_this2.modal.removeEventListener('animationend', handler, false);
_this2.setFocusToFirstNode();
};
this.modal.addEventListener('animationend', handler, false);
} else {
this.setFocusToFirstNode();
}
this.config.onShow(this.modal, this.activeElement, event);
},
},
{
key: 'closeModal',
value: function closeModal() {
var event =
arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var modal = this.modal;
this.modal.setAttribute('aria-hidden', 'true');
this.removeEventListeners();
this.scrollBehaviour('enable');
if (this.activeElement && this.activeElement.focus) {
this.activeElement.focus();
}
this.config.onClose(this.modal, this.activeElement, event);
if (this.config.awaitCloseAnimation) {
var openClass = this.config.openClass; // <- old school ftw
this.modal.addEventListener(
'animationend',
function handler() {
modal.classList.remove(openClass);
modal.removeEventListener('animationend', handler, false);
},
false
);
} else {
modal.classList.remove(this.config.openClass);
}
},
},
{
key: 'closeModalById',
value: function closeModalById(targetModal) {
// added support to pass on an element or an id -> for webcomponents
if (targetModal instanceof HTMLElement) {
this.modal = targetModal;
} else {
this.model = document.getElementById(targetModal);
}
if (this.modal) this.closeModal();
},
},
{
key: 'scrollBehaviour',
value: function scrollBehaviour(toggle) {
if (!this.config.disableScroll) return;
var body = document.querySelector('body');
switch (toggle) {
case 'enable':
Object.assign(body.style, {
overflow: '',
});
break;
case 'disable':
Object.assign(body.style, {
overflow: 'hidden',
});
break;
}
},
},
{
key: 'addEventListeners',
value: function addEventListeners() {
this.modal.addEventListener('touchstart', this.onClick);
this.modal.addEventListener('click', this.onClick);
document.addEventListener('keydown', this.onKeydown);
},
},
{
key: 'removeEventListeners',
value: function removeEventListeners() {
this.modal.removeEventListener('touchstart', this.onClick);
this.modal.removeEventListener('click', this.onClick);
document.removeEventListener('keydown', this.onKeydown);
},
},
{
key: 'onClick',
value: function onClick(event) {
if (event.target.hasAttribute(this.config.closeTrigger)) {
this.closeModal(event);
}
},
},
{
key: 'onKeydown',
value: function onKeydown(event) {
if (event.keyCode === 27) this.closeModal(event); // esc
if (event.keyCode === 9) this.retainFocus(event); // tab
},
},
{
key: 'getFocusableNodes',
value: function getFocusableNodes() {
var nodes = this.modal.querySelectorAll(FOCUSABLE_ELEMENTS);
return Array.apply(void 0, _toConsumableArray(nodes));
},
/**
* Tries to set focus on a node which is not a close trigger
* if no other nodes exist then focuses on first close trigger
*/
},
{
key: 'setFocusToFirstNode',
value: function setFocusToFirstNode() {
var _this3 = this;
if (this.config.disableFocus) return;
var focusableNodes = this.getFocusableNodes(); // no focusable nodes
if (focusableNodes.length === 0) return; // remove nodes on whose click, the modal closes
// could not think of a better name :(
var nodesWhichAreNotCloseTargets = focusableNodes.filter(function (node) {
return !node.hasAttribute(_this3.config.closeTrigger);
});
if (nodesWhichAreNotCloseTargets.length > 0)
nodesWhichAreNotCloseTargets[0].focus();
if (nodesWhichAreNotCloseTargets.length === 0) focusableNodes[0].focus();
},
},
{
key: 'retainFocus',
value: function retainFocus(event) {
var focusableNodes = this.getFocusableNodes(); // no focusable nodes
if (focusableNodes.length === 0) return;
/**
* Filters nodes which are hidden to prevent
* focus leak outside modal
*/
focusableNodes = focusableNodes.filter(function (node) {
return node.offsetParent !== null;
}); // if disableFocus is true
if (!this.modal.contains(document.activeElement)) {
focusableNodes[0].focus();
} else {
var focusedItemIndex = focusableNodes.indexOf(document.activeElement);
if (event.shiftKey && focusedItemIndex === 0) {
focusableNodes[focusableNodes.length - 1].focus();
event.preventDefault();
}
if (
!event.shiftKey &&
focusableNodes.length > 0 &&
focusedItemIndex === focusableNodes.length - 1
) {
focusableNodes[0].focus();
event.preventDefault();
}
}
},
},
]);
return Modal;
})();
/**
* Modal prototype ends.
* Here on code is responsible for detecting and
* auto binding event handlers on modal triggers
*/
// Keep a reference to the opened modal
var activeModal = null;
/**
* Generates an associative array of modals and it's
* respective triggers
* @param {array} triggers An array of all triggers
* @param {string} triggerAttr The data-attribute which triggers the module
* @return {array}
*/
var generateTriggerMap = function generateTriggerMap(triggers, triggerAttr) {
var triggerMap = [];
triggers.forEach(function (trigger) {
var targetModal = trigger.attributes[triggerAttr].value;
if (triggerMap[targetModal] === undefined) triggerMap[targetModal] = [];
triggerMap[targetModal].push(trigger);
});
return triggerMap;
};
/**
* Validates whether a modal of the given id exists
* in the DOM
* @param {number} id The id of the modal
* @return {boolean}
*/
var validateModalPresence = function validateModalPresence(id) {
if (!document.getElementById(id)) {
console.warn(
"MicroModal: \u2757Seems like you have missed %c'".concat(id, "'"),
'background-color: #f8f9fa;color: #50596c;font-weight: bold;',
'ID somewhere in your code. Refer example below to resolve it.'
);
console.warn(
'%cExample:',
'background-color: #f8f9fa;color: #50596c;font-weight: bold;',
'<div class="modal" id="'.concat(id, '"></div>')
);
return false;
}
};
/**
* Validates if there are modal triggers present
* in the DOM
* @param {array} triggers An array of data-triggers
* @return {boolean}
*/
var validateTriggerPresence = function validateTriggerPresence(triggers) {
if (triggers.length <= 0) {
console.warn(
"MicroModal: \u2757Please specify at least one %c'micromodal-trigger'",
'background-color: #f8f9fa;color: #50596c;font-weight: bold;',
'data attribute.'
);
console.warn(
'%cExample:',
'background-color: #f8f9fa;color: #50596c;font-weight: bold;',
'<a href="#" data-micromodal-trigger="my-modal"></a>'
);
return false;
}
};
/**
* Checks if triggers and their corresponding modals
* are present in the DOM
* @param {array} triggers Array of DOM nodes which have data-triggers
* @param {array} triggerMap Associative array of modals and their triggers
* @return {boolean}
*/
var validateArgs = function validateArgs(triggers, triggerMap) {
validateTriggerPresence(triggers);
if (!triggerMap) return true;
for (var id in triggerMap) {
validateModalPresence(id);
}
return true;
};
/**
* Binds click handlers to all modal triggers
* @param {object} config [description]
* @return void
*/
var init = function init(config) {
// Create an config object with default openTrigger
var options = Object.assign(
{},
{
openTrigger: 'data-micromodal-trigger',
},
config
); // Collects all the nodes with the trigger
var triggers = _toConsumableArray(
document.querySelectorAll('['.concat(options.openTrigger, ']'))
); // Makes a mappings of modals with their trigger nodes
var triggerMap = generateTriggerMap(triggers, options.openTrigger); // Checks if modals and triggers exist in dom
if (options.debugMode === true && validateArgs(triggers, triggerMap) === false) return; // For every target modal creates a new instance
for (var key in triggerMap) {
var value = triggerMap[key];
options.targetModal = key;
options.triggers = _toConsumableArray(value);
activeModal = new Modal(options); // eslint-disable-line no-new
}
};
/**
* Shows a particular modal
* @param {string} targetModal [The id of the modal to display]
* @param {object} config [The configuration object to pass]
* @return {void}
*/
var show = function show(targetModal, config) {
var options = config || {};
options.targetModal = targetModal; // Checks if modals and triggers exist in dom
if (options.debugMode === true && validateModalPresence(targetModal) === false) return; // clear events in case previous modal wasn't close
if (activeModal) activeModal.removeEventListeners(); // stores reference to active modal
activeModal = new Modal(options); // eslint-disable-line no-new
activeModal.showModal();
};
/**
* Closes the active modal
* @param {string} targetModal [The id of the modal to close]
* @return {void}
*/
var close = function close(targetModal) {
targetModal ? activeModal.closeModalById(targetModal) : activeModal.closeModal();
};
return {
init: init,
show: show,
close: close,
};
})();
window.MicroModal = MicroModal;
export default MicroModal;
import {html, LitElement, css} from 'lit';
import {createInstance} from './i18n';
import * as commonStyles from '../styles.js';
import {Icon} from "./icon";
import {MiniSpinner} from "./mini-spinner";
import MicroModal from './micromodal.es';
import DBPLitElement from "../dbp-lit-element";
export class Modal extends DBPLitElement {
constructor() {
super();
this._i18n = createInstance();
this.lang = this._i18n.language;
this.modalId = 'dbp-modal-id';
this.title = "Modal Title";
}
static get properties() {
return {
modalId: {type: String, attribute: 'modal-id'},
title: {type: String},
};
}
static get scopedElements() {
return {
'dbp-icon': Icon,
'dbp-mini-spinner': MiniSpinner,
};
}
open() {
MicroModal.show(this._('#' + this.modalId), {
disableScroll: true,
onClose: (modal) => {
// TODO get from parent maybe notify parent with event
},
});
}
static get styles() {
// language=css
return css`
${commonStyles.getModalDialogCSS()}
.modal-title {
margin: 0;
padding: 0.25em 0 0 0;
font-weight: 300;
}
.modal-container{
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 15px 20px 20px;
}
.modal-header{
padding: 0px;
display: flex;
justify-content: space-between;
}
.modal-content{
display: flex;
padding-left: 0px;
padding-right: 0px;
overflow: unset;
gap: 1em;
flex-direction: column;
height: 100%;
}
`;
}
render() {
const i18n = this._i18n;
return html`
<div class="modal micromodal-slide" id="${this.modalId}" aria-hidden="true">
<div class="modal-overlay" tabindex="-2" data-micromodal-close>
<div class="modal-container"
role="dialog"
aria-modal="true"
aria-labelledby="show-recipient-modal-title">
<header class="modal-header">
<h3 class="modal-title">
${this.title}
</h3>
<button
title="${i18n.t('dbp-modal.close')}"
class="modal-close"
aria-label="Close modal"
@click="${() => {
MicroModal.close(this._('#' + this.modalId));
}}">
<dbp-icon
title="${i18n.t('dbp-modal.close')}"
name="close"
class="close-icon"></dbp-icon>
</button>
</header>
<main class="modal-content">
<slot name="content"></slot>
</main>
<footer class="modal-footer">
<slot name="footer"></slot>
</footer>
</div>
</div>
</div>
`;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment