Vainglory Esports Wiki
Register
Advertisement

CSS and Javascript changes must comply with the wiki design rules.


Note: After saving, you may have to bypass your browser's cache to see the changes.

  • 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
// <nowiki>

window.popupButton = function(e) {
	e.stopPropagation();
	var hiddenClass = $(this).attr('data-toggler-hiddenclass');
	hiddenClass = hiddenClass ? hiddenClass : 'popup-content-hidden';
	// if we're re-clicking the same one we just showed before then, just hide it
	// otherwise hide all the others and show this one
	var $shownContent = $(this).find('.popup-content-wrapper-action:not(.' + hiddenClass + ')');
	if ($shownContent.length) {
		$shownContent.addClass(hiddenClass);
		return;
	}
	$('.popup-content-wrapper-action').addClass(hiddenClass);
	var $inner = $(this).find('.popup-content-wrapper-action');
	$inner.toggleClass(hiddenClass);
	var $innerWidthEl = $(this).find('.popup-content-inner-action');
	$inner.css('width', $innerWidthEl.outerWidth());
	var width = $innerWidthEl.outerWidth() + $(this).width() / 2 + $innerWidthEl.css('padding') * 2;
	var coords = $(this).offset();
	var totalWidth = $(window).width();
	if (coords.left + width > totalWidth) {
		if (width > totalWidth) {
			$inner.css('left', -1 * parseInt(coords.left) + 'px');
		}
		else {
			$inner.css('left', parseInt(totalWidth) - (parseInt(coords.left) + parseInt(width)) + 'px');
		}
	}
	else {
		$inner.css('left', '');
	}
	$(document).click(function(){
		$('.popup-content-wrapper-action').addClass(hiddenClass);
	});
}

mw.hook('wikipage.content').add(function() {
	// implements freeform toggle akin to Dynamic Tabs - only one section can be shown at a time
	// assign class "optionfromlist-toggler" to each toggler to make them recognized at all
	// assign attr "data-toggle-section" & this value as a class to each toggler
	// to make them behave together (to support multiple unrelated sections per page)
	
	// to start something hidden, add class toggle-section-hidden
	
	// assign attrs data-toggler-show and data-toggler-hide to each
	// assign classes of the values of the attr of show/hide to the content that you want it to control
	
	function oflRun() {
		$this = $(this);
		if($this.hasClass('active')) return;
		var thisSection = $this.attr('data-toggle-section');
		$('.' + thisSection).removeClass('active');
		if ($this.attr('data-toggler-setactive')) $('.' + ($this.attr('data-toggler-setactive')) ).addClass('active');
		$this.addClass('active');
		var toHide = $this.attr('data-toggler-hide');
		var toShow = $this.attr('data-toggler-show');
		if (! toHide.startsWith('.')) toHide = '.' + toHide;
		if (! toShow.startsWith('.')) toShow = '.' + toShow;
		var hiddenClass = $this.attr('data-toggler-hiddenclass');
		hiddenClass = hiddenClass ? hiddenClass : 'toggle-section-hidden';
		$(toHide).addClass(hiddenClass);
		$(toShow).removeClass(hiddenClass);
		
	}
	
	$('.optionfromlist-toggler').each(function() {
		$(this).click(oflRun);
	});
	
	// no "active" or "inactive" toggles here, otherwise behaves the same as above
	$('.alwaysactive-toggler').each(function() {
		$(this).click(function() {
			$this = $(this);
			var toHide = $this.attr('data-toggler-hide');
			var toShow = $this.attr('data-toggler-show');
			if (! toHide.startsWith('.')) toHide = '.' + toHide;
			if (! toShow.startsWith('.')) toShow = '.' + toShow;
			var hiddenClass = $this.attr('data-toggler-hiddenclass');
			hiddenClass = hiddenClass ? hiddenClass : 'toggle-section-hidden';
			$(toHide).addClass(hiddenClass);
			$(toShow).removeClass(hiddenClass);
		});
	});
	
	$('.sections-toggler').each(function() {
		$(this).click(function() {
			$this = $(this);
			var toHide = $this.attr('data-toggler-hide');
			var toShow = $this.attr('data-toggler-show');
			var toHide_tbl = toHide.split(';');
			var toShow_tbl = toShow.split(';');
			
			var hiddenClass = $this.attr('data-toggler-hiddenclass');
			hiddenClass = hiddenClass ? hiddenClass : 'toggle-section-hidden';
			
			for(i in toHide_tbl) {
				var toHide = toHide_tbl[i];
				if (! toHide.startsWith('.')) toHide = '.' + toHide;
				$(toHide).addClass(hiddenClass);
			}
			
			for (i in toShow_tbl) {
				var toShow = toShow_tbl[i];
				if (! toShow.startsWith('.')) toShow = '.' + toShow;
				$(toShow).removeClass(hiddenClass);
			}
		});
	});
	
	// checkboxes to show-hide rows in a table (or whatever)
	$('.checkbox-togglers').each(function() {
		$(this).find('input').each(function() {
			this.addEventListener('change', function(e) {
				var $this = $(this);
				var classToToggle = $this.attr('data-toggle-class');
				if (! classToToggle.startsWith('.')) classToToggle = '.' + classToToggle;
				var hiddenClass = $this.attr('data-toggler-hiddenclass');
				hiddenClass = hiddenClass ? hiddenClass : 'toggle-section-hidden';
				$(classToToggle).toggleClass(hiddenClass);
			});
		});
	});
	
	// LAZY STUFF
	
	function processAllLazyTogglers(toggleClass) {
		if (lazySectionsAlreadyStarted[toggleClass]) return $.Deferred().resolve();
		lazySectionsAlreadyStarted[toggleClass] = true;
		var elList = [];
		$('.optionfromlist-toggler-lazy.' + toggleClass).each(function() {
			elList.push(this);
		});
		return processEachLazyToggler(elList);
	}
	
	function processEachLazyToggler(elList) {
		if (elList.length == 0) {
			return $.Deferred().resolve();
		}
		$thisEl = $(elList.pop());
		return processOneLazyToggler($thisEl)
		.then(function() {
			return processEachLazyToggler(elList);
		});
	}
	
	function processOneLazyToggler($thisEl) {
		var $contentParent = $(getParentFromToggler($thisEl));
		if (lazyContentAlreadyLoaded[$contentParent.attr('id')]) {
			switchToNonLazy($thisEl);
			return $.Deferred().resolve();
		}
		var toParse = $thisEl.attr('data-templatecode');
		if (!toParse) {
			toParse = $contentParent.attr('data-templatecode');
		}
		console.log(toParse);
		return parseHTML(toParse)
		.then(function(html) {
			lazyContentAlreadyLoaded[$contentParent.attr('id')] = true;
			return addHTMLToSection(html, $thisEl);
		});
	}
	
	function getParentFromToggler($thisEl) {
		return document.getElementById($thisEl.attr('data-replaceid'));
	}
	
	function parseHTML(str) {
		var a = new mw.Api();
		return a.get({
			action: 'parse',
			title: 'Main Page',
			text: '!!!!!!!!{{' + str + '}}!!!!!!!!',
			prop: 'text'
		}).then(function(data) {
			var text = data.parse.text['*'];
			var tbl = text.split('!!!!!!!!');
			return tbl[1];
		});
	}
	
	function addHTMLToSection(html, $thisEl) {
		var el = getParentFromToggler($thisEl);
		$(el).html(html);
		mw.hook('wikipage.content').fire($(el));
		switchToNonLazy($thisEl);
		return $.Deferred().resolve();
	}
	
	function switchToNonLazy($thisEl) {
		$thisEl.removeClass('optionfromlist-toggler-lazy');
		$thisEl.addClass('optionfromlist-toggler');
		$thisEl.off('click');
		$thisEl.click(oflRun);
	}
	
	$('.optionfromlist-toggler-lazy').each(function() {
		$(this).click(function() {
			if (typeof lazyContentAlreadyLoaded === 'undefined') window.lazyContentAlreadyLoaded = {};
			if (typeof lazySectionsAlreadyStarted === 'undefined') window.lazySectionsAlreadyStarted = {};
			if($(this).hasClass('active')) return;
			return processOneLazyToggler($(this))
			.then(oflRun.bind(this))
			.then(processAllLazyTogglers($(this).attr('data-toggle-section')));
		});
	});
	
	// Hidden content
	
	$('.popup-content-outer').off('click');
	$('.popup-content-outer').click(function(e) {
		e.stopPropagation();
		var hiddenClass = $(this).attr('data-toggler-hiddenclass');
		hiddenClass = hiddenClass ? hiddenClass : 'toggle-section-hidden';
		var $shownContent = $(this).find('.popup-content-inner:not(.' + hiddenClass + ')');
		if ($shownContent.length) {
			$shownContent.addClass(hiddenClass);
			return;
		}
		$('.popup-content-inner').addClass(hiddenClass);
		var $inner = $(this).find('.popup-content-inner');
		$inner.toggleClass(hiddenClass);
		var $innerWidthEl = $(this).find('.popup-content-width');
		var width = $innerWidthEl.outerWidth() + $(this).width() / 2 + $innerWidthEl.css('padding') * 2;
		var coords = $(this).offset();
		var totalWidth = $(window).width();
		if (coords.left + width > totalWidth) {
			if (width > totalWidth) {
				$inner.css('left', -1 * parseInt(coords.left) + 'px');
			}
			else {
				$inner.css('left', parseInt(totalWidth) - (parseInt(coords.left) + parseInt(width)) + 'px');
			}
		}
		else {
			$inner.css('left', '');
		}
		$(document).click(function(){
			$('.popup-content-inner').addClass(hiddenClass);
		});
	});
	
	$('.popup-button-action').off('click');
	$('.popup-button-action').click(window.popupButton);
	
});
// </nowiki>
Advertisement