MediaWiki:Common.js: Difference between revisions
Appearance
ul and ol have same level of indentation |
Custom collapsibles for dialogue |
||
| Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
| Line 42: | Line 38: | ||
}); | }); | ||
} | } | ||
/* Custom collapsibles for dialogue (e.g., social media thread) */ | |||
$(document).ready(function () { | |||
// Hide all sub-lists initially | |||
$('span.dialogue-choice').closest('li').find('ul').hide(); | |||
// Find all spans with class "dialogue-choice" and add a click event | |||
$('span.dialogue-choice').click(function () { | |||
// Find the closest ul following the span | |||
var targetUl = $(this).closest('li').find('ul'); | |||
// Toggle the visibility of the ul | |||
targetUl.slideToggle(); | |||
}); | |||
}); | |||
Revision as of 15:53, 24 November 2023
/* Any JavaScript here will be loaded for all users on every page load. */
/* Custom animated collapsibles: */
var coll = document.getElementsByClassName("custom-collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
content.classList.remove("custom-collapsible-content-visible");
} else {
content.style.maxHeight = content.scrollHeight + "px";
content.classList.add("custom-collapsible-content-visible");
}
});
}
/* Custom hex strings */
var hss = document.getElementsByClassName("hex-string");
var i;
for (i = 0; i < hss.length; i++) {
hss[i].addEventListener("click", function() {
if (this.dataset.state === 'hex') {
// Switch to English
this.querySelector('.hex-string-content').innerText = this.dataset.text;
this.dataset.state = 'text';
} else {
// Switch to Hex
this.querySelector('.hex-string-content').innerText = this.dataset.hex;
this.dataset.state = 'hex';
}
});
}
/* Custom collapsibles for dialogue (e.g., social media thread) */
$(document).ready(function () {
// Hide all sub-lists initially
$('span.dialogue-choice').closest('li').find('ul').hide();
// Find all spans with class "dialogue-choice" and add a click event
$('span.dialogue-choice').click(function () {
// Find the closest ul following the span
var targetUl = $(this).closest('li').find('ul');
// Toggle the visibility of the ul
targetUl.slideToggle();
});
});