1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import _ from 'underscore';
const hideFlash = (flashEl) => {
Object.assign(flashEl.style, {
transition: 'opacity .3s',
opacity: '0',
});
flashEl.addEventListener('transitionend', () => {
flashEl.remove();
}, {
once: true,
});
};
const createAction = config => `
<a
href="${config.href || '#'}"
class="flash-action"
${config.href ? 'role="button"' : ''}
>
${_.escape(config.title)}
</a>
`;
const createFlashEl = (message, type) => `
<div
class="flash-${type}"
>
<div
class="flash-text"
>
${_.escape(message)}
</div>
</div>
`;
const createFlash = function createFlash(message, type = 'alert', parent = document, actionConfig = null) {
const flashContainer = parent.querySelector('.flash-container');
if (!flashContainer) return null;
flashContainer.innerHTML = createFlashEl(message, type);
const flashEl = flashContainer.querySelector(`.flash-${type}`);
flashEl.addEventListener('click', () => hideFlash(flashEl));
if (actionConfig) {
flashEl.innerHTML += createAction(actionConfig);
if (actionConfig.clickHandler) {
flashEl.querySelector('.flash-action').addEventListener('click', e => actionConfig.clickHandler(e));
}
}
if (flashContainer.parentNode.classList.contains('content-wrapper')) {
const flashText = flashEl.querySelector('.flash-text');
flashText.classList.add('container-fluid');
flashText.classList.add('container-limited');
}
flashContainer.style.display = 'block';
return flashContainer;
};
export {
createFlash as default,
createFlashEl,
hideFlash,
};
window.Flash = createFlash;
|
