From aabd6f1a5b61d1ef2e097d95c516a4a7ec9bf1d7 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Wed, 18 Nov 2020 13:37:15 -0300
Subject: [PATCH] =?UTF-8?q?v=C3=ADnculos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/assets/javascripts/01-types.js       | 26 ++++++++++++++++++++++++
 app/assets/javascripts/02-editor.js      |  1 +
 app/views/posts/attributes/_content.haml |  7 ++++---
 config/locales/en.yml                    |  1 +
 config/locales/es.yml                    |  1 +
 5 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/01-types.js b/app/assets/javascripts/01-types.js
index 9b0abd7..e5bd259 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 2d6b9f6..638e55c 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 89aef3a..a1c5d41 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 0642748..2d50248 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 02312ab..880acee 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