2017-10-02 08:32:53 -04:00
|
|
|
import _ from 'underscore';
|
2016-07-24 16:45:11 -04:00
|
|
|
|
2017-10-04 07:13:11 -04:00
|
|
|
const hideFlash = (flashEl, fadeTransition = true) => {
|
|
|
|
if (fadeTransition) {
|
|
|
|
Object.assign(flashEl.style, {
|
|
|
|
transition: 'opacity .3s',
|
|
|
|
opacity: '0',
|
|
|
|
});
|
|
|
|
}
|
2016-07-24 16:45:11 -04:00
|
|
|
|
2017-10-02 08:32:53 -04:00
|
|
|
flashEl.addEventListener('transitionend', () => {
|
|
|
|
flashEl.remove();
|
|
|
|
}, {
|
|
|
|
once: true,
|
2017-10-05 05:27:43 -04:00
|
|
|
passive: true,
|
2017-10-02 08:32:53 -04:00
|
|
|
});
|
2017-10-04 07:13:11 -04:00
|
|
|
|
|
|
|
if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
|
2017-10-02 08:32:53 -04:00
|
|
|
};
|
2017-03-11 02:30:44 -05:00
|
|
|
|
2017-10-02 08:32:53 -04:00
|
|
|
const createAction = config => `
|
|
|
|
<a
|
|
|
|
href="${config.href || '#'}"
|
|
|
|
class="flash-action"
|
2017-10-04 07:13:11 -04:00
|
|
|
${config.href ? '' : 'role="button"'}
|
2017-10-02 08:32:53 -04:00
|
|
|
>
|
|
|
|
${_.escape(config.title)}
|
|
|
|
</a>
|
|
|
|
`;
|
2017-05-25 04:48:10 -04:00
|
|
|
|
2017-10-05 05:27:43 -04:00
|
|
|
const createFlashEl = (message, type, isInContentWrapper = false) => `
|
2017-10-02 08:32:53 -04:00
|
|
|
<div
|
|
|
|
class="flash-${type}"
|
|
|
|
>
|
|
|
|
<div
|
2017-10-05 05:27:43 -04:00
|
|
|
class="flash-text ${isInContentWrapper ? 'container-fluid container-limited' : ''}"
|
2017-10-02 08:32:53 -04:00
|
|
|
>
|
|
|
|
${_.escape(message)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
2017-05-31 10:55:57 -04:00
|
|
|
|
2017-10-13 05:35:40 -04:00
|
|
|
const removeFlashClickListener = (flashEl, fadeTransition) => {
|
|
|
|
flashEl.parentNode.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
|
|
|
|
};
|
|
|
|
|
2017-10-04 07:13:11 -04:00
|
|
|
/*
|
|
|
|
* 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
|
|
|
|
*
|
2017-10-04 09:44:43 -04:00
|
|
|
* @param {String} message Flash message text
|
|
|
|
* @param {String} type Type of Flash, it can be `notice` or `alert` (default)
|
|
|
|
* @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
|
2017-10-04 07:13:11 -04:00
|
|
|
*/
|
|
|
|
const createFlash = function createFlash(
|
|
|
|
message,
|
|
|
|
type = 'alert',
|
|
|
|
parent = document,
|
|
|
|
actionConfig = null,
|
|
|
|
fadeTransition = true,
|
|
|
|
) {
|
2017-10-02 08:32:53 -04:00
|
|
|
const flashContainer = parent.querySelector('.flash-container');
|
2017-10-03 10:01:02 -04:00
|
|
|
|
|
|
|
if (!flashContainer) return null;
|
|
|
|
|
2017-10-05 05:27:43 -04:00
|
|
|
const isInContentWrapper = flashContainer.parentNode.classList.contains('content-wrapper');
|
|
|
|
|
|
|
|
flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper);
|
2017-05-31 10:55:57 -04:00
|
|
|
|
2017-10-02 08:32:53 -04:00
|
|
|
const flashEl = flashContainer.querySelector(`.flash-${type}`);
|
2017-10-13 05:35:40 -04:00
|
|
|
removeFlashClickListener(flashEl, fadeTransition);
|
2017-05-25 04:48:10 -04:00
|
|
|
|
2017-10-02 08:32:53 -04:00
|
|
|
if (actionConfig) {
|
|
|
|
flashEl.innerHTML += createAction(actionConfig);
|
|
|
|
|
|
|
|
if (actionConfig.clickHandler) {
|
|
|
|
flashEl.querySelector('.flash-action').addEventListener('click', e => actionConfig.clickHandler(e));
|
2016-07-24 16:45:11 -04:00
|
|
|
}
|
2017-03-11 02:30:44 -05:00
|
|
|
}
|
2016-07-24 16:45:11 -04:00
|
|
|
|
2017-10-02 08:32:53 -04:00
|
|
|
flashContainer.style.display = 'block';
|
|
|
|
|
|
|
|
return flashContainer;
|
|
|
|
};
|
|
|
|
|
|
|
|
export {
|
2017-10-03 10:01:02 -04:00
|
|
|
createFlash as default,
|
2017-10-02 08:32:53 -04:00
|
|
|
createFlashEl,
|
2017-10-04 07:13:11 -04:00
|
|
|
createAction,
|
2017-10-02 08:32:53 -04:00
|
|
|
hideFlash,
|
2017-10-13 05:35:40 -04:00
|
|
|
removeFlashClickListener,
|
2017-10-02 08:32:53 -04:00
|
|
|
};
|
2017-10-03 10:01:02 -04:00
|
|
|
window.Flash = createFlash;
|