fixed autohide and added initial search

This commit is contained in:
buzz-lightsnack-2007 2024-04-02 19:57:55 +08:00
parent 4b1b095f08
commit 4c2f0cdfdf
2 changed files with 60 additions and 19 deletions

View file

@ -9,23 +9,30 @@
<body> <body>
<main class="dual"> <main class="dual">
<side class="side"> <side class="side sidebar">
<nav class="nav-wrapper"> <nav class="nav-wrapper">
<div class="input-field"> <ul class="left">
<input type="search" data-result="filters" for="settings_filters_search_prompt"></input> <li for="extension_name" class="flow-text"></li>
</div> </ul>
<ul class="hide-on-med-and-up right">
<li><a data-icon="chevron-left" data-action="ui,close,navbar"></a></li>
</ul>
</nav> </nav>
<div class="input-field outlined">
<input type="search" data-result="filters" placeholder=" "></input>
<label for="settings_filters_search_prompt"></label>
</div>
<div class="collection" data-results-target="filters" data-results-filters="url"> <div class="collection" data-results-target="filters" data-results-filters="url">
</div> </div>
</side> </side>
<section> <section>
<nav class="nav-wrapper"> <nav class="nav-wrapper">
<ul class="left"> <ul class="left">
<li><a class="waves-effect" data-icon="menu" id="menu_trigger"></a></li> <li><a class="hide-on-med-and-up" data-icon="menu" data-action="ui,open,navbar"></a></li>
</ul> </ul>
<ul class="right"> <ul class="right">
<li><a class="waves-effect" data-icon="trash-can" data-action="filters,delete,one"></a></li> <li><a data-icon="trash-can" data-action="filters,delete,one"></a></li>
<li><a class="waves-effect" data-icon="sync" data-action="filters,update,one"></a></li> <li><a data-icon="sync" data-action="filters,update,one"></a></li>
</ul> </ul>
</nav> </nav>
<section> <section>
@ -39,7 +46,8 @@
<side class="fixed-action-btn"> <side class="fixed-action-btn">
<button class="btn-floating btn-large" data-icon="plus" accesskey="+" data-action="filters,add,one"></button> <button class="btn-floating btn-large" data-icon="plus" accesskey="+" data-action="filters,add,one"></button>
<ul> <ul>
<li><button data-action="filters,update" class="btn-floating waves-effect" title-for="settings_filters_update" data-icon="refresh" accesskey="r"></button></li> <li><button data-action="filters,update" class="btn-floating waves-effect"
title-for="settings_filters_update" data-icon="refresh" accesskey="r"></button></li>
</ul> </ul>
</side> </side>
</body> </body>

View file

@ -343,7 +343,39 @@ export default class windowman {
} }
/* Enable the searching interface. */ /* Enable the searching interface. */
function search() {} function search() {
document.querySelectorAll(`[data-result]`).forEach((element) => {
// Begin searching when the textbox is changed.
element.addEventListener(`change`, async function () {
let search = {};
search[`criteria`] = element.value;
if (search[`criteria`]) {
if (
element.getAttribute(`data-results-filters`)
? element.getAttribute(`data-results-filters`).trim()
: false
) {
search[`additional criteria`] = element
.getAttribute(`data-results-filters`)
.split(`,`);
}
search[`source`] = element.getAttribute(`data-result`);
search[`raw`] = await (async () => {
const secretariat = await import(
chrome.runtime.getURL(`scripts/secretariat.js`)
);
await secretariat.search(
search[`source`],
search[`criteria`],
null,
search[`additional criteria`],
);
})();
}
});
});
}
// Responsiveness to different screen sizes. // Responsiveness to different screen sizes.
function resize() { function resize() {
@ -398,6 +430,7 @@ export default class windowman {
window.addEventListener("resize", resize); window.addEventListener("resize", resize);
resize(); resize();
search();
links(); links();
} }