https://piatra-naturala.ro/wp-content/plugins/lemet-sbc-calculator…/ui/steps/step4_5-island-legs.js?ver=3.5.0

1import { Store } from '../../core/store.js?ver=3.5.0';
2
3const DEFAULT_LEGS = { left: false, right: false, top: false, bottom: false, center: false, height: 90 };
4
5export const Step4_5IslandLegs = {
6    render() {
7        const state = Store.get();
8        const islandLegs = { ...DEFAULT_LEGS, ...(state.options?.islandLegs || {}) };
9
10        return `
11            <div class="sbc-step-container">
12                <h2 class="sbc-title-main">Susținere insulă — Waterfall</h2>
13                <div class="sbc-notice-box">
14                    <p><strong>Waterfall</strong> = piatra coboară vertical pe lateralele insulei până la podea (efect cascadă). Activează laturile dorite sau adaugă un panou interior de susținere.</p>
15                </div>
16
17                <div class="sbc-visual-selector-container">
18                    <div class="sbc-visual-selector-box island-layout">
19                        <svg viewBox="0 0 400 240" class="sbc-visual-guide-svg">
20                            <rect x="80" y="40" width="240" height="160" fill="#fff" stroke="#999" stroke-width="2" />
21                            <text x="200" y="125" font-size="12" fill="#ccc" text-anchor="middle">CORP INSULA</text>
22                        </svg>
23
24                        <div class="sbc-leg-toggle pos-top" data-side="top">
25                            <div class="toggle-square ${islandLegs.top ? 'active' : ''}"></div>
26                            <span>Spate</span>
27                        </div>
28                        <div class="sbc-leg-toggle pos-bottom" data-side="bottom">
29                            <div class="toggle-square ${islandLegs.bottom ? 'active' : ''}"></div>
30                            <span>Față</span>
31                        </div>
32                        <div class="sbc-leg-toggle pos-left" data-side="left">
33                            <div class="toggle-square ${islandLegs.left ? 'active' : ''}"></div>
34                            <span>Stânga</span>
35                        </div>
36                        <div class="sbc-leg-toggle pos-right" data-side="right">
37                            <div class="toggle-square ${islandLegs.right ? 'active' : ''}"></div>
38                            <span>Dreapta</span>
39                        </div>
40                        <div class="sbc-leg-toggle pos-center" data-side="center">
41                            <div class="toggle-square ${islandLegs.center ? 'active' : ''}" style="border-radius: 50%;"></div>
42                            <span>Interior</span>
43                        </div>
44                    </div>
45                </div>
46
47                <div class="sbc-details-box mt-30">
48                    <div class="sbc-input-group-premium small">
49                        <label>Înălțime panouri (cm)</label>
50                        <input type="number" id="island-leg-height" value="${islandLegs.height || 90}" min="60" max="120" step="1">
51                    </div>
52                </div>
53            </div>
54        `;
55    },
56
57    attachEvents() {
58        document.querySelectorAll('.sbc-leg-toggle').forEach(toggle => {
59            toggle.addEventListener('click', () => {
60                const side = toggle.dataset.side;
61                const state = Store.get();
62                const currentLegs = { ...DEFAULT_LEGS, ...(state.options?.islandLegs || {}) };
63                currentLegs[side] = !currentLegs[side];
64                Store.update('options.islandLegs', currentLegs);
65
66                // Waterfall pe latura exterioara implica cant activ pe acea latura.
67                if (side !== 'center') {
68                    const pieces = Array.isArray(state.pieces) ? [...state.pieces] : [];
69                    if (pieces[0]) {
70                        pieces[0] = {
71                            ...pieces[0],
72                            edges: {
73                                top: !!pieces[0]?.edges?.top,
74                                bottom: !!pieces[0]?.edges?.bottom,
75                                left: !!pieces[0]?.edges?.left,
76                                right: !!pieces[0]?.edges?.right,
77                                [side]: currentLegs[side]
78                            }
79                        };
80                        Store.update('pieces', pieces);
81                    }
82                }
83

84                if ((state.options?.edgeProfile || 'none') === 'none' && ['top', 'bottom', 'left', 'right'].some(k => currentLegs[k])) {
85                    Store.update('options.edgeProfile', 'bizot');
86                }
87
88                this.refreshUI();
89            });
90        });
91
92        const heightInput = document.getElementById('island-leg-height');
93        if (heightInput) {
94            heightInput.addEventListener('input', (e) => {
95                const height = Math.min(Math.max(parseFloat(e.target.value) || 90, 60), 120);
96                const state = Store.get();
97                const currentLegs = { ...DEFAULT_LEGS, ...(state.options?.islandLegs || {}) };
98                Store.update('options.islandLegs', { ...currentLegs, height });
99            });
100        }
101    },
102
103    refreshUI() {
104        const container = document.querySelector('.sbc-accordion-step[data-step="5"]') || document.getElementById('sbc-step-content');
105        if (!container) {
106            return;
107        }
108        container.innerHTML = this.render();
109        this.attachEvents();
110    }
111};