Difference between revisions of "User:Tobias Alcaraz/wikia.js"

Revision as of 16:29, 15 January 2017

/*!
 * @fileOverview PortableCSSPad [ Released 7 December 2012 ]
 * 
 * Testing / developer tool
 * 
 * Creates a tiny pad in which you can write/paste CSS rules.
 *     Similar to Firebug, but better support for raw text and w/ some extra features such as
 *     Beautify, Minify, Adding/removing !important
 * 
 * The main script provides a simple API:
 * 
 * Pad.init(opt)
 *     the (optional) opt object contains properties left, top, width, height
 *     which are positive integers specifying where to create the pad and how large it should be
 * Pad.open()
 * Pad.close()
 * 
 * A separate loader script is required to utilize the API. In this case, the loader script
 * is here in the same file (at the bottom of this page) for performance reasons. The loader script
 * must make sure that jQuery, jQuery UI Resizable and jQuery UI Draggable are installed before
 * attempting to load the main script. The loader should also provide an on/off button for the pad.
 * 
 * @author Copyright (c) Jeff Bradford [[User:Mathmagician]]
 */
 
/*jshint forin:true, noempty:true, eqeqeq:true, bitwise:false, strict:true, undef:true, unused:true, curly:true, browser:true, jquery:true */
/*global mediaWiki */
 
(function ($, mw, window, console) {
	"use strict";
 
	// private properties
	var options,
		lastSetTimeout,
		$liveStyle,
		$textarea,
		Pad;
 
	/**
	 * Private helper function to insert \t into #PortableCSSPad-textarea on keydown
	 * Inserts the given text into a textarea element where the mouse cursor / caret is
	 * http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery
	 * @param {HTMLTextAreaElement} element A textarea field to insert the text into
	 * @param {String} text The text to be inserted
	 */
	function insertAtCaret(element, text) {
		if (document.selection) {
			// Internet Explorer
			element.focus();
			var sel = document.selection.createRange();
			sel.text = text;
			element.focus();
		} else if (element.selectionStart || element.selectionStart === 0) {
			// Firefox and WebKit-based browsers
			var startPos = element.selectionStart;
			var endPos = element.selectionEnd;
			var scrollTop = element.scrollTop;
			element.value = element.value.substring(0, startPos) + text + element.value.substring(endPos, element.value.length);
			element.focus();
			element.selectionStart = startPos + text.length;
			element.selectionEnd = startPos + text.length;
			element.scrollTop = scrollTop;
		}
	}
 
	// [private] updates the live style (pass in the css rules as a string parameter)
	function updateStyle(css) {
		if ('string' !== typeof css) {
			css = $textarea.val();
		}
		$liveStyle.text(css);
	}
 
	// [private] the keyup event of #PortableCSSPad-textarea
	function textareaKeyup() {
		window.clearTimeout(lastSetTimeout);
		lastSetTimeout = window.setTimeout(updateStyle, 500);
	}
 
	// [private] reveal the pad
	function open() {
		var $container = $('#PortableCSSPad-container'),
			style = $container[0].style,
			left = window.parseInt(style.left),
			top = window.parseInt(style.top),
			$window = $(window),
			windowWidth = $window.width(),
			windowHeight = $window.height();
 
		$container.removeClass('PortableCSSPad-pad-disabled');
 
		// spawn the pad in the upper-left corner if it's offscreen (necessary precaution)
		if (left > windowWidth || top > windowHeight) {
			$container.css({ left: 0, top: 0 });
		}
	}
 
	// [private] hides the pad
	function close() {
		$('#PortableCSSPad-container').addClass('PortableCSSPad-pad-disabled');
	}
 
	// [private] Initializes Portable CSS Pad when called
	function init(opt) {		
		// setup default options
		options = $.extend({
			width: 400,
			height: 250,
			left: 0,
			top: 0,
			stylesheetURL: '/load.php?mode=articles&articles=u:dev:MediaWiki:PortableCSSPad/stylesheet.css&only=styles',
			prettyDiffURL: 'http://mathmagician.wikia.com/wiki/MediaWiki:Prettydiff.js?action=raw&ctype=text/javascript'
		}, opt);
 
		// insert prettydiff, stylesheet and live-style tag into the document
		$('#PortableCSSPad-pretty-diff-script, #PortableCSSPad-stylesheet, #PortableCSSPad-live-style').remove();
		$(document.head).append('<script id="PortableCSSPad-pretty-diff-script" type="text/javascript" src="' + options.prettyDiffURL + '"></script><link rel="stylesheet" type="text/css" href="' + options.stylesheetURL + '" /><style id="PortableCSSPad-live-style" type="text/css"></style>');
 
		// HTML base for the whole pad
		var padHTML = '<div id="PortableCSSPad-container" class="PortableCSSPad-pad-disabled"><div id="PortableCSSPad-menu"><a id="PortableCSSPad-title" title="w:c:dev:PortableCSSPad" href="http://dev.wikia.com/wiki/PortableCSSPad">PortableCSSPad</a><div id="PortableCSSPad-buttons"><div id="PortableCSSPad-important-button" class="PortableCSSPad-button" title="Adds !important to all CSS properties"></div><div id="PortableCSSPad-unimportant-button" class="PortableCSSPad-button" title="Removes !important from all CSS properties"></div><div id="PortableCSSPad-beautify-button" class="PortableCSSPad-button" title="Beautifies (nicely formats) all CSS in the textarea"></div><div id="PortableCSSPad-minify-button" class="PortableCSSPad-button" title="Minifies (removes comments and whitespace) CSS to reduce file size"></div><div class="PortableCSSPad-vertical-bar"></div><div id="PortableCSSPad-validate-button" class="PortableCSSPad-button" title="Opens the W3C CSS3 validation service in a new tab, you can copy/paste the contents of the textarea into the new tab to validate the CSS"></div><div class="PortableCSSPad-vertical-bar"></div><div id="PortableCSSPad-onoff-button" class="PortableCSSPad-button" title="Toggles the live-update feature on and off. While off, CSS rules in the pad are ignored"></div><div id="PortableCSSPad-close-button" class="PortableCSSPad-button" title="Closes the pad"></div></div></div><textarea id="PortableCSSPad-textarea" placeholder="Type or copy/paste CSS into this box to test it out on this page"></textarea></div>';
 
		// insert HTML base into document
		$('#PortableCSSPad-container').remove();
		$(document.body).after(padHTML);
 
		// initialize private properties
		$liveStyle = $('#PortableCSSPad-live-style');
		$textarea = $('#PortableCSSPad-textarea');
 
		// set up draggable widget, resizable widget, default style for container
		// requires draggable and resizable from jQuery UI, will log error if not available
		var containerStyle, $container;
		try {
			$container = $('#PortableCSSPad-container');
 
			$container
			.draggable({
				containment: 'window',
				scroll: false,
				stop: function () {
					containerStyle = this.style;
					containerStyle = {
						left: containerStyle.left,
						top: containerStyle.top
					};
				}
			})
			.resizable({
				containment: 'parent',
				minWidth: 400,  // strongly desired this matches value in stylesheet
				minHeight: 250, // strongly desired this matches value in stylesheet
				handles: 'se',
				alsoResize: '#PortableCSSPad-textarea',
				start: function () {
					// patch bug where pad randomly teleports during/after resizing
					$(document.head).append('<style id="PortableCSSPad-teleportbugfix">#PortableCSSPad-container{left:' + containerStyle.left + ' !important;top:' + containerStyle.top + ' !important}</style>');
				},
				stop: function () {
					// patch bug where pad randomly teleports during/after resizing
					$('#PortableCSSPad-teleportbugfix').remove();
					$(this).css(containerStyle);
 
					// if textarea is bigger than container, make it fit inside the container
					// patches a minor resize bug when trying to resize the container outside of the window
					if ($textarea.width() + 30 > $container.width()) {
						$textarea.css('width', $container.width() - 30 + 'px');
					}
					if ($textarea.height() + 60 > $container.height()) {
						$textarea.css('height', $container.height() - 60 + 'px');
					}
				}
			})
			.attr('style', 'position: fixed; left: ' + options.left + 'px; top: ' + options.top + 'px; width: ' + options.width + 'px; height: ' + options.height + 'px;');
 
			containerStyle = $container[0].style;
			containerStyle = {
				left: containerStyle.left,
				top: containerStyle.top
			};
		} catch (e) {
			if (typeof console.error === 'function') {
				console.error(e, ' -- please make sure jQuery UI resizable and draggable are installed');
			}
		}
 
		// textarea keydown: insert \t character when pressing tab instead of switching focus
		// textarea keyup:   apply style changes when the textarea contents change
		$textarea
		.keydown(function (event) {
			if (9 === event.which) {
				insertAtCaret(this, '\t');
				return false;
			}
		})
		.on('keyup', textareaKeyup);
 
		// beautify event
		$('#PortableCSSPad-beautify-button').click(function () {
			var text = $textarea.val();
 
			if (text.length !== 0) {
				var prettyDiffSettings = {
					comments: "indent",
					content: false,
					context: "",
					csvchar: ",",
					diff: "",
					difflabel: "base",
					diffview: "sidebyside",
					force_indent: false,
					html: false,
					inchar: "\t",
					indent: "",
					insize: 1,
					lang: "css",
					mode: "beautify",
					quote: false,
					semicolon: false,
					source: text,
					sourcelabel: "base",
					style: "indent",
					topcoms: false
				};
 
				var css = window.prettydiff(prettyDiffSettings)[0];
 
				// fix prettydiff's "opacity: 0px" bug
				css = css.replace(/ 0px/g, ' 0').replace(/:0px/g, ': 0');
 
				$textarea.val(css);
			}
		});
 
		// minify event
		$('#PortableCSSPad-minify-button').click(function () {
			var text = $textarea.val();
 
			if (text.length !== 0) {
				var prettyDiffSettings = {
					comments: "indent",
					content: false,
					context: "",
					csvchar: ",",
					diff: "",
					difflabel: "base",
					diffview: "sidebyside",
					force_indent: false,
					html: false,
					inchar: "\t",
					indent: "",
					insize: 1,
					lang: "css",
					mode: "minify",
					quote: false,
					semicolon: false,
					source: text,
					sourcelabel: "base",
					style: "indent",
					topcoms: false
				};
 
				var css = window.prettydiff(prettyDiffSettings)[0];
 
				$textarea.val(css);
			}
		});
 
		// important event
		$('#PortableCSSPad-important-button').click(function () {
			var text = $textarea.val();
 
			if (text.length !== 0) {
				// remove all !importants
				text = text.replace(/[\s]*(!important)+/g, '');
				// add !important to any word boundary which is followed by ; or }
				text = text.replace(/\b(?=[\s]*(;|\}))/g, ' !important');
				$textarea.val(text);
				updateStyle(text);
			}
		});
 
		// unimportant event
		$('#PortableCSSPad-unimportant-button').click(function () {
			var text = $textarea.val();
 
			if (text.length !== 0) {
				// remove all !importants
				text = text.replace(/[\s]*(!important)+/g, '');
				$textarea.val(text);
				updateStyle(text);
			}
		});
 
		// validate event
		$('#PortableCSSPad-validate-button').click(function () {
			window.open('https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input');
		});
 
		// on & off events
		$('#PortableCSSPad-onoff-button').click(function () {
			var $this = $(this);
 
			if ($this.hasClass('PortableCSSPad-onoff-button-state-off')) {
				$this.removeClass('PortableCSSPad-onoff-button-state-off');
				$textarea.on('keyup', textareaKeyup);
				updateStyle();
			} else {
				$this.addClass('PortableCSSPad-onoff-button-state-off');
				$textarea.off('keyup', textareaKeyup);
				updateStyle('');
			}
		});
 
		// close event
		$('#PortableCSSPad-close-button').click(Pad.close);
	}
 
	// [private] Pad object
	Pad = {
		open: open,
		close: close,
		init: init
	};
 
 
 
	/**
	 * PortableCSSPad loader, specific to Wikia.com wikis
	 * Skins supported: Oasis, Monobook
	 */
	$(function ($) {
		var WikiaBar = window.WikiaBar,
			$link = $('<a id="PortableCSSPad-wikialoader-link" style="cursor: pointer;">PortableCSSPad</a>'),
			$listItem = $('<li></li>').append($link);
 
		$('#PortableCSSPad-wikialoader-link').parent().remove();
 
		if (WikiaBar) {
			// unbind click tracking on toolbar
			WikiaBar.wikiaBarWrapperObj.off('click', WikiaBar.clickTrackingHandler);
			WikiaBar.wikiaBarCollapseWrapperObj.off('click', WikiaBar.clickTrackingHandler);
 
			// add link to oasis toolbar
			WikiaBar.wikiaBarWrapperObj.find('.tools').append($listItem);
		} else {
			// add link to monobook toolbox
			$('#p-tb ul').append($listItem);
		}
 
		// attach init handler to $link
		$link = $('#PortableCSSPad-wikialoader-link');
		$link.one('click', function (event) {
			event.stopPropagation();
 
			// install draggable and resizable from MediaWiki's version of jQuery UI
			mw.loader.using(['jquery.ui.draggable', 'jquery.ui.resizable'], function () {
				var $window = $(window);
 
				// initialize the pad
				Pad.init({
					left: (($window.width() / 2) - 200) | 0, // ORing with 0 is same as Math.floor
					top: (($window.height() / 2) - 125) | 0
				});
 
				// open or close the pad when clicking $link
				$link.click(function (event) {
					event.stopPropagation();
					Pad.open();
				});
 
				// open pad
				Pad.open();
			});
		});
	});
 
 
 
	// Validation button for CSS articles (this is mostly separate from PortableCSSPad architecturally,
	// it's more of a small related feature that is hard to justify being a standalone script)
	if (/\.css$/.test(mw.config.get('wgPageName')) && mw.config.get('wgNamespaceNumber') % 2 === 0)  {
		$(function ($) {
			var stylesheetURL = mw.config.get('wgServer') + '/index.php?title=' + mw.config.get('wgPageName') + '&action=raw&ctype=text/css&maxage=0&smaxage=0';
			var validatorURL = 'http://jigsaw.w3.org/css-validator/validator?uri=' + window.encodeURIComponent(stylesheetURL) + '&profile=css3&usermedium=all&warning=1&vextwarning=&lang=' + mw.config.get('wgUserLanguage');
			var buttonStyle = 'cursor: pointer; display: inline-block; border: 1px solid black; width: 20px; height: 20px; background-image: url(http://images1.wikia.nocookie.net/dev/images/1/19/PortableCSSPad-icons.png); background-position: 0 -20px; background-color: #fff;';
			var $button = $('<div id="w3-validator-button" title="Validate this stylesheet with the W3C validation service" style="' + buttonStyle + '"></div>');
			var skin = mw.config.get('skin');
 
			$button.click(function () {
				window.open(validatorURL);
			});
 
			if (skin === 'oasis' || skin === 'wikia') {
				// oasis skin
				$('#WikiaPageHeader > div.tally').before($button);
			} else {
				// assume monobook
				$button.css('margin-left', '10px');
				$('#firstHeading').append($button);
			}
		});
	}
}(jQuery, mediaWiki, window, window.console));