Sutty/sutty
5
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

subida de imágenes; limpiar un poco

Browse source
This commit is contained in:
void 2020-11-05 19:19:02 -03:00
parent 9f36636227
commit fdb8584dcb
4 changed files with 43 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
app/assets/javascripts/01-types.js
View file

@ -146,32 +146,49 @@ const typesWithProperties = {
img: { img: {
checkFn: blocks.img.checkFn, checkFn: blocks.img.checkFn,
updateInput (el, editorEl) { updateInput (el, editorEl) {
const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]") const imgFileEl = editorEl.querySelector(`*[data-prop="img-file"]`)
imgSrcEl.disabled = false imgFileEl.disabled = false
imgSrcEl.value = el.src // XXX: No se puede cambiar el texto, ¡esto puede ser confuso!
const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]") const imgAltEl = editorEl.querySelector(`*[data-prop="img-alt"]`)
imgAltEl.disabled = false imgAltEl.disabled = false
imgAltEl.value = el.alt imgAltEl.value = el.alt
}, },
disableInput (editorEl) { disableInput (editorEl) {
const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]") const imgFileEl = editorEl.querySelector(`*[data-prop="img-file"]`)
imgSrcEl.disabled = true imgFileEl.disabled = true
imgSrcEl.value = ""
const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]") const imgAltEl = editorEl.querySelector(`*[data-prop="img-alt"]`)
imgAltEl.disabled = true imgAltEl.disabled = true
imgAltEl.value = "" imgAltEl.value = ""
}, },
setupInput (editorEl, contentEl) { setupInput (editorEl, contentEl) {
const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]") const imgFileEl = editorEl.querySelector(`*[data-prop="img-file"]`)
imgSrcEl.addEventListener("input", event => { imgFileEl.addEventListener("input", event => {
// const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl) // const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl)
const imgEl = getSelected(contentEl) const imgEl = getSelected(contentEl)
if (imgEl) imgEl.src = imgSrcEl.value if (!imgEl) return
const file = imgFileEl.files[0]
imgEl.src = URL.createObjectURL(file)
imgEl.dataset.editorLoading = true
uploadFile(file)
.then(url => {
imgEl.src = url
delete imgEl.dataset.editorError
})
.catch(err => {
// TODO: mostrar error
console.error(err)
imgEl.dataset.editorError = true
})
.finally(() => {
delete imgEl.dataset.editorLoading
})
}, false) }, false)
const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]") const imgAltEl = editorEl.querySelector(`*[data-prop="img-alt"]`)
imgAltEl.addEventListener("input", event => { imgAltEl.addEventListener("input", event => {
// const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl) // const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl)
const imgEl = getSelected(contentEl) const imgEl = getSelected(contentEl)

7
app/assets/stylesheets/editor.scss
View file

@ -30,4 +30,11 @@
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; }
} }
*[data-editor-loading] {
opacity: 0.5;
}
*[data-editor-error] {
filter: grayscale(100%);
}
} }

8
app/views/application/markdown.haml
View file

@ -17,17 +17,21 @@
%button{:data => {:button => "center"}} Center %button{:data => {:button => "center"}} Center
%button{:data => {:button => "right"}} Right %button{:data => {:button => "right"}} Right
%br/ %br/
// TODO: generar IDs para labels
%label{:for => "mark-color"} Color de resaltado: %label{:for => "mark-color"} Color de resaltado:
%input{:type => "color", :data => {:prop => "mark-color"}}/ %input{:type => "color", :data => {:prop => "mark-color"}}/
%br/ %br/
%label{:for => "img-src"} URL de imágen:
%input{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url", :data => {:prop => "img-src"}}/ %label{:for => "img-file"} Archivo de la imágen:
%input{:type => "file", :data => {:prop => "img-file"}}/
%label{:for => "img-alt"} Descripción de imágen: %label{:for => "img-alt"} Descripción de imágen:
%input{:placeholder => "Un álbum", :type => "text", :data => {:prop => "img-alt"}}/ %input{:placeholder => "Un álbum", :type => "text", :data => {:prop => "img-alt"}}/
%button{:data => {:button => "img"}} Insertar imágen %button{:data => {:button => "img"}} Insertar imágen
%br/ %br/
%label{:for => "link-href"} URL de link: %label{:for => "link-href"} URL de link:
%input{:type => "url", :data => {:prop => "link-href"}}/ %input{:type => "url", :data => {:prop => "link-href"}}/
.editor-content{:contenteditable => "true"} .editor-content{:contenteditable => "true"}
%h1 %h1
Hola Hola

2
config/initializers/content_security_policy.rb
View file

@ -14,7 +14,7 @@ Rails.application.config.content_security_policy do |policy|
policy.script_src :self policy.script_src :self
policy.font_src :self policy.font_src :self
# XXX: Los íconos de Trix se cargan vía data: # XXX: Los íconos de Trix se cargan vía data:
policy.img_src :self, :data, :https policy.img_src :self, :data, :https, :blob
# Ya no usamos applets! # Ya no usamos applets!
policy.object_src :none policy.object_src :none
if Rails.env.development? if Rails.env.development?