fixed autohide and added initial search
This commit is contained in:
		
							parent
							
								
									4b1b095f08
								
							
						
					
					
						commit
						4c2f0cdfdf
					
				
					 2 changed files with 60 additions and 19 deletions
				
			
		|  | @ -9,38 +9,46 @@ | ||||||
| 
 | 
 | ||||||
| <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> | ||||||
| 				<article class=""> |                 <article class=""> | ||||||
| 					<h1 data-result-content="name" class="flow-text"></h1> |                     <h1 data-result-content="name" class="flow-text"></h1> | ||||||
| 					<p id="author" data-result-content="author"></p> |                     <p id="author" data-result-content="author"></p> | ||||||
| 					<p data-result-content="description"></p> |                     <p data-result-content="description"></p> | ||||||
| 			</section> |             </section> | ||||||
|         </section> |         </section> | ||||||
|     </main> |     </main> | ||||||
|     <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" | ||||||
| 		</ul> |                     title-for="settings_filters_update" data-icon="refresh" accesskey="r"></button></li> | ||||||
|  |         </ul> | ||||||
|     </side> |     </side> | ||||||
| </body> | </body> | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -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(); | ||||||
|       } |       } | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue