@rhavenside/baseline-ui 1.0.11 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/baseline.js
CHANGED
|
@@ -48,10 +48,12 @@ function closeModal(modalId) {
|
|
|
48
48
|
if (modal) {
|
|
49
49
|
modal.classList.add("bl-modal-closing");
|
|
50
50
|
modal.classList.remove("bl-modal-open");
|
|
51
|
+
const openModals = document.querySelectorAll(".bl-modal.bl-modal-open");
|
|
52
|
+
if (openModals.length === 0) {
|
|
53
|
+
document.body.style.overflow = "";
|
|
54
|
+
}
|
|
51
55
|
const handleAnimationEnd = () => {
|
|
52
56
|
modal.classList.remove("bl-modal-closing");
|
|
53
|
-
document.body.style.overflow = "";
|
|
54
|
-
modal.removeEventListener("animationend", handleAnimationEnd);
|
|
55
57
|
};
|
|
56
58
|
const dialog = modal.querySelector(".bl-modal-dialog");
|
|
57
59
|
if (dialog) {
|
package/dist/baseline.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/js/components/modal.js", "../src/js/components/dropdown.js", "../src/js/components/tooltip.js", "../src/js/components/tabs.js", "../src/js/components/alert.js", "../src/js/baseline.js"],
|
|
4
|
-
"sourcesContent": ["// ============================================================================\n// Modal Component JavaScript\n// ============================================================================\n\nexport function initModal(modalElement) {\n if (!modalElement) return;\n\n const backdrop = modalElement.querySelector('.bl-modal-backdrop') || document.createElement('div');\n if (!backdrop.classList.contains('bl-modal-backdrop')) {\n backdrop.className = 'bl-modal-backdrop';\n modalElement.insertBefore(backdrop, modalElement.firstChild);\n }\n\n // Open modal buttons\n const modalId = modalElement.id;\n if (modalId) {\n const openButtons = document.querySelectorAll(`[data-modal-open=\"${modalId}\"]`);\n openButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n openModal(modalId);\n });\n });\n }\n\n // Close modal buttons\n const closeButtons = modalElement.querySelectorAll('.bl-modal-close, [data-modal-close]');\n closeButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n closeModal(modalId);\n });\n });\n\n // Close on backdrop click\n backdrop.addEventListener('click', (e) => {\n if (e.target === backdrop) {\n closeModal(modalId);\n }\n });\n\n // Close on ESC key\n const escHandler = (e) => {\n if (e.key === 'Escape' && modalElement.classList.contains('bl-modal-open')) {\n closeModal(modalId);\n }\n };\n document.addEventListener('keydown', escHandler);\n \n // Store handler for cleanup if needed\n modalElement._escHandler = escHandler;\n}\n\nexport function openModal(modalId) {\n const modal = document.getElementById(modalId);\n if (modal) {\n // Remove closing class if present\n modal.classList.remove('bl-modal-closing');\n // Add open class to trigger animation\n modal.classList.add('bl-modal-open');\n document.body.style.overflow = 'hidden';\n }\n}\n\nexport function closeModal(modalId) {\n const modal = document.getElementById(modalId);\n if (modal) {\n // Add closing class to trigger close animation\n modal.classList.add('bl-modal-closing');\n modal.classList.remove('bl-modal-open');\n \n // Wait for animation to complete before hiding\n const handleAnimationEnd = () => {\n modal.classList.remove('bl-modal-closing');\n document.body.style.overflow = '';\n modal.removeEventListener('animationend', handleAnimationEnd);\n };\n \n // Listen for animation end on dialog (which has the slide animation)\n const dialog = modal.querySelector('.bl-modal-dialog');\n if (dialog) {\n dialog.addEventListener('animationend', handleAnimationEnd, { once: true });\n } else {\n // Fallback: use backdrop animation or timeout\n const backdrop = modal.querySelector('.bl-modal-backdrop');\n if (backdrop) {\n backdrop.addEventListener('animationend', handleAnimationEnd, { once: true });\n } else {\n // Fallback timeout if no animation\n setTimeout(handleAnimationEnd, 200);\n }\n }\n }\n}\n\n", "// ============================================================================\n// Dropdown Component JavaScript\n// ============================================================================\n\nexport function initDropdown(dropdownElement) {\n if (!dropdownElement) return;\n\n const toggle = dropdownElement.querySelector('.bl-dropdown-toggle');\n const menu = dropdownElement.querySelector('.bl-dropdown-menu');\n\n if (!toggle || !menu) return;\n\n toggle.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n // Close all other dropdowns\n document.querySelectorAll('.bl-dropdown-menu.bl-show').forEach(otherMenu => {\n if (otherMenu !== menu) {\n otherMenu.classList.remove('bl-show');\n }\n });\n\n // Toggle current dropdown\n menu.classList.toggle('bl-show');\n });\n\n // Close on outside click\n const outsideClickHandler = (e) => {\n if (!dropdownElement.contains(e.target)) {\n menu.classList.remove('bl-show');\n }\n };\n \n document.addEventListener('click', outsideClickHandler);\n \n // Store handler for cleanup if needed\n dropdownElement._outsideClickHandler = outsideClickHandler;\n}\n\n", "// ============================================================================\n// Tooltip Component JavaScript\n// ============================================================================\n\nexport function initTooltip(tooltipElement) {\n if (!tooltipElement) return;\n\n const trigger = tooltipElement.querySelector('.bl-tooltip-trigger');\n const content = tooltipElement.querySelector('.bl-tooltip-content');\n\n if (!trigger || !content) {\n console.warn('Baseline UI: Tooltip missing trigger or content', tooltipElement);\n return;\n }\n\n // Skip if already initialized\n if (tooltipElement._tooltipInitialized) return;\n\n // Create handlers - use tooltipElement to handle hover on entire tooltip\n const enterHandler = (e) => {\n content.classList.add('bl-show');\n };\n\n const leaveHandler = (e) => {\n // Only hide if mouse leaves the tooltip element (not just the trigger)\n if (!tooltipElement.contains(e.relatedTarget)) {\n content.classList.remove('bl-show');\n }\n };\n\n // Add event listeners to trigger\n trigger.addEventListener('mouseenter', enterHandler);\n trigger.addEventListener('mouseleave', leaveHandler);\n \n // Also handle mouseleave on tooltip element to hide when leaving tooltip area\n tooltipElement.addEventListener('mouseleave', leaveHandler);\n\n // Mark as initialized\n tooltipElement._tooltipInitialized = true;\n tooltipElement._tooltipEnterHandler = enterHandler;\n tooltipElement._tooltipLeaveHandler = leaveHandler;\n}\n\n", "// ============================================================================\n// Tabs Component JavaScript\n// ============================================================================\n\nexport function initTabs(tabsContainer) {\n if (!tabsContainer) return;\n\n const tabLinks = tabsContainer.querySelectorAll('.bl-nav-link[data-tab-target]');\n const tabGroup = tabsContainer.getAttribute('data-tab-group');\n\n tabLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n e.preventDefault();\n\n // Remove active from all tabs in group\n if (tabGroup) {\n document.querySelectorAll(`[data-tab-group=\"${tabGroup}\"] .bl-nav-link`).forEach(l => {\n l.classList.remove('bl-active');\n });\n } else {\n tabsContainer.querySelectorAll('.bl-nav-link').forEach(l => {\n l.classList.remove('bl-active');\n });\n }\n\n // Add active to clicked tab\n link.classList.add('bl-active');\n\n // Show/hide tab content\n const targetId = link.getAttribute('data-tab-target');\n if (targetId) {\n // Find all tab contents - search in parent container or document\n const container = tabsContainer.closest('.docs-example-preview') || \n tabsContainer.parentElement || \n document;\n \n container.querySelectorAll('[data-tab-content]').forEach(content => {\n content.style.display = 'none';\n });\n\n const targetContent = document.getElementById(targetId);\n if (targetContent) {\n targetContent.style.display = 'block';\n }\n }\n });\n });\n}\n\n", "// ============================================================================\n// Alert Component JavaScript\n// ============================================================================\n\nexport function initAlert(alertElement) {\n if (!alertElement) return;\n\n const closeBtn = alertElement.querySelector('.bl-alert-close');\n if (!closeBtn) return;\n\n closeBtn.addEventListener('click', () => {\n dismissAlert(alertElement);\n });\n}\n\nexport function dismissAlert(alertElement) {\n if (!alertElement) return;\n \n alertElement.style.transition = 'opacity 0.3s ease-out';\n alertElement.style.opacity = '0';\n setTimeout(() => {\n alertElement.remove();\n }, 300);\n}\n\n", "// ============================================================================\n// Baseline UI JavaScript\n// Main Entry Point\n// ============================================================================\n\nimport { initModal, openModal, closeModal } from './components/modal.js';\nimport { initDropdown } from './components/dropdown.js';\nimport { initTooltip } from './components/tooltip.js';\nimport { initTabs } from './components/tabs.js';\nimport { initAlert, dismissAlert } from './components/alert.js';\n\n// Export all functions for manual use\nexport {\n initModal,\n openModal,\n closeModal,\n initDropdown,\n initTooltip,\n initTabs,\n initAlert,\n dismissAlert\n};\n\n// Auto-initialize on DOM ready\nfunction autoInit() {\n // Initialize all modals\n document.querySelectorAll('.bl-modal').forEach(modal => {\n initModal(modal);\n });\n\n // Initialize all dropdowns\n document.querySelectorAll('.bl-dropdown').forEach(dropdown => {\n initDropdown(dropdown);\n });\n\n // Initialize all tooltips\n document.querySelectorAll('.bl-tooltip').forEach(tooltip => {\n initTooltip(tooltip);\n });\n\n // Initialize all tabs\n document.querySelectorAll('.bl-nav-tabs').forEach(tabs => {\n initTabs(tabs);\n });\n\n // Initialize all dismissible alerts\n document.querySelectorAll('.bl-alert-dismissible').forEach(alert => {\n initAlert(alert);\n });\n}\n\n// Initialize when DOM is ready\n// Use requestAnimationFrame for better timing with ES modules\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n // Wait for next frame to ensure all elements are rendered\n requestAnimationFrame(() => {\n requestAnimationFrame(autoInit);\n });\n });\n} else {\n // DOM already loaded, but wait for next frame to ensure everything is ready\n requestAnimationFrame(() => {\n requestAnimationFrame(autoInit);\n });\n}\n\n"],
|
|
5
|
-
"mappings": ";AAIO,SAAS,UAAU,cAAc;AACtC,MAAI,CAAC;AAAc;AAEnB,QAAM,WAAW,aAAa,cAAc,oBAAoB,KAAK,SAAS,cAAc,KAAK;AACjG,MAAI,CAAC,SAAS,UAAU,SAAS,mBAAmB,GAAG;AACrD,aAAS,YAAY;AACrB,iBAAa,aAAa,UAAU,aAAa,UAAU;AAAA,EAC7D;AAGA,QAAM,UAAU,aAAa;AAC7B,MAAI,SAAS;AACX,UAAM,cAAc,SAAS,iBAAiB,qBAAqB,OAAO,IAAI;AAC9E,gBAAY,QAAQ,SAAO;AACzB,UAAI,iBAAiB,SAAS,MAAM;AAClC,kBAAU,OAAO;AAAA,MACnB,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAGA,QAAM,eAAe,aAAa,iBAAiB,qCAAqC;AACxF,eAAa,QAAQ,SAAO;AAC1B,QAAI,iBAAiB,SAAS,MAAM;AAClC,iBAAW,OAAO;AAAA,IACpB,CAAC;AAAA,EACH,CAAC;AAGD,WAAS,iBAAiB,SAAS,CAAC,MAAM;AACxC,QAAI,EAAE,WAAW,UAAU;AACzB,iBAAW,OAAO;AAAA,IACpB;AAAA,EACF,CAAC;AAGD,QAAM,aAAa,CAAC,MAAM;AACxB,QAAI,EAAE,QAAQ,YAAY,aAAa,UAAU,SAAS,eAAe,GAAG;AAC1E,iBAAW,OAAO;AAAA,IACpB;AAAA,EACF;AACA,WAAS,iBAAiB,WAAW,UAAU;AAG/C,eAAa,cAAc;AAC7B;AAEO,SAAS,UAAU,SAAS;AACjC,QAAM,QAAQ,SAAS,eAAe,OAAO;AAC7C,MAAI,OAAO;AAET,UAAM,UAAU,OAAO,kBAAkB;AAEzC,UAAM,UAAU,IAAI,eAAe;AACnC,aAAS,KAAK,MAAM,WAAW;AAAA,EACjC;AACF;AAEO,SAAS,WAAW,SAAS;AAClC,QAAM,QAAQ,SAAS,eAAe,OAAO;AAC7C,MAAI,OAAO;AAET,UAAM,UAAU,IAAI,kBAAkB;AACtC,UAAM,UAAU,OAAO,eAAe;
|
|
4
|
+
"sourcesContent": ["// ============================================================================\n// Modal Component JavaScript\n// ============================================================================\n\nexport function initModal(modalElement) {\n if (!modalElement) return;\n\n const backdrop = modalElement.querySelector('.bl-modal-backdrop') || document.createElement('div');\n if (!backdrop.classList.contains('bl-modal-backdrop')) {\n backdrop.className = 'bl-modal-backdrop';\n modalElement.insertBefore(backdrop, modalElement.firstChild);\n }\n\n // Open modal buttons\n const modalId = modalElement.id;\n if (modalId) {\n const openButtons = document.querySelectorAll(`[data-modal-open=\"${modalId}\"]`);\n openButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n openModal(modalId);\n });\n });\n }\n\n // Close modal buttons\n const closeButtons = modalElement.querySelectorAll('.bl-modal-close, [data-modal-close]');\n closeButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n closeModal(modalId);\n });\n });\n\n // Close on backdrop click\n backdrop.addEventListener('click', (e) => {\n if (e.target === backdrop) {\n closeModal(modalId);\n }\n });\n\n // Close on ESC key\n const escHandler = (e) => {\n if (e.key === 'Escape' && modalElement.classList.contains('bl-modal-open')) {\n closeModal(modalId);\n }\n };\n document.addEventListener('keydown', escHandler);\n \n // Store handler for cleanup if needed\n modalElement._escHandler = escHandler;\n}\n\nexport function openModal(modalId) {\n const modal = document.getElementById(modalId);\n if (modal) {\n // Remove closing class if present\n modal.classList.remove('bl-modal-closing');\n // Add open class to trigger animation\n modal.classList.add('bl-modal-open');\n document.body.style.overflow = 'hidden';\n }\n}\n\nexport function closeModal(modalId) {\n const modal = document.getElementById(modalId);\n if (modal) {\n // Add closing class to trigger close animation\n modal.classList.add('bl-modal-closing');\n modal.classList.remove('bl-modal-open');\n \n // WICHTIG: Overflow sofort zur\u00FCcksetzen, wenn keine anderen Modals offen sind\n // (Animation l\u00E4uft weiter, aber Scrollen ist wieder m\u00F6glich)\n const openModals = document.querySelectorAll('.bl-modal.bl-modal-open');\n if (openModals.length === 0) {\n document.body.style.overflow = '';\n }\n \n // Wait for animation to complete before cleaning up\n const handleAnimationEnd = () => {\n modal.classList.remove('bl-modal-closing');\n };\n \n // Listen for animation end on dialog (which has the slide animation)\n const dialog = modal.querySelector('.bl-modal-dialog');\n if (dialog) {\n dialog.addEventListener('animationend', handleAnimationEnd, { once: true });\n } else {\n // Fallback: use backdrop animation or timeout\n const backdrop = modal.querySelector('.bl-modal-backdrop');\n if (backdrop) {\n backdrop.addEventListener('animationend', handleAnimationEnd, { once: true });\n } else {\n // Fallback timeout if no animation\n setTimeout(handleAnimationEnd, 200);\n }\n }\n }\n}\n\n", "// ============================================================================\n// Dropdown Component JavaScript\n// ============================================================================\n\nexport function initDropdown(dropdownElement) {\n if (!dropdownElement) return;\n\n const toggle = dropdownElement.querySelector('.bl-dropdown-toggle');\n const menu = dropdownElement.querySelector('.bl-dropdown-menu');\n\n if (!toggle || !menu) return;\n\n toggle.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n // Close all other dropdowns\n document.querySelectorAll('.bl-dropdown-menu.bl-show').forEach(otherMenu => {\n if (otherMenu !== menu) {\n otherMenu.classList.remove('bl-show');\n }\n });\n\n // Toggle current dropdown\n menu.classList.toggle('bl-show');\n });\n\n // Close on outside click\n const outsideClickHandler = (e) => {\n if (!dropdownElement.contains(e.target)) {\n menu.classList.remove('bl-show');\n }\n };\n \n document.addEventListener('click', outsideClickHandler);\n \n // Store handler for cleanup if needed\n dropdownElement._outsideClickHandler = outsideClickHandler;\n}\n\n", "// ============================================================================\n// Tooltip Component JavaScript\n// ============================================================================\n\nexport function initTooltip(tooltipElement) {\n if (!tooltipElement) return;\n\n const trigger = tooltipElement.querySelector('.bl-tooltip-trigger');\n const content = tooltipElement.querySelector('.bl-tooltip-content');\n\n if (!trigger || !content) {\n console.warn('Baseline UI: Tooltip missing trigger or content', tooltipElement);\n return;\n }\n\n // Skip if already initialized\n if (tooltipElement._tooltipInitialized) return;\n\n // Create handlers - use tooltipElement to handle hover on entire tooltip\n const enterHandler = (e) => {\n content.classList.add('bl-show');\n };\n\n const leaveHandler = (e) => {\n // Only hide if mouse leaves the tooltip element (not just the trigger)\n if (!tooltipElement.contains(e.relatedTarget)) {\n content.classList.remove('bl-show');\n }\n };\n\n // Add event listeners to trigger\n trigger.addEventListener('mouseenter', enterHandler);\n trigger.addEventListener('mouseleave', leaveHandler);\n \n // Also handle mouseleave on tooltip element to hide when leaving tooltip area\n tooltipElement.addEventListener('mouseleave', leaveHandler);\n\n // Mark as initialized\n tooltipElement._tooltipInitialized = true;\n tooltipElement._tooltipEnterHandler = enterHandler;\n tooltipElement._tooltipLeaveHandler = leaveHandler;\n}\n\n", "// ============================================================================\n// Tabs Component JavaScript\n// ============================================================================\n\nexport function initTabs(tabsContainer) {\n if (!tabsContainer) return;\n\n const tabLinks = tabsContainer.querySelectorAll('.bl-nav-link[data-tab-target]');\n const tabGroup = tabsContainer.getAttribute('data-tab-group');\n\n tabLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n e.preventDefault();\n\n // Remove active from all tabs in group\n if (tabGroup) {\n document.querySelectorAll(`[data-tab-group=\"${tabGroup}\"] .bl-nav-link`).forEach(l => {\n l.classList.remove('bl-active');\n });\n } else {\n tabsContainer.querySelectorAll('.bl-nav-link').forEach(l => {\n l.classList.remove('bl-active');\n });\n }\n\n // Add active to clicked tab\n link.classList.add('bl-active');\n\n // Show/hide tab content\n const targetId = link.getAttribute('data-tab-target');\n if (targetId) {\n // Find all tab contents - search in parent container or document\n const container = tabsContainer.closest('.docs-example-preview') || \n tabsContainer.parentElement || \n document;\n \n container.querySelectorAll('[data-tab-content]').forEach(content => {\n content.style.display = 'none';\n });\n\n const targetContent = document.getElementById(targetId);\n if (targetContent) {\n targetContent.style.display = 'block';\n }\n }\n });\n });\n}\n\n", "// ============================================================================\n// Alert Component JavaScript\n// ============================================================================\n\nexport function initAlert(alertElement) {\n if (!alertElement) return;\n\n const closeBtn = alertElement.querySelector('.bl-alert-close');\n if (!closeBtn) return;\n\n closeBtn.addEventListener('click', () => {\n dismissAlert(alertElement);\n });\n}\n\nexport function dismissAlert(alertElement) {\n if (!alertElement) return;\n \n alertElement.style.transition = 'opacity 0.3s ease-out';\n alertElement.style.opacity = '0';\n setTimeout(() => {\n alertElement.remove();\n }, 300);\n}\n\n", "// ============================================================================\n// Baseline UI JavaScript\n// Main Entry Point\n// ============================================================================\n\nimport { initModal, openModal, closeModal } from './components/modal.js';\nimport { initDropdown } from './components/dropdown.js';\nimport { initTooltip } from './components/tooltip.js';\nimport { initTabs } from './components/tabs.js';\nimport { initAlert, dismissAlert } from './components/alert.js';\n\n// Export all functions for manual use\nexport {\n initModal,\n openModal,\n closeModal,\n initDropdown,\n initTooltip,\n initTabs,\n initAlert,\n dismissAlert\n};\n\n// Auto-initialize on DOM ready\nfunction autoInit() {\n // Initialize all modals\n document.querySelectorAll('.bl-modal').forEach(modal => {\n initModal(modal);\n });\n\n // Initialize all dropdowns\n document.querySelectorAll('.bl-dropdown').forEach(dropdown => {\n initDropdown(dropdown);\n });\n\n // Initialize all tooltips\n document.querySelectorAll('.bl-tooltip').forEach(tooltip => {\n initTooltip(tooltip);\n });\n\n // Initialize all tabs\n document.querySelectorAll('.bl-nav-tabs').forEach(tabs => {\n initTabs(tabs);\n });\n\n // Initialize all dismissible alerts\n document.querySelectorAll('.bl-alert-dismissible').forEach(alert => {\n initAlert(alert);\n });\n}\n\n// Initialize when DOM is ready\n// Use requestAnimationFrame for better timing with ES modules\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n // Wait for next frame to ensure all elements are rendered\n requestAnimationFrame(() => {\n requestAnimationFrame(autoInit);\n });\n });\n} else {\n // DOM already loaded, but wait for next frame to ensure everything is ready\n requestAnimationFrame(() => {\n requestAnimationFrame(autoInit);\n });\n}\n\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/baseline.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function a(e){if(!e)return;let t=e.querySelector(".bl-modal-backdrop")||document.createElement("div");t.classList.contains("bl-modal-backdrop")||(t.className="bl-modal-backdrop",e.insertBefore(t,e.firstChild));let o=e.id;o&&document.querySelectorAll(`[data-modal-open="${o}"]`).forEach(
|
|
1
|
+
function a(e){if(!e)return;let t=e.querySelector(".bl-modal-backdrop")||document.createElement("div");t.classList.contains("bl-modal-backdrop")||(t.className="bl-modal-backdrop",e.insertBefore(t,e.firstChild));let o=e.id;o&&document.querySelectorAll(`[data-modal-open="${o}"]`).forEach(i=>{i.addEventListener("click",()=>{d(o)})}),e.querySelectorAll(".bl-modal-close, [data-modal-close]").forEach(n=>{n.addEventListener("click",()=>{c(o)})}),t.addEventListener("click",n=>{n.target===t&&c(o)});let r=n=>{n.key==="Escape"&&e.classList.contains("bl-modal-open")&&c(o)};document.addEventListener("keydown",r),e._escHandler=r}function d(e){let t=document.getElementById(e);t&&(t.classList.remove("bl-modal-closing"),t.classList.add("bl-modal-open"),document.body.style.overflow="hidden")}function c(e){let t=document.getElementById(e);if(t){t.classList.add("bl-modal-closing"),t.classList.remove("bl-modal-open"),document.querySelectorAll(".bl-modal.bl-modal-open").length===0&&(document.body.style.overflow="");let l=()=>{t.classList.remove("bl-modal-closing")},r=t.querySelector(".bl-modal-dialog");if(r)r.addEventListener("animationend",l,{once:!0});else{let n=t.querySelector(".bl-modal-backdrop");n?n.addEventListener("animationend",l,{once:!0}):setTimeout(l,200)}}}function u(e){if(!e)return;let t=e.querySelector(".bl-dropdown-toggle"),o=e.querySelector(".bl-dropdown-menu");if(!t||!o)return;t.addEventListener("click",r=>{r.preventDefault(),r.stopPropagation(),document.querySelectorAll(".bl-dropdown-menu.bl-show").forEach(n=>{n!==o&&n.classList.remove("bl-show")}),o.classList.toggle("bl-show")});let l=r=>{e.contains(r.target)||o.classList.remove("bl-show")};document.addEventListener("click",l),e._outsideClickHandler=l}function f(e){if(!e)return;let t=e.querySelector(".bl-tooltip-trigger"),o=e.querySelector(".bl-tooltip-content");if(!t||!o){console.warn("Baseline UI: Tooltip missing trigger or content",e);return}if(e._tooltipInitialized)return;let l=n=>{o.classList.add("bl-show")},r=n=>{e.contains(n.relatedTarget)||o.classList.remove("bl-show")};t.addEventListener("mouseenter",l),t.addEventListener("mouseleave",r),e.addEventListener("mouseleave",r),e._tooltipInitialized=!0,e._tooltipEnterHandler=l,e._tooltipLeaveHandler=r}function m(e){if(!e)return;let t=e.querySelectorAll(".bl-nav-link[data-tab-target]"),o=e.getAttribute("data-tab-group");t.forEach(l=>{l.addEventListener("click",r=>{r.preventDefault(),o?document.querySelectorAll(`[data-tab-group="${o}"] .bl-nav-link`).forEach(i=>{i.classList.remove("bl-active")}):e.querySelectorAll(".bl-nav-link").forEach(i=>{i.classList.remove("bl-active")}),l.classList.add("bl-active");let n=l.getAttribute("data-tab-target");if(n){(e.closest(".docs-example-preview")||e.parentElement||document).querySelectorAll("[data-tab-content]").forEach(y=>{y.style.display="none"});let s=document.getElementById(n);s&&(s.style.display="block")}})})}function b(e){if(!e)return;let t=e.querySelector(".bl-alert-close");t&&t.addEventListener("click",()=>{p(e)})}function p(e){e&&(e.style.transition="opacity 0.3s ease-out",e.style.opacity="0",setTimeout(()=>{e.remove()},300))}function v(){document.querySelectorAll(".bl-modal").forEach(e=>{a(e)}),document.querySelectorAll(".bl-dropdown").forEach(e=>{u(e)}),document.querySelectorAll(".bl-tooltip").forEach(e=>{f(e)}),document.querySelectorAll(".bl-nav-tabs").forEach(e=>{m(e)}),document.querySelectorAll(".bl-alert-dismissible").forEach(e=>{b(e)})}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{requestAnimationFrame(()=>{requestAnimationFrame(v)})}):requestAnimationFrame(()=>{requestAnimationFrame(v)});export{c as closeModal,p as dismissAlert,b as initAlert,u as initDropdown,a as initModal,m as initTabs,f as initTooltip,d as openModal};
|
|
2
2
|
//# sourceMappingURL=baseline.min.js.map
|
package/dist/baseline.min.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/js/components/modal.js", "../src/js/components/dropdown.js", "../src/js/components/tooltip.js", "../src/js/components/tabs.js", "../src/js/components/alert.js", "../src/js/baseline.js"],
|
|
4
|
-
"sourcesContent": ["// ============================================================================\n// Modal Component JavaScript\n// ============================================================================\n\nexport function initModal(modalElement) {\n if (!modalElement) return;\n\n const backdrop = modalElement.querySelector('.bl-modal-backdrop') || document.createElement('div');\n if (!backdrop.classList.contains('bl-modal-backdrop')) {\n backdrop.className = 'bl-modal-backdrop';\n modalElement.insertBefore(backdrop, modalElement.firstChild);\n }\n\n // Open modal buttons\n const modalId = modalElement.id;\n if (modalId) {\n const openButtons = document.querySelectorAll(`[data-modal-open=\"${modalId}\"]`);\n openButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n openModal(modalId);\n });\n });\n }\n\n // Close modal buttons\n const closeButtons = modalElement.querySelectorAll('.bl-modal-close, [data-modal-close]');\n closeButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n closeModal(modalId);\n });\n });\n\n // Close on backdrop click\n backdrop.addEventListener('click', (e) => {\n if (e.target === backdrop) {\n closeModal(modalId);\n }\n });\n\n // Close on ESC key\n const escHandler = (e) => {\n if (e.key === 'Escape' && modalElement.classList.contains('bl-modal-open')) {\n closeModal(modalId);\n }\n };\n document.addEventListener('keydown', escHandler);\n \n // Store handler for cleanup if needed\n modalElement._escHandler = escHandler;\n}\n\nexport function openModal(modalId) {\n const modal = document.getElementById(modalId);\n if (modal) {\n // Remove closing class if present\n modal.classList.remove('bl-modal-closing');\n // Add open class to trigger animation\n modal.classList.add('bl-modal-open');\n document.body.style.overflow = 'hidden';\n }\n}\n\nexport function closeModal(modalId) {\n const modal = document.getElementById(modalId);\n if (modal) {\n // Add closing class to trigger close animation\n modal.classList.add('bl-modal-closing');\n modal.classList.remove('bl-modal-open');\n \n // Wait for animation to complete before hiding\n const handleAnimationEnd = () => {\n modal.classList.remove('bl-modal-closing');\n document.body.style.overflow = '';\n modal.removeEventListener('animationend', handleAnimationEnd);\n };\n \n // Listen for animation end on dialog (which has the slide animation)\n const dialog = modal.querySelector('.bl-modal-dialog');\n if (dialog) {\n dialog.addEventListener('animationend', handleAnimationEnd, { once: true });\n } else {\n // Fallback: use backdrop animation or timeout\n const backdrop = modal.querySelector('.bl-modal-backdrop');\n if (backdrop) {\n backdrop.addEventListener('animationend', handleAnimationEnd, { once: true });\n } else {\n // Fallback timeout if no animation\n setTimeout(handleAnimationEnd, 200);\n }\n }\n }\n}\n\n", "// ============================================================================\n// Dropdown Component JavaScript\n// ============================================================================\n\nexport function initDropdown(dropdownElement) {\n if (!dropdownElement) return;\n\n const toggle = dropdownElement.querySelector('.bl-dropdown-toggle');\n const menu = dropdownElement.querySelector('.bl-dropdown-menu');\n\n if (!toggle || !menu) return;\n\n toggle.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n // Close all other dropdowns\n document.querySelectorAll('.bl-dropdown-menu.bl-show').forEach(otherMenu => {\n if (otherMenu !== menu) {\n otherMenu.classList.remove('bl-show');\n }\n });\n\n // Toggle current dropdown\n menu.classList.toggle('bl-show');\n });\n\n // Close on outside click\n const outsideClickHandler = (e) => {\n if (!dropdownElement.contains(e.target)) {\n menu.classList.remove('bl-show');\n }\n };\n \n document.addEventListener('click', outsideClickHandler);\n \n // Store handler for cleanup if needed\n dropdownElement._outsideClickHandler = outsideClickHandler;\n}\n\n", "// ============================================================================\n// Tooltip Component JavaScript\n// ============================================================================\n\nexport function initTooltip(tooltipElement) {\n if (!tooltipElement) return;\n\n const trigger = tooltipElement.querySelector('.bl-tooltip-trigger');\n const content = tooltipElement.querySelector('.bl-tooltip-content');\n\n if (!trigger || !content) {\n console.warn('Baseline UI: Tooltip missing trigger or content', tooltipElement);\n return;\n }\n\n // Skip if already initialized\n if (tooltipElement._tooltipInitialized) return;\n\n // Create handlers - use tooltipElement to handle hover on entire tooltip\n const enterHandler = (e) => {\n content.classList.add('bl-show');\n };\n\n const leaveHandler = (e) => {\n // Only hide if mouse leaves the tooltip element (not just the trigger)\n if (!tooltipElement.contains(e.relatedTarget)) {\n content.classList.remove('bl-show');\n }\n };\n\n // Add event listeners to trigger\n trigger.addEventListener('mouseenter', enterHandler);\n trigger.addEventListener('mouseleave', leaveHandler);\n \n // Also handle mouseleave on tooltip element to hide when leaving tooltip area\n tooltipElement.addEventListener('mouseleave', leaveHandler);\n\n // Mark as initialized\n tooltipElement._tooltipInitialized = true;\n tooltipElement._tooltipEnterHandler = enterHandler;\n tooltipElement._tooltipLeaveHandler = leaveHandler;\n}\n\n", "// ============================================================================\n// Tabs Component JavaScript\n// ============================================================================\n\nexport function initTabs(tabsContainer) {\n if (!tabsContainer) return;\n\n const tabLinks = tabsContainer.querySelectorAll('.bl-nav-link[data-tab-target]');\n const tabGroup = tabsContainer.getAttribute('data-tab-group');\n\n tabLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n e.preventDefault();\n\n // Remove active from all tabs in group\n if (tabGroup) {\n document.querySelectorAll(`[data-tab-group=\"${tabGroup}\"] .bl-nav-link`).forEach(l => {\n l.classList.remove('bl-active');\n });\n } else {\n tabsContainer.querySelectorAll('.bl-nav-link').forEach(l => {\n l.classList.remove('bl-active');\n });\n }\n\n // Add active to clicked tab\n link.classList.add('bl-active');\n\n // Show/hide tab content\n const targetId = link.getAttribute('data-tab-target');\n if (targetId) {\n // Find all tab contents - search in parent container or document\n const container = tabsContainer.closest('.docs-example-preview') || \n tabsContainer.parentElement || \n document;\n \n container.querySelectorAll('[data-tab-content]').forEach(content => {\n content.style.display = 'none';\n });\n\n const targetContent = document.getElementById(targetId);\n if (targetContent) {\n targetContent.style.display = 'block';\n }\n }\n });\n });\n}\n\n", "// ============================================================================\n// Alert Component JavaScript\n// ============================================================================\n\nexport function initAlert(alertElement) {\n if (!alertElement) return;\n\n const closeBtn = alertElement.querySelector('.bl-alert-close');\n if (!closeBtn) return;\n\n closeBtn.addEventListener('click', () => {\n dismissAlert(alertElement);\n });\n}\n\nexport function dismissAlert(alertElement) {\n if (!alertElement) return;\n \n alertElement.style.transition = 'opacity 0.3s ease-out';\n alertElement.style.opacity = '0';\n setTimeout(() => {\n alertElement.remove();\n }, 300);\n}\n\n", "// ============================================================================\n// Baseline UI JavaScript\n// Main Entry Point\n// ============================================================================\n\nimport { initModal, openModal, closeModal } from './components/modal.js';\nimport { initDropdown } from './components/dropdown.js';\nimport { initTooltip } from './components/tooltip.js';\nimport { initTabs } from './components/tabs.js';\nimport { initAlert, dismissAlert } from './components/alert.js';\n\n// Export all functions for manual use\nexport {\n initModal,\n openModal,\n closeModal,\n initDropdown,\n initTooltip,\n initTabs,\n initAlert,\n dismissAlert\n};\n\n// Auto-initialize on DOM ready\nfunction autoInit() {\n // Initialize all modals\n document.querySelectorAll('.bl-modal').forEach(modal => {\n initModal(modal);\n });\n\n // Initialize all dropdowns\n document.querySelectorAll('.bl-dropdown').forEach(dropdown => {\n initDropdown(dropdown);\n });\n\n // Initialize all tooltips\n document.querySelectorAll('.bl-tooltip').forEach(tooltip => {\n initTooltip(tooltip);\n });\n\n // Initialize all tabs\n document.querySelectorAll('.bl-nav-tabs').forEach(tabs => {\n initTabs(tabs);\n });\n\n // Initialize all dismissible alerts\n document.querySelectorAll('.bl-alert-dismissible').forEach(alert => {\n initAlert(alert);\n });\n}\n\n// Initialize when DOM is ready\n// Use requestAnimationFrame for better timing with ES modules\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n // Wait for next frame to ensure all elements are rendered\n requestAnimationFrame(() => {\n requestAnimationFrame(autoInit);\n });\n });\n} else {\n // DOM already loaded, but wait for next frame to ensure everything is ready\n requestAnimationFrame(() => {\n requestAnimationFrame(autoInit);\n });\n}\n\n"],
|
|
5
|
-
"mappings": "AAIO,SAASA,EAAUC,EAAc,CACtC,GAAI,CAACA,EAAc,OAEnB,IAAMC,EAAWD,EAAa,cAAc,oBAAoB,GAAK,SAAS,cAAc,KAAK,EAC5FC,EAAS,UAAU,SAAS,mBAAmB,IAClDA,EAAS,UAAY,oBACrBD,EAAa,aAAaC,EAAUD,EAAa,UAAU,GAI7D,IAAME,EAAUF,EAAa,GACzBE,GACkB,SAAS,iBAAiB,qBAAqBA,CAAO,IAAI,EAClE,QAAQC,GAAO,CACzBA,EAAI,iBAAiB,QAAS,IAAM,CAClCC,EAAUF,CAAO,CACnB,CAAC,CACH,CAAC,EAIkBF,EAAa,iBAAiB,qCAAqC,EAC3E,QAAQG,GAAO,CAC1BA,EAAI,iBAAiB,QAAS,IAAM,CAClCE,EAAWH,CAAO,CACpB,CAAC,CACH,CAAC,EAGDD,EAAS,iBAAiB,QAAUK,GAAM,CACpCA,EAAE,SAAWL,GACfI,EAAWH,CAAO,CAEtB,CAAC,EAGD,IAAMK,EAAcD,GAAM,CACpBA,EAAE,MAAQ,UAAYN,EAAa,UAAU,SAAS,eAAe,GACvEK,EAAWH,CAAO,CAEtB,EACA,SAAS,iBAAiB,UAAWK,CAAU,EAG/CP,EAAa,YAAcO,CAC7B,CAEO,SAASH,EAAUF,EAAS,CACjC,IAAMM,EAAQ,SAAS,eAAeN,CAAO,EACzCM,IAEFA,EAAM,UAAU,OAAO,kBAAkB,EAEzCA,EAAM,UAAU,IAAI,eAAe,EACnC,SAAS,KAAK,MAAM,SAAW,SAEnC,CAEO,SAASH,EAAWH,EAAS,CAClC,IAAMM,EAAQ,SAAS,eAAeN,CAAO,EAC7C,GAAIM,EAAO,CAETA,EAAM,UAAU,IAAI,kBAAkB,EACtCA,EAAM,UAAU,OAAO,eAAe,
|
|
6
|
-
"names": ["initModal", "modalElement", "backdrop", "modalId", "btn", "openModal", "closeModal", "e", "escHandler", "modal", "handleAnimationEnd", "dialog", "initDropdown", "dropdownElement", "toggle", "menu", "e", "otherMenu", "outsideClickHandler", "initTooltip", "tooltipElement", "trigger", "content", "enterHandler", "e", "leaveHandler", "initTabs", "tabsContainer", "tabLinks", "tabGroup", "link", "e", "targetId", "content", "targetContent", "initAlert", "alertElement", "closeBtn", "dismissAlert", "autoInit", "modal", "initModal", "dropdown", "initDropdown", "tooltip", "initTooltip", "tabs", "initTabs", "alert", "initAlert"]
|
|
4
|
+
"sourcesContent": ["// ============================================================================\n// Modal Component JavaScript\n// ============================================================================\n\nexport function initModal(modalElement) {\n if (!modalElement) return;\n\n const backdrop = modalElement.querySelector('.bl-modal-backdrop') || document.createElement('div');\n if (!backdrop.classList.contains('bl-modal-backdrop')) {\n backdrop.className = 'bl-modal-backdrop';\n modalElement.insertBefore(backdrop, modalElement.firstChild);\n }\n\n // Open modal buttons\n const modalId = modalElement.id;\n if (modalId) {\n const openButtons = document.querySelectorAll(`[data-modal-open=\"${modalId}\"]`);\n openButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n openModal(modalId);\n });\n });\n }\n\n // Close modal buttons\n const closeButtons = modalElement.querySelectorAll('.bl-modal-close, [data-modal-close]');\n closeButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n closeModal(modalId);\n });\n });\n\n // Close on backdrop click\n backdrop.addEventListener('click', (e) => {\n if (e.target === backdrop) {\n closeModal(modalId);\n }\n });\n\n // Close on ESC key\n const escHandler = (e) => {\n if (e.key === 'Escape' && modalElement.classList.contains('bl-modal-open')) {\n closeModal(modalId);\n }\n };\n document.addEventListener('keydown', escHandler);\n \n // Store handler for cleanup if needed\n modalElement._escHandler = escHandler;\n}\n\nexport function openModal(modalId) {\n const modal = document.getElementById(modalId);\n if (modal) {\n // Remove closing class if present\n modal.classList.remove('bl-modal-closing');\n // Add open class to trigger animation\n modal.classList.add('bl-modal-open');\n document.body.style.overflow = 'hidden';\n }\n}\n\nexport function closeModal(modalId) {\n const modal = document.getElementById(modalId);\n if (modal) {\n // Add closing class to trigger close animation\n modal.classList.add('bl-modal-closing');\n modal.classList.remove('bl-modal-open');\n \n // WICHTIG: Overflow sofort zur\u00FCcksetzen, wenn keine anderen Modals offen sind\n // (Animation l\u00E4uft weiter, aber Scrollen ist wieder m\u00F6glich)\n const openModals = document.querySelectorAll('.bl-modal.bl-modal-open');\n if (openModals.length === 0) {\n document.body.style.overflow = '';\n }\n \n // Wait for animation to complete before cleaning up\n const handleAnimationEnd = () => {\n modal.classList.remove('bl-modal-closing');\n };\n \n // Listen for animation end on dialog (which has the slide animation)\n const dialog = modal.querySelector('.bl-modal-dialog');\n if (dialog) {\n dialog.addEventListener('animationend', handleAnimationEnd, { once: true });\n } else {\n // Fallback: use backdrop animation or timeout\n const backdrop = modal.querySelector('.bl-modal-backdrop');\n if (backdrop) {\n backdrop.addEventListener('animationend', handleAnimationEnd, { once: true });\n } else {\n // Fallback timeout if no animation\n setTimeout(handleAnimationEnd, 200);\n }\n }\n }\n}\n\n", "// ============================================================================\n// Dropdown Component JavaScript\n// ============================================================================\n\nexport function initDropdown(dropdownElement) {\n if (!dropdownElement) return;\n\n const toggle = dropdownElement.querySelector('.bl-dropdown-toggle');\n const menu = dropdownElement.querySelector('.bl-dropdown-menu');\n\n if (!toggle || !menu) return;\n\n toggle.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n // Close all other dropdowns\n document.querySelectorAll('.bl-dropdown-menu.bl-show').forEach(otherMenu => {\n if (otherMenu !== menu) {\n otherMenu.classList.remove('bl-show');\n }\n });\n\n // Toggle current dropdown\n menu.classList.toggle('bl-show');\n });\n\n // Close on outside click\n const outsideClickHandler = (e) => {\n if (!dropdownElement.contains(e.target)) {\n menu.classList.remove('bl-show');\n }\n };\n \n document.addEventListener('click', outsideClickHandler);\n \n // Store handler for cleanup if needed\n dropdownElement._outsideClickHandler = outsideClickHandler;\n}\n\n", "// ============================================================================\n// Tooltip Component JavaScript\n// ============================================================================\n\nexport function initTooltip(tooltipElement) {\n if (!tooltipElement) return;\n\n const trigger = tooltipElement.querySelector('.bl-tooltip-trigger');\n const content = tooltipElement.querySelector('.bl-tooltip-content');\n\n if (!trigger || !content) {\n console.warn('Baseline UI: Tooltip missing trigger or content', tooltipElement);\n return;\n }\n\n // Skip if already initialized\n if (tooltipElement._tooltipInitialized) return;\n\n // Create handlers - use tooltipElement to handle hover on entire tooltip\n const enterHandler = (e) => {\n content.classList.add('bl-show');\n };\n\n const leaveHandler = (e) => {\n // Only hide if mouse leaves the tooltip element (not just the trigger)\n if (!tooltipElement.contains(e.relatedTarget)) {\n content.classList.remove('bl-show');\n }\n };\n\n // Add event listeners to trigger\n trigger.addEventListener('mouseenter', enterHandler);\n trigger.addEventListener('mouseleave', leaveHandler);\n \n // Also handle mouseleave on tooltip element to hide when leaving tooltip area\n tooltipElement.addEventListener('mouseleave', leaveHandler);\n\n // Mark as initialized\n tooltipElement._tooltipInitialized = true;\n tooltipElement._tooltipEnterHandler = enterHandler;\n tooltipElement._tooltipLeaveHandler = leaveHandler;\n}\n\n", "// ============================================================================\n// Tabs Component JavaScript\n// ============================================================================\n\nexport function initTabs(tabsContainer) {\n if (!tabsContainer) return;\n\n const tabLinks = tabsContainer.querySelectorAll('.bl-nav-link[data-tab-target]');\n const tabGroup = tabsContainer.getAttribute('data-tab-group');\n\n tabLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n e.preventDefault();\n\n // Remove active from all tabs in group\n if (tabGroup) {\n document.querySelectorAll(`[data-tab-group=\"${tabGroup}\"] .bl-nav-link`).forEach(l => {\n l.classList.remove('bl-active');\n });\n } else {\n tabsContainer.querySelectorAll('.bl-nav-link').forEach(l => {\n l.classList.remove('bl-active');\n });\n }\n\n // Add active to clicked tab\n link.classList.add('bl-active');\n\n // Show/hide tab content\n const targetId = link.getAttribute('data-tab-target');\n if (targetId) {\n // Find all tab contents - search in parent container or document\n const container = tabsContainer.closest('.docs-example-preview') || \n tabsContainer.parentElement || \n document;\n \n container.querySelectorAll('[data-tab-content]').forEach(content => {\n content.style.display = 'none';\n });\n\n const targetContent = document.getElementById(targetId);\n if (targetContent) {\n targetContent.style.display = 'block';\n }\n }\n });\n });\n}\n\n", "// ============================================================================\n// Alert Component JavaScript\n// ============================================================================\n\nexport function initAlert(alertElement) {\n if (!alertElement) return;\n\n const closeBtn = alertElement.querySelector('.bl-alert-close');\n if (!closeBtn) return;\n\n closeBtn.addEventListener('click', () => {\n dismissAlert(alertElement);\n });\n}\n\nexport function dismissAlert(alertElement) {\n if (!alertElement) return;\n \n alertElement.style.transition = 'opacity 0.3s ease-out';\n alertElement.style.opacity = '0';\n setTimeout(() => {\n alertElement.remove();\n }, 300);\n}\n\n", "// ============================================================================\n// Baseline UI JavaScript\n// Main Entry Point\n// ============================================================================\n\nimport { initModal, openModal, closeModal } from './components/modal.js';\nimport { initDropdown } from './components/dropdown.js';\nimport { initTooltip } from './components/tooltip.js';\nimport { initTabs } from './components/tabs.js';\nimport { initAlert, dismissAlert } from './components/alert.js';\n\n// Export all functions for manual use\nexport {\n initModal,\n openModal,\n closeModal,\n initDropdown,\n initTooltip,\n initTabs,\n initAlert,\n dismissAlert\n};\n\n// Auto-initialize on DOM ready\nfunction autoInit() {\n // Initialize all modals\n document.querySelectorAll('.bl-modal').forEach(modal => {\n initModal(modal);\n });\n\n // Initialize all dropdowns\n document.querySelectorAll('.bl-dropdown').forEach(dropdown => {\n initDropdown(dropdown);\n });\n\n // Initialize all tooltips\n document.querySelectorAll('.bl-tooltip').forEach(tooltip => {\n initTooltip(tooltip);\n });\n\n // Initialize all tabs\n document.querySelectorAll('.bl-nav-tabs').forEach(tabs => {\n initTabs(tabs);\n });\n\n // Initialize all dismissible alerts\n document.querySelectorAll('.bl-alert-dismissible').forEach(alert => {\n initAlert(alert);\n });\n}\n\n// Initialize when DOM is ready\n// Use requestAnimationFrame for better timing with ES modules\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => {\n // Wait for next frame to ensure all elements are rendered\n requestAnimationFrame(() => {\n requestAnimationFrame(autoInit);\n });\n });\n} else {\n // DOM already loaded, but wait for next frame to ensure everything is ready\n requestAnimationFrame(() => {\n requestAnimationFrame(autoInit);\n });\n}\n\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["initModal", "modalElement", "backdrop", "modalId", "btn", "openModal", "closeModal", "e", "escHandler", "modal", "handleAnimationEnd", "dialog", "initDropdown", "dropdownElement", "toggle", "menu", "e", "otherMenu", "outsideClickHandler", "initTooltip", "tooltipElement", "trigger", "content", "enterHandler", "e", "leaveHandler", "initTabs", "tabsContainer", "tabLinks", "tabGroup", "link", "e", "l", "targetId", "content", "targetContent", "initAlert", "alertElement", "closeBtn", "dismissAlert", "autoInit", "modal", "initModal", "dropdown", "initDropdown", "tooltip", "initTooltip", "tabs", "initTabs", "alert", "initAlert"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rhavenside/baseline-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A technical glass design framework with SCSS source and compiled CSS - minimalist, rectangular forms with milky glass effects",
|
|
6
6
|
"main": "dist/baseline.css",
|
|
@@ -67,11 +67,16 @@ export function closeModal(modalId) {
|
|
|
67
67
|
modal.classList.add('bl-modal-closing');
|
|
68
68
|
modal.classList.remove('bl-modal-open');
|
|
69
69
|
|
|
70
|
-
//
|
|
70
|
+
// WICHTIG: Overflow sofort zurücksetzen, wenn keine anderen Modals offen sind
|
|
71
|
+
// (Animation läuft weiter, aber Scrollen ist wieder möglich)
|
|
72
|
+
const openModals = document.querySelectorAll('.bl-modal.bl-modal-open');
|
|
73
|
+
if (openModals.length === 0) {
|
|
74
|
+
document.body.style.overflow = '';
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
// Wait for animation to complete before cleaning up
|
|
71
78
|
const handleAnimationEnd = () => {
|
|
72
79
|
modal.classList.remove('bl-modal-closing');
|
|
73
|
-
document.body.style.overflow = '';
|
|
74
|
-
modal.removeEventListener('animationend', handleAnimationEnd);
|
|
75
80
|
};
|
|
76
81
|
|
|
77
82
|
// Listen for animation end on dialog (which has the slide animation)
|