From 2d230900555ba80fae560fd7a6b5a3a536aba27c Mon Sep 17 00:00:00 2001 From: huangjx Date: Thu, 21 Oct 2021 18:33:19 +0800 Subject: [PATCH] integrated vue code into old js codebase;removed auto self-refreshing --- src/buttonActions.js | 2 +- src/css/dl_variables.scss | 4 +++- src/css/style.scss | 10 +++++----- src/helper.js | 41 ++++++++++++++++++++++++++++++++++++--- src/index.js | 16 ++++++++++----- src/updatePage.js | 9 +-------- 6 files changed, 59 insertions(+), 23 deletions(-) diff --git a/src/buttonActions.js b/src/buttonActions.js index bb3da2b..f7c0816 100644 --- a/src/buttonActions.js +++ b/src/buttonActions.js @@ -9,7 +9,7 @@ const buttonHandler = (event, type) => { let row, data = {}; let removeRow = true; if (row = element.closest('.table-row-search')) { - data['form_input_text'] = row.dataset.link; + data['text-input-value'] = row.dataset.link; } else { row = element.closest('.table-row') data = row.dataset; diff --git a/src/css/dl_variables.scss b/src/css/dl_variables.scss index 3bb6b8f..7f4dad1 100644 --- a/src/css/dl_variables.scss +++ b/src/css/dl_variables.scss @@ -1,3 +1,5 @@ $bg-color: #e5e5ee; $column-height: 45px; -$upload-width:75px; \ No newline at end of file +$upload-width:75px; +$dl-btn-width: 85px; +$checkbox-width: 90px; \ No newline at end of file diff --git a/src/css/style.scss b/src/css/style.scss index 535cf02..9950759 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -121,18 +121,18 @@ div .number { } .app-ncdownloader, -#ncdownloader-content, -.ncdownloader-content-wrapper, +#app-ncdownloader-wrapper, +.ncdownloader-body-wrapper, #ncdownloader-form-wrapper, #ncdownloader-table-content { width: 100%; } -.ncdownloader-content-wrapper { +.ncdownloader-body-wrapper { padding-top: 0.3em; } -.app-ncdownloader #app-content #app-content-wrapper { +.app-ncdownloader #app-content-wrapper { flex-wrap: wrap; } @@ -164,7 +164,7 @@ div .number { vertical-align: middle; } -#ncdownloader-content>#app-navigation:not(.vue)>ul>li>a { +#app-ncdownloader-wrapper>#app-navigation:not(.vue)>ul>li>a { padding: 0 12px 0 44px; } diff --git a/src/helper.js b/src/helper.js index 65adea6..37c0a99 100644 --- a/src/helper.js +++ b/src/helper.js @@ -9,13 +9,20 @@ import nctable from './ncTable'; import Http from './http' const helper = { + vue: {}, + addVue(name, object) { + helper.vue[name] = object; + }, + getVue(name) { + return helper.vue[name]; + }, generateUrl: generateUrl, loop(callback, delay, ...args) { callback(...args); clearTimeout(helper.timeoutID); this.polling(callback, delay, ...args); }, - enabledPolling: 1, + enabledPolling: 0, trim(string, char) { return string.split(char).filter(Boolean).join(char) }, @@ -47,10 +54,10 @@ const helper = { return magnetURI.test(url.trim()); }, - message: function (message,duration = 3000) { + message: function (message, duration = 3000) { Toastify({ text: message, - duration:duration, + duration: duration, newWindow: true, close: true, gravity: "top", // `top` or `bottom` @@ -142,6 +149,34 @@ const helper = { data[key] = element.value } return data; + }, + showElement(prop) { + let vm = helper.getVue('mainApp'); + vm.$data.display[prop] = true; + //hide all other elements; + for (let key in vm.$data.display) { + if (key !== prop) { + vm.$data.display[key] = false; + } + } + }, + hideElement(prop) { + let vm = helper.getVue('mainApp'); + vm.$data.display[prop] = false; + }, + showDownload() { + helper.showElement('download'); + nctable.getInstance().clear(); + helper.enabledPolling = 0; + }, + hideDownload() { + helper.hideElement('download'); + }, + topleft(id) { + let container = typeof id === 'object' ? id : document.getElementById(id); + container.style.top = 0; + container.style.left = 0; + container.style.width = "100%"; } } export default helper diff --git a/src/index.js b/src/index.js index fc2f4a7..2cb35d3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,13 @@ import helper from './helper' import $ from 'jquery' import Http from './http' -//import actionLinks from './actionLinks' import { translate as t, translatePlural as n } from '@nextcloud/l10n' -import inputAction from './inputAction' import updatePage from './updatePage' import buttonActions from './buttonActions' -import inputBox from './inputBox' import './css/style.scss' import './css/table.scss' +import { createApp } from 'vue' +import App from './App'; 'use strict' const basePath = "/apps/ncdownloader"; @@ -21,11 +20,14 @@ $(document).on('ajaxSend', function (elm, xhr, settings) { }) window.addEventListener('DOMContentLoaded', function () { - inputAction.run(); + // inputAction.run(); updatePage.run(); buttonActions.run(); + let container = 'ncdownloader-form-container'; + let app = createApp(App); + let vm = app.mount('#' + container); + helper.addVue(vm.$options.name, vm); - $("#ncdownloader-form-wrapper").append(inputBox.getInstance(t("ncdownloader", 'New Download')).create()); $("#start-aria2").on("click", function (e) { const path = basePath + "/aria2/start"; let url = helper.generateUrl(path); @@ -39,6 +41,10 @@ window.addEventListener('DOMContentLoaded', function () { window.location.href = link; }) + $("#app-navigation").on("click", "#search-download", helper.showDownload); + }); + + diff --git a/src/updatePage.js b/src/updatePage.js index d3df498..9756a01 100644 --- a/src/updatePage.js +++ b/src/updatePage.js @@ -8,6 +8,7 @@ export default { const clickHandler = (event, type) => { event.preventDefault(); + helper.hideDownload(); let path = basePath + type; if (type === "youtube-dl") { path = "/apps/ncdownloader/youtube/get"; @@ -38,14 +39,6 @@ export default { let url = helper.generateUrl(path); Http.getInstance(url).setMethod('GET').send(); }); - - helper.refresh(basePath + "waiting") - helper.refresh(basePath + "complete") - helper.refresh(basePath + "fail") - helper.refresh("/apps/ncdownloader/youtube/get") - - helper.loop(helper.refresh, 1000, basePath + "active"); - helper.polling(function (url) { url = helper.generateUrl(url); Http.getInstance(url).setMethod('GET').send();