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 => {
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
}
}
}