-
Notifications
You must be signed in to change notification settings - Fork 0
/
modal.js
128 lines (92 loc) · 2.62 KB
/
modal.js
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
'use strict';
const store = require('fullstore');
const currify = require('currify');
const createElement = require('@cloudcmd/create-element');
require('../css/modal.css');
const parseImages = require('./parse-images');
const showTitle = require('./show-title');
const query = require('./query');
const getClassName = require('./get-class-name');
const noop = () => {};
const optionsStore = store({});
const innerHTML = `
<div class="modal-child" data-name="modal-child">
<div class="modal-close" data-name="modal-close"></div>
</div>
`;
const addEvent = currify((el, fn, name) => query(el).addEventListener(name, fn));
const addAllEvents = (el, fn, names) => names.map(addEvent(el, fn));
const {isArray} = Array;
module.exports.open = (inner, options = {}) => {
check(inner);
if (query('main'))
return;
const {
beforeShow = noop,
beforeClose = noop,
afterShow = noop,
afterClose = noop,
onOverlayClick = noop,
autoSize = false,
index = 0,
helpers = {},
title = '',
} = options;
optionsStore({
beforeClose,
afterClose,
});
beforeShow();
const isImage = isArray(inner);
const isTitle = helpers.title && title || isImage;
const className = getClassName({autoSize, isTitle});
const el = createElement('div', {
innerHTML,
className,
dataName: 'modal-main',
});
addAllEvents('main', onMainClick(onOverlayClick), [
'click',
'contextmenu',
]);
query('close').addEventListener('click', close);
const child = query('child');
if (isImage)
return parseImages(child, inner, {
index,
afterShow,
helpers,
});
child.appendChild(inner);
if (isTitle)
showTitle(title, child);
afterShow();
return el;
};
const onMainClick = currify((overlayClick, event) => {
if (event.target !== query('main'))
return;
close(event);
overlayClick(event);
});
const close = (event) => {
if (event)
event.stopPropagation();
const el = query('main');
const {
beforeClose = noop,
afterClose = noop,
} = optionsStore();
if (!el)
return;
beforeClose();
document.body.removeChild(el);
afterClose();
};
module.exports.close = close;
module.exports._optionsStore = optionsStore;
module.exports._onMainClick = onMainClick;
function check(inner) {
if (!inner)
throw Error('inner should be DOM-element!');
}