https://prettylittleshoppers.com/wp-content/plugins/lookbook/templates/component/component.js?ver=1.5.9

1var lookbookComponent = (function(module, $) {
2
3	$(document).ready(function() {
4		var images = $('.pd-lookbook-component');
5
6		images.each(function() {
7			initComponent($(this));
8		});
9	});
10
11	function initComponent(ctrl) {
12		var jsonDataStr = ctrl.find('input[type=hidden][name=lookbook_img_hotspot_data]').val();
13
14		// Don't load if can't load the JSON data
15		if (!jsonDataStr) {
16			return;
17		}
18
19		var data = JSON.parse(jsonDataStr);
20		var container = ctrl.find('.pd-lookbook-container');
21		var settingSizeHidden = ctrl.find('input[type=hidden][name=lookbook_setting_hotspot_size]');
22		var settingAutoHideMobile = ctrl.find('input[type=hidden][name=lookbook_setting_auto_hide_mobile]');
23		var revealBtn = ctrl.find('button.pd-reveal-hotspot-btn');
24
25		var settings = {
26			hotspotSize: 30,
27			autoHideMobile: false
28		};
29
30		loadSettings();
31		setHotspots(data);
32
33		if (!settings.autoHideMobile) {
34			container.addClass('visible');
35		}
36
37		var hotspotElements = ctrl.find('div.pd-hotspot');
38		var hotspotsOpen = false;
39
40		$(container).click(function() {
41			toggleHotspots();
42		});
43
44		if (revealBtn.length) {
45			$(revealBtn).click(function(e) {
46				e.stopImmediatePropagation();
47	
48				if (!hotspotsOpen) {
49					openHotspots();
50					return;
51				}
52				
53				closeHotspots();
54			});
55		}
56	   
57		function toggleHotspots() {
58			container.toggleClass('visible');
59		}
60
61		function openHotspots() {
62			container.addClass('visible');
63			hotspotElements.addClass('open');
64			hotspotsOpen = true;
65		}
66
67		function closeHotspots() {
68			container.removeClass('visible');
69			hotspotElements.removeClass('open');
70			hotspotsOpen = false;
71		}
72
73		function setHotspots(hotspots) {
74			Object.keys(hotspots).forEach(function (key) {
75				drawHotspot(hotspots[key]);
76			});
77		}
78
79		function drawHotspot(hotspot) {
80			// Creat hotspot element
81			var hotspotElem = $('<div></div>', {
82				class: 'pd-hotspot',
83				'data-hotspot-id': hotspot.id,
84				'data-title': hotspot.title,
85				
86			});
87
88			hotspotElem.css({
89				'background-color': hotspot.color,
90				'width': settings.hotspotSize,
91				'height': settings.hotspotSize,
92				'line-height': settings.hotspotSize + 'px',
93				'border-radius': settings.hotspotSize + 'px',
94				'color': hotspot.textColor
95			});
96
97			var hotspotInner = hotspotElem;
98			// If hotspot has link, put an anchor inside it
99			if (hotspot.link) {
100				// Create anchor and put it inside the hotspot div
101				var anchor = $('<a></a>', {
102					href: hotspot.link,
103					rel: 'nofollow noopener',
104					target: '_blank',
105					style: 'text-decoration: none; color: ' + hotspot.textColor + ' !important'
106				})
107				.addClass('pd-hotspot-link')
108				.appendTo(hotspotElem);
109
110				hotspotInner = anchor;
111			}
112
113			// Set inner HTML to hotspot number
114			hotspotInner.html(hotspot.index + 1);
115	
116			// Draw the bubble
117			drawHotspotBubble(hotspot, hotspotElem);
118			// Center the hotspot on its point
119			hotspotElem.appendTo(container);
120			// Position hotspot
121			moveHotspotToPoint(hotspotElem, hotspot.y, hotspot.x);
122		}
123
124		function drawHotspotBubble(hotspot, hotspotElem) {
125			var bubbleElem = $('<div></div>')
126				.addClass('pd-hotspot-bubble')
127				.html(hotspot.title)
128				.appendTo(hotspotElem);
129
130			switch (settings.hotspotSize) {
131				case 25:
132					bubbleElem.css('transform', 'translate(calc(-50% + 12.5px), -39px)');
133					break;
134				case 30:
135					bubbleElem.css('transform', 'translate(calc(-50% + 15px), -45px)');
136					break;
137				case 45:
138					bubbleElem.css('transform', 'translate(calc(-50% + 22.5px), -60px)');
139					break;
140			}
141		}
142
143		function loadSettings() {
144			if (settingSizeHidden.val()) {
145				settings.hotspotSize = parseInt(settingSizeHidden.val());
146			}
147
148			if (settingAutoHideMobile.val()) {
149				settings.autoHideMobile = settingAutoHideMobile.val() == 1;
150			}
151		}
152	}
153
154	function moveHotspotToPoint(hotspot, top, left) {
155		var offsetPx = hotspot.height() / 2;
156		hotspot.css('top', 'calc(' + top + '% - ' + offsetPx + 'px)');
157		hotspot.css('left', 'calc(' + left + '% - ' + offsetPx + 'px)');
158	}
159
160	return module;
161})(lookbookComponent || {}, jQuery);