From 2cd3c59f6163ae0e4cede47a0e9ffd4d261382c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0ar=C5=ABnas?= <floatas@outlook.com>
Date: Sun, 1 Sep 2019 09:55:39 +0300
Subject: [PATCH] custom onClick handler

---
 README.md    |  8 +++++---
 src/index.js | 14 +++++++++++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index efe9de5..6d55421 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,7 @@ var editor = EditorJS({
       class: LinkTool,
       config: {
         endpoint: 'http://localhost:8008/fetchUrl', // Your backend endpoint for url data fetching
+        onClick: (data) => console.log(data) //handle what happens on click
       }
     }
   }
@@ -67,9 +68,10 @@ var editor = EditorJS({
 
 Link Tool supports these configuration parameters:
 
-| Field    | Type        | Description                                    |
-| ---------|-------------|------------------------------------------------|
-| endpoint | `string`    | **Required:** endpoint for link data fetching. |
+| Field    | Type                       | Description                                    |
+| ---------|----------------------------|------------------------------------------------|
+| endpoint | `string`                   | **Required:** endpoint for link data fetching. |
+| onClick  | (data_from_bellow): void   | Custom click handle.                           |
 
 ## Output data
 
diff --git a/src/index.js b/src/index.js
index 22c70a3..ba98ae6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -65,7 +65,8 @@ export default class LinkTool {
      * Tool's initial config
      */
     this.config = {
-      endpoint: config.endpoint || ''
+      endpoint: config.endpoint || '',
+      onClick: config.onClick || null
     };
 
     this.nodes = {
@@ -270,6 +271,13 @@ export default class LinkTool {
       rel: 'nofollow noindex noreferrer'
     });
 
+    if (this.config.onClick) {
+      holder.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.config.onClick(this._data);
+      });
+    }
+
     this.nodes.linkImage = this.make('div', this.CSS.linkImage);
     this.nodes.linkTitle = this.make('div', this.CSS.linkTitle);
     this.nodes.linkDescription = this.make('p', this.CSS.linkDescription);
@@ -408,7 +416,7 @@ export default class LinkTool {
    * @return {HTMLElement}
    */
   make(tagName, classNames = null, attributes = {}) {
-    let el = document.createElement(tagName);
+    const el = document.createElement(tagName);
 
     if (Array.isArray(classNames)) {
       el.classList.add(...classNames);
@@ -416,7 +424,7 @@ export default class LinkTool {
       el.classList.add(classNames);
     }
 
-    for (let attrName in attributes) {
+    for (const attrName in attributes) {
       el[attrName] = attributes[attrName];
     }