MediaWiki:Common.js: Difference between revisions

From The Talos Principle Wiki
Streamlined coding for hints
Tag: Reverted
m Reverted edit by Bosterm93 (talk) to last revision by Theadamabrams
Tag: Rollback
 
(4 intermediate revisions by 2 users not shown)
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. */
/* Custom animated collapsibles: */
  $(document).ready(function() {
    $('.custom-collapsible-link').on('click', function() {
        $parentSp = $(this).parent('.custom-collapsible');
        if ($parentSp.hasClass('active')) {
            // hide
            $parentSp.removeClass('active');
            $parentSp.next('.custom-collapsible-content').slideUp(200);
        } else {
            // show
            $parentSp.addClass('active');
            $parentSp.next('.custom-collapsible-content').slideDown(200);
        }
    });
  });


/* Custom hex strings */
/* Custom hex strings */
Line 38: Line 20:




/* Custom collapsibles for social media thread */
/* Custom collapsibles for hints (cannot be nested): */
  var coll = document.getElementsByClassName("collapsible-hint");
  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("collapsible-hint-content-visible");
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
        content.classList.add("collapsible-hint-content-visible");
      }
    });
  }
 
 
/* Custom collapsibles for social media threads */
  $(document).ready(function() {
    $('.collapsible-dialogue-link').on('click', function() {
        //alert("Click!");
        $parentElem = $(this).closest('.collapsible-dialogue');
        if ($(this).text() == 'Collapse') {
            // hide
            $(this).text('Choose');
            $parentElem.children('.collapsible-dialogue-content').slideUp(200);
        } else {
            // show
            $(this).text('Collapse');
            $parentElem.children('.collapsible-dialogue-content').slideDown(200);
            $parentElem.siblings('.collapsible-dialogue').find('.collapsible-dialogue-content').slideUp(200);
            $parentElem.siblings('.collapsible-dialogue').find('.collapsible-dialogue-link').text('Choose');
        }
    });
  });
 
/* Custom collapsibles for social media threads METHOD 2 */
   $(document).ready(function() {
   $(document).ready(function() {
     var depth;
     var depth;
Line 46: Line 66:
     // Hide initially
     // Hide initially
     $('div.dialogue-thread ul').each(initialDeepHide);
     $('div.dialogue-thread ul').each(initialDeepHide);
 
 
     function initialDeepHide() {
     function initialDeepHide() {
       if ($(this).is('ul')) {
       if ($(this).is('ul')) {
Line 53: Line 73:
       else if ($(this).is('li')) {
       else if ($(this).is('li')) {
         if ($(this).children('ul').length) {
         if ($(this).children('ul').length) {
           $(this).children('ul').each(initialDeepHide);
           //myDepth = 1 + $(this).parents('li').length;
          //if (myDepth > 1) { $(this).css('background','yellow'); }
          //$(this).children('ul').each(initialDeepHide);
         } else {
         } else {
           myDepth = 1 + $(this).parents('li').length;
           myDepth = 1 + $(this).parents('li').length;
          //$(this).append(" - Depth "+myDepth);
           if (myDepth > 1) { $(this).hide(); }
           if (myDepth > 1) { $(this).hide(); }
         }
         }
       }
       }
     }
     }
 
 
     function deepCollapse() {
     function deepCollapse() {
       if ($(this).is('ul')) {
       if ($(this).is('ul')) {
Line 93: Line 116:
       }
       }
     }
     }
 
 
     function chooseDialogue() {
     function chooseDialogue() {
       var $topLevelUl = $(this).parents('li').last().parent('ul');
       var $topLevelUl = $(this).parents('li').last().parent('ul');
Line 102: Line 125:
         $(this).text('Collapse');
         $(this).text('Collapse');
         stillExpanding = true;
         stillExpanding = true;
        //$topLevelUl.css('background', 'lightgreen');
         $topLevelUl.nextAll('ul').each(deepExpand);
         $topLevelUl.nextAll('ul').each(deepExpand);
       } else {
       } else {
Line 107: Line 131:
         $(this).text('Expand');
         $(this).text('Expand');
         stillCollapsing = true;
         stillCollapsing = true;
        //$topLevelUl.css('background', 'pink');
         $topLevelUl.nextAll('ul').each(deepCollapse);
         $topLevelUl.nextAll('ul').each(deepCollapse);
       }
       }
     }
     }
   });
   });

Latest revision as of 16:48, 19 August 2024

/* Any JavaScript here will be loaded for all users on every page load. */

/* 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 hints (cannot be nested): */
  var coll = document.getElementsByClassName("collapsible-hint");
  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("collapsible-hint-content-visible");
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
        content.classList.add("collapsible-hint-content-visible");
      } 
    });
  }


/* Custom collapsibles for social media threads */
  $(document).ready(function() {
    $('.collapsible-dialogue-link').on('click', function() {
        //alert("Click!");
        $parentElem = $(this).closest('.collapsible-dialogue');
        if ($(this).text() == 'Collapse') {
            // hide
            $(this).text('Choose');
            $parentElem.children('.collapsible-dialogue-content').slideUp(200);
        } else {
            // show
            $(this).text('Collapse');
            $parentElem.children('.collapsible-dialogue-content').slideDown(200);
            $parentElem.siblings('.collapsible-dialogue').find('.collapsible-dialogue-content').slideUp(200);
            $parentElem.siblings('.collapsible-dialogue').find('.collapsible-dialogue-link').text('Choose');
        }
    });
  });

/* Custom collapsibles for social media threads METHOD 2 */
  $(document).ready(function() {
    var depth;
    var stillCollapsing, stillExpanding;
    // Attach the click event
    $('div.dialogue-thread span.dialogue-choice-button').on('click', chooseDialogue);
    // Hide initially
    $('div.dialogue-thread ul').each(initialDeepHide);

    function initialDeepHide() {
      if ($(this).is('ul')) {
        $(this).children('li').each(initialDeepHide);
      }
      else if ($(this).is('li')) {
        if ($(this).children('ul').length) {
          //myDepth = 1 + $(this).parents('li').length;
          //if (myDepth > 1) { $(this).css('background','yellow'); }
          //$(this).children('ul').each(initialDeepHide);
        } else {
          myDepth = 1 + $(this).parents('li').length;
          //$(this).append(" - Depth "+myDepth);
          if (myDepth > 1) { $(this).hide(); }
        }
      }
    }

    function deepCollapse() {
      if ($(this).is('ul')) {
        $(this).children('li').each(deepCollapse);
      }
      else if ($(this).is('li')) {
        if ($(this).children('ul').length) {
          $(this).children('ul').each(deepCollapse);
        } else {
          myDepth = 1 + $(this).parents('li').length;
          if (myDepth <= depth) { stillCollapsing = false; }
          if (stillCollapsing) {
            $(this).slideUp();
            // Also set any sub-options to be collapsed
            $(this).find('span.dialogue-choice-button').data('collapsed', true).text('Expand');
          }
        }
      }
    }
    function deepExpand() {
      if ($(this).is('ul')) {
        $(this).children('li').each(deepExpand);
      }
      else if ($(this).is('li')) {
        if ($(this).children('ul').length) {
          $(this).children('ul').each(deepExpand);
        } else {
          myDepth = 1 + $(this).parents('li').length;
          if (myDepth <= depth) { stillExpanding = false; }
          if (stillExpanding && myDepth == depth+1) { $(this).slideDown(); }
        }
      }
    }

    function chooseDialogue() {
      var $topLevelUl = $(this).parents('li').last().parent('ul');
      depth = 1 + $(this).parent('li').parents('li').length;
      //$topLevelUl.nextAll('ul').each(diveDeepUl);
      if ($(this).data('collapsed') === true) {
        $(this).data('collapsed', false);
        $(this).text('Collapse');
        stillExpanding = true;
        //$topLevelUl.css('background', 'lightgreen');
        $topLevelUl.nextAll('ul').each(deepExpand);
      } else {
        $(this).data('collapsed', true);
        $(this).text('Expand');
        stillCollapsing = true;
        //$topLevelUl.css('background', 'pink');
        $topLevelUl.nextAll('ul').each(deepCollapse);
      }
    }
  });