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>
<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.

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;
transition: all 0.2s;
width: 0;
position: absolute;
}
.gui-settings-checkbox-container .gui-settings-ok
{

View File

@ -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 }
}