(options = {})
| 9 | * @returns {Object} Taskbar API |
| 10 | */ |
| 11 | export function initTaskbar(options = {}) { |
| 12 | const { |
| 13 | containerId = 'taskbar', |
| 14 | showClock = true, |
| 15 | showTrayIcon = true, |
| 16 | showSystemIcons = true |
| 17 | } = options |
| 18 | |
| 19 | let container = document.getElementById(containerId) |
| 20 | |
| 21 | // Create the container when it does not exist |
| 22 | if (!container) { |
| 23 | container = document.createElement('div') |
| 24 | container.id = containerId |
| 25 | document.body.appendChild(container) |
| 26 | } |
| 27 | |
| 28 | // Resolve the icon path |
| 29 | function getIconPath(filename) { |
| 30 | const currentPath = window.location.pathname |
| 31 | if (currentPath.includes('/tools/')) { |
| 32 | return `../../docs/icons/${filename}` |
| 33 | } |
| 34 | return `./docs/icons/${filename}` |
| 35 | } |
| 36 | |
| 37 | // Create the taskbar HTML (matching the original markup) |
| 38 | container.className = 'taskbar taskbar--light' |
| 39 | container.innerHTML = ` |
| 40 | <div class="taskcont"> |
| 41 | <div class="taskright"> |
| 42 | ${showTrayIcon ? `<div class="tray" id="tray"> |
| 43 | <div class="tray-icon" id="trayIcon"></div> |
| 44 | </div>` : ''} |
| 45 | ${showSystemIcons ? `<div class="prtclk handcr my-1 px-1 hvlight flex rounded"> |
| 46 | <img class="taskIcon" width="16" height="16" src="${getIconPath('wifi.png')}" alt="wifi"/> |
| 47 | <img class="taskIcon" width="16" height="16" src="${getIconPath('audio.png')}" alt="audio"/> |
| 48 | <span class="uicon taskIcon"><span class="battery"> |
| 49 | <div class="charger"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 24 24"><path fill="#000" stroke="#f3f3f3" stroke-width="2" d="m8.294 14-1.767 7.068c-.187.746.736 1.256 1.269.701L19.79 9.27A.75.75 0 0 0 19.25 8h-4.46l1.672-5.013A.75.75 0 0 0 15.75 2h-7a.75.75 0 0 0-.721.544l-3 10.5A.75.75 0 0 0 5.75 14h2.544Z"/></svg></div> |
| 50 | <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M17 6a3 3 0 0 1 3 3v1h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-1v1a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h12Zm-.002 1.5H5a1.5 1.5 0 0 0-1.493 1.356L3.5 9v6a1.5 1.5 0 0 0 1.355 1.493L5 16.5h11.998a1.5 1.5 0 0 0 1.493-1.355l.007-.145V9a1.5 1.5 0 0 0-1.355-1.493l-.145-.007Z"/></svg> |
| 51 | <div class="btFull" style="width:100%"><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M17 6a3 3 0 0 1 3 3v1h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-1v1a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h12Zm-.002 1.5H5a1.5 1.5 0 0 0-1.494 1.356L3.5 9v6a1.5 1.5 0 0 0 1.355 1.493L5 16.5h11.998a1.5 1.5 0 0 0 1.493-1.355l.007-.145V9a1.5 1.5 0 0 0-1.355-1.493l-.145-.007ZM6 9h10a1 1 0 0 1 .993.883L17 10v4a1 1 0 0 1-.883.993L16 15H6a1 1 0 0 1-.993-.883L5 14v-4a1 1 0 0 1 .883-.993L6 9h10H6Z"/></svg></div> |
| 52 | </span></span> |
| 53 | </div>` : ''} |
| 54 | ${showClock ? `<div class="taskDate m-1 handcr prtclk rounded hvlight"> |
| 55 | <div id="clock-time"></div> |
| 56 | <div id="clock-date"></div> |
| 57 | </div>` : ''} |
| 58 | <div class="graybd my-4"></div> |
| 59 | </div> |
| 60 | </div> |
| 61 | `.trim() |
| 62 | |
| 63 | // Clock update logic |
| 64 | let clockInterval = null |
| 65 | if (showClock) { |
| 66 | const clockTime = document.getElementById('clock-time') |
| 67 | const clockDate = document.getElementById('clock-date') |
| 68 |
no test coverage detected