musescore-downloader/src/btn.ts

288 lines
8.4 KiB
TypeScript
Raw Normal View History

2020-05-19 04:15:22 +00:00
2020-11-24 09:38:47 +00:00
import { ScoreInfo } from './scoreinfo'
import { loadMscore, WebMscore } from './mscore'
2020-11-26 18:04:04 +00:00
import { useTimeout, windowOpenAsync, console, attachShadow } from './utils'
2020-12-06 06:28:56 +00:00
import { isGmAvailable, _GM } from './gm'
2020-11-05 05:22:15 +00:00
import i18n from './i18n'
2020-11-12 17:35:11 +00:00
// @ts-ignore
import btnListCss from './btn.css'
2020-09-28 21:23:16 +00:00
type BtnElement = HTMLButtonElement
2020-05-19 04:15:22 +00:00
2020-12-28 04:51:37 +00:00
export enum ICON {
DOWNLOAD = 'M9.6 2.4h4.8V12h2.784l-5.18 5.18L6.823 12H9.6V2.4zM19.2 19.2H4.8v2.4h14.4v-2.4z',
LIBRESCORE = 'm5.4837 4.4735v10.405c-1.25-0.89936-3.0285-0.40896-4.1658 0.45816-1.0052 0.76659-1.7881 2.3316-0.98365 3.4943 1 1.1346 2.7702 0.70402 3.8817-0.02809 1.0896-0.66323 1.9667-1.8569 1.8125-3.1814v-5.4822h8.3278v9.3865h9.6438v-2.6282h-6.4567v-12.417c-4.0064-0.015181-8.0424-0.0027-12.06-0.00676zm0.54477 2.2697h8.3278v1.1258h-8.3278v-1.1258z',
}
2020-11-12 18:02:50 +00:00
const getBtnContainer = (): HTMLDivElement => {
2020-11-30 14:16:09 +00:00
const els = [...document.querySelectorAll('*')].reverse()
const el = els.find(b => {
const text = b?.textContent?.replace(/\s/g, '') || ''
return text.includes('Download') || text.includes('Print')
2020-11-19 23:53:46 +00:00
}) as HTMLDivElement | null
2020-11-30 14:16:09 +00:00
const btnParent = el?.parentElement?.parentElement as HTMLDivElement | undefined
2020-11-19 23:53:46 +00:00
if (!btnParent) throw new Error('btn parent not found')
return btnParent
2020-05-19 04:15:22 +00:00
}
2020-12-28 04:51:37 +00:00
const buildDownloadBtn = (icon: ICON) => {
2020-11-12 17:49:45 +00:00
const btn = document.createElement('button')
btn.type = 'button'
// build icon svg element
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg.setAttribute('viewBox', '0 0 24 24')
const svgPath = document.createElementNS('http://www.w3.org/2000/svg', 'path')
2020-12-28 04:51:37 +00:00
svgPath.setAttribute('d', icon)
2020-11-12 17:49:45 +00:00
svgPath.setAttribute('fill', '#fff')
svg.append(svgPath)
const textNode = document.createElement('span')
btn.append(svg, textNode)
2020-11-23 20:57:20 +00:00
return btn
2020-11-12 17:49:45 +00:00
}
const cloneBtn = (btn: HTMLButtonElement) => {
const n = btn.cloneNode(true) as HTMLButtonElement
n.onclick = btn.onclick
return n
}
2020-12-31 19:29:37 +00:00
function getScrollParent (node: HTMLElement): HTMLElement {
if (node.scrollHeight > node.clientHeight) {
return node
} else {
return getScrollParent(node.parentNode as HTMLElement)
}
}
2020-05-19 04:15:22 +00:00
interface BtnOptions {
readonly name: string;
readonly action: BtnAction;
2020-09-28 21:41:51 +00:00
readonly disabled?: boolean;
readonly tooltip?: string;
2020-12-28 04:51:37 +00:00
readonly icon?: ICON;
2020-05-19 04:15:22 +00:00
}
export enum BtnListMode {
InPage,
ExtWindow,
}
2020-05-19 04:15:22 +00:00
export class BtnList {
private readonly list: BtnElement[] = [];
2020-11-12 18:02:50 +00:00
constructor (private getBtnParent: () => HTMLDivElement = getBtnContainer) { }
2020-05-19 04:15:22 +00:00
add (options: BtnOptions): BtnElement {
2020-12-28 04:51:37 +00:00
const btnTpl = buildDownloadBtn(options.icon ?? ICON.DOWNLOAD)
2020-11-23 20:57:20 +00:00
const setText = (btn: BtnElement) => {
const textNode = btn.querySelector('span')
return (str: string): void => {
if (textNode) textNode.textContent = str
}
2020-05-19 04:15:22 +00:00
}
2020-11-23 20:57:20 +00:00
setText(btnTpl)(options.name)
2020-05-19 04:15:22 +00:00
2020-11-23 20:57:20 +00:00
btnTpl.onclick = function () {
const btn = this as BtnElement
options.action(options.name, btn, setText(btn))
2020-05-19 04:15:22 +00:00
}
2020-11-23 20:57:20 +00:00
this.list.push(btnTpl)
2020-05-19 04:15:22 +00:00
2020-09-28 21:41:51 +00:00
if (options.disabled) {
2020-11-23 20:57:20 +00:00
btnTpl.disabled = options.disabled
2020-09-28 21:41:51 +00:00
}
if (options.tooltip) {
2020-11-23 20:57:20 +00:00
btnTpl.title = options.tooltip
2020-09-28 21:41:51 +00:00
}
// add buttons to the userscript manager menu
2020-12-06 06:28:56 +00:00
if (isGmAvailable('registerMenuCommand')) {
// eslint-disable-next-line no-void
void _GM.registerMenuCommand(options.name, () => {
options.action(options.name, btnTpl, () => undefined)
})
}
2020-11-23 20:57:20 +00:00
return btnTpl
2020-05-19 04:15:22 +00:00
}
2020-12-31 19:29:37 +00:00
private _positionBtns (anchorDiv: HTMLDivElement, newParent: HTMLDivElement) {
const { top } = anchorDiv.getBoundingClientRect()
if (top > 0) {
2020-12-31 18:13:26 +00:00
newParent.style.top = `${top}px`
}
}
2020-11-12 18:02:50 +00:00
private _commit () {
2020-11-30 14:16:09 +00:00
const btnParent = document.querySelector('div') as HTMLDivElement
const shadow = attachShadow(btnParent)
2020-11-12 17:35:11 +00:00
// style the shadow DOM
const style = document.createElement('style')
style.innerText = btnListCss
shadow.append(style)
// hide buttons using the shadow DOM
2020-11-23 16:52:28 +00:00
const slot = document.createElement('slot')
shadow.append(slot)
2020-11-10 18:36:49 +00:00
2020-12-01 17:43:48 +00:00
const newParent = document.createElement('div')
newParent.append(...this.list.map(e => cloneBtn(e)))
shadow.append(newParent)
2020-12-31 19:29:37 +00:00
try {
const anchorDiv = this.getBtnParent()
const pos = () => this._positionBtns(anchorDiv, newParent)
pos()
document.addEventListener('readystatechange', pos, { passive: true })
2020-12-31 19:29:37 +00:00
// reposition btns when window resizes
window.addEventListener('resize', pos, { passive: true })
2020-12-31 19:29:37 +00:00
// reposition btns when scrolling
const scroll = getScrollParent(anchorDiv)
scroll.addEventListener('scroll', pos, { passive: true })
2020-12-31 19:29:37 +00:00
} catch (err) {
console.error(err)
}
2020-12-01 17:43:48 +00:00
2020-11-12 18:02:50 +00:00
return btnParent
2020-11-10 18:36:49 +00:00
}
/**
* replace the template button with the list of new buttons
*/
2020-11-26 18:04:04 +00:00
async commit (mode: BtnListMode = BtnListMode.InPage): Promise<void> {
switch (mode) {
case BtnListMode.InPage: {
2020-11-30 14:16:09 +00:00
let el: Element
2020-11-12 18:02:50 +00:00
try {
2020-11-30 14:16:09 +00:00
el = this._commit()
2020-11-12 18:02:50 +00:00
} catch {
2020-11-30 14:16:09 +00:00
// fallback to BtnListMode.ExtWindow
2020-11-12 18:02:50 +00:00
return this.commit(BtnListMode.ExtWindow)
}
const observer = new MutationObserver(() => {
// check if the buttons are still in document when dom updates
if (!document.contains(el)) {
// re-commit
// performance issue?
2020-11-12 18:02:50 +00:00
el = this._commit()
}
})
observer.observe(document, { childList: true, subtree: true })
break
2020-11-10 18:36:49 +00:00
}
case BtnListMode.ExtWindow: {
2020-11-12 18:02:50 +00:00
const div = this._commit()
2020-11-27 07:51:23 +00:00
const w = await windowOpenAsync(undefined, '', undefined, 'resizable,width=230,height=270')
// eslint-disable-next-line no-unused-expressions
w?.document.body.append(div)
window.addEventListener('unload', () => w?.close())
break
}
default:
throw new Error('unknown BtnListMode')
}
2020-05-19 04:15:22 +00:00
}
}
type BtnAction = (btnName: string, btnEl: BtnElement, setText: (str: string) => void) => any
// eslint-disable-next-line @typescript-eslint/no-namespace
export namespace BtnAction {
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
}
2020-12-31 19:08:00 +00:00
export const download = (url: UrlInput, fallback?: () => Promisable<void>, timeout?: number, target?: '_blank'): BtnAction => {
return process(async (): Promise<void> => {
2020-11-13 06:15:01 +00:00
const _url = await normalizeUrlInput(url)
const a = document.createElement('a')
a.href = _url
2020-12-31 19:08:00 +00:00
if (target) a.target = target
2020-11-13 06:15:01 +00:00
a.dispatchEvent(new MouseEvent('click'))
}, fallback, timeout)
2020-05-19 04:15:22 +00:00
}
2021-01-01 02:59:10 +00:00
export const openUrl = download
2020-12-28 04:51:37 +00:00
2020-11-24 09:38:47 +00:00
export const mscoreWindow = (scoreinfo: ScoreInfo, fn: (w: Window, score: WebMscore, processingTextEl: ChildNode) => any): BtnAction => {
return async (btnName, btn, setText) => {
const _onclick = btn.onclick
btn.onclick = null
2020-11-05 05:22:15 +00:00
setText(i18n('PROCESSING')())
2020-11-27 07:51:23 +00:00
const w = await windowOpenAsync(btn, '') as Window
2020-11-05 05:22:15 +00:00
const txt = document.createTextNode(i18n('PROCESSING')())
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
})
2020-11-24 09:38:47 +00:00
score = await loadMscore(scoreinfo, w)
fn(w, score, txt)
}
}
2020-11-13 23:50:08 +00:00
export const process = (fn: () => any, fallback?: () => Promisable<void>, timeout = 10 * 60 * 1000 /* 10min */): BtnAction => {
2020-05-19 04:15:22 +00:00
return async (name, btn, setText): Promise<void> => {
const _onclick = btn.onclick
btn.onclick = null
2020-11-05 05:22:15 +00:00
setText(i18n('PROCESSING')())
2020-05-19 04:15:22 +00:00
try {
2020-11-13 06:15:01 +00:00
await useTimeout(fn(), timeout)
2020-05-19 04:15:22 +00:00
setText(name)
} catch (err) {
console.error(err)
2020-11-13 06:15:01 +00:00
if (fallback) {
// use fallback
await fallback()
setText(name)
} else {
setText(i18n('BTN_ERROR')())
}
2020-05-19 04:15:22 +00:00
}
btn.onclick = _onclick
}
}
export const deprecate = (action: BtnAction): BtnAction => {
return (name, btn, setText) => {
2020-11-05 05:22:15 +00:00
alert(i18n('DEPRECATION_NOTICE')(name))
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return action(name, btn, setText)
}
}
2020-05-19 04:15:22 +00:00
}