Fix bugs in settings search, improve UI

This commit is contained in:
the1812 2019-07-04 11:48:10 +08:00
parent f9d4c2f5e2
commit bade01b417
9 changed files with 74 additions and 75 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -199,14 +199,14 @@ namespace BilibiliEvolved.Build
<span class='settings-category'>$2</span> <span class='settings-category'>$2</span>
<i class='icon-arrow' style='margin-left:8px'></i> <i class='icon-arrow' style='margin-left:8px'></i>
</li>", </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'> <label class='gui-settings-checkbox-container'>
<input key='$2' type='checkbox' dependencies='$3' checked/> <input key='$2' type='checkbox' dependencies='$3' checked/>
<div class='gui-settings-checkbox'></div> <div class='gui-settings-checkbox'></div>
<span>$4</span> <span>$4</span>
</label> </label>
</li>", </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'> <label class='gui-settings-dropdown-container'>
<span class='gui-settings-dropdown-span'>$4</span> <span class='gui-settings-dropdown-span'>$4</span>
<div class='gui-settings-dropdown popup'> <div class='gui-settings-dropdown popup'>
@ -216,7 +216,7 @@ namespace BilibiliEvolved.Build
</div> </div>
</label> </label>
</li>", </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'> <label class='gui-settings-textbox-container'>
<span>$4</span> <span>$4</span>
<input key='$2' dependencies='$3' spellcheck='false' type='text' /> <input key='$2' dependencies='$3' spellcheck='false' type='text' />

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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}}}})();

View File

@ -218,6 +218,7 @@ body.dark .gui-settings-widgets
visibility: collapse; visibility: collapse;
transition: all 0.2s; transition: all 0.2s;
width: 0; width: 0;
position: absolute;
} }
.gui-settings-checkbox-container .gui-settings-ok .gui-settings-checkbox-container .gui-settings-ok
{ {

View File

@ -1,68 +1,66 @@
export class SettingsSearch export class SettingsSearch {
{ constructor () {
constructor() this.input = document.querySelector('.gui-settings-search')
{ const items = [...document.querySelectorAll('.gui-settings-content>ul>li')]
this.input = document.querySelector(".gui-settings-search"); const ifCategory = condition => item => item.classList.contains('category') === condition
const items = [...document.querySelectorAll(".gui-settings-content>ul>li")]; this.categories = items.filter(ifCategory(true))
const ifCategory = condition => item => item.classList.contains("category") === condition; this.items = items.filter(ifCategory(false))
this.categories = items.filter(ifCategory(true)); this.importToolTips().then(() => this.input.addEventListener('input', () => this.keywordChange()))
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() const { toolTips } = await import(`settings-tooltip.${getI18nKey()}`)
{ this.toolTips = toolTips
if (typeof getI18nKey === "undefined") }
{ keywordChange () {
console.error("请更新脚本后再使用设置搜索功能."); const value = this.input.value.trim()
return; if (!value) {
} this.categories.concat(this.items).forEach(it => it.classList.add('folded'))
const { toolTips } = await import(`settings-tooltip.${getI18nKey()}`); return
this.toolTips = toolTips;
} }
keywordChange() this.items.forEach(item => {
{ const key = item.querySelector('input').getAttribute('key')
const value = this.input.value.trim(); const tooltip = this.toolTips.get(key)
if (!value) let texts = Resource.displayNames[key]
{ if (tooltip !== undefined) {
this.categories.concat(this.items).forEach(it => it.classList.add("folded")); texts += tooltip.replace(/<.*>|<\/.*>/g, '')
return; }
} if (texts.includes(value)) {
this.items.forEach(item => item.classList.remove('folded')
{ const dependencies = item.getAttribute('data-dependencies')
const key = item.querySelector("input").getAttribute("key"); if (dependencies !== undefined) {
const texts = Resource.displayNames[key] + this.toolTips.get(key).replace(/<.*>|<\/.*>/g, ""); dependencies.split(' ').forEach(dependency => {
if (texts.includes(value)) const parent = this.items.find(item => item.getAttribute('data-key') === dependency)
{ if (parent !== undefined) {
item.classList.remove("folded"); 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 default {
export: { SettingsSearch }, export: { SettingsSearch }
}; }