MediaWiki:Common.js - Revision history

Theadamabrams: Another dialogue attempt

2023-12-03T00:49:22Z

Another dialogue attempt

@@ Line 1: / Line 1: @@
 /* Any JavaScript here will be loaded for all users on every page load. */
@@ Line 40: / Line 58: @@
    });
-/* Custom hex strings */
+/* Custom collapsibles for social media threads METHOD 2 */
-   var hss = document.getElementsByClassName("hex-string");
+   $(document).ready(function() {
-  var i;
+    var depth;
-  for (i = 0; i < hss.length; i++) {
+    function chooseDialogue() {
-    hss[i].addEventListener("click", function() {
+      var $topLevelUl = $(this).parents('li').last().parent('ul');
-       if (this.dataset.state === 'hex') {
+      depth = 1 + $(this).parent('li').parents('li').length;
-         // Switch to English
+      //$topLevelUl.nextAll('ul').each(diveDeepUl);
-         this.querySelector('.hex-string-content').innerText = this.dataset.text;
+       if ($(this).data('collapsed') === true) {
-         this.dataset.state = 'text';
+         $(this).data('collapsed', false);
        } else {
-         // Switch to Hex
+         $(this).data('collapsed', true);
-         this.querySelector('.hex-string-content').innerText = this.dataset.hex;
+         $(this).text('Expand');
-         this.dataset.state = 'hex';
+        stillCollapsing = true;
+       }
-     });
+   });

Theadamabrams: Updated collapsibles

2023-12-02T22:05:56Z

Updated collapsibles

@@ Line 2: / Line 2: @@
-/* Custom animated collapsibles: */
+/* Custom collapsibles for hints (cannot be nested): */
-   var coll = document.getElementsByClassName("custom-collapsible");
+   var coll = document.getElementsByClassName("collapsible-hint");
    var i;
@@ Line 12: / Line 12: @@
        if (content.style.maxHeight){
          content.style.maxHeight = null;
-         content.classList.remove("custom-collapsible-content-visible");
+         content.classList.remove("collapsible-hint-content-visible");
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
-         content.classList.add("custom-collapsible-content-visible");
+         content.classList.add("collapsible-hint-content-visible");
+       }
      });
+   }
 /* Custom hex strings */
@@ Line 38: / Line 57: @@
      });
+   }

Theadamabrams: Undo revision 2976 by Theadamabrams (talk)

2023-11-26T15:41:00Z

Undo revision 2976 by Theadamabrams (talk)

← Older revision		Revision as of 11:41, 26 November 2023
Line 3:		Line 3:

	/* Custom animated collapsibles: */		/* Custom animated collapsibles: */
	$(document).~~ready~~(~~function~~() {		var coll = document.getElementsByClassName("custom-collapsible");
	~~$('~~.~~custom-collapsible-link').on~~('click', function() {		var i;
	~~$parentSp = $(~~this).~~parent~~('.~~custom-collapsible')~~;
	if (~~$parentSp~~.~~hasClass('active')~~) {		for (i = 0; i < coll.length; i++) {
	~~// hide~~		coll[i].addEventListener("click", function() {
	~~$parentSp~~.~~removeClass('active')~~;		this.classList.toggle("active");
	~~$parentSp~~.~~next~~('.custom-collapsible-content~~').slideUp(200~~);		var content = this.nextElementSibling;
	} else {		if (content.style.maxHeight){
	~~// show~~		content.style.maxHeight = null;
	~~$parentSp~~.~~addClass('active')~~;		content.classList.remove("custom-collapsible-content-visible");
	~~$parentSp~~.~~next~~('.custom-collapsible-content~~').slideDown(200~~);		} else {
	}		content.style.maxHeight = content.scrollHeight + "px";
			content.classList.add("custom-collapsible-content-visible");
			}
	});		});
	});		}

Theadamabrams: Streamlined coding for hints

2023-11-25T17:07:39Z

Streamlined coding for hints

← Older revision		Revision as of 13:07, 25 November 2023
Line 3:		Line 3:

	/* Custom animated collapsibles: */		/* Custom animated collapsibles: */
	~~var coll =~~ document.~~getElementsByClassName~~(~~"custom-collapsible"~~);		$(document).ready(function() {
	~~var i;~~		$('.custom-collapsible-link').on('click', function() {
			$parentSp = $(this).parent('.custom-collapsible');
	~~for~~ (~~i = 0; i < coll~~.~~length; i++~~) {		if ($parentSp.hasClass('active')) {
	~~coll[i]~~.~~addEventListener~~("click", function() {		// hide
	this.~~classList~~.~~toggle("active"~~);		$parentSp.removeClass('active');
	~~var content = this.nextElementSibling;~~		$parentSp.next('.custom-collapsible-content').slideUp(200);
	if (~~content~~.~~style.maxHeight~~){		} else {
	~~content~~.~~style.maxHeight = null~~;		// show
	~~content~~.~~classList~~.~~remove("~~custom-collapsible-content~~-visible"~~);		$parentSp.addClass('active');
	} else {		$parentSp.next('.custom-collapsible-content').slideDown(200);
	~~content~~.~~style.maxHeight = content.scrollHeight + "px"~~;		}
	~~content~~.~~classList~~.~~add("~~custom-collapsible-content~~-visible"~~);
	}
	});		});
	}		});

Theadamabrams: Require div.dialogue-thread

2023-11-25T13:43:31Z

Require div.dialogue-thread

← Older revision		Revision as of 09:43, 25 November 2023
Line 45:		Line 45:
	var stillCollapsing, stillExpanding;		var stillCollapsing, stillExpanding;
	// Attach the click event		// Attach the click event
	$('span.dialogue-choice-button').on('click', chooseDialogue);		$('div.dialogue-thread span.dialogue-choice-button').on('click', chooseDialogue);
	// Hide initially		// Hide initially
	$('div.~~social-media~~-thread ul').each(initialDeepHide);		$('div.dialogue-thread ul').each(initialDeepHide);

	function initialDeepHide() {		function initialDeepHide() {

Theadamabrams: Custom collapsibles for social media thread

2023-11-25T13:38:42Z

Custom collapsibles for social media thread

@@ Line 40: / Line 40: @@
-/* Custom collapsibles for dialogue (e.g., social media thread) */
+/* Custom collapsibles for social media thread */
    $(document).ready(function() {
+    var depth;
-     // Collapse all by default by running very similar code to the click event:
+    var stillCollapsing, stillExpanding;
-     $('span.dialogue-choice').each(function() {
+     // Attach the click event
-       // Find the parent <li> of the clicked span
+     $('span.dialogue-choice-button').on('click', chooseDialogue);
-       var $parentLi = $(this).closest('li');
+    // Hide initially
-       // Find all descendant <ul> elements of the parent <li> and toggle their visibility
+    $('div.social-media-thread ul').each(initialDeepHide);
-       $parentLi.find('ul').toggle(); // instant
-       // Note that using .hide() here causes issues when expanding later. Something about the nested structure requires using .toggle() instead.
+    function initialDeepHide() {
-    });
+       if ($(this).is('ul')) {
+        $(this).children('li').each(initialDeepHide);
-    // Attach the click event to toggle visibility
-    $('span.dialogue-choice').on('click', function() {
+       else if ($(this).is('li')) {
-       var $parentLi = $(this).closest('li');
+        if ($(this).children('ul').length) {
-       $parentLi.find('ul').slideToggle(); // animated
+          $(this).children('ul').each(initialDeepHide);
-    });
+        } else {
    });

Theadamabrams: New social media thread attempt

2023-11-25T09:34:39Z

New social media thread attempt

← Older revision		Revision as of 05:34, 25 November 2023
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~~
	~~$('span.dialogue-choice').closest('li').next('ul').hide();~~

	// ~~Add a~~ click event ~~to toggle the visibility of the sub-lists~~		// Collapse all by default by running very similar code to the click event:
	$('span.dialogue-choice').~~click~~(function () {		$('span.dialogue-choice').each(function() {
	// Find the ~~closest ul following~~ the span		// Find the parent <li> of the clicked span
	var ~~targetUl~~ = $(this).closest('li').~~next~~('ul');		var $parentLi = $(this).closest('li');
	// ~~Toggle~~ the visibility ~~of the ul~~		// Find all descendant <ul> elements of the parent <li> and toggle their visibility
	~~targetUl~~.slideToggle();		$parentLi.find('ul').toggle(); // instant
			// Note that using .hide() here causes issues when expanding later. Something about the nested structure requires using .toggle() instead.
			});

			// Attach the click event to toggle visibility
			$('span.dialogue-choice').on('click', function() {
			var $parentLi = $(this).closest('li');
			$parentLi.find('ul').slideToggle(); // animated
	});		});
	});		});

Theadamabrams: Previous code assumed wrong html structure for markup sublists

2023-11-24T21:18:11Z

Previous code assumed wrong html structure for markup sublists

← Older revision		Revision as of 17:18, 24 November 2023
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();
	});
	});		});
			});

Theadamabrams: Only immediate sublist is toggled for dialogue choices

2023-11-24T21:04:39Z

Only immediate sublist is toggled for dialogue choices

← Older revision		Revision as of 17:04, 24 November 2023
Line 42:		Line 42:
	/* 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 ~~all~~ sub-lists initially		// Hide immediate child sub-lists initially
	$('span.dialogue-choice').closest('li').~~find~~('ul').hide();		$('span.dialogue-choice').closest('li').children('ul').hide();

	// ~~Find all spans with class "dialogue-choice" and add~~ a click event		// 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').~~find~~('ul');		var targetUl = $(this).closest('li').children('ul');
	// Toggle the visibility of the ul		// Toggle the visibility of the ul
	targetUl.slideToggle();		targetUl.slideToggle();
	});		});
	});		});

Theadamabrams: Custom collapsibles for dialogue

2023-11-24T20:53:52Z

Custom collapsibles for dialogue

@@ Line 1: / Line 1: @@
 /* Any JavaScript here will be loaded for all users on every page load. */
@@ Line 42: / Line 38: @@
      });
+   }