pisto/ncdownloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show tooltips for youtube-dl or aria2 options in settings

Browse Source
This commit is contained in:
huangjx
2022-05-02 23:41:15 +08:00
parent 2e9954c88e
commit 11e07132e5
2 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/eventHandler.ts
View File

@@ -1,20 +1,22 @@
type callback = (event: any) => void; type callback = (event: any) => void;
type target = string | Element | HTMLElement type target = string | Element | HTMLElement | Document | Window
const eventHandler = { const eventHandler = {
add: function (eventType: string, target: target, selector: string | callback | Element, callback?: callback) { add: function (eventType: string, target: target, selector: callback | target, callback?: callback) {
if (typeof selector === 'function' && !callback) { if (typeof selector === 'function' && !callback) {
callback = selector; callback = selector;
selector = target; selector = target;
} }
if (typeof target === 'object') { if (target instanceof Element) {
target.addEventListener(eventType, function (e) { target.addEventListener(eventType, function (e) {
callback.call(target, e); callback.call(target, e);
}); });
return; return;
} }
let items = document.querySelectorAll(target); let items: NodeList
if (typeof target === "string") {
items = document.querySelectorAll(target);
}
if (!items) { if (!items) {
return; return;
} }

34
src/settings.js
View File

@@ -7,10 +7,13 @@ import settingsForm from './lib/settingsForm'
import autoComplete from './lib/autoComplete'; import autoComplete from './lib/autoComplete';
import eventHandler from './lib/eventHandler'; import eventHandler from './lib/eventHandler';
import aria2Options from './utils/aria2Options'; import aria2Options from './utils/aria2Options';
import { names as ytdOptions } from './utils/youtubedlOptions'; import { options as ytdFullOptions,names as ytdOptions } from './utils/youtubedlOptions';
import helper from './utils/helper'; import helper from './utils/helper';
import './css/autoComplete.css' import './css/autoComplete.css'
'use strict'; 'use strict';
import { delegate } from 'tippy.js';
import 'tippy.js/dist/tippy.css';
window.addEventListener('DOMContentLoaded', function () { window.addEventListener('DOMContentLoaded', function () {
let customOptions = ['ncd_downloader_dir', 'ncd_torrents_dir', 'ncd_seed_ratio', 'ncd_seed_time', 'ncd_rpctoken', 'ncd_yt_binary', 'ncd_aria2_binary']; let customOptions = ['ncd_downloader_dir', 'ncd_torrents_dir', 'ncd_seed_ratio', 'ncd_seed_time', 'ncd_rpctoken', 'ncd_yt_binary', 'ncd_aria2_binary'];
const saveHandler = (e, name) => { const saveHandler = (e, name) => {
@@ -74,19 +77,27 @@ window.addEventListener('DOMContentLoaded', function () {
autoComplete.getInstance({ autoComplete.getInstance({
selector: `[id^='${baseName}-key']`, selector: `[id^='${baseName}-key']`,
minChars: 1, minChars: 1,
source: function (term, suggest) { sourceHandler: function () {
term = term.toLowerCase(); if (Array.isArray(options)) {
let suggestions = [], data = options; return options;
for (const item of data) {
if (item.toLowerCase().indexOf(term, 0) !== -1) {
suggestions.push(item);
} }
return Object.keys(options);
},
renderer: (item, search) => {
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
let tippy;
if (options.hasOwnProperty(item)) {
tippy = options[item];
} else {
tippy = item;
} }
suggest(suggestions); var re = new RegExp(`(${search.split(' ').join('|')})`, "gi");
return `<div data-tippy-content="${tippy}" class="suggestion-item" data-val="${item}">${item.replace(re, "<b>$1</b>")}</div>`;
} }
}).run(); }).run();
} catch (error) { } catch (error) {
OC_msg.finishedError('#ncdownloader-message-banner', error);; console.log(error)
OC_msg.finishedError('#ncdownloader-message-banner', error);
} }
} }
@@ -96,7 +107,7 @@ window.addEventListener('DOMContentLoaded', function () {
eventHandler.add("click", "#custom-youtube-dl-settings-container", "button.save-custom-youtube-dl-settings", (e) => saveHandler(e, 'youtube-dl-settings')) eventHandler.add("click", "#custom-youtube-dl-settings-container", "button.save-custom-youtube-dl-settings", (e) => saveHandler(e, 'youtube-dl-settings'))
eventHandler.add('click', '#custom-aria2-settings-container', "button.add-custom-aria2-settings", (e) => addOption(e, 'aria2', aria2Options)) eventHandler.add('click', '#custom-aria2-settings-container', "button.add-custom-aria2-settings", (e) => addOption(e, 'aria2', aria2Options))
eventHandler.add('click', '#custom-youtube-dl-settings-container', "button.add-custom-youtube-dl-settings", (e) => addOption(e, 'youtube-dl', ytdOptions)) eventHandler.add('click', '#custom-youtube-dl-settings-container', "button.add-custom-youtube-dl-settings", (e) => addOption(e, 'youtube-dl', ytdFullOptions))
eventHandler.add('click', '.ncdownloader-personal-settings', 'button.icon-close', function (e) { eventHandler.add('click', '.ncdownloader-personal-settings', 'button.icon-close', function (e) {
@@ -142,4 +153,7 @@ window.addEventListener('DOMContentLoaded', function () {
} }
eventHandler.add('click', "#ncd_downloader_dir", filepicker); eventHandler.add('click', "#ncd_downloader_dir", filepicker);
eventHandler.add('click', "#ncd_torrents_dir", filepicker); eventHandler.add('click', "#ncd_torrents_dir", filepicker);
delegate('#body-settings',
{ target: '[data-tippy-content]' }
);
}); });