|
| 1 | +// example-app.js |
| 2 | +// Interactive Component Showcase Application |
| 3 | + |
| 4 | +(function() { |
| 5 | + const status = document.getElementById('status'); |
| 6 | + |
| 7 | + // App state |
| 8 | + let counterValue = 0; |
| 9 | + let incrementAmount = 1; |
| 10 | + let counterLabel = 'Counter'; |
| 11 | + let dropdownInstance = null; |
| 12 | + |
| 13 | + function setStatus(msg) { |
| 14 | + if (status) { |
| 15 | + status.textContent = msg; |
| 16 | + } |
| 17 | + } |
| 18 | + |
| 19 | + // Update counter display |
| 20 | + function updateCounterDisplay() { |
| 21 | + const counterDisplay = document.getElementById('counter-value'); |
| 22 | + const labelDisplay = document.getElementById('display-label'); |
| 23 | + const labelValueDisplay = document.getElementById('display-label-value'); |
| 24 | + const incrementValueDisplay = document.getElementById('display-increment-value'); |
| 25 | + |
| 26 | + if (counterDisplay) { |
| 27 | + counterDisplay.textContent = counterValue; |
| 28 | + } |
| 29 | + |
| 30 | + if (labelDisplay) { |
| 31 | + labelDisplay.textContent = counterLabel; |
| 32 | + } |
| 33 | + |
| 34 | + if (labelValueDisplay) { |
| 35 | + labelValueDisplay.textContent = counterLabel; |
| 36 | + } |
| 37 | + |
| 38 | + if (incrementValueDisplay) { |
| 39 | + incrementValueDisplay.textContent = incrementAmount; |
| 40 | + } |
| 41 | + |
| 42 | + // Update status tags |
| 43 | + updateStatusTags(); |
| 44 | + } |
| 45 | + |
| 46 | + // Update status tags based on counter value |
| 47 | + function updateStatusTags() { |
| 48 | + const primaryTag = document.getElementById('status-tag-primary'); |
| 49 | + const positiveTag = document.getElementById('status-tag-positive'); |
| 50 | + const negativeTag = document.getElementById('status-tag-negative'); |
| 51 | + |
| 52 | + if (counterValue > 0) { |
| 53 | + if (primaryTag) primaryTag.style.display = 'none'; |
| 54 | + if (positiveTag) positiveTag.style.display = 'inline-block'; |
| 55 | + if (negativeTag) negativeTag.style.display = 'none'; |
| 56 | + } else if (counterValue < 0) { |
| 57 | + if (primaryTag) primaryTag.style.display = 'none'; |
| 58 | + if (positiveTag) positiveTag.style.display = 'none'; |
| 59 | + if (negativeTag) negativeTag.style.display = 'inline-block'; |
| 60 | + } else { |
| 61 | + if (primaryTag) primaryTag.style.display = 'inline-block'; |
| 62 | + if (positiveTag) positiveTag.style.display = 'none'; |
| 63 | + if (negativeTag) negativeTag.style.display = 'none'; |
| 64 | + } |
| 65 | + } |
| 66 | + |
| 67 | + // Increment counter |
| 68 | + function incrementCounter() { |
| 69 | + counterValue += incrementAmount; |
| 70 | + updateCounterDisplay(); |
| 71 | + setStatus('Counter incremented'); |
| 72 | + } |
| 73 | + |
| 74 | + // Decrement counter |
| 75 | + function decrementCounter() { |
| 76 | + counterValue -= incrementAmount; |
| 77 | + updateCounterDisplay(); |
| 78 | + setStatus('Counter decremented'); |
| 79 | + } |
| 80 | + |
| 81 | + // Reset counter |
| 82 | + function resetCounter() { |
| 83 | + counterValue = 0; |
| 84 | + updateCounterDisplay(); |
| 85 | + setStatus('Counter reset'); |
| 86 | + } |
| 87 | + |
| 88 | + // Initialize dropdown component |
| 89 | + function initializeDropdown() { |
| 90 | + if (typeof window.Dropdown === 'undefined') { |
| 91 | + console.error('Dropdown class not found. Make sure dropdown.js is loaded.'); |
| 92 | + return; |
| 93 | + } |
| 94 | + |
| 95 | + const dropdownItems = [ |
| 96 | + { value: '1', label: '1' }, |
| 97 | + { value: '5', label: '5' }, |
| 98 | + { value: '10', label: '10' }, |
| 99 | + { value: '25', label: '25' } |
| 100 | + ]; |
| 101 | + |
| 102 | + try { |
| 103 | + dropdownInstance = new window.Dropdown('#increment-dropdown', { |
| 104 | + items: dropdownItems, |
| 105 | + selectedValue: '1', |
| 106 | + placeholder: 'Select increment amount', |
| 107 | + onSelect: (value) => { |
| 108 | + incrementAmount = parseInt(value, 10); |
| 109 | + updateCounterDisplay(); |
| 110 | + setStatus(`Increment amount set to ${incrementAmount}`); |
| 111 | + } |
| 112 | + }); |
| 113 | + } catch (error) { |
| 114 | + console.error('Error initializing dropdown:', error); |
| 115 | + } |
| 116 | + } |
| 117 | + |
| 118 | + // Initialize event listeners |
| 119 | + function initializeEventListeners() { |
| 120 | + // Sidebar controls |
| 121 | + const btnIncrement = document.getElementById('btn-increment'); |
| 122 | + const btnDecrement = document.getElementById('btn-decrement'); |
| 123 | + const btnReset = document.getElementById('btn-reset'); |
| 124 | + const counterLabelInput = document.getElementById('counter-label'); |
| 125 | + |
| 126 | + // Increment button |
| 127 | + if (btnIncrement) { |
| 128 | + btnIncrement.addEventListener('click', incrementCounter); |
| 129 | + } |
| 130 | + |
| 131 | + // Decrement button |
| 132 | + if (btnDecrement) { |
| 133 | + btnDecrement.addEventListener('click', decrementCounter); |
| 134 | + } |
| 135 | + |
| 136 | + // Reset button |
| 137 | + if (btnReset) { |
| 138 | + btnReset.addEventListener('click', resetCounter); |
| 139 | + } |
| 140 | + |
| 141 | + // Label input |
| 142 | + if (counterLabelInput) { |
| 143 | + counterLabelInput.addEventListener('input', (e) => { |
| 144 | + counterLabel = e.target.value || 'Counter'; |
| 145 | + updateCounterDisplay(); |
| 146 | + setStatus('Label updated'); |
| 147 | + }); |
| 148 | + } |
| 149 | + } |
| 150 | + |
| 151 | + // Initialize help modal |
| 152 | + async function initializeHelpModal() { |
| 153 | + try { |
| 154 | + const response = await fetch('./help-content.html'); |
| 155 | + const helpContent = await response.text(); |
| 156 | + |
| 157 | + if (typeof HelpModal !== 'undefined') { |
| 158 | + HelpModal.init({ |
| 159 | + triggerSelector: '#btn-help', |
| 160 | + content: helpContent, |
| 161 | + theme: 'auto' |
| 162 | + }); |
| 163 | + } else { |
| 164 | + console.error('HelpModal not found. Make sure help-modal.js is loaded.'); |
| 165 | + } |
| 166 | + } catch (error) { |
| 167 | + console.error('Failed to load help content:', error); |
| 168 | + if (typeof HelpModal !== 'undefined') { |
| 169 | + HelpModal.init({ |
| 170 | + triggerSelector: '#btn-help', |
| 171 | + content: '<p>Help content could not be loaded. Please check that help-content.html exists.</p>', |
| 172 | + theme: 'auto' |
| 173 | + }); |
| 174 | + } |
| 175 | + } |
| 176 | + } |
| 177 | + |
| 178 | + // Initialize everything when DOM is ready |
| 179 | + function initialize() { |
| 180 | + setStatus('Loading...'); |
| 181 | + |
| 182 | + // Initialize event listeners |
| 183 | + initializeEventListeners(); |
| 184 | + |
| 185 | + // Initialize help modal |
| 186 | + initializeHelpModal(); |
| 187 | + |
| 188 | + // Initialize dropdown after a short delay to ensure Dropdown class is loaded |
| 189 | + setTimeout(() => { |
| 190 | + initializeDropdown(); |
| 191 | + updateCounterDisplay(); |
| 192 | + setStatus('Ready'); |
| 193 | + }, 100); |
| 194 | + } |
| 195 | + |
| 196 | + if (document.readyState === 'loading') { |
| 197 | + document.addEventListener('DOMContentLoaded', initialize); |
| 198 | + } else { |
| 199 | + initialize(); |
| 200 | + } |
| 201 | +})(); |
0 commit comments