Home Widgets
Deep search options
@@ -241,6 +236,11 @@Download sample bookmarks
diff --git a/index.js b/index.js index 764fcf9..7cc5642 100644 --- 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 index a4979a3..f4cd5e9 100644 --- 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 index 1b1c860..ed34a6c 100644 --- 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 index 5676679..24eb5f5 100644 --- 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,10 +161,12 @@ 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 { @@ -168,9 +174,9 @@ body::-webkit-scrollbar { display: none; } -#bookmarks { +/* #bookmarks { display: none; -} +} */ .flex-main-container-vertical { margin: auto;