From 0bd6c81157407f0acace14a9d4e03b0f1ec246e2 Mon Sep 17 00:00:00 2001 From: huangjx Date: Fri, 22 Oct 2021 20:20:33 +0800 Subject: [PATCH] removed jquery dependency --- src/OC/msg.js | 62 +++++++++++++++++++++++++++++++------------- src/buttonActions.js | 4 +-- src/css/style.scss | 2 +- src/helper.js | 12 +++++---- src/index.js | 20 +++++--------- src/settings.js | 4 ++- src/updatePage.js | 24 +++++++++-------- 7 files changed, 76 insertions(+), 52 deletions(-) diff --git a/src/OC/msg.js b/src/OC/msg.js index c421b03..7b0b8d6 100644 --- a/src/OC/msg.js +++ b/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) - .removeClass('success') - .removeClass('error') - .stop(true, true) - .show() + let el = document.querySelector(selector); + el.textContent = message; + el.style.removeProperty("display") }, /** @@ -70,13 +66,11 @@ export default { * @param {string} message Plain text success message to display (no HTML allowed) */ finishedSuccess(selector, message) { - $(selector).text(message) - .addClass('success') - .removeClass('error') - .stop(true, true) - .delay(3000) - .fadeOut(900) - .show() + let el = document.querySelector(selector); + el.textContent = message; + if (el.classList.contains("error")) el.classList.remove("error"); + el.classList.add("success"); + this.fadeOut(el); }, /** @@ -86,9 +80,41 @@ export default { * @param {string} message Plain text error message to display (no HTML allowed) */ finishedError(selector, message) { - $(selector).text(message) - .addClass('error') - .removeClass('success') - .show() + let el = document.querySelector(selector); + el.textContent = message; + if (el.classList.contains("success")) el.classList.remove("success"); + 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'; + } } \ No newline at end of file diff --git a/src/buttonActions.js b/src/buttonActions.js index f7c0816..fdb446b 100644 --- a/src/buttonActions.js +++ b/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, '')); } } \ No newline at end of file diff --git a/src/css/style.scss b/src/css/style.scss index 9950759..514771b 100644 --- a/src/css/style.scss +++ b/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; } diff --git a/src/helper.js b/src/helper.js index 37c0a99..f4c4d99 100644 --- a/src/helper.js +++ b/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 aria2 = $element.attr("data-aria2"); + let element = document.querySelector("#start-aria2 button"); + 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 diff --git a/src/index.js b/src/index.js index 2cb35d3..b0ba974 100644 --- a/src/index.js +++ b/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(); }) - - $('#ncdownloader-user-settings button').on("click", function (e) { + eventHandler.add("click", '#ncdownloader-user-settings button', function (e) { let link = helper.generateUrl(e.target.getAttribute('path')); window.location.href = link; }) - - $("#app-navigation").on("click", "#search-download", helper.showDownload); + eventHandler.add("click", "#app-navigation", "#search-download", helper.showDownload); }); diff --git a/src/settings.js b/src/settings.js index 70bde02..e1f1dca 100644 --- a/src/settings.js +++ b/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"; diff --git a/src/updatePage.js b/src/updatePage.js index 9756a01..bfe2c67 100644 --- a/src/updatePage.js +++ b/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).attr("type", name); + //$(tableContainer).removeClass().addClass("table " + 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')); - $(".complete-downloads").on("click", event => clickHandler(event, 'complete')); - $(".active-downloads").on("click", event => clickHandler(event, 'active')); - $(".fail-downloads").on("click", event => clickHandler(event, 'fail')); - $(".youtube-dl-downloads").on("click", event => clickHandler(event, 'youtube-dl')); - - $("#ncdownloader-table-wrapper").on("click", ".download-file-folder", function (event) { + eventHandler.add("click",".waiting-downloads a",event => clickHandler(event, 'waiting')); + eventHandler.add("click",".complete-downloads a",event => clickHandler(event, 'complete')); + eventHandler.add("click",".active-downloads a",event => clickHandler(event, 'active')); + eventHandler.add("click",".fail-downloads a",event => clickHandler(event, 'fail')); + eventHandler.add("click",".youtube-dl-downloads a",event => clickHandler(event, 'youtube-dl')); + eventHandler.add("click", "#ncdownloader-table-wrapper",".download-file-folder", function (event) { event.stopPropagation(); const path = "/apps/ncdownloader/update"; let url = helper.generateUrl(path);