added delete option for youtube-dl download;added options for copying links;

src/actions/buttonActions.js

@@ -1,6 +1,9 @@
 import Http from '../lib/http'
 import helper from '../utils/helper'
 import eventHandler from '../lib/eventHandler'
+import Clipboard from '../utils/clipboard'
+import '../css/clipboard.scss';
+
 const buttonHandler = (event, type) => {
     let element = event.target;
     event.stopPropagation();
@@ -9,6 +12,11 @@ const buttonHandler = (event, type) => {
     let row, data = {};
     let removeRow = true;
     if (row = element.closest('.table-row-search')) {
+        if (element.className == 'icon-clipboard') {
+            const clippy = new Clipboard(element, row.dataset.link);
+            clippy.Copy();
+            return;
+        }
         data['text-input-value'] = row.dataset.link;
     } else {
         row = element.closest('.table-row')
@@ -38,5 +46,10 @@ const buttonHandler = (event, type) => {
 export default {
     run: function () {
         eventHandler.add("click", "#ncdownloader-table-wrapper", ".table-cell-action-item .button-container button", e => buttonHandler(e, ''));
+        eventHandler.add("click", "#ncdownloader-table-wrapper", ".table-row button.icon-clipboard", function (e) {
+            let element = e.target;
+            const clippy = new Clipboard(element);
+            clippy.Copy();
+        });
     }
 }

src/css/clipboard.scss

@@ -0,0 +1,5 @@
+#ncdownloader-tooltip {
+	color      : #5d6395;
+	font-size  : medium;
+	font-weight: bold;
+}

src/css/style.scss

@@ -41,7 +41,9 @@
     .icon-add {
         background-image: url('../../img/add.svg');
     }
-
+    .icon-clipboard {
+        background-image: url('../../img/clippy.svg');
+    }
     #ncdownloader-form-wrapper {
         margin-left: 2px;
 

src/lib/tooltip.js

@@ -0,0 +1,50 @@
+import $ from 'jquery'
+
+class Tooltip {
+    id = "ncdownloader-tooltip";
+    messageNode;
+    style = {};
+    text;
+    constructor(element, text) {
+        if (typeof element !== 'string' && !(element instanceof HTMLElement))
+            throw ("invalid element!");
+        this.element = typeof element == 'object' ? element : document.querySelector(element);
+        this.style = {
+            position: 'fixed',
+            display: 'block',
+        }
+        this.text = text || element.getAttribute("data-text");
+    }
+    create(id) {
+        this.messageNode = document.createElement("div");
+        this.messageNode.classList.add(this.id);
+        this.messageNode.setAttribute("id", this.id);
+        this.messageNode.style.display = this.style.display;
+        this.messageNode.style.position = this.style.position;
+        this.messageNode.style.zIndex = 10000;
+        let div = document.createElement('div');
+        div.setAttribute("id", id);
+        let text = document.createTextNode(this.text);
+        div.appendChild(text);
+        this.messageNode.appendChild(div);
+        this.setPosition();
+        return this;
+    }
+    render() {
+        document.body.appendChild(this.messageNode);
+    }
+    html() {
+        return this.messageNode;
+    }
+    setPosition(bottomMargin, leftMargin) {
+        bottomMargin = bottomMargin || 20;
+        leftMargin = leftMargin || 0;
+        let rect = this.element.getBoundingClientRect();
+        let top = (rect['top'] + bottomMargin) + "px";
+        let left = (rect['left'] - leftMargin) + "px";
+        this.messageNode.style.top = top;
+        this.messageNode.style.left = left
+    }
+}
+
+export default Tooltip;

src/utils/clipboard.js

@@ -0,0 +1,66 @@
+import Tooltip from "../lib/tooltip";
+
+class Clipboard {
+    element;
+    text;
+
+    constructor(element, text) {
+        if (typeof element !== 'string' && !(element instanceof HTMLElement))
+            throw ("invalid element!");
+        this.element = typeof element == 'object' ? element : document.querySelector(element);
+        this.text = text || element.getAttribute("data-text");
+    }
+
+    _copy(text) {
+        let textArea = document.createElement("textarea");
+        textArea.value = text;
+
+        textArea.style.top = "0";
+        textArea.style.left = "0";
+        textArea.style.position = "fixed";
+
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        let result;
+        try {
+            result = document.execCommand('copy');
+            //console.log('copied using exceCommand');
+
+        } catch (err) {
+            console.error('failed to copy', err);
+            result = false;
+        } finally {
+            document.body.removeChild(textArea);
+        }
+        if (result) {
+            this.ShowMsg("Copied!");
+        }
+    }
+
+    ShowMsg(msg) {
+        let tip = new Tooltip(this.element, msg);
+        let html = tip.create('copy-alert').html();
+        document.body.appendChild(html);
+        const callback = (element) => {
+            element.remove()
+        }
+        setTimeout(() => {
+            callback(html)
+        }, 1000);
+    }
+
+    Copy() {
+        if (!navigator.clipboard) {
+            return this._copy(this.text);
+        }
+        return navigator.clipboard.writeText(this.text).then(() => {
+            this.ShowMsg("Copied!");
+        }, function (err) {
+            console.error('failed to copy text: ', err);
+        });
+    }
+
+}
+
+export default Clipboard;

src/utils/helper.js

@@ -172,6 +172,12 @@ const helper = {
         ></span
         ><span class="visually-hidden">Loading...</span>`;
         return html;
+    },
+    getCssVar(prop) {
+        return window.getComputedStyle(document.documentElement).getPropertyValue(prop);
+    },
+    getScrollTop() {
+        return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
     }
 }