Watch the demo
diff --git a/website/js/docs/loader.js b/website/js/docs/loader.js
index f55bebc..94a8b91 100644
--- a/website/js/docs/loader.js
+++ b/website/js/docs/loader.js
@@ -4,67 +4,32 @@ theme = sessionStorage.getItem( 'theme' ) || getPreferredTheme();
$( document ).ready( function () {
$( '#nav' ).load( '/docs/nav.html' );
$( '#top' ).load( '/docs/top.html' );
- setTimeout( setTheme, 300 );
} );
-
-
// set theme on page load
+theme = localStorage.getItem( 'theme' ) ?? '';
+if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || theme === 'dark' ) {
+ document.documentElement.classList.add( 'dark' );
+ setTimeout( () => {
+ document.getElementById( 'darkToggle' ).innerHTML = '☼';
+ }, 300 );
+ localStorage.setItem( 'theme', 'dark' );
+} else {
+ document.documentElement.classList.add( 'light' );
+ localStorage.setItem( 'theme', 'light' );
+}
+
function setTheme () {
- if ( theme == 'dark' ) {
- document.getElementById( 'darkToggle' ).innerHTML = '☼';
- $( '.content' ).css( 'background-color', 'rgb(46, 46, 46)' );
- $( '.top-container' ).css( 'background-color', 'rgb(100, 100, 100)' );
- $( '.content' ).css( 'color', 'white' );
- $( '.nav-subitem' ).css( 'background-color', 'rgb(18, 18, 99)' );
- $( '.navitem' ).css( 'background-color', 'rgb(12, 12, 60)' );
- $( '.nav-container' ).css( 'background-color', 'rgb(0, 0, 100)' );
- $( '#doc-container a' ).css( 'color', 'white' );
- $( '#darkToggle' ).css( 'color', 'white' );
- }
-}
-
-// retreive preferred theme from browser preferences if not in session storage
-function getPreferredTheme () {
- if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
- setPreferredTheme( 'dark' );
- return 'dark';
- } else {
- setPreferredTheme( 'light' );
- return 'light';
- };
-}
-
-// set theme in session storage
-function setPreferredTheme ( userTheme ) {
- sessionStorage.setItem( 'theme', userTheme );
- theme = userTheme;
-}
-
-// change theme
-function toggleDarkMode () {
- if ( theme == 'light' ) {
- $( '.content' ).animate( { 'background-color': 'rgb(46, 46, 46)' } );
- $( '.content' ).animate( { 'color': 'white' } );
- $( '#doc-container a' ).animate( { 'color': 'white' } );
- $( '.top-container' ).animate( { 'background-color': 'rgb(100, 100, 100)' } );
- $( '.nav-subitem' ).animate( { 'background-color': 'rgb(18, 18, 99)' } );
- $( '.navitem' ).animate( { 'background-color': 'rgb(12, 12, 60)' } );
- $( '.nav-container' ).animate( { 'background-color': 'rgb(0, 0, 100)' } );
- $( '#darkToggle' ).animate( { 'color': 'white' } );
- document.getElementById( 'darkToggle' ).innerHTML = '☼';
- setPreferredTheme( 'dark' );
- } else {
- $( '.content' ).animate( { 'background-color': 'white' } );
- $( '.content' ).animate( { 'color': 'black' } );
- $( '#doc-container a' ).animate( { 'color': 'blue' } );
- $( '.nav-subitem' ).animate( { 'background-color': 'rgb(27, 27, 165)' } );
- $( '.navitem' ).animate( { 'background-color': 'rgb(22, 22, 117)' } );
- $( '.nav-container' ).animate( { 'background-color': 'blue' } );
- $( '.top-container' ).animate( { 'background-color': 'rgb(223, 223, 223)' } );
- $( '#darkToggle' ).animate( { 'color': 'black' } );
+ theme = localStorage.getItem( 'theme' ) ?? '';
+ if ( theme === 'dark' ) {
document.getElementById( 'darkToggle' ).innerHTML = '☽';
- setPreferredTheme( 'light' );
+ document.documentElement.classList.remove( 'dark' );
+ document.documentElement.classList.add( 'light' );
+ localStorage.setItem( 'theme', 'light' );
+ } else if ( theme === 'light' ) {
+ document.getElementById( 'darkToggle' ).innerHTML = '☼';
+ document.documentElement.classList.remove( 'light' );
+ document.documentElement.classList.add( 'dark' );
+ localStorage.setItem( 'theme', 'dark' );
}
- setTimeout( highlightPath, 1000 );
}
diff --git a/website/js/docs/nav.js b/website/js/docs/nav.js
index d265358..ec82e2b 100644
--- a/website/js/docs/nav.js
+++ b/website/js/docs/nav.js
@@ -1,86 +1,23 @@
-let bannedIDs = [];
-
-function highlightPath () {
- if ( $( location ).attr( 'pathname' ).slice( 6, location.pathname.length ) === '' ) {
- $( '#home' ).animate( { 'background-color': 'black' }, 200 );
- bannedIDs.push( 'home' );
- } else if ( $( location ).attr( 'pathname' ).slice( 6, location.pathname.length ) === 'gettingStarted.html' ) {
- $( '#gettingStarted' ).animate( { 'background-color': 'black' }, 200 );
- bannedIDs.push( 'gettingStarted' );
- } else if ( $( location ).attr( 'pathname' ).slice( 6, 16 ) === 'reference/' ) {
- $( '#referenceNav' ).animate( { 'background-color': 'black' }, 200 );
- $( '#reference' ).slideDown();
- bannedIDs.push( 'referenceNav' );
- setTimeout( highlightSubPath( 16 ), 300 );
- } else if ( $( location ).attr( 'pathname' ).slice( 6, 14 ) === 'plugins/' ) {
- $( '#pluginsNav' ).animate( { 'background-color': 'black' }, 200 );
- $( '#plugins' ).slideDown();
- bannedIDs.push( 'pluginsNav' );
- setTimeout( highlightSubPath( 14 ), 300 );
- } else if ( $( location ).attr( 'pathname' ).slice( 6, 19 ) === 'contributing/' ) {
- $( '#contributingNav' ).animate( { 'background-color': 'black' }, 200 );
- $( '#contributing' ).slideDown();
- bannedIDs.push( 'contributingNav' );
- if ( $( location ).attr( 'pathname' ).length < 21 ) {
- $( '#contributing-gettingStarted' ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 200 );
- bannedIDs.push( 'contributing-gettingStarted' );
- } else {
- setTimeout( highlightSubPath( 19 ), 300 );
- };
- }
-};
-
-function highlightSubPath ( sliceStart ) {
- if ( $( location ).attr( 'pathname' ).slice( sliceStart, parseInt( location.pathname.length ) - 5 ) === '' ) {
- if ( $(location).attr( 'pathname' ).slice( 6, 13 ) === 'plugins' ) {
- $( '#plugins-home' ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 200 );
- } else {
- $( '#root' ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 200 );
- }
- bannedIDs.push( 'root' );
- } else {
- $( `#${location.pathname.slice( sliceStart, parseInt( location.pathname.length ) - 5 )}` ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 200 );
- bannedIDs.push( `${location.pathname.slice( sliceStart, parseInt( location.pathname.length ) - 5 )}` );
- };
-}
-
-$( document ).ready( function () {
- $( '.navitem' ).mouseenter( function () {
- $( this ).stop();
- $( this ).animate( { 'background-color': 'black' }, 100 );
- } );
-
- $( '.navitem' ).mouseleave( function () {
- if ( !bannedIDs.includes( this.id ) ) {
- if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
- $( this ).stop();
- $( this ).animate( { 'background-color': 'rgb(12, 12, 60)' }, 100 );
- } else {
- $( this ).stop();
- $( this ).animate( { 'background-color': 'rgb(22, 22, 117)' }, 100 );
- };
- };
- } );
-
- $( '.nav-subitem' ).mouseenter( function () {
- $( this ).stop();
- $( this ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 100 );
- } );
-
- $( '.nav-subitem' ).mouseleave( function () {
- if ( !bannedIDs.includes( this.id ) ) {
- if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
- $( this ).stop();
- $( this ).animate( { 'background-color': 'rgb(18, 18, 99)' }, 100 );
- } else {
- $( this ).stop();
- $( this ).animate( { 'background-color': 'rgb(27, 27, 165)' }, 100 );
- };
- };
- } );
- setTimeout( highlightPath, 300 );
-});
-
function toggleList ( id ) {
$( `#${id}` ).slideToggle();
-};
\ No newline at end of file
+};
+
+$( () => {
+ setTimeout( () => {
+ if ( location.pathname.substring( 6 ) === '' ) {
+ document.getElementById( 'home' ).classList.add( 'active' );
+ } else {
+ if ( location.pathname.substring( location.pathname.length - 1 ) === '/' ) {
+ document.getElementById( location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) + 'Nav' ).classList.add( 'active' );
+ document.getElementById( location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) + '-home' ).classList.add( 'active' );
+ $( '#' + location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) ).slideDown( 300 );
+ } else if( location.pathname.substring( 6 ).includes( '/' ) ) {
+ document.getElementById( location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) + 'Nav' ).classList.add( 'active' );
+ document.getElementById( location.pathname.substring( location.pathname.substring( 6 ).indexOf( '/' ) + 7, location.pathname.length - 5 ) ).classList.add( 'active' );
+ $( '#' + location.pathname.substring( 6, location.pathname.substring( 6 ).indexOf( '/' ) + 6 ) ).slideDown( 300 );
+ } else {
+ document.getElementById( location.pathname.substring( 6, location.pathname.length - 5 ) ).classList.add( 'active' );
+ }
+ }
+ }, 300 );
+} );
\ No newline at end of file
diff --git a/website/js/index.js b/website/js/index.js
index 5e5f278..f781652 100644
--- a/website/js/index.js
+++ b/website/js/index.js
@@ -1,15 +1,4 @@
$( document ).ready( function () {
$( '#navbar' ).load( '/nav.html' );
$( '#footer' ).load( '/footer.html' );
-
- $( document ).ready(function () {
- $( '.button' ).mouseenter( function () {
- $( this ).stop();
- $( this ).animate( { 'background-color':'rgba(65, 211, 65, 1)', 'border-radius': '0px' }, 200 );
- });
- $( '.button' ).mouseleave( function () {
- $( this ).stop();
- $( this ).animate( { 'background-color':'rgba(0, 128, 0, 1)', 'border-radius': '500px' }, 200 );
- });
- });
});
\ No newline at end of file