diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js index 28a8afdd..9b0abd79 100644 --- a/app/assets/javascripts/01-types.js +++ b/app/assets/javascripts/01-types.js @@ -88,10 +88,25 @@ const blocks = { return el }, }, + figure: { + selector: "FIGURE", + noButton: true + }, + figcaption: { + selector: "FIGCAPTION", + noButton: true, + }, audio: { selector: "AUDIO", 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 }, }, @@ -113,7 +128,13 @@ const blocks = { pdf: { selector: "IFRAME", 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 }, }, @@ -228,6 +249,21 @@ const typesWithProperties = { }, 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: { selector: blocks.audio.selector, updateInput (el, editorEl) { @@ -244,11 +280,13 @@ const typesWithProperties = { setupInput (editorEl, contentEl) { const audioFileEl = editorEl.querySelector(`*[data-prop="audio-file"]`) audioFileEl.addEventListener("input", event => { - const audioEl = getSelected(contentEl) - if (!audioEl) return + const figureEl = getSelected(contentEl) + if (!figureEl) return const file = audioFileEl.files[0] + const audioEl = figureEl.querySelector('audio') + audioEl.src = URL.createObjectURL(file) audioEl.dataset.editorLoading = true uploadFile(file) @@ -323,10 +361,11 @@ const typesWithProperties = { setupInput (editorEl, contentEl) { const pdfFileEl = editorEl.querySelector(`*[data-prop="pdf-file"]`) pdfFileEl.addEventListener("input", event => { - const pdfEl = getSelected(contentEl) - if (!pdfEl) return + const figureEl = getSelected(contentEl) + if (!figureEl) return const file = pdfFileEl.files[0] + const pdfEl = figureEl.children[0] pdfEl.src = URL.createObjectURL(file) pdfEl.dataset.editorLoading = true diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 537f57a3..a3fe5eec 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -23,6 +23,14 @@ $component-active-bg: $magenta; @import "bootstrap"; @import "editor"; +.editor { + .editor-content { + figure { + border: 1px solid transparentize($magenta, 0.3) + } + } +} + :root { --foreground: #{$black}; --background: #{$white}; diff --git a/app/assets/stylesheets/editor.scss b/app/assets/stylesheets/editor.scss index b6c928ac..3f60486a 100644 --- a/app/assets/stylesheets/editor.scss +++ b/app/assets/stylesheets/editor.scss @@ -14,9 +14,14 @@ .selected { outline: #f206f9 solid medium; } iframe { + border: 0; min-height: 480px; } + figure { + padding: .5rem; + } + img, video, iframe, audio { width: 100%; max-width: 600px; @@ -51,7 +56,7 @@ div[data-align="center"] { text-align: center; } div[data-align="right"] { text-align: right; } - min-height: 480px; + min-height: 480px; } *[data-editor-loading] {