MediaWiki:Common.js: Difference between revisions

From The Talos Principle Wiki
Only immediate sublist is toggled for dialogue choices
Previous code assumed wrong html structure for markup sublists
Line 41: Line 41:


/* Custom collapsibles for dialogue (e.g., social media thread) */
/* Custom collapsibles for dialogue (e.g., social media thread) */
    $(document).ready(function () {
  $(document).ready(function () {
        // Hide immediate child sub-lists initially
    // Hide immediate child sub-lists initially
        $('span.dialogue-choice').closest('li').children('ul').hide();
    $('span.dialogue-choice').closest('li').next('ul').hide();


        // Add a click event to toggle the visibility of the sub-lists
    // Add a click event to toggle the visibility of the sub-lists
        $('span.dialogue-choice').click(function () {
    $('span.dialogue-choice').click(function () {
            // Find the closest ul following the span
      // Find the closest ul following the span
            var targetUl = $(this).closest('li').children('ul');
      var targetUl = $(this).closest('li').next('ul');
            // Toggle the visibility of the ul
      // Toggle the visibility of the ul
            targetUl.slideToggle();
      targetUl.slideToggle();
        });
     });
     });
  });

Revision as of 17:18, 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 immediate child sub-lists initially
    $('span.dialogue-choice').closest('li').next('ul').hide();

    // Add a click event to toggle the visibility of the sub-lists
    $('span.dialogue-choice').click(function () {
      // Find the closest ul following the span
      var targetUl = $(this).closest('li').next('ul');
      // Toggle the visibility of the ul
      targetUl.slideToggle();
    });
  });