poder seleccionar audio y pdf

This commit is contained in:
f 2020-11-17 19:00:02 -03:00
parent bf73479c4a
commit cae38f684f
3 changed files with 59 additions and 7 deletions

View file

@ -88,10 +88,25 @@ const blocks = {
return el return el
}, },
}, },
figure: {
selector: "FIGURE",
noButton: true
},
figcaption: {
selector: "FIGCAPTION",
noButton: true,
},
audio: { audio: {
selector: "AUDIO", selector: "AUDIO",
createFn: editorEl => { createFn: editorEl => {
const el = document.createElement("AUDIO") const el = document.createElement("FIGURE")
el.appendChild(document.createElement("AUDIO"))
el.appendChild(document.createElement("FIGCAPTION"))
el.children[0].controls = true
el.children[1].innerText = "Toca el borde para subir un archivo de audio"
return el return el
}, },
}, },
@ -113,7 +128,13 @@ const blocks = {
pdf: { pdf: {
selector: "IFRAME", selector: "IFRAME",
createFn: editorEl => { createFn: editorEl => {
const el = document.createElement("IFRAME") const el = document.createElement("FIGURE")
el.appendChild(document.createElement("IFRAME"))
el.appendChild(document.createElement("FIGCAPTION"))
el.children[1].innerText = "Toca el borde para subir un archivo PDF"
return el return el
}, },
}, },
@ -228,6 +249,21 @@ const typesWithProperties = {
}, false) }, false)
}, },
}, },
figure: {
selector: blocks.figure.selector,
actualInput (el) {
// TODO: Cuando tengamos otros iframes hay que seleccionarlos de
// otra forma.
const tag = el.children[0].tagName.toLowerCase()
return typesWithProperties[(tag === 'iframe' ? 'pdf' : tag)]
},
updateInput (el, editorEl) {
typesWithProperties.figure.actualInput(el).updateInput(el.children[0], editorEl)
},
disableInput (editorEl) {},
setupInput (editorEl, contentEl) {},
},
audio: { audio: {
selector: blocks.audio.selector, selector: blocks.audio.selector,
updateInput (el, editorEl) { updateInput (el, editorEl) {
@ -244,11 +280,13 @@ const typesWithProperties = {
setupInput (editorEl, contentEl) { setupInput (editorEl, contentEl) {
const audioFileEl = editorEl.querySelector(`*[data-prop="audio-file"]`) const audioFileEl = editorEl.querySelector(`*[data-prop="audio-file"]`)
audioFileEl.addEventListener("input", event => { audioFileEl.addEventListener("input", event => {
const audioEl = getSelected(contentEl) const figureEl = getSelected(contentEl)
if (!audioEl) return if (!figureEl) return
const file = audioFileEl.files[0] const file = audioFileEl.files[0]
const audioEl = figureEl.querySelector('audio')
audioEl.src = URL.createObjectURL(file) audioEl.src = URL.createObjectURL(file)
audioEl.dataset.editorLoading = true audioEl.dataset.editorLoading = true
uploadFile(file) uploadFile(file)
@ -323,10 +361,11 @@ const typesWithProperties = {
setupInput (editorEl, contentEl) { setupInput (editorEl, contentEl) {
const pdfFileEl = editorEl.querySelector(`*[data-prop="pdf-file"]`) const pdfFileEl = editorEl.querySelector(`*[data-prop="pdf-file"]`)
pdfFileEl.addEventListener("input", event => { pdfFileEl.addEventListener("input", event => {
const pdfEl = getSelected(contentEl) const figureEl = getSelected(contentEl)
if (!pdfEl) return if (!figureEl) return
const file = pdfFileEl.files[0] const file = pdfFileEl.files[0]
const pdfEl = figureEl.children[0]
pdfEl.src = URL.createObjectURL(file) pdfEl.src = URL.createObjectURL(file)
pdfEl.dataset.editorLoading = true pdfEl.dataset.editorLoading = true

View file

@ -23,6 +23,14 @@ $component-active-bg: $magenta;
@import "bootstrap"; @import "bootstrap";
@import "editor"; @import "editor";
.editor {
.editor-content {
figure {
border: 1px solid transparentize($magenta, 0.3)
}
}
}
:root { :root {
--foreground: #{$black}; --foreground: #{$black};
--background: #{$white}; --background: #{$white};

View file

@ -14,9 +14,14 @@
.selected { outline: #f206f9 solid medium; } .selected { outline: #f206f9 solid medium; }
iframe { iframe {
border: 0;
min-height: 480px; min-height: 480px;
} }
figure {
padding: .5rem;
}
img, video, iframe, audio { img, video, iframe, audio {
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
@ -51,7 +56,7 @@
div[data-align="center"] { text-align: center; } div[data-align="center"] { text-align: center; }
div[data-align="right"] { text-align: right; } div[data-align="right"] { text-align: right; }
min-height: 480px; min-height: 480px;
} }
*[data-editor-loading] { *[data-editor-loading] {