diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js index 9b0abd79..e5bd2594 100644 --- a/app/assets/javascripts/01-types.js +++ b/app/assets/javascripts/01-types.js @@ -31,6 +31,10 @@ const marks = { selector: "mark", createFn: () => document.createElement("MARK"), }, + a: { + selector: "a", + createFn: () => document.createElement("A"), + } } const tagNameSetFn = tagName => el => { @@ -174,6 +178,28 @@ function rgb2hex(rgb) { const getSelected = contentEl => contentEl.querySelector(".selected") const typesWithProperties = { + a: { + selector: marks.a.selector, + updateInput (el, editorEl) { + setAuxiliaryToolbar(editorEl, "a") + + const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`) + markAInputEl.disabled = false + markAInputEl.value = el.href + }, + disableInput (editorEl) { + const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`) + markAInputEl.disabled = true + markAInputEl.value = "" + }, + setupInput (editorEl, contentEl) { + const markAInputEl = editorEl.querySelector(`*[data-prop="a-href"]`) + markAInputEl.addEventListener("change", event => { + const markEl = contentEl.querySelector(marks.a.selector + ".selected") + if (markEl) markEl.href = markAInputEl.value + }, false) + } + }, mark: { selector: marks.mark.selector, updateInput (el, editorEl) { diff --git a/app/assets/javascripts/02-editor.js b/app/assets/javascripts/02-editor.js index 2d6b9f66..638e55c9 100644 --- a/app/assets/javascripts/02-editor.js +++ b/app/assets/javascripts/02-editor.js @@ -461,6 +461,7 @@ function setupEditor (editorEl) { document.addEventListener(editorBtn("audio"), () => setAuxiliaryToolbar(editorEl, "audio")) document.addEventListener(editorBtn("video"), () => setAuxiliaryToolbar(editorEl, "video")) document.addEventListener(editorBtn("pdf"), () => setAuxiliaryToolbar(editorEl, "pdf")) + document.addEventListener(editorBtn("a"), () => setAuxiliaryToolbar(editorEl, "a")) for (const video of document.querySelectorAll('.editor .editor-content video')) { video.addEventListener('click', event => event.target.controls = true) diff --git a/app/views/posts/attributes/_content.haml b/app/views/posts/attributes/_content.haml index 89aef3a9..a1c5d416 100644 --- a/app/views/posts/attributes/_content.haml +++ b/app/views/posts/attributes/_content.haml @@ -18,6 +18,7 @@ %button.btn{ data: { button: 'deleted' } }= t('editor.deleted') %button.btn{ data: { button: 'underline' } }= t('editor.underline') %button.btn{ data: { button: 'mark' } }= t('editor.mark') + %button.btn{ data: { button: 'a' } }= t('editor.a') %button.btn{ data: { button: 'h1' } }= t('editor.h1') %button.btn{ data: { button: 'h2' } }= t('editor.h2') %button.btn{ data: { button: 'h3' } }= t('editor.h3') @@ -68,9 +69,9 @@ %input.custom-file-input{ type: 'file', data: { prop: 'pdf-file' }, accept: 'application/pdf' }/ %label.custom-file-label{ for: 'pdf-file' }= t('editor.file.pdf') - .form-group{ data: { editor: { auxiliary: 'link' } } } - %label{ for: 'link-href' }= t('editor.url') - %input.form-control{ type: 'url', data: { prop: 'link-href' } }/ + .form-group{ data: { editor: { auxiliary: 'a' } } } + %label{ for: 'a-href' }= t('editor.url') + %input.form-control{ type: 'url', data: { prop: 'a-href' } }/ .editor-content.form-control.h-auto.mt-1{ contenteditable: 'true' } = metadata.value.html_safe diff --git a/config/locales/en.yml b/config/locales/en.yml index 0642748c..2d502481 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -560,6 +560,7 @@ en: deleted: Strikethrough underline: Underline mark: Mark + a: Link h1: Heading 1 h2: Heading 2 h3: Heading 3 diff --git a/config/locales/es.yml b/config/locales/es.yml index 02312ab3..880acee4 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -579,6 +579,7 @@ es: deleted: Tachado underline: Subrayado mark: Resaltado + a: Vínculo h1: Título 1 h2: Título 2 h3: Título 3