https://www.medallioncabinetry.com/wp-content/themes/medallioncabinetry/blocks-2026.js?ver=1790197215

1/* global marquee */
2(() => {
3
4	'use strict';
5
6	function cplcBlock() {
7
8		document.querySelectorAll('.cplc').forEach((el) => {
9
10			const items = Array.from(el.querySelectorAll('details'));
11
12			if (!items.length) {
13				return;
14			}
15
16			// ensure one is open initially
17			if (!items.some((d) => d.open)) {
18				items[0].open = true;
19			}
20
21			items.forEach((detailsEl) => {
22
23				detailsEl.addEventListener('toggle', () => {
24
25					if (detailsEl.open) { // close all others
26						items.forEach((otherDetailsEl) => {
27							if (otherDetailsEl !== detailsEl) {
28								otherDetailsEl.open = false;
29							}
30						});
31					} else if (!items.some((d) => d.open)) { // prevent closing the open one
32						detailsEl.open = true;
33					}
34
35				});
36
37			});
38
39		});
40
41	}
42
43	customElements.whenDefined('pg-carousel').then(() => {
44
45		document.querySelectorAll('.pline-carousel pg-carousel').forEach((el) => {
46
47			const div = document.createElement('div');
48			div.classList.add('status');
49			div.textContent = `${String(el.activeSlide).padStart(String(el.slideCount).length, '0')} / ${el.slideCount}`;
50			el.appendChild(div);
51
52			el.addEventListener('pg-carousel-change', () => {
53				el.querySelector('.status').textContent = `${String(el.activeSlide).padStart(String(el.slideCount).length, '0')} / ${el.slideCount}`;
54			});
55
56		});
57
58	});
59
60	customElements.whenDefined('pg-slider').then(() => {
61
62		document.querySelectorAll('.dafc pg-slider').forEach((el) => {
63
64			const allSlides = el.querySelectorAll('.slide-wrap > *');
65
66			el.addEventListener('pg-slider-change', () => {
67
68				allSlides.forEach((slide) => {
69					slide.classList.remove('active');
70				});
71
72				allSlides[el.activeSlide - 1].classList.add('active');
73
74			});
75
76		});
77
78	});
79
80	function setupMarquees() {
81
82		const marquees = document.querySelectorAll('.marquee');
83
84		if (!marquees.length) {
85			return;
86		}
87
88		marquees.forEach((el) => {
89
90			const theMarquee = el.querySelector('.marquee-wrapper'),
91				theMarqueeContentWidth = theMarquee.querySelector('span').offsetWidth,
92				timesToRepeat = Math.ceil(window.innerWidth / theMarqueeContentWidth) + 1,
93				playPauseButtonWrap = document.createElement('div'),
94				playPauseButtonTemplate = document.getElementById('playbtn').content.cloneNode(true);
95
96			if (!Number.isFinite(timesToRepeat)) {
97				return;
98			}
99
100			// repeat the message enough times to ensure it spans the width of the screen
101			theMarquee.innerHTML = `${theMarquee.innerHTML.repeat(timesToRepeat)}`;
102
103			const marqueeObj = new marquee(theMarquee, {
104				'duplicated': true,
105				'duration': theMarqueeContentWidth * timesToRepeat * 10,
106				'pauseOnHover': true,
107				'startVisible': true
108			});
109
110			playPauseButtonWrap.classList.add('wrap');
111			playPauseButtonWrap.classList.add('clearfix');
112			playPauseButtonWrap.appendChild(playPauseButtonTemplate);
113			theMarquee.after(playPauseButtonWrap);
114
115			el.querySelector('.playbtn').addEventListener('click', (evt) => {
116				if (evt.currentTarget.hasAttribute('aria-pressed')) {
117					evt.currentTarget.removeAttribute('aria-pressed');
118					marqueeObj.resume();
119				} else {
120					evt.currentTarget.setAttribute('aria-pressed', 'true');
121					marqueeObj.pause();
122				}
123			});
124
125		});
126
127	}
128
129	function setupInteractiveInspiration() {
130
131		const app = document.querySelector('.inspiro-interactive');
132
133		if (!app) {
134			return;
135		}
136
137		const popoverBtns = app.querySelectorAll('button'),
138			popovers = app.querySelectorAll('[popover]');
139
140		popoverBtns.forEach((btn) => {
141
142			btn.addEventListener('click', (evt) => {
143
144				const thisBtn = evt.target;
145
146				if (thisBtn.popoverTargetElement.classList.contains('active')) {
147					thisBtn.classList.remove('active');
148					thisBtn.popoverTargetElement.classList.remove('active');
149				} else {
150					popoverBtns.forEach((el2) => {
151						el2.classList.remove('active');
152					});
153					popovers.forEach((el3) => {
154						el3.classList.remove('active');
155					});
156					thisBtn.classList.add('active');
157					thisBtn.popoverTargetElement.classList.add('active');
158				}
159
160			});
161
162		});
163
164		new ResizeObserver(() => {

165			popovers.forEach((el) => {
166				if (!window.matchMedia('(width >= 48em)').matches) {
167					el.classList.add('pover');
168					el.removeAttribute('popover');
169				} else {
170					el.classList.remove('pover');
171					el.setAttribute('popover', '');
172				}
173			});
174		}).observe(app);
175
176	}
177
178	function setupProductLinkAccordion() {
179
180		const app = document.querySelector('.pla');
181
182		if (!app) {
183			return;
184		}
185
186		const appSections = app.querySelectorAll('section'),
187			appSectionNames = app.querySelectorAll('h3'),
188			upbtn = app.querySelector('.upbtn'),
189			downbtn = app.querySelector('.downbtn');
190
191		let activeSection = 0;
192
193		function updateAppSection() {
194
195			app.querySelectorAll('.active').forEach((el) => {
196				el.classList.remove('active');
197			});
198
199			appSections[activeSection].classList.add('active');
200
201		}
202
203		appSectionNames.forEach((el) => {
204			el.addEventListener('click', (evt) => {
205
206				activeSection = Array.from(appSections).indexOf(evt.target.closest('section'));
207
208				updateAppSection();
209
210			});
211		});
212
213		upbtn.addEventListener('click', () => {
214
215			activeSection--;
216
217			if (activeSection < 0) {
218				activeSection = 0;
219			}
220
221			updateAppSection();
222
223		});
224
225		downbtn.addEventListener('click', () => {
226
227			activeSection++;
228
229			if (activeSection >= appSections.length - 1) {
230				activeSection = appSections.length - 1;
231			}
232
233			updateAppSection();
234
235		});
236
237		appSections[activeSection].classList.add('active');
238
239	}
240
241	cplcBlock();
242	setupMarquees();
243	setupInteractiveInspiration();
244	setupProductLinkAccordion();
245
246})();