refactor

src/btn.ts

@@ -0,0 +1,100 @@
+
+type BtnElement = HTMLElement
+
+/**
+ * Select the original Download Button
+ */
+export const getDownloadBtn = (): BtnElement => {
+  const btnsDiv = document.querySelector('.score-right .buttons-wrapper') || document.querySelectorAll('aside section > div')[4]
+  const btn = btnsDiv.querySelector('button, .button') as BtnElement
+  btn.onclick = null
+
+  // fix the icon of the download btn
+  // if the `btn` seleted was a `Print` btn, replace the `print` icon with the `download` icon
+  const svgPath: SVGPathElement | null = btn.querySelector('svg > path')
+  if (svgPath) {
+    svgPath.setAttribute('d', 'M9.6 2.4h4.8V12h2.784l-5.18 5.18L6.823 12H9.6V2.4zM19.2 19.2H4.8v2.4h14.4v-2.4z')
+  }
+
+  if (btn.nodeName.toLowerCase() === 'button') {
+    btn.setAttribute('style', 'width: 205px !important')
+  } else {
+    btn.dataset.target = ''
+  }
+
+  return btn
+}
+
+interface BtnOptions {
+  readonly name: string;
+  readonly action: BtnAction;
+}
+
+export class BtnList {
+  private readonly list: BtnElement[] = [];
+
+  constructor (private templateBtn: BtnElement) { }
+
+  add (options: BtnOptions): BtnElement {
+    const btn: HTMLButtonElement = this.templateBtn.cloneNode(true) as any
+
+    const textNode = [...btn.childNodes].find((x) => {
+      const txt = x.textContent as string
+      return txt.includes('Download') || txt.includes('Print')
+    }) as Node
+
+    const setText = (str: string): void => {
+      textNode.textContent = str
+    }
+
+    setText(options.name)
+
+    btn.onclick = (): void => {
+      options.action(options.name, btn, setText)
+    }
+
+    this.list.push(btn)
+
+    return btn
+  }
+
+  /**
+   * replace the template button with the list of new buttons
+   */
+  commit (): void {
+    this.templateBtn.replaceWith(...this.list)
+  }
+}
+
+type BtnAction = (btnName: string, btnEl: BtnElement, setText: (str: string) => void) => any
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace BtnAction {
+
+  export const PROCESSING_TEXT = 'Processing…'
+  export const ERROR_TEXT = '❌Download Failed!'
+
+  export const openUrl = (url: string): BtnAction => {
+    return (): any => window.open(url)
+  }
+
+  export const process = (fn: () => any): BtnAction => {
+    return async (name, btn, setText): Promise<void> => {
+      const _onclick = btn.onclick
+
+      btn.onclick = null
+      setText(PROCESSING_TEXT)
+
+      try {
+        await fn()
+        setText(name)
+      } catch (err) {
+        setText(ERROR_TEXT)
+        console.error(err)
+      }
+
+      btn.onclick = _onclick
+    }
+  }
+
+}

src/main.ts

@@ -3,11 +3,10 @@ import './meta'
 import { waitForDocumentLoaded, saveAs } from './utils'
 import { downloadPDF } from './pdf'
 import { fetchMscz, downloadMscz } from './mscz'
+import { getDownloadBtn, BtnList, BtnAction } from './btn'
 import * as recaptcha from './recaptcha'
 import scoreinfo from './scoreinfo'
 
-const PROCESSING_TEXT = 'Processing…'
-const FAILED_TEXT = '❌Download Failed!'
 const WEBMSCORE_URL = 'https://cdn.jsdelivr.net/npm/webmscore@0.5/webmscore.js'
 
 const main = (): void => {
@@ -18,84 +17,42 @@ const main = (): void => {
   // eslint-disable-next-line @typescript-eslint/no-floating-promises
   recaptcha.init()
 
-  const btnsDiv = document.querySelector('.score-right .buttons-wrapper') || document.querySelectorAll('aside section > div')[4]
+  const btnList = new BtnList(getDownloadBtn())
-  const downloadBtn = btnsDiv.querySelector('button, .button') as HTMLElement
-  downloadBtn.onclick = null
 
-  // fix the icon of the download btn
+  btnList.add({
-  // if the `downloadBtn` seleted was a `Print` btn, replace the `print` icon with the `download` icon
+    name: 'Download MSCZ',
-  const svgPath: SVGPathElement | null = downloadBtn.querySelector('svg > path')
+    action: BtnAction.process(downloadMscz),
-  if (svgPath) {
+  })
-    svgPath.setAttribute('d', 'M9.6 2.4h4.8V12h2.784l-5.18 5.18L6.823 12H9.6V2.4zM19.2 19.2H4.8v2.4h14.4v-2.4z')
-  }
 
-  const downloadURLs = {
+  btnList.add({
-    MSCZ: null,
+    name: 'Download PDF',
-    PDF: null,
+    action: BtnAction.process(downloadPDF),
-    MusicXML: scoreinfo.mxlUrl,
+  })
-    MIDI: scoreinfo.midiUrl,
-    MP3: scoreinfo.mp3Url,
-    Parts: null,
-  }
 
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  btnList.add({
-  const createBtn = (name: string) => {
+    name: 'Download MusicXML',
-    const btn: HTMLButtonElement = downloadBtn.cloneNode(true) as any
+    action: BtnAction.openUrl(scoreinfo.mxlUrl),
+  })
 
-    if (btn.nodeName.toLowerCase() === 'button') {
+  btnList.add({
-      btn.setAttribute('style', 'width: 205px !important')
+    name: 'Download MIDI',
-    } else {
+    action: BtnAction.openUrl(scoreinfo.midiUrl),
-      btn.dataset.target = ''
+  })
-    }
 
-    const textNode = [...btn.childNodes].find((x) => {
+  btnList.add({
-      const txt = x.textContent as string
+    name: 'Download MP3',
-      return txt.includes('Download') || txt.includes('Print')
+    action: BtnAction.openUrl(scoreinfo.mp3Url),
-    }) as Node
+  })
-    textNode.textContent = `Download ${name}`
 
-    return {
+  btnList.add({
-      btn,
+    name: 'Individual Parts',
-      textNode,
+    async action (btnName, btn, setText) {
-    }
+      const _onclick = btn.onclick
-  }
-
-  const newDownloadBtns = Object.keys(downloadURLs).map((name) => {
-    const url = downloadURLs[name]
-    const { btn, textNode } = createBtn(name)
-
-    if (name === 'PDF') {
-      btn.onclick = async (): Promise<void> => {
-        textNode.textContent = PROCESSING_TEXT
-
-        try {
-          await downloadPDF()
-          textNode.textContent = 'Download PDF'
-        } catch (err) {
-          textNode.textContent = FAILED_TEXT
-          console.error(err)
-        }
-      }
-    } else if (name === 'MSCZ') {
-      btn.onclick = async (): Promise<void> => {
-        textNode.textContent = PROCESSING_TEXT
-
-        try {
-          await downloadMscz()
-          textNode.textContent = 'Download MSCZ'
-        } catch (err) {
-          textNode.textContent = FAILED_TEXT
-          console.error(err)
-        }
-      }
-    } else if (name === 'Parts') { // download individual parts
-      btn.title = 'Download individual parts (BETA)'
-      const cb = btn.onclick = async (): Promise<void> => {
       btn.onclick = null
-        textNode.textContent = PROCESSING_TEXT
+      setText(BtnAction.PROCESSING_TEXT)
 
       const w = window.open('') as Window
-        const txt = document.createTextNode(PROCESSING_TEXT)
+      const txt = document.createTextNode(BtnAction.PROCESSING_TEXT)
       w.document.body.append(txt)
 
       // set page hooks
@@ -109,8 +66,8 @@ const main = (): void => {
       w.addEventListener('beforeunload', () => {
         score.destroy()
         window.removeEventListener('unload', destroy)
-          textNode.textContent = 'Download Parts'
+        setText(btnName)
-          btn.onclick = cb
+        btn.onclick = _onclick
       })
 
       // load webmscore (https://github.com/LibreScore/webmscore)
@@ -157,17 +114,10 @@ const main = (): void => {
         const data = new Blob([await score.savePdf()])
         saveAs(data, `${filename}-part-${id}.pdf`)
       }
-      }
+    },
-    } else {
+  }).title = 'Download individual parts (BETA)'
-      btn.onclick = (): void => {
-        window.open(url)
-      }
-    }
 
-    return btn
+  btnList.commit()
-  })
-
-  downloadBtn.replaceWith(...newDownloadBtns)
 }
 
 // eslint-disable-next-line @typescript-eslint/no-floating-promises