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

usar data- para botones/inputs + css

Browse source
This commit is contained in:
void 2020-11-03 18:29:47 -03:00
parent 3508223ca0
commit 9f36636227
4 changed files with 57 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -126,17 +126,17 @@ const typesWithProperties = {
mark: {
checkFn: marks.mark.checkFn,
updateInput (el, editorEl) {
const markColorInputEl = editorEl.querySelector("#mark-color")
const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]")
markColorInputEl.disabled = false
markColorInputEl.value = el.style.backgroundColor ? rgb2hex(el.style.backgroundColor) : "#f206f9"
},
disableInput (editorEl) {
const markColorInputEl = editorEl.querySelector("#mark-color")
const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]")
markColorInputEl.disabled = true
markColorInputEl.value = "#000000"
},
setupInput (editorEl, contentEl) {
const markColorInputEl = editorEl.querySelector("#mark-color")
const markColorInputEl = editorEl.querySelector("*[data-prop=\"mark-color\"]")
markColorInputEl.addEventListener("change", event => {
const markEl = findRecursiveChild(marks.mark.checkFn, contentEl)
if (markEl) markEl.style.backgroundColor = markColorInputEl.value
@ -146,32 +146,32 @@ const typesWithProperties = {
img: {
checkFn: blocks.img.checkFn,
updateInput (el, editorEl) {
const imgSrcEl = editorEl.querySelector("#img-src")
const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]")
imgSrcEl.disabled = false
imgSrcEl.value = el.src
const imgAltEl = editorEl.querySelector("#img-alt")
const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]")
imgAltEl.disabled = false
imgAltEl.value = el.alt
},
disableInput (editorEl) {
const imgSrcEl = editorEl.querySelector("#img-src")
const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]")
imgSrcEl.disabled = true
imgSrcEl.value = ""
const imgAltEl = editorEl.querySelector("#img-alt")
const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]")
imgAltEl.disabled = true
imgAltEl.value = ""
},
setupInput (editorEl, contentEl) {
const imgSrcEl = editorEl.querySelector("#img-src")
const imgSrcEl = editorEl.querySelector("*[data-prop=\"img-src\"]")
imgSrcEl.addEventListener("input", event => {
// const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl)
const imgEl = getSelected(contentEl)
if (imgEl) imgEl.src = imgSrcEl.value
}, false)
const imgAltEl = editorEl.querySelector("#img-alt")
const imgAltEl = editorEl.querySelector("*[data-prop=\"img-alt\"]")
imgAltEl.addEventListener("input", event => {
// const imgEl = findRecursiveChild(blocks.img.checkFn, contentEl)
const imgEl = getSelected(contentEl)

2
app/assets/javascripts/02-editor.js
View file

@ -376,7 +376,7 @@ function setupEditor (editorEl) {
characterData: true,
})
const editorBtn = id => editorEl.querySelector(`#${id}-button`)
const editorBtn = id => editorEl.querySelector(`*[data-button="${id}"]`)
const tagNameSetFn = tagName => el => {
const newEl = document.createElement(tagName)

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

@ -1,4 +1,30 @@
.editor {
box-sizing: border-box;
*, *::before, *::after { box-sizing: inherit; }
h1, h2, h3, h4, h5, h6, p {
min-height: 1.4em;
line-height: 1.4;
margin: 0;
}
mark {
background: #f206f9;
padding: 0;
}
.selected {
outline: #f206f9 solid medium;
outline-offset: 1pt;
}
img {
width: 100%;
max-width: 600px;
display: block;
margin: 0 auto;
}
.editor-content {
div[data-align="left"] { text-align: left; }
div[data-align="center"] { text-align: center; }

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

@ -1,33 +1,33 @@
= form_with do
.editor
%button#bold-button Bold
%button#italic-button Italic
%button#deleted-button Deleted
%button#underline-button Underline
%button#mark-button Mark
%button#h1-button H1
%button#h2-button H2
%button#h3-button H3
%button#h4-button H4
%button#h5-button H5
%button#h6-button H6
%button#ul-button Lista desordenada
%button#ol-button Lista ordenada
%button#left-button Left
%button#center-button Center
%button#right-button Right
%button{:data => {:button => "bold"}} Bold
%button{:data => {:button => "italic"}} Italic
%button{:data => {:button => "deleted"}} Deleted
%button{:data => {:button => "underline"}} Underline
%button{:data => {:button => "mark"}} Mark
%button{:data => {:button => "h1"}} H1
%button{:data => {:button => "h2"}} H2
%button{:data => {:button => "h3"}} H3
%button{:data => {:button => "h4"}} H4
%button{:data => {:button => "h5"}} H5
%button{:data => {:button => "h6"}} H6
%button{:data => {:button => "ul"}} Lista desordenada
%button{:data => {:button => "ol"}} Lista ordenada
%button{:data => {:button => "left"}} Left
%button{:data => {:button => "center"}} Center
%button{:data => {:button => "right"}} Right
%br/
%label{:for => "mark-color"} Color de resaltado:
%input#mark-color{:type => "color"}/
%input{:type => "color", :data => {:prop => "mark-color"}}/
%br/
%label{:for => "img-src"} URL de imágen:
%input#img-src{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url"}/
%input{:placeholder => "https://radio.sutty.nl/public/placeholder_992x992.png", :type => "url", :data => {:prop => "img-src"}}/
%label{:for => "img-alt"} Descripción de imágen:
%input#img-alt{:placeholder => "Un álbum", :type => "text"}/
%button#img-button Insertar imágen
%input{:placeholder => "Un álbum", :type => "text", :data => {:prop => "img-alt"}}/
%button{:data => {:button => "img"}} Insertar imágen
%br/
%label{:for => "link-href"} URL de link:
%input#link-href{:type => "url"}/
%input{:type => "url", :data => {:prop => "link-href"}}/
.editor-content{:contenteditable => "true"}
%h1
Hola