NextBestNetwork/mediawiki-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First draft of working NBN theme for mediawiki

Browse Source
This commit is contained in:
D. Rimron-Soutter
2025-12-29 18:05:44 +00:00
parent 082cc79b33
commit 8b59db8825
8 changed files with 78 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
i18n/en.json
View File

@@ -7,7 +7,7 @@
"userpage": "User Page",
"nextbestnetwork.css": "/* CSS placed here will affect users of the NextBestNetwork skin */",
"nextbestnetwork.js": "/* Any JavaScript here will be loaded for users using the NextBestNetwork skin */",
"nextbestnetwork-navbar-class": "navbar navbar-default navbar-fixed-top navbar-expand-lg fixed-top navbar-light bg-light",
"nextbestnetwork-navbar-class": "navbar navbar-fixed-top navbar-expand-lg navbar-light bg-primary fixed-top",
"nextbestnetwork-navbar-brand": "{{SITENAME}}",
"nextbestnetwork-navbar-left": "FAQ",
"nextbestnetwork-navbar-left-wrapper": "li",
@@ -32,7 +32,7 @@
"nextbestnetwork-sidebar-right-dropdownclass": "dropdown-menu-end",
"nextbestnetwork-footer": "FOOTER",
"nextbestnetwork-footer-custom": "LOGIN",
"nextbestnetwork-footer-class": "footer-sticky bg-light",
"nextbestnetwork-footer-class": "footer-sticky bg-primary",
"nextbestnetwork-footer-btnclass": "",
"nextbestnetwork-footer-wrapperclass": "dropup",
"nextbestnetwork-footer-standard-btnclass": "",

2
includes/NextBestNetworkTemplate.php
View File

@@ -809,7 +809,7 @@ class NextBestNetworkTemplate extends BaseTemplate {
$navbar_class = $skin->getMsg( 'nextbestnetwork-navbar-class' );
if ( $skin->checkVisibility( 'navbar' ) ) { ?>
<header>
<nav id="mw-navigation" class="<?php echo $navbar_class; ?>">
<nav id="mw-navigation" data-bs-theme="dark" class="<?php echo $navbar_class; ?>">
<div class="<?php echo wfMessage( 'nextbestnetwork-container-class' )->plain(); ?>">
<?php if ( $skin->checkVisibility( 'navbar-brand' ) ) {
$skin->renderBrand();

1
resources/scripts/nextbestnetwork.js
View File

@@ -2,5 +2,6 @@ import 'jquery';
import 'bootstrap';
import 'masonry-layout';
console.log("NextBestNetwork skin loaded");
import './nextbestnetwork/nextbestnetwork'
import './nextbestnetwork/darkmode'

103
resources/scripts/nextbestnetwork/darkmode.js
View File

@@ -1,82 +1,71 @@
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/
$(document).ready(() => {
console.log("DOM fully loaded and parsed");
(() => {
'use strict'
const getStoredTheme = () => localStorage.getItem('theme')
const setStoredTheme = theme => localStorage.setItem('theme', theme)
const getStoredTheme = () => localStorage.getItem('theme');
const setStoredTheme = theme => localStorage.setItem('theme', theme);
const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
const storedTheme = getStoredTheme();
console.log("Found stored theme:", storedTheme);
if (storedTheme) {
return storedTheme
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
return storedTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
const setTheme = theme => {
if (theme === 'auto') {
document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
$('html').attr('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
} else {
document.documentElement.setAttribute('data-bs-theme', theme)
$('html').attr('data-bs-theme', theme);
}
}
setTheme(getPreferredTheme())
};
const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector('#bd-theme')
if (!themeSwitcher) {
return
const themeSwitcher = $('#bd-theme');
if (!themeSwitcher.length) {
console.warn("Theme switcher (#bd-theme) not found in DOM.");
return;
}
const themeSwitcherText = document.querySelector('#bd-theme-text')
const activeThemeIcon = document.querySelector('.theme-icon-active use')
const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
const themeSwitcherText = $('#bd-theme-text');
const activeThemeIcon = $('.theme-icon-active use');
const btnToActive = $(`[data-bs-theme-value="${theme}"]`);
document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
element.classList.remove('active')
element.setAttribute('aria-pressed', 'false')
})
const svgOfActiveBtn = btnToActive.find('svg use').attr('href');
$('[data-bs-theme-value]').removeClass('active').attr('aria-pressed', 'false');
btnToActive.addClass('active').attr('aria-pressed', 'true');
activeThemeIcon.attr('href', svgOfActiveBtn);
btnToActive.classList.add('active')
btnToActive.setAttribute('aria-pressed', 'true')
activeThemeIcon.setAttribute('href', svgOfActiveBtn)
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
const themeSwitcherLabel = `${themeSwitcherText.text()} (${btnToActive.data('bs-theme-value')})`;
themeSwitcher.attr('aria-label', themeSwitcherLabel);
if (focus) {
themeSwitcher.focus()
themeSwitcher.focus();
}
};
console.log("Setting initial theme...");
setTheme(getPreferredTheme());
showActiveTheme(getPreferredTheme());
$('[data-bs-theme-value]').on('click', function () {
const theme = $(this).data('bs-theme-value');
console.log("Theme changed to:", theme);
setStoredTheme(theme);
setTheme(theme);
showActiveTheme(theme, true);
});
window.matchMedia('(prefers-color-scheme: dark)').on('change', () => {
const storedTheme = getStoredTheme();
if (!storedTheme || storedTheme === 'auto') {
setTheme(getPreferredTheme());
}
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme()
if (storedTheme !== 'light' && storedTheme !== 'dark') {
setTheme(getPreferredTheme())
}
})
window.addEventListener('DOMContentLoaded', () => {
showActiveTheme(getPreferredTheme())
document.querySelectorAll('[data-bs-theme-value]')
.forEach(toggle => {
toggle.addEventListener('click', () => {
const theme = toggle.getAttribute('data-bs-theme-value')
setStoredTheme(theme)
setTheme(theme)
showActiveTheme(theme, true)
})
})
})
})()
console.log("Theme toggler initialized!");
});

3
resources/scripts/nextbestnetwork/nextbestnetwork.js
View File

@@ -1,5 +1,6 @@
jQuery(document).ready(function ($) {
console.log("parse nextbestnetwork.js");
jQuery(document).ready(function ($) {
/**
* TOOLTIPS
*/

2
resources/styles/nextbestnetwork.scss
View File

@@ -2,6 +2,6 @@
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-icons/font/bootstrap-icons";
@import "~bootstrap-icons/font/bootstrap-icons.scss";
@import "nextbestnetwork/index";

14
skin.json
View File

@@ -45,6 +45,18 @@
"SelfLinkBegin" : "NextBestNetworkHooks::onSelfLinkBegin"
},
"ResourceModules": {
"skins.nextbestnetwork": {
"styles": {
"default/css/nextbestnetwork.css": {}
},
"scripts": {
"default/js/nextbestnetwork.js": {}
},
"messages": {},
"dependencies": [
"mediawiki.skinning.content"
]
},
"skins.nextbestnetwork.messages": {
"messages": [
"nextbestnetwork-toc-top"
@@ -112,7 +124,7 @@
]
},
"skins.nextbestnetwork.custom.scripts": {
"position": "bottom",
"position": "top",
"scripts": [
"public/custom/js/custom.js"
],

11
webpack.mix.js
View File

@@ -1,6 +1,17 @@
const mix = require('laravel-mix');
mix.webpackConfig({
module: {
rules: [
{
test: /\.(woff|woff2|eot|ttf|otf)$/, // Match all font file types
type: 'asset/resource', // Handle font files as assets
generator: {
filename: 'fonts/[name][ext]', // Output to public/fonts/
},
},
],
},
externals: { 'jquery': 'jQuery' }
});