From 9f366362271590a2d08ac50ea73865ff321e6dd9 Mon Sep 17 00:00:00 2001 From: void Date: Tue, 3 Nov 2020 18:29:47 -0300 Subject: [PATCH] usar data- para botones/inputs + css --- app/assets/javascripts/01-types.js | 18 ++++++------- app/assets/javascripts/02-editor.js | 2 +- app/assets/stylesheets/editor.scss | 26 ++++++++++++++++++ app/views/application/markdown.haml | 42 ++++++++++++++--------------- 4 files changed, 57 insertions(+), 31 deletions(-) diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js index 45947f5e..ba053dec 100644 --- a/app/assets/javascripts/01-types.js +++ b/app/assets/javascripts/01-types.js @@ -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) diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js index 2ad524b8..92eef32b 100644 --- a/app/assets/javascripts/02-editor.js +++ b/app/assets/javascripts/02-editor.js @@ -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) diff --git a/app/assets/stylesheets/editor.scss b/app/assets/stylesheets/editor.scss index 07e9dd8b..27d0b8ca 100644 --- a/app/assets/stylesheets/editor.scss +++ b/app/assets/stylesheets/editor.scss @@ -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; } diff --git a/app/views/application/markdown.haml b/app/views/application/markdown.haml index 7c31b45c..3f499ea7 100644 --- a/app/views/application/markdown.haml +++ b/app/views/application/markdown.haml @@ -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