✨ Add rule.displaySelectorParents for hide/show

FrostCo · Aug 19, 2022 · 35b987a · 35b987a
1 parent 40c6ea7
commit 35b987a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/script/lib/globals.d.ts b/src/script/lib/globals.d.ts
@@ -13,6 +13,7 @@ interface AudioRule {
   displayElementLevels?: number;                 // [Watcher] Number of levels (ancestors) to get _displayElement
   displayHide?: string;                          // [Element,ElementChild,Watcher] Display style for hiding captions (Default: 'none')
   displaySelector?: string;                      // [Element,ElementChild,Watcher] Alternate selector to hide/show captions
+  displaySelectorParents?: number;               // [Element,ElementChild,Watcher] Number of levels to go above displaySelector's element
   displayShow?: string;                          // [Element,ElementChild,Watcher] Display style for showing captions (Default: '')
   displayVisibility?: boolean;                   // [Watcher*] Use visibility to show/hide caption container
   dynamicClasslist?: string;                     // [Dynamic] Set when a dynamicTextKey is found

diff --git a/src/script/webAudio.ts b/src/script/webAudio.ts
@@ -389,7 +389,8 @@ export default class WebAudio {
     } else if (rule.displaySelector) {
       const root = rule.rootNode && subtitles && subtitles[0] ? subtitles[0].getRootNode() : document;
       if (root) {
-        const container = getElement(rule.displaySelector, root);
+        let container = getElement(rule.displaySelector, root);
+        if (container && rule.displaySelectorParents) container = getParent(container, rule.displaySelectorParents);
         if (container) {
           // Save the original display style if none was included in the rule
           if (
@@ -922,8 +923,9 @@ export default class WebAudio {
     } else if (rule.displaySelector) {
       const root = rule.rootNode && subtitles && subtitles[0] ? subtitles[0].getRootNode() : document;
       if (root) {
-        const container = getElement(rule.displaySelector, root);
-        if (container) { container.style.setProperty('display', rule.displayShow); }
+        let container = getElement(rule.displaySelector, root);
+        if (container && rule.displaySelectorParents) container = getParent(container, rule.displaySelectorParents);
+        if (container) container.style.setProperty('display', rule.displayShow);
       }
     }
   }