remove add file button, using menu items for adding files

pages^2
bat 3 years ago
parent 54e446473a
commit e859bc4548

@ -1,14 +1,11 @@
export class FileGroup extends HTMLElement { export class FileGroup extends HTMLElement {
textEn = { textEn = {}
addFile: 'Add File',
}
textEs = { textEs = {}
addFile: 'Añadir archivo',
}
constructor() { constructor() {
super() super()
this.fileCount = {value: 0}
this.language = navigator.language this.language = navigator.language
this.attachShadow({mode: 'open'}) this.attachShadow({mode: 'open'})
this.headerEl = document.createElement('div') this.headerEl = document.createElement('div')
@ -20,15 +17,6 @@ export class FileGroup extends HTMLElement {
const bGroup = document.createElement( const bGroup = document.createElement(
'm-forms-button-group' 'm-forms-button-group'
) )
bGroup.addPrimary(this.text.addFile, () => {
this.addFile()
const btn = bGroup.primary
if (btn.scrollIntoViewIfNeeded) {
btn.scrollIntoViewIfNeeded()
} else {
btn.scrollIntoView()
}
})
this.shadowRoot.appendChild(bGroup) this.shadowRoot.appendChild(bGroup)
this.contentEl.addEventListener( this.contentEl.addEventListener(
'click-add-above', 'click-add-above',
@ -36,10 +24,12 @@ export class FileGroup extends HTMLElement {
const el = document.createElement( const el = document.createElement(
'm-editor-file-view' 'm-editor-file-view'
) )
el.fileCount = this.fileCount
el.codeMirror = this.codeMirror el.codeMirror = this.codeMirror
e.target.insertAdjacentElement( e.target.insertAdjacentElement(
'beforebegin', el 'beforebegin', el
) )
this.fileCount.value += 1
}, },
) )
this.contentEl.addEventListener( this.contentEl.addEventListener(
@ -48,10 +38,12 @@ export class FileGroup extends HTMLElement {
const el = document.createElement( const el = document.createElement(
'm-editor-file-view' 'm-editor-file-view'
) )
el.fileCount = this.fileCount
el.codeMirror = this.codeMirror el.codeMirror = this.codeMirror
e.target.insertAdjacentElement( e.target.insertAdjacentElement(
'afterend', el 'afterend', el
) )
this.fileCount.value += 1
}, },
) )
} }
@ -83,6 +75,7 @@ export class FileGroup extends HTMLElement {
addFile({name, data, collapsed} = {}) { addFile({name, data, collapsed} = {}) {
const el = document.createElement('m-editor-file-view') const el = document.createElement('m-editor-file-view')
el.fileCount = this.fileCount
el.codeMirror = this.codeMirror el.codeMirror = this.codeMirror
if (name !== undefined) { if (name !== undefined) {
el.name = name el.name = name
@ -94,6 +87,7 @@ export class FileGroup extends HTMLElement {
el.collapsed = collapsed el.collapsed = collapsed
} }
this.contentEl.appendChild(el) this.contentEl.appendChild(el)
this.fileCount.value += 1
return el return el
} }

@ -57,25 +57,12 @@ export class FileView extends HTMLElement {
this.menuBtn = document.createElement('button') this.menuBtn = document.createElement('button')
this.menuBtn.innerHTML = this.icons.menu this.menuBtn.innerHTML = this.icons.menu
this.menuBtn.addEventListener('click', () => { this.menuBtn.addEventListener('click', () => {
this.menu.open(this.menuBtn) this.openMenu()
}) })
this.headerEl.appendChild(this.menuBtn) this.headerEl.appendChild(this.menuBtn)
this.menu = document.createElement( this.menu = document.createElement(
'm-menu-dropdown' 'm-menu-dropdown'
) )
this.menu.add(this.text.addAbove, () => {
this.dispatchEvent(new CustomEvent(
'click-add-above', {bubbles: true}
))
})
this.menu.add(this.text.addBelow, () => {
this.dispatchEvent(new CustomEvent(
'click-add-below', {bubbles: true}
))
})
this.menu.add(this.text.delete, () => {
this.remove()
})
this.shadowRoot.appendChild(this.menu) this.shadowRoot.appendChild(this.menu)
} }
@ -127,6 +114,27 @@ export class FileView extends HTMLElement {
this.shadowRoot.appendChild(style) this.shadowRoot.appendChild(style)
} }
openMenu() {
this.menu.clear()
this.menu.add(this.text.addAbove, () => {
this.dispatchEvent(new CustomEvent(
'click-add-above', {bubbles: true}
))
})
this.menu.add(this.text.addBelow, () => {
this.dispatchEvent(new CustomEvent(
'click-add-below', {bubbles: true}
))
})
if (this.fileCount.value > 1) {
this.menu.add(this.text.delete, () => {
this.remove()
this.fileCount.value -= 1
})
}
this.menu.open(this.menuBtn)
}
set codeMirror(value) { set codeMirror(value) {
this._codeMirror = value this._codeMirror = value
const tagName = ( const tagName = (

Loading…
Cancel
Save