https://www.ihmsgroup.com/themes/common/javascripts/smb/frame_selector.js?v.f3b736

1/* Relative Path: Frame Selector */
2$(() => {
3    'use strict';
4
5    // Handler for Shape Links
6    const shapeLinks = document.querySelectorAll('#shapePnl a');
7    /**
8     * @param {MouseEvent} event
9     */
10    const onShapeLinks = ({currentTarget: el}) => {
11        const shapeName = el.classList.item(0);
12
13        const selectedSiblings = el.parentElement.querySelectorAll(':scope > .selected');
14        for (const sibling of selectedSiblings) sibling.classList.remove('selected');
15        el.classList.add('selected');
16
17        const facePanels = document.querySelectorAll('#facePnl');
18        for (const facePnl of facePanels) facePnl.setAttribute('class', shapeName);
19
20        const infoPanelShapes = document.querySelectorAll(`#infoPnl div.${shapeName}`);
21        for (const panelShapeEl of infoPanelShapes) {
22            for (const siblingEl of panelShapeEl.parentElement.children) {
23                siblingEl.style.display = siblingEl === panelShapeEl ? 'block' : 'none';
24            }
25        }
26    };
27
28    for (const el of shapeLinks) el.addEventListener('click', onShapeLinks);
29
30    // Handler for Frame Links
31    const frameLinks = document.querySelectorAll('#framePnl span[class*="frm"]');
32    /**
33     * @param {MouseEvent} event
34     */
35    const onFrameLinks = ({currentTarget: frmEl}) => {
36        const frameName = frmEl.getAttribute('class');
37
38        const selected = document.querySelectorAll('#framePnl a.selected');
39        for (const el of selected) el.classList.remove('selected');
40
41        frmEl.parentElement.classList.add('selected');
42
43        const lrgFrames = document.querySelectorAll('#lrgFrame');
44        for (const lrgFrame of lrgFrames) lrgFrame.setAttribute('class', frameName);
45    };
46
47    for (const el of frameLinks) el.addEventListener('click', onFrameLinks);
48
49    // Frame Carousel With Rewind
50    const width = 720;
51    let current = 1;
52    const count = document.querySelectorAll('ul#frameSets li').length;
53    const prevAnchors = document.querySelectorAll('a.prvSet');
54    /**
55     * @param {MouseEvent} event
56     */
57    const onFrameCarouselPrevious = (event) => {
58        event.stopPropagation();
59        event.preventDefault();
60        const frameset$ref = $('ul#frameSets li');
61        if (current > 1) {
62            // FIXME: This really should be handled with CSS Animations controlled by classes
63            frameset$ref.animate({
64                left: `+=${width}px`
65            }, 500);
66            current -= 1;
67            return;
68        }
69        // FIXME: This really should be handled with CSS Animations controlled by classes
70        frameset$ref.animate({
71            left: `-${(count - 1) * width}px`
72        }, 500);
73        current = count;
74    };
75
76    for (const el of prevAnchors) el.addEventListener('click', onFrameCarouselPrevious);
77
78    const nextAnchors = document.querySelectorAll('a.nxtSet');
79    /**
80     * @param {MouseEvent} event
81     */
82    const onFrameCarouselNext = (event) => {
83        event.stopPropagation();
84        event.preventDefault();
85        const frameset$ref = $('ul#frameSets li');
86        if (current < count) {
87            // FIXME: This really should be handled with CSS Animations controlled by classes
88            frameset$ref.animate({
89                left: `-=${width}px`
90            }, 500);
91            current += 1;
92            return;
93        }
94        // FIXME: This really should be handled with CSS Animations controlled by classes
95        frameset$ref.animate({
96            left: '0px'
97        }, 500);
98        current = 1;
99    };
100
101    for (const el of nextAnchors) el.addEventListener('click', onFrameCarouselNext);
102
103
104    // FIXME: Convert this to an es module and convert from $.fancybox to [Fancybox 5|https://fancyapps.com/fancybox/#fancybox]
105    // const {Fancybox} = await import('https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.esm.js');
106    // This would require licensing. Alternative is I refactor all that code. - FRG 2023-11-09
107
108    // Show Frame Selector
109    const frameSelectors = document.querySelectorAll('a.lnchFrmSlctr');
110    /**
111     * @param {MouseEvent} event
112     */
113    const onShowFrameSelector = (event) => {
114        event.preventDefault();
115        event.stopPropagation();
116        $.fancybox({
117            'autoSize': false,
118            'speedIn': 600,
119            'speedOut': 200,
120            'transitionIn': 'elastic',
121            'type': 'inline',
122            'href': '#frameSelector',
123            'width': '815',
124            'height': '508'
125        });
126    };
127    for (const el of frameSelectors) el.addEventListener('click', onShowFrameSelector);
128
129    // Show 3D Spine
130    const dddSpines = document.querySelectorAll('button.lnch3dspine');
131    /**
132     * @param {MouseEvent} event
133     */
134    const onShow3dSpine = (event) => {
135        event.stopPropagation();
136        event.preventDefault();
137        $.fancybox({
138            'autoSize': false,
139            'speedIn': 600,
140            'speedOut': 200,
141            'transitionIn': 'elastic',
142            'type': 'inline',
143            'href': '#frameSelector',
144            'width': '902',
145            'height': '833'
146        });
147    };
148
149    for (const el of dddSpines) el.addEventListener('click', onShow3dSpine);
150
151    // Show Pet Selector
152    const petSelectors = document.querySelectorAll('button.lnchpetselector');
153    /**
154     * @param {MouseEvent} event
155     */
156    const onShowPetSelector = (event) => {
157        event.preventDefault();
158        event.stopPropagation();
159        $.fancybox({
160            'autoSize': false,
161            'speedIn': 600,
162            'speedOut': 200,
163            'transitionIn': 'elastic',
164            'type': 'inline',
165            'href': '#frameSelector',
166            'width': '940',
167            'height': '750'
168        });
169    };
170
171    for (const el of petSelectors) el.addEventListener('click', onShowPetSelector);
172});