add automatic enabling and disabling of UI elements based on existence of elements
This commit is contained in:
		
							parent
							
								
									94b01ea25b
								
							
						
					
					
						commit
						c4e4f5a29b
					
				
					 2 changed files with 40 additions and 2 deletions
				
			
		|  | @ -44,7 +44,8 @@ | |||
|                     <legend data-text="filters"></legend> | ||||
|                     <label data-text="settings_filters_description"></label> | ||||
|                     <div class="field-row action-buttons"> | ||||
|                         <button data-action="filters,update" data-text="settings_filters_update"></button> | ||||
|                         <button data-action="filters,update" data-text="settings_filters_update" | ||||
|                             data-enable="filters"></button> | ||||
|                         <button href="settings/filters" tab-height="607.5" tab-width="1080" | ||||
|                             data-text="settings_filters_open"></button> | ||||
|                     </div> | ||||
|  | @ -66,7 +67,8 @@ | |||
|                     <legend data-text="storage"></legend> | ||||
|                     <label data-text="settings_storage_description"></label> | ||||
|                     <div class="field-row action-buttons"> | ||||
|                         <button data-text="settings_storage_clear" data-action="storage,clear"></button> | ||||
|                         <button data-text="settings_storage_clear" data-enable="sites" | ||||
|                             data-action="storage,clear"></button> | ||||
|                     </div> | ||||
|                 </fieldset> | ||||
|             </section> | ||||
|  |  | |||
|  | @ -307,9 +307,45 @@ class windowman { | |||
|       links(); | ||||
|     } | ||||
| 
 | ||||
|     /* | ||||
|     Update the interface based on the storage data changes. | ||||
|     */ | ||||
|     async function updates() { | ||||
|       // Import the module.
 | ||||
|       const secretariat = await import( | ||||
|         chrome.runtime.getURL("scripts/secretariat.js") | ||||
|       ); | ||||
| 
 | ||||
|       // Get the storage data.
 | ||||
|       let storage_data = await secretariat.read(); | ||||
| 
 | ||||
|       async function update_interface() { | ||||
|         let input_elements = document.querySelectorAll("[data-enable]"); | ||||
| 
 | ||||
|         if (input_elements) { | ||||
|           input_elements.forEach((input_element) => { | ||||
|             (async () => { | ||||
|               input_element.disabled = | ||||
|                 (await secretariat.read( | ||||
|                   input_element.getAttribute("data-enable"), | ||||
|                 )) == null; | ||||
|             })(); | ||||
|           }); | ||||
|         } | ||||
|       } | ||||
| 
 | ||||
|       // Update the input elements.
 | ||||
|       secretariat.observe((what) => { | ||||
|         update_interface(); | ||||
|       }); | ||||
| 
 | ||||
|       update_interface(); | ||||
|     } | ||||
| 
 | ||||
|     storage(); | ||||
|     functionality(); | ||||
|     actions(); | ||||
|     updates(); | ||||
|   } | ||||
| } | ||||
| 
 | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue