no-muse
/
musescore-downloader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: btn not showing

This commit is contained in:
Xmader 2020-11-30 09:16:09 -05:00
parent f4d43443b9
commit 79f139e663
No known key found for this signature in database
GPG Key ID: A20B97FB9EB730E4
2 changed files with 19 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/btn.css
View File

@ -3,9 +3,10 @@ div {
display: flex; display: flex;
align-items: center; align-items: center;
font-family: 'Open Sans', 'Roboto', 'Helvetica neue', Helvetica, sans-serif; font-family: 'Open Sans', 'Roboto', 'Helvetica neue', Helvetica, sans-serif;
position: fixed; position: absolute;
z-index: 999; z-index: 9999;
background: #f6f6f6; background: #f6f6f6;
min-width: 230px;
} }
button { button {

37
src/btn.ts
View File

@ -9,14 +9,12 @@ import btnListCss from './btn.css'
type BtnElement = HTMLButtonElement type BtnElement = HTMLButtonElement
const getBtnContainer = (): HTMLDivElement => { const getBtnContainer = (): HTMLDivElement => {
const containers = [...document.querySelectorAll('section>div div')] const els = [...document.querySelectorAll('*')].reverse()
const btnParent = containers.find(c => { const el = els.find(b => {
return [...c.children].find((div) => { const text = b?.textContent?.replace(/\s/g, '') || ''
const b = div.querySelector('button, .button') return text.includes('Download') || text.includes('Print')
const text = b ? b.outerHTML.replace(/\s/g, '') : ''
return text.includes('Download') || text.includes('Print')
})
}) as HTMLDivElement | null }) as HTMLDivElement | null
const btnParent = el?.parentElement?.parentElement as HTMLDivElement | undefined
if (!btnParent) throw new Error('btn parent not found') if (!btnParent) throw new Error('btn parent not found')
return btnParent return btnParent
} }
@ -92,13 +90,18 @@ export class BtnList {
} }
private _commit () { private _commit () {
let btnParent: HTMLDivElement = document.createElement('div') const btnParent = document.querySelector('div') as HTMLDivElement
const shadow = attachShadow(btnParent)
try { try {
btnParent = this.getBtnParent() const anchorDiv = this.getBtnParent()
const { width, top, left } = anchorDiv.getBoundingClientRect()
btnParent.style.width = `${width}px`
btnParent.style.top = `${top}px`
btnParent.style.left = `${left}px`
} catch (err) { } catch (err) {
console.error(err) console.error(err)
} }
const shadow = attachShadow(btnParent)
// style the shadow DOM // style the shadow DOM
const style = document.createElement('style') const style = document.createElement('style')
@ -121,24 +124,16 @@ export class BtnList {
async commit (mode: BtnListMode = BtnListMode.InPage): Promise<void> { async commit (mode: BtnListMode = BtnListMode.InPage): Promise<void> {
switch (mode) { switch (mode) {
case BtnListMode.InPage: { case BtnListMode.InPage: {
// fallback to BtnListMode.ExtWindow let el: Element
try { try {
this.getBtnParent() el = this._commit()
} catch { } catch {
// fallback to BtnListMode.ExtWindow
return this.commit(BtnListMode.ExtWindow) return this.commit(BtnListMode.ExtWindow)
} }
let el: Element = this._commit()
const observer = new MutationObserver(() => { const observer = new MutationObserver(() => {
// check if the buttons are still in document when dom updates // check if the buttons are still in document when dom updates
if (!document.contains(el)) { if (!document.contains(el)) {
try {
this.getBtnParent()
} catch {
observer.disconnect()
this.commit(BtnListMode.ExtWindow)
}
// re-commit // re-commit
// performance issue? // performance issue?
el = this._commit() el = this._commit()