mara/page-stack.js at master · LevelFourAB/mara · GitHub

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
'use strict';

import maintainHidden from 'ally.js/maintain/hidden';
import maintainDisabled from 'ally.js/maintain/disabled';

let hidden;
let disabled;

let active = [];

let highestZ = 0;

function recreate() {
	if(hidden) hidden.disengage();
	if(disabled) disabled.disengage();

	const top = active[active.length - 1];

	if(top) {
		document.documentElement.classList.add('mara-no-scroll');

		hidden = maintainHidden({
			filter: top.element
		});

		disabled = maintainDisabled({
			filter: top.element
		});

		highestZ = 0;
		active.forEach((item) => {
			highestZ = Math.max(highestZ, item.zIndex + 1);
		});
	} else {
		document.documentElement.classList.remove('mara-no-scroll');
	}
}

function hideActive() {
	const item = active[active.length - 1];
	if(! item) return;

	if(item.options.onOverlayClick) {
		item.options.onOverlayClick();
	}
}

export default {
	show: function(self, options) {
		if(typeof options === 'function') {
			options = {
				onOverlayClick: options
			};
		}

		if(! options) {
			options = {};
		}

		const overlay = document.createElement('div');
		overlay.className = 'mara-page-overlay ' + (options.className || '');
		overlay.addEventListener('click', hideActive);

		let closest = self.closest('[data-mara-stack]') || document.body;
		closest.append(overlay);

		if(highestZ === 0) {
			// Figure out the Z that the main overlay has
			const style = getComputedStyle(overlay);
			const z = style.zIndex;
			if(z !== 'auto') {
				highestZ = Number(z);
			}
		}

		const localZ = highestZ + 1;
		overlay.style.zIndex = localZ;
		self.style.zIndex = localZ + 1;
		self.setAttribute('data-mara-stack', 'true');

		active.push({
			element: self,
			options: options,
			overlay: overlay,
			zIndex: localZ
		});
		recreate();
	},

	hide: function(self) {
		for(let i=0; i<active.length; i++) {
			const item = active[i];
			if(item.element == self) {
				active.splice(i, 1);
				item.overlay.remove();
				item.element.removeAttribute('data-mara-stack');
				break;
			}
		}

		recreate();
	}
};