modernize website
This commit is contained in:
@@ -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 );
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
};
|
||||
};
|
||||
|
||||
$( () => {
|
||||
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 );
|
||||
} );
|
||||
Reference in New Issue
Block a user