1 files changed, 231 insertions, 220 deletions
diff --git a/view/theme/redbasic/js/redbasic.js b/view/theme/redbasic/js/redbasic.js
index 76d6c0854..144714b50 100644
--- a/view/theme/redbasic/js/redbasic.js
+++ b/view/theme/redbasic/js/redbasic.js
@@ -2,243 +2,254 @@
  * redbasic theme specific JavaScript
  */
 
-let redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode');
-let redbasic_theme_color = localStorage.getItem('redbasic_theme_color');
+const redbasic_dark_mode = localStorage.getItem('redbasic_dark_mode');
+const redbasic_theme_color = localStorage.getItem('redbasic_theme_color');
 
 if (redbasic_dark_mode == 1) {
-	$('html').attr('data-bs-theme', 'dark');
+    document.documentElement.setAttribute('data-bs-theme', 'dark');
 }
 
 if (redbasic_dark_mode == 0) {
-	$('html').attr('data-bs-theme', 'light');
+    document.documentElement.setAttribute('data-bs-theme', 'light');
 }
 
 if (redbasic_theme_color) {
-	$('meta[name=theme-color]').attr('content', redbasic_theme_color);
+    document.querySelector('meta[name=theme-color]').setAttribute('content', redbasic_theme_color);
 }
 
-$(document).ready(function() {
-	// provide a fake progress bar for pwa standalone mode
-	if (window.matchMedia('(display-mode: standalone)').matches) {
-		$(window).on('beforeunload', function(){
-			if ($('.page-loader').length) {
-				return;
-			}
-			$('<div class="bg-primary page-loader"></div>').prependTo('body');
-		});
-	}
-
-	if (redbasic_dark_mode == 1) {
-		$('#theme-switch-icon').removeClass('bi-moon').addClass('bi-sun');
-		$('[data-bs-theme="light"]').attr('data-bs-theme', 'dark');
-	}
-	if (redbasic_dark_mode == 0) {
-		$('#theme-switch-icon').removeClass('bi-sun').addClass('bi-moon');
-		$('[data-bs-theme="dark"]:not(nav)').attr('data-bs-theme', 'light');
-	}
-
-	if (redbasic_theme_color != $('nav').css('background-color')) {
-		$('meta[name=theme-color]').attr('content', $('nav').css('background-color'));
-		localStorage.setItem('redbasic_theme_color', $('nav').css('background-color'));
-	}
-
-	// CSS3 calc() fallback (for unsupported browsers)
-	$('body').append('<div id="css3-calc" style="width: 10px; width: calc(10px + 10px); display: none;"></div>');
-	if( $('#css3-calc').width() == 10) {
-		$(window).resize(function() {
-			if($(window).width() < 992) {
-				$('main').css('width', $(window).width() + $('aside').outerWidth() );
-			} else {
-				$('main').css('width', '100%');
-			}
-		});
-	}
-	$('#css3-calc').remove(); // Remove the test element
-
-	if($(window).width() < 1200) {
-		$("#right_aside_wrapper").children().detach().appendTo('#left_aside_wrapper');
-		$('#notifications_wrapper').addClass('d-none');
-	}
-
-
-	if (document.querySelector('#region_1')) {
-		stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20);
-	}
-
-	if (document.querySelector('#region_3')) {
-		stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20);
-	}
-
-	$('.usermenu').click(function() {
-		if($('#navbar-collapse-1, #navbar-collapse-2').hasClass('show')){
-			$('#navbar-collapse-1, #navbar-collapse-2').removeClass('show');
-		}
-	});
-
-	$('#theme-switch').click(function() {
-		if ($('html').attr('data-bs-theme') === 'dark') {
-			if ($('nav').data('bs-theme') === 'dark') {
-				$('[data-bs-theme="dark"]:not(nav)').attr('data-bs-theme', 'light');
-			}
-			else {
-				$('[data-bs-theme="dark"]').attr('data-bs-theme', 'light');
-			}
-			localStorage.setItem('redbasic_dark_mode', 0);
-			$('#theme-switch-icon').removeClass('bi-sun').addClass('bi-moon');
-		}
-		else {
-			$('[data-bs-theme="light"]').attr('data-bs-theme', 'dark');
-			localStorage.setItem('redbasic_dark_mode', 1);
-			$('#theme-switch-icon').removeClass('bi-moon').addClass('bi-sun');
-		}
-		$('meta[name=theme-color]').attr('content', $('nav').css('background-color'));
-		localStorage.setItem('redbasic_theme_color', $('nav').css('background-color'));
-	});
-
-
-	$('#menu-btn').click(function() {
-		if($('#navbar-collapse-1').hasClass('show')){
-			$('#navbar-collapse-1').removeClass('show');
-		}
-	});
-
-	$('.notifications-btn').click(function(e) {
-		e.preventDefault();
-		e.stopPropagation();
-		if($('#navbar-collapse-2').hasClass('show')){
-			$('#navbar-collapse-2').removeClass('show');
-		}
-	});
-
-	$("input[data-role=cat-tagsinput]").tagsinput({
-		tagClass: 'badge rounded-pill bg-warning text-dark'
-	});
-
-	$('a.disabled').click(function(e) {
-		e.preventDefault();
-		e.stopPropagation();
-	});
-
-	var doctitle = document.title;
-	function checkNotify() {
-		var notifyUpdateElem = document.getElementById('notify-update');
-		if(notifyUpdateElem !== null) {
-			if(notifyUpdateElem.innerHTML !== "")
-				document.title = "(" + notifyUpdateElem.innerHTML + ") " + doctitle;
-			else
-				document.title = doctitle;
-		}
-	}
-	setInterval(function () {checkNotify();}, 10 * 1000);
-
-	var touch_start = null;
-	var touch_max = window.innerWidth / 10;
-
-	window.addEventListener('touchstart', function(e) {
-		if (e.touches.length === 1){
-			//just one finger touched
-			touch_start = e.touches.item(0).clientX;
-			if (touch_start < touch_max) {
-				$('body').css('overflow-y', 'hidden');
-			}
-		}
-		else {
-			//a second finger hit the screen, abort the touch
-			touch_start = null;
-		}
-	});
-
-	window.addEventListener('touchend', function(e) {
-		$('body').css('overflow-y', '');
-
-		let touch_offset = 30; //at least 30px are a swipe
-		if (touch_start) {
-			//the only finger that hit the screen left it
-			let touch_end = e.changedTouches.item(0).clientX;
-
-			if (touch_end > (touch_start + touch_offset)) {
-				//a left -> right swipe
-				if (touch_start < touch_max) {
-					toggleAside();
-				}
-			}
-			if (touch_end < (touch_start - touch_offset)) {
-				//a right -> left swipe
-			}
-		}
-	});
-
+document.addEventListener('DOMContentLoaded', function () {
+    // provide a fake progress bar for pwa standalone mode
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+        window.addEventListener('beforeunload', function () {
+            if (!document.querySelector('.page-loader')) {
+                let loader = document.createElement('div');
+                loader.classList.add('bg-primary', 'page-loader');
+                document.body.prepend(loader);
+            }
+        });
+    }
+
+    if (redbasic_dark_mode == 1) {
+        document.getElementById('theme-switch-icon').classList.remove('bi-moon');
+        document.getElementById('theme-switch-icon').classList.add('bi-sun');
+        document.querySelector('[data-bs-theme="light"]').setAttribute('data-bs-theme', 'dark');
+    }
+    if (redbasic_dark_mode == 0) {
+        document.getElementById('theme-switch-icon').classList.remove('bi-sun');
+        document.getElementById('theme-switch-icon').classList.add('bi-moon');
+        let darkElements = document.querySelectorAll('[data-bs-theme="dark"]:not(nav)');
+        darkElements.forEach(el => el.setAttribute('data-bs-theme', 'light'));
+    }
+
+    const navBackgroundColor = document.querySelector('nav').style.backgroundColor;
+    if (redbasic_theme_color !== navBackgroundColor) {
+        document.querySelector('meta[name=theme-color]').setAttribute('content', navBackgroundColor);
+        localStorage.setItem('redbasic_theme_color', navBackgroundColor);
+    }
+
+    // CSS3 calc() fallback (for unsupported browsers)
+    const testElem = document.createElement('div');
+    testElem.style.width = 'calc(10px + 10px)';
+    testElem.style.display = 'none';
+    testElem.id = 'css3-calc';
+    document.body.appendChild(testElem);
+
+    if (testElem.offsetWidth === 10) {
+        window.addEventListener('resize', function () {
+            if (window.innerWidth < 992) {
+                document.querySelector('main').style.width = `${window.innerWidth + document.querySelector('aside').offsetWidth}px`;
+            } else {
+                document.querySelector('main').style.width = '100%';
+            }
+        });
+    }
+    testElem.remove(); // Remove the test element
+
+    if (window.innerWidth < 1200) {
+        const rightAsideWrapper = document.getElementById("right_aside_wrapper");
+        const leftAsideWrapper = document.getElementById("left_aside_wrapper");
+        const notificationsWrapper = document.getElementById("notifications_wrapper");
+
+        if (leftAsideWrapper && rightAsideWrapper) {
+            const children = rightAsideWrapper.children;
+            if (children.length) {
+                leftAsideWrapper.append(...children);
+            }
+        }
+
+        if (notificationsWrapper) {
+            notificationsWrapper.classList.add('d-none');
+        }
+    }
+
+    if (document.getElementById('region_1')) {
+        stickyScroll('.aside_spacer_left', '.aside_spacer_top_left', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20);
+    }
+
+    if (document.getElementById('region_3')) {
+        stickyScroll('.aside_spacer_right', '.aside_spacer_top_right', 'section', parseFloat(document.querySelector('main').getBoundingClientRect().top), 20);
+    }
+
+    document.querySelectorAll('.usermenu').forEach(function (element) {
+        element.addEventListener('click', function () {
+            let navCollapse = document.querySelectorAll('#navbar-collapse-1, #navbar-collapse-2');
+            navCollapse.forEach(function (nav) {
+                if (nav.classList.contains('show')) {
+                    nav.classList.remove('show');
+                }
+            });
+        });
+    });
+
+    document.getElementById('theme-switch').addEventListener('click', function () {
+        const html = document.documentElement;
+        if (html.getAttribute('data-bs-theme') === 'dark') {
+            let nav = document.querySelector('nav');
+            if (nav.dataset.bsTheme === 'dark') {
+                document.querySelectorAll('[data-bs-theme="dark"]:not(nav)').forEach(function (el) {
+                    el.setAttribute('data-bs-theme', 'light');
+                });
+            } else {
+                document.querySelector('[data-bs-theme="dark"]').setAttribute('data-bs-theme', 'light');
+            }
+            localStorage.setItem('redbasic_dark_mode', 0);
+            document.getElementById('theme-switch-icon').classList.remove('bi-sun');
+            document.getElementById('theme-switch-icon').classList.add('bi-moon');
+        } else {
+            document.querySelectorAll('[data-bs-theme="light"]').forEach(function (el) {
+                el.setAttribute('data-bs-theme', 'dark');
+            });
+            localStorage.setItem('redbasic_dark_mode', 1);
+            document.getElementById('theme-switch-icon').classList.remove('bi-moon');
+            document.getElementById('theme-switch-icon').classList.add('bi-sun');
+        }
+        document.querySelector('meta[name=theme-color]').setAttribute('content', document.querySelector('nav').style.backgroundColor);
+        localStorage.setItem('redbasic_theme_color', document.querySelector('nav').style.backgroundColor);
+    });
+
+    document.getElementById('menu-btn').addEventListener('click', function () {
+        const navCollapse = document.getElementById('navbar-collapse-1');
+        if (navCollapse && navCollapse.classList.contains('show')) {
+            navCollapse.classList.remove('show');
+        }
+    });
+
+    $("input[data-role=cat-tagsinput]").tagsinput({
+        tagClass: 'badge rounded-pill bg-warning text-dark'
+    });
+
+    document.querySelectorAll('a.disabled').forEach(function (link) {
+        link.addEventListener('click', function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+    });
+
+    const doctitle = document.title;
+    function checkNotify() {
+        let notifyUpdateElem = document.getElementById('notify-update');
+        if (notifyUpdateElem && notifyUpdateElem.innerHTML !== '') {
+            document.title = '(' + notifyUpdateElem.innerHTML + ') ' + doctitle;
+        } else {
+            document.title = doctitle;
+        }
+    }
+
+    setInterval(checkNotify, 10 * 1000);
+
+    let touch_start = null;
+    const touch_max = window.innerWidth / 10;
+
+    window.addEventListener('touchstart', function (e) {
+        if (e.touches.length === 1) {
+            touch_start = e.touches[0].clientX;
+            if (touch_start < touch_max) {
+                document.body.style.overflowY = 'hidden';
+            }
+        } else {
+            touch_start = null;
+        }
+    });
+
+    window.addEventListener('touchend', function (e) {
+        document.body.style.overflowY = '';
+        let touch_offset = 30; // at least 30px are a swipe
+        if (touch_start) {
+            let touch_end = e.changedTouches[0].clientX;
+            if (touch_end > (touch_start + touch_offset)) {
+                if (touch_start < touch_max) {
+                    toggleAside();
+                }
+            }
+            if (touch_end < (touch_start - touch_offset)) {
+                // a right -> left swipe
+            }
+        }
+    });
 });
 
 function setStyle(element, cssProperty) {
-	for (var property in cssProperty){
-		element.style[property] = cssProperty[property];
-	}
+    for (let property in cssProperty) {
+        element.style[property] = cssProperty[property];
+    }
 }
 
 function stickyScroll(sticky, stickyTop, container, topOffset, bottomOffset) {
-
-	var lastScrollTop = 0;
-	var sticky = document.querySelector(sticky);
-
-	if (!sticky) {
-		return;
-	}
-
-	var stickyHeight = sticky.getBoundingClientRect().height;
-	var stickyTop = document.querySelector(stickyTop);
-	var content = document.querySelector(container);
-	var diff = window.innerHeight - stickyHeight;
-	var h = 0;
-	var lasth = 0;
-	var st = window.pageYOffset || document.documentElement.scrollTop;
-
-	var resizeObserver = new ResizeObserver(function(entries) {
-		stickyHeight = sticky.getBoundingClientRect().height;
-		st = window.pageYOffset || document.documentElement.scrollTop;
-		diff = window.innerHeight - stickyHeight;
-	});
-
-	resizeObserver.observe(sticky);
-	resizeObserver.observe(content);
-
-	window.addEventListener('scroll', function() {
-		if(window.innerHeight > stickyHeight + topOffset) {
-			setStyle(stickyTop, { height: 0 + 'px' });
-			setStyle(sticky, { position: 'sticky', top: topOffset + 'px'});
-		}
-		else {
-			st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
-			if (st > lastScrollTop){
-				// downscroll code
-				setStyle(stickyTop, { height: lasth + 'px' });
-				setStyle(sticky, { position: 'sticky', top: Math.round(diff) - bottomOffset + 'px', bottom: '' });
-			} else {
-				// upscroll code
-				h = sticky.getBoundingClientRect().top - content.getBoundingClientRect().top;
-				if(Math.round(stickyTop.getBoundingClientRect().height) === lasth) {
-					setStyle(stickyTop, { height: Math.round(h) + 'px' });
-				}
-				lasth = Math.round(h);
-				setStyle(sticky, { position: 'sticky', top: '', bottom: Math.round(diff) - topOffset + 'px' });
-			}
-			lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
-		}
-	}, false);
-
+    let lastScrollTop = 0;
+    let stickyElement = document.querySelector(sticky);
+
+    if (!stickyElement) {
+        return;
+    }
+
+    let stickyHeight = stickyElement.getBoundingClientRect().height;
+    const stickyTopElement = document.querySelector(stickyTop);
+    const content = document.querySelector(container);
+    let diff = window.innerHeight - stickyHeight;
+
+    let h = 0;
+    let lasth = 0;
+    let st = window.pageYOffset || document.documentElement.scrollTop;
+
+    let resizeObserver = new ResizeObserver(function () {
+        stickyHeight = stickyElement.getBoundingClientRect().height;
+        st = window.pageYOffset || document.documentElement.scrollTop;
+        diff = window.innerHeight - stickyHeight;
+    });
+
+    resizeObserver.observe(stickyElement);
+    resizeObserver.observe(content);
+
+    window.addEventListener('scroll', function () {
+        if (window.innerHeight > stickyHeight + topOffset) {
+            setStyle(stickyTopElement, { height: '0px' });
+            setStyle(stickyElement, { position: 'sticky', top: `${topOffset}px` });
+        } else {
+            st = window.pageYOffset || document.documentElement.scrollTop;
+            if (st > lastScrollTop) {
+                setStyle(stickyTopElement, { height: `${lasth}px` });
+                setStyle(stickyElement, { position: 'sticky', top: `${Math.round(diff) - bottomOffset}px`, bottom: '' });
+            } else {
+                h = stickyElement.getBoundingClientRect().top - content.getBoundingClientRect().top;
+                if (Math.round(stickyTopElement.getBoundingClientRect().height) === lasth) {
+                    setStyle(stickyTopElement, { height: `${Math.round(h)}px` });
+                }
+                lasth = Math.round(h);
+                setStyle(stickyElement, { position: 'sticky', top: '', bottom: `${Math.round(diff) - topOffset}px` });
+            }
+            lastScrollTop = st <= 0 ? 0 : st;
+        }
+    }, false);
 }
 
 function makeFullScreen(full) {
-	if(typeof full=='undefined' || full == true) {
-		$('main').addClass('fullscreen');
-		$('header, nav, aside, #fullscreen-btn').attr('style','display:none !important');
-		$('#inline-btn').show();
-	}
-	else {
-		$('main').removeClass('fullscreen');
-		$('header, nav, aside, #fullscreen-btn').show();
-		$('#inline-btn').hide();
-	}
+    if (typeof full === 'undefined' || full === true) {
+        document.querySelector('main').classList.add('fullscreen');
+        document.getElementById('fullscreen-btn').style.display = 'none';
+        document.getElementById('inline-btn').style.display = 'inline-block';
+    } else {
+        document.querySelector('main').classList.remove('fullscreen');
+        document.getElementById('fullscreen-btn').style.display = '';
+        document.getElementById('inline-btn').style.display = 'none';
+    }
 }
-
-