debian-mirror-gitlab/app/assets/javascripts/flash.js

121 lines
3.2 KiB
JavaScript
Raw Normal View History

2018-03-17 18:26:18 +05:30
import _ from 'underscore';
2019-12-04 20:38:33 +05:30
import { spriteIcon } from './lib/utils/common_utils';
2018-03-17 18:26:18 +05:30
2020-03-13 15:44:24 +05:30
const FLASH_TYPES = {
ALERT: 'alert',
NOTICE: 'notice',
SUCCESS: 'success',
WARNING: 'warning',
};
2018-03-17 18:26:18 +05:30
const hideFlash = (flashEl, fadeTransition = true) => {
if (fadeTransition) {
Object.assign(flashEl.style, {
2020-03-13 15:44:24 +05:30
transition: 'opacity 0.15s',
2018-03-17 18:26:18 +05:30
opacity: '0',
2017-08-17 22:00:37 +05:30
});
2018-03-17 18:26:18 +05:30
}
2017-09-10 17:25:29 +05:30
2018-12-13 13:39:08 +05:30
flashEl.addEventListener(
'transitionend',
() => {
flashEl.remove();
window.dispatchEvent(new Event('resize'));
if (document.body.classList.contains('flash-shown'))
document.body.classList.remove('flash-shown');
},
{
once: true,
passive: true,
},
);
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
};
2017-09-10 17:25:29 +05:30
2018-03-17 18:26:18 +05:30
const createAction = config => `
<a
href="${config.href || '#'}"
class="flash-action"
${config.href ? '' : 'role="button"'}
>
${_.escape(config.title)}
</a>
`;
2017-09-10 17:25:29 +05:30
2019-12-04 20:38:33 +05:30
const createFlashEl = (message, type) => `
2019-12-26 22:10:19 +05:30
<div class="flash-${type}">
2019-12-04 20:38:33 +05:30
<div class="flash-text">
2018-03-17 18:26:18 +05:30
${_.escape(message)}
2019-12-21 20:55:43 +05:30
<div class="close-icon-wrapper js-close-icon">
${spriteIcon('close', 'close-icon')}
</div>
2018-03-17 18:26:18 +05:30
</div>
</div>
`;
const removeFlashClickListener = (flashEl, fadeTransition) => {
2019-12-21 20:55:43 +05:30
flashEl
.querySelector('.js-close-icon')
.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
2018-03-17 18:26:18 +05:30
};
/*
* Flash banner supports different types of Flash configurations
* along with ability to provide actionConfig which can be used to show
* additional action or link on banner next to message
*
* @param {String} message Flash message text
2020-03-13 15:44:24 +05:30
* @param {String} type Type of Flash, it can be `notice`, `success`, `warning` or `alert` (default)
2018-03-17 18:26:18 +05:30
* @param {Object} parent Reference to parent element under which Flash needs to appear
* @param {Object} actonConfig Map of config to show action on banner
* @param {String} href URL to which action config should point to (default: '#')
* @param {String} title Title of action
* @param {Function} clickHandler Method to call when action is clicked on
* @param {Boolean} fadeTransition Boolean to determine whether to fade the alert out
*/
const createFlash = function createFlash(
message,
2020-03-13 15:44:24 +05:30
type = FLASH_TYPES.ALERT,
2018-03-17 18:26:18 +05:30
parent = document,
actionConfig = null,
fadeTransition = true,
addBodyClass = false,
) {
const flashContainer = parent.querySelector('.flash-container');
if (!flashContainer) return null;
2019-12-04 20:38:33 +05:30
flashContainer.innerHTML = createFlashEl(message, type);
2018-03-17 18:26:18 +05:30
const flashEl = flashContainer.querySelector(`.flash-${type}`);
if (actionConfig) {
flashEl.innerHTML += createAction(actionConfig);
if (actionConfig.clickHandler) {
2018-12-13 13:39:08 +05:30
flashEl
.querySelector('.flash-action')
.addEventListener('click', e => actionConfig.clickHandler(e));
2017-08-17 22:00:37 +05:30
}
}
2016-09-13 17:45:13 +05:30
2019-12-21 20:55:43 +05:30
removeFlashClickListener(flashEl, fadeTransition);
2018-03-17 18:26:18 +05:30
flashContainer.style.display = 'block';
if (addBodyClass) document.body.classList.add('flash-shown');
return flashContainer;
};
2020-03-13 15:44:24 +05:30
export {
createFlash as default,
createFlashEl,
createAction,
hideFlash,
removeFlashClickListener,
FLASH_TYPES,
};
2018-03-17 18:26:18 +05:30
window.Flash = createFlash;