m |
m |
||
| Line 1: | Line 1: | ||
"use strict"; | "use strict"; | ||
| − | // | + | /* ----------------------------- */ |
| + | /* General Browser Cache Bypass Instructions */ | ||
| + | /* Instructions for refreshing the page cache for different browsers */ | ||
| + | /* ----------------------------- */ | ||
//Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac) | //Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac) | ||
| Line 7: | Line 10: | ||
//Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5 | //Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5 | ||
//Opera: Clear the cache in Tools → Preferences | //Opera: Clear the cache in Tools → Preferences | ||
| − | |||
| − | /* | + | /* ----------------------------- */ |
| − | + | /* Collapsible Tables Feature */ | |
| − | + | /* Enables collapsible tables for better organization and allows users to show or hide table contents */ | |
| − | + | /* ----------------------------- */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
var autoCollapse = 2; | var autoCollapse = 2; | ||
var collapseCaption = 'hide'; | var collapseCaption = 'hide'; | ||
var expandCaption = 'show'; | var expandCaption = 'show'; | ||
| − | + | ||
| − | function collapseTable( tableIndex ) { | + | /** |
| − | + | * Function to collapse the table rows | |
| − | + | * @param {number} tableIndex | |
| − | + | */ | |
| − | + | function collapseTable(tableIndex) { | |
| − | + | var Button = document.getElementById('collapseButton' + tableIndex); | |
| − | + | var Table = document.getElementById('collapsibleTable' + tableIndex); | |
| − | + | ||
| − | + | if (!Table || !Button) { | |
| − | + | return false; | |
| − | + | } | |
| − | + | ||
| − | + | var Rows = Table.rows; | |
| − | + | ||
| − | + | if (Button.firstChild.data == collapseCaption) { | |
| − | + | for (var i = 1; i < Rows.length; i++) { | |
| − | + | Rows[i].style.display = 'none'; | |
| − | + | } | |
| − | + | Button.firstChild.data = expandCaption; | |
| − | + | } else { | |
| − | + | for (var i = 1; i < Rows.length; i++) { | |
| + | Rows[i].style.display = Rows[0].style.display; | ||
| + | } | ||
| + | Button.firstChild.data = collapseCaption; | ||
| + | } | ||
} | } | ||
| − | + | ||
| − | function createClickHandler( tableIndex ) { | + | /** |
| − | + | * Creates a click handler for table collapse/expand | |
| − | + | * @param {number} tableIndex | |
| − | + | */ | |
| − | + | function createClickHandler(tableIndex) { | |
| + | return function (e) { | ||
| + | e.preventDefault(); | ||
| + | collapseTable(tableIndex); | ||
| + | }; | ||
} | } | ||
| − | + | ||
| + | /** | ||
| + | * Adds collapse buttons to all tables with the 'collapsible' class | ||
| + | */ | ||
function createCollapseButtons() { | function createCollapseButtons() { | ||
| − | + | var tableIndex = 0; | |
| − | + | var NavigationBoxes = {}; | |
| − | + | var Tables = document.getElementsByTagName('table'); | |
| − | + | ||
| − | + | for (var i = 0; i < Tables.length; i++) { | |
| − | + | if ($(Tables[i]).hasClass('collapsible')) { | |
| − | + | var HeaderRow = Tables[i].getElementsByTagName('tr')[0]; | |
| − | + | if (!HeaderRow) { | |
| − | + | continue; | |
| − | + | } | |
| − | + | var Header = HeaderRow.getElementsByTagName('th')[0]; | |
| − | + | if (!Header) { | |
| − | + | continue; | |
| − | + | } | |
| − | + | ||
| − | + | NavigationBoxes[tableIndex] = Tables[i]; | |
| − | + | Tables[i].setAttribute('id', 'collapsibleTable' + tableIndex); | |
| − | + | ||
| − | + | var Button = document.createElement('span'); | |
| − | + | var ButtonLink = document.createElement('a'); | |
| − | + | var ButtonText = document.createTextNode(collapseCaption); | |
| − | + | ||
| − | + | Button.style.styleFloat = 'right'; | |
| − | + | Button.style.cssFloat = 'right'; | |
| − | + | Button.style.fontWeight = 'normal'; | |
| − | + | Button.style.textAlign = 'right'; | |
| − | + | Button.style.width = '6em'; | |
| − | + | ||
| − | + | ButtonLink.style.color = Header.style.color; | |
| − | + | ButtonLink.setAttribute('id', 'collapseButton' + tableIndex); | |
| − | + | $(ButtonLink).on('click', createClickHandler(tableIndex)); | |
| − | + | ButtonLink.appendChild(ButtonText); | |
| − | + | ||
| − | + | Button.appendChild(document.createTextNode('[')); | |
| − | + | Button.appendChild(ButtonLink); | |
| − | + | Button.appendChild(document.createTextNode(']')); | |
| − | + | ||
| − | + | Header.insertBefore(Button, Header.childNodes[0]); | |
| − | + | tableIndex++; | |
| − | + | } | |
| − | + | } | |
| − | + | ||
| − | + | // Collapse all tables if the conditions are met (autocollapse or collapsed class) | |
| − | + | for (var i = 0; i < tableIndex; i++) { | |
| − | + | if ($(NavigationBoxes[i]).hasClass('collapsed') || | |
| − | + | (tableIndex >= autoCollapse && $(NavigationBoxes[i]).hasClass('autocollapse')) | |
| − | + | ) { | |
| − | + | collapseTable(i); | |
| − | + | } | |
| − | + | } | |
} | } | ||
| − | |||
| − | |||
| − | // | + | // Run the collapse button creation function on page load |
| + | $(createCollapseButtons); | ||
| + | |||
| + | /* ----------------------------- */ | ||
| + | /* Custom Script for Highlighting Backticks */ | ||
| + | /* Applies custom visual styles to text wrapped in backticks without altering the content */ | ||
| + | /* ----------------------------- */ | ||
// This script waits for the document to fully load, and applies a visual style | // This script waits for the document to fully load, and applies a visual style | ||
// to any text that is surrounded by backticks (` `), without altering the content. | // to any text that is surrounded by backticks (` `), without altering the content. | ||
| − | |||
| − | document.addEventListener('DOMContentLoaded', function() { | + | document.addEventListener('DOMContentLoaded', function () { |
// Check if we are in edit mode (to avoid changing the editor content) | // Check if we are in edit mode (to avoid changing the editor content) | ||
if (document.querySelector('#wpTextbox1') !== null) { | if (document.querySelector('#wpTextbox1') !== null) { | ||
| Line 121: | Line 131: | ||
} | } | ||
| − | / | + | /** |
| + | * Function to highlight text between backticks by wrapping it in a span element | ||
| + | * @param {string} text | ||
| + | * @returns {string} | ||
| + | */ | ||
function highlightBackticks(text) { | function highlightBackticks(text) { | ||
const backtickRegex = /`([^`]+)`/g; // Matches text between backticks | const backtickRegex = /`([^`]+)`/g; // Matches text between backticks | ||
| − | const styledText = text.replace(backtickRegex, function(match, p1) { | + | const styledText = text.replace(backtickRegex, function (match, p1) { |
return '<span class="backtick-style">' + p1 + '</span>'; | return '<span class="backtick-style">' + p1 + '</span>'; | ||
}); | }); | ||
| Line 130: | Line 144: | ||
} | } | ||
| − | / | + | /** |
| + | * Traverse all text nodes and apply the backtick highlighting | ||
| + | * @param {Node} node | ||
| + | */ | ||
function traverseTextNodes(node) { | function traverseTextNodes(node) { | ||
if (node.nodeType === 3 && node.nodeValue.includes('`')) { // Only process text nodes | if (node.nodeType === 3 && node.nodeValue.includes('`')) { // Only process text nodes | ||
| Line 144: | Line 161: | ||
traverseTextNodes(document.body); | traverseTextNodes(document.body); | ||
}); | }); | ||
| − | |||
| − | |||
console.log('Backtick script loaded'); | console.log('Backtick script loaded'); | ||
| + | |||
| + | /* ----------------------------- */ | ||
| + | /* Force CSS Rules Dynamically */ | ||
| + | /* Injects CSS with higher priority for overriding styles, especially the list indentations */ | ||
| + | /* ----------------------------- */ | ||
| + | |||
| + | // Using MediaWiki's loader to inject custom CSS with high priority | ||
| + | mw.loader.using('mediawiki.util', function () { | ||
| + | var css = '.mw-parser-output ul ul, .mw-parser-output ul ol, .mw-parser-output ol ul, .mw-parser-output ol ol {' + | ||
| + | 'padding-left: 0 !important;' + | ||
| + | 'margin-left: 0 !important;' + | ||
| + | '}'; | ||
| + | mw.util.addCSS(css); | ||
| + | }); | ||
"use strict"; /* ----------------------------- */ /* General Browser Cache Bypass Instructions */ /* Instructions for refreshing the page cache for different browsers */ /* ----------------------------- */ //Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac) //Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac) //Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5 //Opera: Clear the cache in Tools → Preferences /* ----------------------------- */ /* Collapsible Tables Feature */ /* Enables collapsible tables for better organization and allows users to show or hide table contents */ /* ----------------------------- */ var autoCollapse = 2; var collapseCaption = 'hide'; var expandCaption = 'show'; /** * Function to collapse the table rows * @param {number} tableIndex */ function collapseTable(tableIndex) { var Button = document.getElementById('collapseButton' + tableIndex); var Table = document.getElementById('collapsibleTable' + tableIndex); if (!Table || !Button) { return false; } var Rows = Table.rows; if (Button.firstChild.data == collapseCaption) { for (var i = 1; i < Rows.length; i++) { Rows[i].style.display = 'none'; } Button.firstChild.data = expandCaption; } else { for (var i = 1; i < Rows.length; i++) { Rows[i].style.display = Rows[0].style.display; } Button.firstChild.data = collapseCaption; } } /** * Creates a click handler for table collapse/expand * @param {number} tableIndex */ function createClickHandler(tableIndex) { return function (e) { e.preventDefault(); collapseTable(tableIndex); }; } /** * Adds collapse buttons to all tables with the 'collapsible' class */ function createCollapseButtons() { var tableIndex = 0; var NavigationBoxes = {}; var Tables = document.getElementsByTagName('table'); for (var i = 0; i < Tables.length; i++) { if ($(Tables[i]).hasClass('collapsible')) { var HeaderRow = Tables[i].getElementsByTagName('tr')[0]; if (!HeaderRow) { continue; } var Header = HeaderRow.getElementsByTagName('th')[0]; if (!Header) { continue; } NavigationBoxes[tableIndex] = Tables[i]; Tables[i].setAttribute('id', 'collapsibleTable' + tableIndex); var Button = document.createElement('span'); var ButtonLink = document.createElement('a'); var ButtonText = document.createTextNode(collapseCaption); Button.style.styleFloat = 'right'; Button.style.cssFloat = 'right'; Button.style.fontWeight = 'normal'; Button.style.textAlign = 'right'; Button.style.width = '6em'; ButtonLink.style.color = Header.style.color; ButtonLink.setAttribute('id', 'collapseButton' + tableIndex); $(ButtonLink).on('click', createClickHandler(tableIndex)); ButtonLink.appendChild(ButtonText); Button.appendChild(document.createTextNode('[')); Button.appendChild(ButtonLink); Button.appendChild(document.createTextNode(']')); Header.insertBefore(Button, Header.childNodes[0]); tableIndex++; } } // Collapse all tables if the conditions are met (autocollapse or collapsed class) for (var i = 0; i < tableIndex; i++) { if ($(NavigationBoxes[i]).hasClass('collapsed') || (tableIndex >= autoCollapse && $(NavigationBoxes[i]).hasClass('autocollapse')) ) { collapseTable(i); } } } // Run the collapse button creation function on page load $(createCollapseButtons); /* ----------------------------- */ /* Custom Script for Highlighting Backticks */ /* Applies custom visual styles to text wrapped in backticks without altering the content */ /* ----------------------------- */ // This script waits for the document to fully load, and applies a visual style // to any text that is surrounded by backticks (` `), without altering the content. document.addEventListener('DOMContentLoaded', function () { // Check if we are in edit mode (to avoid changing the editor content) if (document.querySelector('#wpTextbox1') !== null) { return; // Do nothing in edit mode } /** * Function to highlight text between backticks by wrapping it in a span element * @param {string} text * @returns {string} */ function highlightBackticks(text) { const backtickRegex = /`([^`]+)`/g; // Matches text between backticks const styledText = text.replace(backtickRegex, function (match, p1) { return '<span class="backtick-style">' + p1 + '</span>'; }); return styledText; } /** * Traverse all text nodes and apply the backtick highlighting * @param {Node} node */ function traverseTextNodes(node) { if (node.nodeType === 3 && node.nodeValue.includes('`')) { // Only process text nodes const span = document.createElement('span'); span.innerHTML = highlightBackticks(node.nodeValue); node.parentNode.replaceChild(span, node); } else if (node.nodeType === 1 && node.childNodes) { // Traverse element children node.childNodes.forEach(traverseTextNodes); } } // Apply the changes to the entire body traverseTextNodes(document.body); }); console.log('Backtick script loaded'); /* ----------------------------- */ /* Force CSS Rules Dynamically */ /* Injects CSS with higher priority for overriding styles, especially the list indentations */ /* ----------------------------- */ // Using MediaWiki's loader to inject custom CSS with high priority mw.loader.using('mediawiki.util', function () { var css = '.mw-parser-output ul ul, .mw-parser-output ul ol, .mw-parser-output ol ul, .mw-parser-output ol ol {' + 'padding-left: 0 !important;' + 'margin-left: 0 !important;' + '}'; mw.util.addCSS(css); });