mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Fix bugs in settings search, improve UI
This commit is contained in:
parent
f9d4c2f5e2
commit
bade01b417
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -199,14 +199,14 @@ namespace BilibiliEvolved.Build
|
||||
<span class='settings-category'>$2</span>
|
||||
<i class='icon-arrow' style='margin-left:8px'></i>
|
||||
</li>",
|
||||
@"<li class='indent-$1 folded'>
|
||||
@"<li class='indent-$1 folded' data-indent='$1' data-key='$2' data-dependencies='$3'>
|
||||
<label class='gui-settings-checkbox-container'>
|
||||
<input key='$2' type='checkbox' dependencies='$3' checked/>
|
||||
<div class='gui-settings-checkbox'></div>
|
||||
<span>$4</span>
|
||||
</label>
|
||||
</li>",
|
||||
@"<li class='indent-$1 folded'>
|
||||
@"<li class='indent-$1 folded' data-indent='$1' data-key='$2' data-dependencies='$3'>
|
||||
<label class='gui-settings-dropdown-container'>
|
||||
<span class='gui-settings-dropdown-span'>$4</span>
|
||||
<div class='gui-settings-dropdown popup'>
|
||||
@ -216,7 +216,7 @@ namespace BilibiliEvolved.Build
|
||||
</div>
|
||||
</label>
|
||||
</li>",
|
||||
@"<li class='indent-$1 folded'>
|
||||
@"<li class='indent-$1 folded' data-indent='$1' data-key='$2' data-dependencies='$3'>
|
||||
<label class='gui-settings-textbox-container'>
|
||||
<span>$4</span>
|
||||
<input key='$2' dependencies='$3' spellcheck='false' type='text' />
|
||||
|
||||
Binary file not shown.
2
min/gui-settings.min.css
vendored
2
min/gui-settings.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
min/settings-search.min.js
vendored
2
min/settings-search.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(t,e)=>{class s{constructor(){this.input=document.querySelector(".gui-settings-search");const t=[...document.querySelectorAll(".gui-settings-content>ul>li")];const e=t=>e=>e.classList.contains("category")===t;this.categories=t.filter(e(true));this.items=t.filter(e(false));this.importToolTips().then(()=>this.input.addEventListener("input",()=>this.keywordChange()))}async importToolTips(){if(typeof getI18nKey==="undefined"){console.error("请更新脚本后再使用设置搜索功能.");return}const{toolTips:t}=await e.importAsync(`settings-tooltip.${getI18nKey()}`);this.toolTips=t}keywordChange(){const t=this.input.value.trim();if(!t){this.categories.concat(this.items).forEach(t=>t.classList.add("folded"));return}this.items.forEach(e=>{const s=e.querySelector("input").getAttribute("key");const i=Resource.displayNames[s]+this.toolTips.get(s).replace(/<.*>|<\/.*>/g,"");if(i.includes(t)){e.classList.remove("folded")}else{e.classList.add("folded")}});this.foldCategories()}foldCategories(){for(const e of this.categories){function t(){let t=e.nextElementSibling;while(t!==null&&!t.classList.contains("category")){if(!t.classList.contains("folded")){return"remove"}t=t.nextElementSibling}return"add"}e.classList[t()]("folded")}}}return{export:{SettingsSearch:s}}}})();
|
||||
(()=>{return(t,e)=>{class s{constructor(){this.input=document.querySelector(".gui-settings-search");const t=[...document.querySelectorAll(".gui-settings-content>ul>li")];const e=t=>e=>e.classList.contains("category")===t;this.categories=t.filter(e(true));this.items=t.filter(e(false));this.importToolTips().then(()=>this.input.addEventListener("input",()=>this.keywordChange()))}async importToolTips(){if(typeof getI18nKey==="undefined"){console.error("请更新脚本后再使用设置搜索功能.");return}const{toolTips:t}=await e.importAsync(`settings-tooltip.${getI18nKey()}`);this.toolTips=t}keywordChange(){const t=this.input.value.trim();if(!t){this.categories.concat(this.items).forEach(t=>t.classList.add("folded"));return}this.items.forEach(e=>{const s=e.querySelector("input").getAttribute("key");const i=this.toolTips.get(s);let o=Resource.displayNames[s];if(i!==undefined){o+=i.replace(/<.*>|<\/.*>/g,"")}if(o.includes(t)){e.classList.remove("folded");const t=e.getAttribute("data-dependencies");if(t!==undefined){t.split(" ").forEach(t=>{const e=this.items.find(e=>e.getAttribute("data-key")===t);if(e!==undefined){e.classList.remove("folded")}})}}else{e.classList.add("folded")}});this.foldCategories()}foldCategories(){for(const e of this.categories){function t(){let t=e.nextElementSibling;while(t!==null&&!t.classList.contains("category")){if(!t.classList.contains("folded")){return"remove"}t=t.nextElementSibling}return"add"}e.classList[t()]("folded")}}}return{export:{SettingsSearch:s}}}})();
|
||||
@ -218,6 +218,7 @@ body.dark .gui-settings-widgets
|
||||
visibility: collapse;
|
||||
transition: all 0.2s;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
}
|
||||
.gui-settings-checkbox-container .gui-settings-ok
|
||||
{
|
||||
|
||||
@ -1,68 +1,66 @@
|
||||
export class SettingsSearch
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
this.input = document.querySelector(".gui-settings-search");
|
||||
const items = [...document.querySelectorAll(".gui-settings-content>ul>li")];
|
||||
const ifCategory = condition => item => item.classList.contains("category") === condition;
|
||||
this.categories = items.filter(ifCategory(true));
|
||||
this.items = items.filter(ifCategory(false));
|
||||
this.importToolTips().then(() => this.input.addEventListener("input", () => this.keywordChange()));
|
||||
export class SettingsSearch {
|
||||
constructor () {
|
||||
this.input = document.querySelector('.gui-settings-search')
|
||||
const items = [...document.querySelectorAll('.gui-settings-content>ul>li')]
|
||||
const ifCategory = condition => item => item.classList.contains('category') === condition
|
||||
this.categories = items.filter(ifCategory(true))
|
||||
this.items = items.filter(ifCategory(false))
|
||||
this.importToolTips().then(() => this.input.addEventListener('input', () => this.keywordChange()))
|
||||
}
|
||||
async importToolTips () {
|
||||
if (typeof getI18nKey === 'undefined') {
|
||||
console.error('请更新脚本后再使用设置搜索功能.')
|
||||
return
|
||||
}
|
||||
async importToolTips()
|
||||
{
|
||||
if (typeof getI18nKey === "undefined")
|
||||
{
|
||||
console.error("请更新脚本后再使用设置搜索功能.");
|
||||
return;
|
||||
}
|
||||
const { toolTips } = await import(`settings-tooltip.${getI18nKey()}`);
|
||||
this.toolTips = toolTips;
|
||||
const { toolTips } = await import(`settings-tooltip.${getI18nKey()}`)
|
||||
this.toolTips = toolTips
|
||||
}
|
||||
keywordChange () {
|
||||
const value = this.input.value.trim()
|
||||
if (!value) {
|
||||
this.categories.concat(this.items).forEach(it => it.classList.add('folded'))
|
||||
return
|
||||
}
|
||||
keywordChange()
|
||||
{
|
||||
const value = this.input.value.trim();
|
||||
if (!value)
|
||||
{
|
||||
this.categories.concat(this.items).forEach(it => it.classList.add("folded"));
|
||||
return;
|
||||
}
|
||||
this.items.forEach(item =>
|
||||
{
|
||||
const key = item.querySelector("input").getAttribute("key");
|
||||
const texts = Resource.displayNames[key] + this.toolTips.get(key).replace(/<.*>|<\/.*>/g, "");
|
||||
if (texts.includes(value))
|
||||
{
|
||||
item.classList.remove("folded");
|
||||
this.items.forEach(item => {
|
||||
const key = item.querySelector('input').getAttribute('key')
|
||||
const tooltip = this.toolTips.get(key)
|
||||
let texts = Resource.displayNames[key]
|
||||
if (tooltip !== undefined) {
|
||||
texts += tooltip.replace(/<.*>|<\/.*>/g, '')
|
||||
}
|
||||
if (texts.includes(value)) {
|
||||
item.classList.remove('folded')
|
||||
const dependencies = item.getAttribute('data-dependencies')
|
||||
if (dependencies !== undefined) {
|
||||
dependencies.split(' ').forEach(dependency => {
|
||||
const parent = this.items.find(item => item.getAttribute('data-key') === dependency)
|
||||
if (parent !== undefined) {
|
||||
parent.classList.remove('folded')
|
||||
}
|
||||
else
|
||||
{
|
||||
item.classList.add("folded");
|
||||
}
|
||||
});
|
||||
this.foldCategories();
|
||||
}
|
||||
foldCategories()
|
||||
{
|
||||
for (const category of this.categories)
|
||||
{
|
||||
function fold()
|
||||
{
|
||||
let item = category.nextElementSibling;
|
||||
while (item !== null && !item.classList.contains("category"))
|
||||
{
|
||||
if (!item.classList.contains("folded"))
|
||||
{
|
||||
return "remove";
|
||||
}
|
||||
item = item.nextElementSibling;
|
||||
}
|
||||
return "add";
|
||||
}
|
||||
category.classList[fold()]("folded");
|
||||
})
|
||||
}
|
||||
} else {
|
||||
item.classList.add('folded')
|
||||
}
|
||||
})
|
||||
this.foldCategories()
|
||||
}
|
||||
foldCategories () {
|
||||
for (const category of this.categories) {
|
||||
function fold () {
|
||||
let item = category.nextElementSibling
|
||||
while (item !== null && !item.classList.contains('category')) {
|
||||
if (!item.classList.contains('folded')) {
|
||||
return 'remove'
|
||||
}
|
||||
item = item.nextElementSibling
|
||||
}
|
||||
return 'add'
|
||||
}
|
||||
category.classList[fold()]('folded')
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
export: { SettingsSearch },
|
||||
};
|
||||
export: { SettingsSearch }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user