2020-05-19 04:15:22 +00:00
|
|
|
|
2020-09-27 16:20:33 +00:00
|
|
|
import { loadMscore, WebMscore } from './mscore'
|
2020-10-18 11:21:25 +00:00
|
|
|
import { saveAs } from './utils'
|
2020-09-27 16:20:33 +00:00
|
|
|
|
2020-09-28 21:23:16 +00:00
|
|
|
type BtnElement = HTMLButtonElement
|
2020-05-19 04:15:22 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Select the original Download Button
|
|
|
|
*/
|
|
|
|
export const getDownloadBtn = (): BtnElement => {
|
2020-08-26 09:01:55 +00:00
|
|
|
const btnsDiv = document.querySelector('.score-right .buttons-wrapper') || document.querySelectorAll('aside > section > section > div')[3]
|
2020-05-19 04:15:22 +00:00
|
|
|
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;
|
2020-09-28 21:41:51 +00:00
|
|
|
readonly disabled?: boolean;
|
|
|
|
readonly tooltip?: string;
|
2020-05-19 04:15:22 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export class BtnList {
|
|
|
|
private readonly list: BtnElement[] = [];
|
|
|
|
|
|
|
|
constructor (private templateBtn: BtnElement) { }
|
|
|
|
|
|
|
|
add (options: BtnOptions): BtnElement {
|
2020-08-26 08:49:57 +00:00
|
|
|
const btn = this.templateBtn.cloneNode(true) as HTMLButtonElement
|
2020-05-19 04:15:22 +00:00
|
|
|
|
|
|
|
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)
|
|
|
|
|
2020-09-28 21:41:51 +00:00
|
|
|
if (options.disabled) {
|
|
|
|
btn.disabled = options.disabled
|
|
|
|
}
|
|
|
|
|
|
|
|
if (options.tooltip) {
|
|
|
|
btn.title = options.tooltip
|
|
|
|
}
|
|
|
|
|
2020-05-19 04:15:22 +00:00
|
|
|
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!'
|
|
|
|
|
2020-10-22 21:12:44 +00:00
|
|
|
const deprecationNotice = (btnName: string): string => {
|
2020-10-22 22:24:24 +00:00
|
|
|
return `DEPRECATED!\nUse \`${btnName}\` inside \`Individual Parts\` instead.\n(This may still work. Click \`OK\` to continue.)`
|
2020-10-22 21:12:44 +00:00
|
|
|
}
|
|
|
|
|
2020-10-18 11:21:25 +00:00
|
|
|
type Promisable<T> = T | Promise<T>
|
|
|
|
type UrlInput = Promisable<string> | (() => Promisable<string>)
|
|
|
|
|
|
|
|
const normalizeUrlInput = (url: UrlInput) => {
|
|
|
|
if (typeof url === 'function') return url()
|
|
|
|
else return url
|
|
|
|
}
|
|
|
|
|
|
|
|
export const openUrl = (url: UrlInput): BtnAction => {
|
|
|
|
return process(async (): Promise<any> => {
|
|
|
|
window.open(await normalizeUrlInput(url))
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2020-10-26 01:08:39 +00:00
|
|
|
export const download = (url: UrlInput): BtnAction => {
|
2020-10-18 11:21:25 +00:00
|
|
|
return process(async (): Promise<any> => {
|
|
|
|
const _url = await normalizeUrlInput(url)
|
2020-10-26 01:08:39 +00:00
|
|
|
const a = document.createElement('a')
|
|
|
|
a.href = _url
|
|
|
|
a.dispatchEvent(new MouseEvent('click'))
|
2020-10-18 11:21:25 +00:00
|
|
|
})
|
2020-05-19 04:15:22 +00:00
|
|
|
}
|
|
|
|
|
2020-09-27 16:20:33 +00:00
|
|
|
export const mscoreWindow = (fn: (w: Window, score: WebMscore, processingTextEl: ChildNode) => any): BtnAction => {
|
|
|
|
return async (btnName, btn, setText) => {
|
|
|
|
const _onclick = btn.onclick
|
|
|
|
btn.onclick = null
|
|
|
|
setText(BtnAction.PROCESSING_TEXT)
|
|
|
|
|
|
|
|
const w = window.open('') as Window
|
|
|
|
const txt = document.createTextNode(BtnAction.PROCESSING_TEXT)
|
|
|
|
w.document.body.append(txt)
|
|
|
|
|
|
|
|
// set page hooks
|
|
|
|
// eslint-disable-next-line prefer-const
|
|
|
|
let score: WebMscore
|
|
|
|
const destroy = (): void => {
|
|
|
|
score && score.destroy()
|
|
|
|
w.close()
|
|
|
|
}
|
|
|
|
window.addEventListener('unload', destroy)
|
|
|
|
w.addEventListener('beforeunload', () => {
|
|
|
|
score && score.destroy()
|
|
|
|
window.removeEventListener('unload', destroy)
|
|
|
|
setText(btnName)
|
|
|
|
btn.onclick = _onclick
|
|
|
|
})
|
|
|
|
|
|
|
|
score = await loadMscore(w)
|
|
|
|
|
|
|
|
fn(w, score, txt)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-19 04:15:22 +00:00
|
|
|
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
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-22 21:12:44 +00:00
|
|
|
export const deprecate = (action: BtnAction): BtnAction => {
|
|
|
|
return (name, btn, setText) => {
|
|
|
|
alert(deprecationNotice(name))
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
|
|
|
|
return action(name, btn, setText)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-19 04:15:22 +00:00
|
|
|
}
|