removed jquery dependency

src/OC/msg.js

@@ -1,5 +1,3 @@
-import $ from 'jquery'
-
 /**
  * A little class to manage a status field for a "saving" process.
  * It can be used to display a starting message (e.g. "Saving...") and then
@@ -24,11 +22,9 @@ export default {
 	 * @param {string} message    Plain text message to display (no HTML allowed)
 	 */
 	startAction(selector, message) {
-		$(selector).text(message)
+		let el = document.querySelector(selector);
-			.removeClass('success')
+		el.textContent = message;
-			.removeClass('error')
+		el.style.removeProperty("display")
-			.stop(true, true)
-			.show()
 	},
 
 	/**
@@ -70,13 +66,11 @@ export default {
 	 * @param {string} message Plain text success message to display (no HTML allowed)
 	 */
 	finishedSuccess(selector, message) {
-		$(selector).text(message)
+		let el = document.querySelector(selector);
-			.addClass('success')
+		el.textContent = message;
-			.removeClass('error')
+		if (el.classList.contains("error")) el.classList.remove("error");
-			.stop(true, true)
+		el.classList.add("success");
-			.delay(3000)
+		this.fadeOut(el);
-			.fadeOut(900)
-			.show()
 	},
 
 	/**
@@ -86,9 +80,41 @@ export default {
 	 * @param {string} message Plain text error message to display (no HTML allowed)
 	 */
 	finishedError(selector, message) {
-		$(selector).text(message)
+		let el = document.querySelector(selector);
-			.addClass('error')
+		el.textContent = message;
-			.removeClass('success')
+		if (el.classList.contains("success")) el.classList.remove("success");
-			.show()
+		el.classList.add("error");
 	},
+	fadeIn(element, duration = 1000) {
+		(function increment() {
+			element.style.opacity = String(0);
+			element.style.removeProperty("display")
+			let opacity = parseFloat(element.style.opacity);
+			if (opacity !== 1) {
+				setTimeout(() => {
+					increment(opacity + 0.1);
+				}, duration / 10);
+			}
+		})();
+	},
+
+	fadeOut(element, duration = 1000) {
+		let opacity = parseFloat(element.style.opacity) || 1;
+		(function decrement() {
+			if ((opacity -= 0.1) < 0) {
+				element.style.display = 'none'
+				element.style.removeProperty('opacity');
+			} else {
+				setTimeout(() => {
+					decrement();
+				}, duration / 10);
+			}
+		})();
+	},
+	show(el) {
+		el.style.display = '';
+	},
+	hide(el) {
+		el.style.display = 'none';
+	}
 }

src/buttonActions.js

@@ -1,6 +1,6 @@
-import $ from 'jquery'
 import Http from './http'
 import helper from './helper'
+import eventHandler from './eventHandler'
 const buttonHandler = (event, type) => {
     let element = event.target;
     event.stopPropagation();
@@ -37,6 +37,6 @@ const buttonHandler = (event, type) => {
 }
 export default {
     run: function () {
-        $("#ncdownloader-table-wrapper").on("click", ".table-cell-action-item .button-container button", e => buttonHandler(e, ''));
+        eventHandler.add("click", "#ncdownloader-table-wrapper", ".table-cell-action-item .button-container button", e => buttonHandler(e, ''));
     }
 }

src/css/style.scss

@@ -179,7 +179,7 @@ div .number {
 @media only screen and (min-width: 800px) {}
 
 @media only screen and (max-width: 1024px) {
-    #ncdownloader-form-wrapper {
+    #ncdownloader-body-wrapper {
         position  : relative;
         margin-top: 2em;
     }

src/helper.js

@@ -1,4 +1,3 @@
-import $ from 'jquery'
 import {
     generateUrl
 } from '@nextcloud/router'
@@ -74,12 +73,14 @@ const helper = {
         if (!data.status && data.error) {
             return;
         }
-        let $element = $("#start-aria2 button");
+        let element = document.querySelector("#start-aria2 button");
-        let aria2 = $element.attr("data-aria2");
+        let aria2 = element.getAttribute("data-aria2");
         if (aria2 === 'on') {
-            $element.attr("data-aria2", "off").html(t("ncdownloader", "Start Aria2"));
+            element.setAttribute("data-aria2", "off");
+            element.textContent = t("ncdownloader", "Start Aria2");
         } else {
-            $element.attr("data-aria2", "on").html(t("ncdownloader", "Stop Aria2"));
+            element.setAttribute("data-aria2", "on");
+            element.textContent = t("ncdownloader", "Stop Aria2");
         }
     },
     getPathLast: function (path) {
@@ -179,4 +180,5 @@ const helper = {
         container.style.width = "100%";
     }
 }
+
 export default helper

src/index.js

@@ -1,5 +1,5 @@
 import helper from './helper'
-import $ from 'jquery'
+import eventHandler from './eventHandler'
 import Http from './http'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import updatePage from './updatePage'
@@ -11,37 +11,29 @@ import App from './App';
 
 'use strict'
 const basePath = "/apps/ncdownloader";
-$(document).on('ajaxSend', function (elm, xhr, settings) {
+
-    let token = document.getElementsByTagName('head')[0].getAttribute('data-requesttoken')
-    if (settings.crossDomain === false) {
-        xhr.setRequestHeader('requesttoken', token)
-        xhr.setRequestHeader('OCS-APIREQUEST', 'true')
-    }
-})
 window.addEventListener('DOMContentLoaded', function () {
 
     // inputAction.run();
     updatePage.run();
     buttonActions.run();
-    let container = 'ncdownloader-form-container';
+    let container = 'ncdownloader-form-wrapper';
     let app = createApp(App);
     let vm = app.mount('#' + container);
     helper.addVue(vm.$options.name, vm);
 
-    $("#start-aria2").on("click", function (e) {
+    eventHandler.add("click","#start-aria2 button", function (e) {
         const path = basePath + "/aria2/start";
         let url = helper.generateUrl(path);
         Http.getInstance(url).setHandler(function (data) {
             helper.aria2Toggle(data);
         }).send();
     })
-
+    eventHandler.add("click", '#ncdownloader-user-settings button', function (e) {
-    $('#ncdownloader-user-settings button').on("click", function (e) {
         let link = helper.generateUrl(e.target.getAttribute('path'));
         window.location.href = link;
     })
-
+    eventHandler.add("click", "#app-navigation", "#search-download", helper.showDownload);
-    $("#app-navigation").on("click", "#search-download", helper.showDownload);
 
 });
 

src/settings.js

@@ -9,13 +9,15 @@ import eventHandler from './eventHandler';
 import aria2Options from './aria2Options';
 import helper from './helper';
 import './css/autoComplete.css'
+import './css/style.scss'
+
 
 'use strict';
 window.addEventListener('DOMContentLoaded', function () {
 
     eventHandler.add('click', '.ncdownloader-admin-settings', 'input[type="button"]', function (event) {
         event.stopPropagation();
-        OC_msg.startSaving('#ncdownloader-message-banner');
+        OC_msg.startSaving('#ncdownloader-message-banner',"Saving");
         const target = this.getAttribute("data-rel");
         let inputData = helper.getData(target);
         const path = inputData.url || "/apps/ncdownloader/admin/save";

src/updatePage.js

@@ -1,5 +1,5 @@
 import helper from './helper'
-import $ from 'jquery'
+import eventHandler from './eventHandler';
 import Http from './http'
 const basePath = "/apps/ncdownloader/status/";
 const tableContainer = ".table";
@@ -9,31 +9,33 @@ export default {
         const clickHandler = (event, type) => {
             event.preventDefault();
             helper.hideDownload();
+            let container = document.querySelector(tableContainer);
+            let currentType = container.getAttribute("type");
             let path = basePath + type;
             if (type === "youtube-dl") {
                 path = "/apps/ncdownloader/youtube/get";
             }
             let name = type + "-downloads";
             //avoid repeated click
-            if ($(tableContainer).attr("type") === name && helper.enabledPolling) {
+            if (currentType === name && helper.enabledPolling) {
                 return;
             }
             helper.enabledPolling = 1;
-            $(tableContainer).removeClass().addClass("table " + name);
+            //$(tableContainer).removeClass().addClass("table " + name);
-            $(tableContainer).attr("type", name);
+            container.setAttribute("type", name);
+            container.className = "table " + name;
             let delay = 15000;
             if (['active', 'youtube-dl'].includes(type)) {
                 delay = 1500;
             }
             helper.loop(helper.refresh, delay, ...[path])
         };
-        $(".waiting-downloads").on("click", event => clickHandler(event, 'waiting'));
+        eventHandler.add("click",".waiting-downloads a",event => clickHandler(event, 'waiting'));
-        $(".complete-downloads").on("click", event => clickHandler(event, 'complete'));
+        eventHandler.add("click",".complete-downloads a",event => clickHandler(event, 'complete'));
-        $(".active-downloads").on("click", event => clickHandler(event, 'active'));
+        eventHandler.add("click",".active-downloads a",event => clickHandler(event, 'active'));
-        $(".fail-downloads").on("click", event => clickHandler(event, 'fail'));
+        eventHandler.add("click",".fail-downloads a",event => clickHandler(event, 'fail'));
-        $(".youtube-dl-downloads").on("click", event => clickHandler(event, 'youtube-dl'));
+        eventHandler.add("click",".youtube-dl-downloads a",event => clickHandler(event, 'youtube-dl'));
-
+        eventHandler.add("click", "#ncdownloader-table-wrapper",".download-file-folder", function (event) {
-        $("#ncdownloader-table-wrapper").on("click", ".download-file-folder", function (event) {
             event.stopPropagation();
             const path = "/apps/ncdownloader/update";
             let url = helper.generateUrl(path);