Make links clickable + all nodes draggable

options.css

@@ -54,20 +54,37 @@ h1 span {
         background-color: #de6a73;
 }
 
+button:focus {
+        outline: none;
+}
+
 .input-file-url {
         background-color: #222;
-        border: 5px solid #444;
         border-radius: 10px;
+        border: 5px solid #444;
         color: #f2cf66;
         font-size: 16px;
         padding: 10px;
         width: 350px;
 }
 
+.input-file-url:focus {
+        outline: none;
+}
+
+.clickable-url {
+        cursor: pointer;
+        text-decoration: underline;
+}
+
 .select-file-type {
         background-color: #112233;
 }
 
+.select-file-type:focus {
+        outline: none;
+}
+
 .select-file-type option:checked {
         background-color: #051525;
 }

options.js

@@ -4,6 +4,10 @@
         const $ = q => document.querySelector(q);
         const $$ = q => document.querySelectorAll(q);
         const filesList = $(".files");
+        let ctrlKeyPressed = false;
+        let mouseOveredFileUrlInput = null;
+        let dragSrcEl = null;
+
         const setDataStoreKey = function(key, value, cb) {
                 cb = cb || function() {};
                 const val = {};
@@ -44,10 +48,63 @@
                 alert(msg);
         };
 
+        const onDropCallback = function(evt) {
+                if (dragSrcEl !== this) {
+                        dragSrcEl.innerHTML = this.innerHTML;
+                        this.innerHTML = evt.dataTransfer.getData("text/html");
+                        addEventsToListItem(dragSrcEl);
+                        addEventsToListItem(this);
+                }
+        };
+
+        const onDragOverCallback = (evt) => {
+                if (evt.preventDefault) {
+                        evt.preventDefault();
+                }
+                evt.dataTransfer.dropEffect = "move";
+                return false;
+        };
+
+        const onDragStartCallback = function(evt) {
+                dragSrcEl = this;
+                evt.dataTransfer.effectAllowed = "move";
+                evt.dataTransfer.setData("text/html", this.innerHTML);
+        };
+
         const addEventsToListItem = (node) => {
+                const input = node.querySelector("input");
                 const select = node.querySelector("select");
                 const btnAdd = node.querySelector(".btn-file-add");
                 const btnRemove = node.querySelector(".btn-file-remove");
+                input.addEventListener(
+                        "click",
+                        function(evt) {
+                                if (
+                                        evt &&
+                                        evt.preventDefault &&
+                                        ctrlKeyPressed
+                                ) {
+                                        evt.preventDefault();
+                                        window.open(this.value);
+                                }
+                        },
+                        { passive: false }
+                );
+                input.addEventListener(
+                        "mouseover",
+                        function() {
+                                mouseOveredFileUrlInput = this;
+                        },
+                        { passive: true }
+                );
+                input.addEventListener(
+                        "mouseout",
+                        function() {
+                                this.classList.remove("clickable-url");
+                                mouseOveredFileUrlInput = null;
+                        },
+                        { passive: true }
+                );
                 select.addEventListener(
                         "change",
                         function() {
@@ -84,6 +141,16 @@
                         },
                         { passive: true }
                 );
+
+                node.addEventListener("dragstart", onDragStartCallback, {
+                        passive: false
+                });
+                node.addEventListener("dragover", onDragOverCallback, {
+                        passive: false
+                });
+                node.addEventListener("drop", onDropCallback, {
+                        passive: false
+                });
         };
 
         const createFileItem = (file, refNode) => {
@@ -138,60 +205,46 @@
                 }
         };
 
-        let dragSrcEl = null;
-
         // load files from store and populate the list
         getDataStoreKey("files", [], (files) => {
                 if (files.length === 0) {
                         return;
                 }
                 files.forEach(file => createFileItem(file));
-                filesList.querySelectorAll("li").forEach((listEl) => {
-                        listEl.addEventListener(
-                                "dragstart",
-                                function(evt) {
-                                        dragSrcEl = this;
-                                        evt.dataTransfer.effectAllowed = "move";
-                                        evt.dataTransfer.setData(
-                                                "text/html",
-                                                this.innerHTML
-                                        );
-                                },
-                                { passive: false }
-                        );
-                        listEl.addEventListener(
-                                "dragover",
-                                (evt) => {
-                                        if (evt.preventDefault) {
-                                                evt.preventDefault();
-                                        }
-                                        evt.dataTransfer.dropEffect = "move";
-                                        return false;
-                                },
-                                { passive: false }
-                        );
-                        listEl.addEventListener(
-                                "drop",
-                                function(evt) {
-                                        if (dragSrcEl !== this) {
-                                                dragSrcEl.innerHTML = this.innerHTML;
-                                                this.innerHTML = evt.dataTransfer.getData("text/html");
-                                                addEventsToListItem(dragSrcEl);
-                                                addEventsToListItem(this);
-                                        }
-                                },
-                                { passive: false }
-                        );
-                });
         });
 
-        let onCtrlSCallback = function(evt) {
-                if (evt.ctrlKey === true && evt.key === "s") {
-                        evt.preventDefault();
-                        save("Configuration saved.");
-                        return false;
+        let onKeyDownCallback = function(evt) {
+                if (evt.ctrlKey === true) {
+                        ctrlKeyPressed = true;
+                        if (mouseOveredFileUrlInput) {
+                                mouseOveredFileUrlInput.classList.add("clickable-url");
+                        }
+                        if (evt.key === "s") {
+                                evt.preventDefault();
+                                save("Configuration saved.");
+                                return false;
+                        }
                 }
         };
 
-        window.addEventListener("keydown", onCtrlSCallback, { passive: false });
+        let onKeyUpCallback = function(evt) {
+                if (evt.ctrlKey === true) {
+                        ctrlKeyPressed = true;
+                } else {
+                        ctrlKeyPressed = false;
+                }
+                if (mouseOveredFileUrlInput) {
+                        if (ctrlKeyPressed) {
+                                mouseOveredFileUrlInput.classList.add("clickable-url");
+                        } else {
+                                mouseOveredFileUrlInput.classList.remove("clickable-url");
+                        }
+                }
+        };
+
+        window.addEventListener("keydown", onKeyDownCallback, {
+                passive: false
+        });
+
+        window.addEventListener("keyup", onKeyUpCallback, { passive: false });
 })();