StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-28 08:10:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix display of theme toggle button if set to auto (#261)

Browse source 
Co-authored-by: Hannes <hannes@octofox.de>
This commit is contained in:
alistair3149 2021-01-31 12:38:37 -05:00 committed by GitHub
parent 071b1bb587
commit 6633f89033
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
includes/Partials/Theme.php
View file

@ -67,7 +67,7 @@ final class Theme extends Partial {
// Script content at 'skins.citizen.scripts.theme/inline.js
// @phpcs:ignore Generic.Files.LineLength.TooLong
$this->out->getOutput()->addHeadItem( 'theme-switcher', '<script>window.switchTheme=(()=>{try{const t=document.cookie.match(/skin-citizen-theme=(dark|light|auto)/),e=null!==t?t.pop():null;null!==e&&(document.documentElement.classList.remove(...["auto","dark","light"].map(t=>"skin-citizen-"+t)),document.documentElement.classList.add("skin-citizen-"+e))}catch(t){}}),window.switchTheme();</script>' );
$this->out->getOutput()->addHeadItem( 'theme-switcher', '<script>window.switchTheme=()=>{var e=t=>["auto","dark","light"].map(e=>t+e);const t=document.getElementById("theme-toggle");try{const c=document.cookie.match(/skin-citizen-theme=(dark|light|auto)/);var n=null!==c?c.pop():null;null!==n&&(document.documentElement.classList.remove(...e("skin-citizen-")),document.documentElement.classList.add("skin-citizen-"+n),t.classList.remove(...e("theme-toggle")),t.classList.add("theme-toggle-"+n))}catch(e){}},window.switchTheme();</script>' );
// Add styles and scripts module
if ( $theme === 'auto' ) {

19
resources/skins.citizen.scripts.theme/inline.js
View file

@ -3,17 +3,30 @@
* Citizen - Inline script used in SkinCitizen.php
*
* https://starcitizen.tools
*
* Mangle using https://jscompress.com/
*/
window.switchTheme = () => {
// Generates an array of prefix-(auto|dark|light) strings
const classNames = (prefix) => {
return ['auto', 'dark', 'light'].map(themeType => {
return prefix + themeType;
});
}
const themeToggle = document.getElementById('theme-toggle');
try {
const cookieTheme = document.cookie.match(/skin-citizen-theme=(dark|light|auto)/);
const theme = cookieTheme !== null ? cookieTheme.pop() : null;
if (theme !== null) {
document.documentElement.classList.remove(...['auto', 'dark', 'light'].map(theme => {
return 'skin-citizen-' + theme;
}));
// First remove all theme classes
document.documentElement.classList.remove(...classNames('skin-citizen-'));
// Then add the right one
document.documentElement.classList.add('skin-citizen-' + theme);
themeToggle.classList.remove(...classNames('theme-toggle'))
themeToggle.classList.add('theme-toggle-' + theme);
}
} catch (e) {
}

15
resources/skins.citizen.scripts/themeToggle.js
View file

@ -2,21 +2,18 @@ function init() {
var theme = window.mw.cookie.get( 'skin-citizen-theme' );
var toggleBtn = document.getElementById( 'theme-toggle' );
// * theme-toggle-light
// * theme-toggle-dark
toggleBtn.classList.add( 'theme-toggle-' + theme );
toggleBtn.addEventListener( 'click', function ( clickEvent ) {
theme = window.mw.cookie.get( 'skin-citizen-theme' );
try {
theme = theme === 'dark' ? 'light' : 'dark';
clickEvent.target.classList.remove( 'theme-toggle-light', 'theme-toggle-dark' );
clickEvent.target.classList.remove( 'theme-toggle-light', 'theme-toggle-dark', 'theme-toggle-auto' );
// * theme-toggle-light
// * theme-toggle-dark
clickEvent.target.classList.add( 'theme-toggle-' + theme );
try {
window.mw.cookie.set( 'skin-citizen-theme', null );
window.mw.cookie.set( 'skin-citizen-theme', theme );
window.mw.cookie.set( 'skin-citizen-theme-override', '1' );
} catch ( e ) {
@ -26,6 +23,12 @@ function init() {
} catch ( e ) {
}
} );
if ( theme !== 'auto' ) {
// * theme-toggle-light
// * theme-toggle-dark
toggleBtn.classList.add( 'theme-toggle-' + theme );
}
}
module.exports = {