Merge pull request #2097 from openzim/2074-section-hiding

Remove inline styles from <section> tags returned from mobile-html
openzim · Nov 5, 2024 · 7d95c2b · 7d95c2b
2 parents 77bb173 + 225ad9b
commit 7d95c2b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,3 +16,4 @@ coverage
 mwo-test-*
 .vscode
 .tool-versions
+output/
diff --git a/src/renderers/wikimedia-mobile.renderer.ts b/src/renderers/wikimedia-mobile.renderer.ts
@@ -37,6 +37,7 @@ export class WikimediaMobileRenderer extends MobileRenderer {
           this.INTERNAL.convertLazyLoadToImages,
           this.removeEditContainer,
           this.removeHiddenClass,
+          this.INTERNAL.unhideSections,
           async (doc) => {
             const { finalHTML, subtitles, mediaDependencies } = await super.processHtml(
               doc.documentElement.outerHTML,
@@ -130,6 +131,16 @@ export class WikimediaMobileRenderer extends MobileRenderer {
     return doc
   }
 
+  private unhideSectionsImpl(doc: DominoElement) {
+    const sections = doc.querySelectorAll('section')
+    Array.from(sections).forEach((section: DominoElement) => {
+      // Domino doesn't allow us to easily manipulate specific styles. Rather than trying to parse
+      // the style attribute and remove display: none, we just clobber the whole thing.
+      section.style = ''
+    })
+    return doc
+  }
+
   private restoreLinkDefaults(doc: DominoElement) {
     const supElements = doc.querySelectorAll('sup')
 
@@ -159,5 +170,6 @@ export class WikimediaMobileRenderer extends MobileRenderer {
 
   public readonly INTERNAL = {
     convertLazyLoadToImages: this.convertLazyLoadToImagesImpl,
+    unhideSections: this.unhideSectionsImpl,
   }
 }
diff --git a/test/unit/renderers/mobile.renderer.test.ts b/test/unit/renderers/mobile.renderer.test.ts
@@ -5,6 +5,45 @@ import { WikimediaMobileRenderer } from '../../../src/renderers/wikimedia-mobile
 describe('mobile renderer', () => {
   let window
 
+  describe('unhiding sections', () => {
+    beforeEach(() => {
+      // Snippet of an article with nested hidden sections.
+      window = domino.createWindow(
+        `
+        <section data-mw-section-id="3" style="display: none;">
+        <div class="pcs-edit-section-header v2">
+          <h2 id="Dugu_kilatogo" class="pcs-edit-section-title">Dugu kilatogo</h2>
+          <span class="pcs-edit-section-link-container">
+            <a href="/w/index.php?title=Mali&amp;action=edit&amp;section=3" data-id="3" data-action="edit_section" aria-labelledby="pcs-edit-section-aria-normal" class="pcs-edit-section-link"></a>
+          </span>
+        </div>
+        <p>Mali kila ...</p>
+
+        <section data-mw-section-id="4" style="display: none;"><h3 id="Nafasɔrɔsira"><span id="Nafas.C9.94r.C9.94sira"></span>Nafasɔrɔsira</h3>
+          <figure class="mw-halign-right pcs-widen-image-ancestor" typeof="mw:File/Thumb">
+          <ul><li>Bagan kumaba là millions mugan ni fila dɛ fɛrɛ san kɔnɔ.</li>
+              <li>Sanu bɛ Mali la fa ni dɛ diɔyɔrɔ filana dɛ farifina diɔrɔ ka ni cory ni mangoro yɛ u ka fin fɛrɛ ta yɛ Mali kɔnɔ.</li></ul>
+        </section>
+
+        <p>Mali</p>
+        </section>
+        `,
+        'https://bm.wikipedia.org/api/rest_v1/page/mobile-html/Mali',
+      )
+    })
+
+    test('it removes the hidden class from sections', async () => {
+      const mobileRenderer = new WikimediaMobileRenderer()
+
+      const actual = mobileRenderer.INTERNAL.unhideSections(window.document)
+      const sections = actual.querySelectorAll('section')
+
+      expect(sections.length).toBe(2)
+      expect(sections[0].style.display).toBe('')
+      expect(sections[1].style.display).toBe('')
+    })
+  })
+
   describe('image converter', () => {
     beforeEach(() => {
       window = domino.createWindow(