@hkdigital/lib-core 0.4.48 → 0.4.49
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.
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hide element when it has no visible content (empty text, no images/icons)
|
|
3
|
+
*
|
|
4
|
+
* @param {HTMLElement} element - Element to monitor and hide when empty
|
|
5
|
+
*
|
|
6
|
+
* @returns {Object} Action object with destroy method for cleanup
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* When dynamicContent is empty, the div is hidden (display: none) to
|
|
10
|
+
* prevent it from taking up space due to its padding.
|
|
11
|
+
*
|
|
12
|
+
* <div use:hideIfEmpty style="padding: 10px">{dynamicContent}</div>
|
|
13
|
+
*/
|
|
14
|
+
export function hideIfEmpty(element: HTMLElement): Object;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hide element when it has no visible content (empty text, no images/icons)
|
|
3
|
+
*
|
|
4
|
+
* @param {HTMLElement} element - Element to monitor and hide when empty
|
|
5
|
+
*
|
|
6
|
+
* @returns {Object} Action object with destroy method for cleanup
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* When dynamicContent is empty, the div is hidden (display: none) to
|
|
10
|
+
* prevent it from taking up space due to its padding.
|
|
11
|
+
*
|
|
12
|
+
* <div use:hideIfEmpty style="padding: 10px">{dynamicContent}</div>
|
|
13
|
+
*/
|
|
14
|
+
export function hideIfEmpty(element) {
|
|
15
|
+
function hasVisibleContent() {
|
|
16
|
+
// Get all text content and trim whitespace
|
|
17
|
+
const textContent = element.textContent?.trim() || '';
|
|
18
|
+
|
|
19
|
+
// Check for images, icons, or other non-text content
|
|
20
|
+
const hasImages = element.querySelector('img, svg, [class*="icon"]');
|
|
21
|
+
|
|
22
|
+
return textContent.length > 0 || hasImages;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function updateVisibility() {
|
|
26
|
+
const shouldHide = !hasVisibleContent();
|
|
27
|
+
element.style.display = shouldHide ? 'none' : '';
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Initial check
|
|
31
|
+
updateVisibility();
|
|
32
|
+
|
|
33
|
+
// Watch for DOM changes
|
|
34
|
+
const observer = new MutationObserver(updateVisibility);
|
|
35
|
+
observer.observe(element, {
|
|
36
|
+
childList: true, // Watch for added/removed child elements
|
|
37
|
+
subtree: true, // Watch all descendants
|
|
38
|
+
characterData: true // Watch for text content changes
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
return {
|
|
42
|
+
destroy() {
|
|
43
|
+
observer.disconnect();
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as hideIfEmpty } from './actions/hideIfEmpty.js';
|