Changes and bugfixes

new: We now show a simple fade animation instead of sliding down on start new: We now hide main widget options if their visibility is tured off new: Rearranged and renamed some settings to be more intutive fix: We now switch to the last selected main widget style more reliably fix: One-handed mode should now completely push elements to the bottom fix: Fade background elements when Advanced Settings are opened to avoid inconsistent blurred background dev: Delayed load of intersection observer
lscambo13 · Dec 26, 2023 · 6faaf5e · 6faaf5e
1 parent 4b8b176
commit 6faaf5e
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 48 deletions.
diff --git a/animations.css b/animations.css
@@ -115,20 +115,22 @@
 }
 
 .startup_slide_down {
-    animation: startup_slide_down .5s;
+    padding-top: 10vh;
+    /* opacity: 0; */
+    /* animation: startup_slide_down .5s;
     animation-fill-mode: both;
-    animation-iteration-count: 1
+    animation-iteration-count: 1 */
 }
 
-@keyframes startup_slide_down {
+/* @keyframes startup_slide_down {
     0% {
         padding-top: 0
     }
 
     100% {
         padding-top: 10vh
     }
-}
+} */
 
 .animation_carousel_left_hide {
     animation: animation_carousel_left_hide 175ms;

diff --git a/index.html b/index.html
@@ -18,14 +18,14 @@
       });
     }
   </script> -->
-	<link rel="manifest" href="manifest.json?v=1703513727023">
+	<link rel="manifest" href="manifest.json?v=1703513727024">
 	<title>Search &bull; Casa Mia</title>
 	<link rel="icon" type="image/x-icon" href="./favicon.ico">
 	<meta name="theme-color" content="black">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta name="color-scheme" content="light only">
-	<link rel="stylesheet" href="./style.css?v=1703513727023" />
-	<script src="./index.js?v=1703513727023" type="module"></script>
+	<link rel="stylesheet" href="./style.css?v=1703513727024" />
+	<script src="./index.js?v=1703513727024" type="module"></script>
 	<link rel="preconnect" href="https://raw.githubusercontent.com" crossorigin />
 	<link rel="preconnect" href="https://fonts.bunny.net">
 	<link
@@ -129,21 +129,17 @@ <h1 id="widget-2" class="widget-slide brush-text-style-1 has-shadow">Welcome</h1
 					<option value="top">Off</option>
 					<option value="bottom">On</option>
 				</select></label>
-			<label for="searchbar-color-theme-drop" class="modal-option custom-dropdown">Searchbar theme <select
-					class="setting-preview" name="searchbar-color-theme-drop" id="searchbar-color-theme-drop">
-					<option value="glass">Glass</option>
-					<option value="light">Light</option>
-				</select></label>
-			<label for="add-bookmark-display-drop" class="modal-option custom-dropdown">Add bookmark button
-				<select class="setting-preview" name="add-bookmark-display-drop" id="add-bookmark-display-drop">
-					<option value="shown">Shown</option>
-					<option value="hidden">Hidden</option>
-				</select></label>
 		</div>
 		<div class="modal-group">
-			<p class="modal-title">Home Widgets</p><label for="def-widget-drop"
-				class="modal-option custom-dropdown">Default
-				widget <select class="setting-preview" name="def-widget-drop" id="def-widget-drop">
+			<p class="modal-title">Home Widgets</p>
+			<label for="def-widget-display-drop" class="modal-option custom-dropdown">Display main widget
+				<select class="setting-preview" name="def-widget-display-drop" id="def-widget-display-drop">
+					<option value="on">On</option>
+					<option value="off">Off</option>
+				</select></label>
+			<label id="def-widget-drop-container" for="def-widget-drop" class="modal-option custom-dropdown">Widget
+				style
+				<select class="setting-preview" name="def-widget-drop" id="def-widget-drop">
 					<option value="casamia">Casa Mia</option>
 					<option value="search">Search</option>
 					<option value="clock">Clock</option>
@@ -153,17 +149,11 @@ <h1 id="widget-2" class="widget-slide brush-text-style-1 has-shadow">Welcome</h1
 				<p>Custom widget text</p>
 				<p id="update-customtext-btn-preview" class="setting-preview">preview text</p>
 			</div>
-
 			<!-- <label for="widget-style-drop" class="modal-option custom-dropdown hidden">Widget style <select
 					class="setting-preview" name="widget-style-drop" id="widget-style-drop">
 					<option value="minimal">Minimal</option>
 					<option value="handwritten">Handwritten</option>
 				</select></label> -->
-			<label for="def-widget-display-drop" class="modal-option custom-dropdown">Display default widget
-				<select class="setting-preview" name="def-widget-display-drop" id="def-widget-display-drop">
-					<option value="on">On</option>
-					<option value="off">Off</option>
-				</select></label>
 			<label for="greeting-display-drop" class="modal-option custom-dropdown">Display
 				greeting
 				<select class="setting-preview" name="greeting-display-drop" id="greeting-display-drop">
@@ -205,6 +195,11 @@ <h1 id="widget-2" class="widget-slide brush-text-style-1 has-shadow">Welcome</h1
 					<option value="on">On</option>
 					<option value="off" selected="true">Off</option>
 				</select></label>
+			<label for="searchbar-color-theme-drop" class="modal-option custom-dropdown">Searchbar theme <select
+					class="setting-preview" name="searchbar-color-theme-drop" id="searchbar-color-theme-drop">
+					<option value="glass">Glass</option>
+					<option value="light">Light</option>
+				</select></label>
 			<div id="deep-search-btn" class="modal-option">
 				<p>Deep search options</p>
 				<p class="setting-preview fa fa-angle-down" aria-hidden="true">&ThinSpace;</p>
@@ -241,6 +236,11 @@ <h1 id="widget-2" class="widget-slide brush-text-style-1 has-shadow">Welcome</h1
 					<option value="on">On</option>
 					<option value="off">Off</option>
 				</select></label> -->
+			<label for="add-bookmark-display-drop" class="modal-option custom-dropdown">Add bookmark button
+				<select class="setting-preview" name="add-bookmark-display-drop" id="add-bookmark-display-drop">
+					<option value="shown">Shown</option>
+					<option value="hidden">Hidden</option>
+				</select></label>
 			<div id="fetch-bookmarks-btn" class="modal-option">
 				<p>Download sample bookmarks</p>
 				<!-- <p class="setting-preview"> </p> -->

diff --git a/index.js b/index.js
@@ -257,33 +257,22 @@ window.addEventListener('resize', () => {
 
 document.addEventListener('DOMContentLoaded', async () => {
 	const btnInstall = document.getElementById('btn-install');
+	let deferredPrompt;
 
 	setDefaultPreferences();
 	applyPreferences();
 	loadBookmarks();
-	let deferredPrompt;
-
-	displayFlex('bookmarks');
-	loadSelectedWidgetstyle();
-	// toggleClock('widget-slide');
-	// toggleGreeting('on');
-	// stylizeText('main-heading', 0);
+	loadDropdownPositions();
+	wrap.style.opacity = 1
 
 	await fetchWallpapersList();
-
-	// loadSettings();
 	setWallpaper(selectedWallpaper, color);
 	highlightSetWallpaper();
 
-	// // Make the DIV element draggable:
-	// dragElement(document.getElementById('labs'));
-
-	loadDropdownPositions();
 
 	addEventListenerOnClass('clickable', 'keypress', clickToEnter);
 	addEventListenerOnClass('custom_bookmark', 'click', displayLoading);
 	addEventListenerOnClass('cross', 'click', removeBookmark);
-	// addEventListenerOnClass('custom-button', 'click', saveButtonValues);
 	addEventListenerOnTag('select', 'change', saveDropdownPositions);
 
 	addEventListenerOnID('btn-install', 'click', (e) => {
@@ -301,11 +290,11 @@ document.addEventListener('DOMContentLoaded', async () => {
 		deferredPrompt = event;
 		btnInstall.style.display = 'block';
 	});
-	intersectionObserver('main-heading-slider', 'widget-slide');
 	scrollToBottom();
 	focusSearchBar('auto');
 	getLastUpdated('version-preview');
 	isItChristmas();
+	loadSelectedWidgetstyle();
 });
 
 // ---------------------------------------------------------- End

diff --git a/js_modules/load_preferences.js b/js_modules/load_preferences.js
@@ -6,6 +6,7 @@ import {
 } from './constants.js';
 import { displayClock, refreshGreeting } from './preferences.js';
 import { fixBackgroundBlurOnResize } from './utils.js';
+import { intersectionObserver } from './utils/intersectionObserver.js';
 
 const PREF_MAP = {
 	'bg-img-drop': backgroundImage,
@@ -109,16 +110,33 @@ export function focusSearchBar(value) {
 function displayWidget(value) {
 	const widget = document.getElementById('main-heading-slider');
 
+	function toggleDefaultWidgetButton(value) {
+		switch (value) {
+			case 'show': {
+				document.getElementById('def-widget-drop-container')
+					.classList.remove('nested-close');
+				break;
+			};
+			case 'hide': {
+				document.getElementById('def-widget-drop-container')
+					.classList.add('nested-close');
+				break;
+			};
+		}
+	}
 	switch (value) {
 		case 'off': {
 			widget.classList.add('hidden');
+			toggleDefaultWidgetButton('hide')
 			break;
 		};
 		case 'on': {
 			widget.classList.remove('hidden');
+			toggleDefaultWidgetButton('show')
 			break;
 		};
 	}
+
 };
 
 const widgetSlides = document.getElementsByClassName('widget-slide');
@@ -323,12 +341,14 @@ function defaultSearchbarPosition(value) {
 	switch (value) {
 		case 'top': {
 			searchbar.style.order = '0';
-			wrap.style.flex = '1';
+			document.body.style.justifyContent = 'space-between'
+			// wrap.style.flex = '1';
 			break;
 		};
 		case 'bottom': {
 			searchbar.style.order = '1';
-			wrap.style.flex = '0';
+			document.body.style.justifyContent = 'flex-end'
+			// wrap.style.flex = '0';
 			break;
 		};
 	}
@@ -388,7 +408,11 @@ export function updateCustomDomainPreview() {
 export function loadSelectedWidgetstyle() {
 	document.getElementById(localStorage.getItem('selected-widget-style'))
 		.scrollIntoView();
-	console.log('loading widget style');
+
+	setTimeout(() => {
+		intersectionObserver('main-heading-slider', 'widget-slide');
+	}, 500)
+	// console.log('loading widget style');
 }
 
 export function updateAmPmStyle(amPm) {

diff --git a/js_modules/modals/advanced_settings.js b/js_modules/modals/advanced_settings.js
@@ -1,18 +1,23 @@
 import { blurLevel } from "../utils/blurLevel.js";
 
 const modal = document.getElementById('advanced-settings-modal');
+const wrap = document.getElementById('wrap');
 const modalBackground =
 	document.getElementById('advanced-settings-modal-background-overlay');
 
 export function openAdvancedSettings() {
 	setTimeout(() => blurLevel(0), 420)
 	document.title = document.title.replace('Backgrounds', 'Settings');
+	document.body.classList.add('justifySpaceBetween')
+	wrap.style.opacity = 0
 	modal.style.display = 'block';
 	modalBackground.style.display = 'block';
 };
 
 export function closeAdvancedSettings() {
 	document.title = document.title.replace('Settings', 'Search');
+	document.body.classList.remove('justifySpaceBetween')
+	wrap.style.opacity = 1
 	modal.style.display = 'none';
 	modalBackground.style.display = 'none';
 	setTimeout(() => blurLevel(1), 100)

diff --git a/style.css b/style.css
@@ -75,12 +75,16 @@ body {
 	font-size: 14px;
 	display: flex;
 	flex-direction: column;
-	justify-content: space-between;
+	/* justify-content: space-between; */
 	min-height: 100vh;
 	min-height: 100svh;
 	align-items: center;
 }
 
+.justifySpaceBetween {
+	justify-content: space-between !important;
+}
+
 input[type=checkbox] {
 	width: 1em;
 	height: 1em;
@@ -157,20 +161,22 @@ input[type=checkbox] {
 #wrap {
 	max-width: 1280px;
 	width: 100%;
-	margin: auto;
+	opacity: 0;
+	/* margin: auto; */
 	/* flex: 1; */
 	z-index: 2;
 	display: block;
+	transition: 200ms;
 }
 
 body::-webkit-scrollbar {
 	-ms-overflow-style: none;
 	display: none;
 }
 
-#bookmarks {
+/* #bookmarks {
 	display: none;
-}
+} */
 
 .flex-main-container-vertical {
 	margin: auto;