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
|
$$plugins.define('miniCart', ['dom'], function (element, options, dom) {
const plugin = this,
selectors = {
openMiniCart: '.open-mini-cart', // Link that opens cart
closeMiniCart: '.close-mini-cart', // Link that closes cart
contentOuterContainer: '.miniCart', // Container for loader and inner content inner
loaderContainer: '.miniCart__holder', // Spinner or any other loader
contentInnerContainer: '.miniCart__main', // Content of mini cart
cartPluginElement: '[data-plugin-cart]'
}, cssClasses = {
opened: 'opened', // Added to 'openMinicart' link when opened
containerOpened: 'active'
};
let pendingXhr, clearOnClick;
function onBodyClick(e) {
if (element.contains(e.target)) {
return;
}
// case where node is removed from DOM. This means we dont know it's parent. Usually the case of cart remove.
if (!document.body.contains(e.target)) {
return;
}
close();
}
function close() {
// Remove opened class from link
element.querySelector(selectors.openMiniCart).classList.remove(cssClasses.opened);
//Hide outer element
var outterContainer = element.querySelector(selectors.contentOuterContainer);
// dom.hide(outterContainer);
outterContainer.classList.remove(cssClasses.containerOpened);
// Hide and reset inner element
const inner = element.querySelector(selectors.contentInnerContainer);
//dom.empty(inner);
// dom.hide(inner);
// Show loader again to be ready for next time
//dom.show(element.querySelector(selectors.loaderContainer));
// Unbind body click
clearOnClick && clearOnClick();
}
function open() {
// Add opened class to link
element.querySelector(selectors.openMiniCart).classList.add(cssClasses.opened);
// Show outer container
//dom.show();
var outterContainer = element.querySelector(selectors.contentOuterContainer);
outterContainer.style.display = "block";
outterContainer.classList.add(cssClasses.containerOpened);
// Listen for body clicks to close
clearOnClick && clearOnClick();
clearOnClick = plugin.on('click', document.body, onBodyClick);
return true;
}
function updateContent() {
return;
if (pendingXhr) {
return;
}
pendingXhr = true;
http.post(options.RefreshUrl, { responseType: "text" })
.then(function (r) {
const container = element.querySelector(selectors.contentInnerContainer);
container.innerHTML = r.data;
dom.hide(element.querySelector(selectors.loaderContainer));
dom.show(container);
})
.finally(function () {
pendingXhr = false;
});
}
const openedStateSelector = selectors.openMiniCart + '.' + cssClasses.opened,
closedStateSelector = selectors.openMiniCart + ':not(.' + cssClasses.opened + ')';
plugin.on('click', element, function (e) {
if (dom.closest(e.target, openedStateSelector)) {
e.preventDefault();
close();
} else if (dom.closest(e.target, closedStateSelector)) {
if (open()) {
e.preventDefault();
updateContent();
}
}
});
});
|
