Depicter — Popup & Slider Builder / 1.9.2

Depicter — Popup & Slider Builder v1.9.2

depicter / resources / scripts / player / injector.js

injector.js in Depicter — Popup & Slider Builder 1.9.2, at resources/scripts/player/injector.js

122 lines 3.6 KB

Raw Download Zip

1	/**
2	* It's a standalone module that injects given data to the player markup right before the player initialization
3	* This module can be used to show a preview of a template on realtime with the user's given data
4	*/
5
6	/**
7	* Fill the image based on type on box
8	* @param {String} type type of fit cover or contain
9	* @param {number} boxW box width
10	* @param {number} boxH box height
11	* @param {number} width media width
12	* @param {number} height media width
13	*/
14	const fitToBox = (type, boxW, boxH, width, height) => {
15	const wr = boxW / width;
16	const hr = boxH / height;
17	const ratio = type === 'cover' ? Math.max(wr, hr) : Math.min(wr, hr);
18
19	return {
20	width: width * ratio,
21	height: height * ratio,
22	};
23	};
24
25	const parseJSONAttr = (value) => {
26	try {
27	return JSON.parse(value.replace(/'/g, '"'));
28	} catch (e) {
29	console.warn('Given data value is not a valid JSON, skipped. \n ' + value);
30	}
31
32	return null;
33	};
34
35	const calcCropSize = (size, element) => {
36	// has crop data
37	if (element.dataset.crop) {
38	const cropData = parseJSONAttr(element.dataset.crop);
39	const {
40	mediaSize: { width: mw, height: mh },
41	} = cropData;
42	const { width, height } = size;
43	cropData.mediaSize = fitToBox('cover', mw, mh, width, height);
44	element.dataset.crop = JSON.stringify(cropData).replace('"', "'");
45	}
46	};
47
48	const replaceImg = (src, size, element) => {
49	calcCropSize(size, element);
50	delete element.dataset.depicterSrcset;
51	element.dataset.depicterSrc = src;
52
53	delete element.dataset.srcset;
54	element.dataset.src = src;
55	};
56
57	const replacePicture = (src, size, element) => {
58	calcCropSize(size, element);
59	const img = element.querySelector('img');
60	delete img.dataset.depicterSrcset;
61	img.dataset.depicterSrc = src;
62	element.querySelectorAll('source')?.forEach((el) => {
63	el.remove();
64	});
65	};
66
67	const replaceImages = (pattern, targetElement) => {
68	Object.entries(pattern).forEach(([className, { src, size }]) => {
69	targetElement.querySelectorAll('.' + className)?.forEach((element) => {
70	if (element.tagName === 'IMG') {
71	replaceImg(src, size, element);
72	} else if (element.tagName === 'PICTURE') {
73	replacePicture(src, size, element);
74	} else if (element.tagName === 'DIV' \|\| element.classList.contains('depicter-section')) {
75	const targetEl = element.querySelector('img.depicter-bg');
76	if (targetEl) replaceImg(src, size, targetEl);
77	}
78	});
79	});
80	};
81
82	const replaceContent = (pattern, targetElement) => {
83	Object.entries(pattern).forEach(([className, content]) => {
84	targetElement.querySelectorAll('.' + className)?.forEach((element) => {
85	element.innerHTML = content;
86	});
87	});
88	};
89
90	const replaceColors = (pattern, targetElement = document.documentElement) => {
91	Object.entries(pattern).forEach(([color, value]) => {
92	targetElement.style.setProperty(color, value);
93	});
94	};
95
96	window.depicterInjector = (target) => {
97	const targetElement = document.querySelector(target);
98	window.addEventListener('message', (event) => {
99	const { data } = event;
100
101	switch (data.action) {
102	case 'replaceContent':
103	replaceContent(data.pattern, targetElement);
104	break;
105	case 'replaceImages':
106	replaceImages(data.pattern, targetElement);
107	break;
108	case 'replaceColors':
109	replaceColors(data.pattern);
110	break;
111	case 'init':
112	window.Depicter.initAll();
113	break;
114	default:
115	break;
116	}
117	});
118	};
119
120	// disable auto Depicter init
121	window.DepicterDisableAutoInit = true;
122