diff --git a/src/btn.ts b/src/btn.ts index e89d5a5..63b30c6 100644 --- a/src/btn.ts +++ b/src/btn.ts @@ -6,33 +6,12 @@ import btnListCss from './btn.css' type BtnElement = HTMLButtonElement -/** - * Select the original Download Button - */ -export const getDownloadBtn = (): BtnElement => { +const getBtnContainer = (): HTMLDivElement => { const container = document.querySelectorAll('aside>section>section')[0] - const btnsDiv = [...container.children].find((div) => { + return [...container.children].find((div) => { const b = div.querySelector('button, .button') return b && b.outerHTML.replace(/\s/g, '').includes('Download') }) as HTMLDivElement - 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 } const buildDownloadBtn = () => { @@ -71,7 +50,7 @@ export enum BtnListMode { export class BtnList { private readonly list: BtnElement[] = []; - constructor (private getTemplateBtn: () => BtnElement) { } + constructor (private getBtnParent: () => HTMLDivElement = getBtnContainer) { } add (options: BtnOptions): BtnElement { const { btn, textNode } = buildDownloadBtn() @@ -98,12 +77,14 @@ export class BtnList { return btn } - private _commit (mode: BtnListMode) { - const btnParent = this.getTemplateBtn().parentElement as HTMLDivElement - const parent = mode === BtnListMode.InPage - ? btnParent - : document.createElement('div') - const shadow = parent.attachShadow({ mode: 'closed' }) + private _commit () { + let btnParent: HTMLDivElement = document.createElement('div') + try { + btnParent = this.getBtnParent() + } catch (err) { + console.error(err) + } + const shadow = btnParent.attachShadow({ mode: 'closed' }) // style the shadow DOM const style = document.createElement('style') @@ -115,7 +96,7 @@ export class BtnList { newParent.append(...this.list) shadow.append(newParent) - return parent + return btnParent } /** @@ -124,13 +105,20 @@ export class BtnList { commit (mode: BtnListMode = BtnListMode.InPage): void { switch (mode) { case BtnListMode.InPage: { - let el: Element = this._commit(mode) + // fallback to BtnListMode.ExtWindow + try { + this.getBtnParent() + } catch { + return this.commit(BtnListMode.ExtWindow) + } + + let el: Element = this._commit() const observer = new MutationObserver(() => { // check if the buttons are still in document when dom updates if (!document.contains(el)) { // re-commit // performance issue? - el = this._commit(mode) + el = this._commit() } }) observer.observe(document, { childList: true, subtree: true }) @@ -138,7 +126,7 @@ export class BtnList { } case BtnListMode.ExtWindow: { - const div = this._commit(mode) + const div = this._commit() const w = window.open('', undefined, 'resizable,width=230,height=270') // eslint-disable-next-line no-unused-expressions w?.document.body.append(div) diff --git a/src/main.ts b/src/main.ts index ba4bdc6..9cbce7c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,12 +5,12 @@ import { downloadPDF } from './pdf' import { downloadMscz } from './mscz' import { getFileUrl } from './file' import { WebMscore, loadSoundFont } from './mscore' -import { getDownloadBtn, BtnList, BtnAction, BtnListMode } from './btn' +import { BtnList, BtnAction, BtnListMode } from './btn' import scoreinfo from './scoreinfo' import i18n from './i18n' const main = (): void => { - const btnList = new BtnList(getDownloadBtn) + const btnList = new BtnList() const filename = scoreinfo.fileName btnList.add({