User:KokoroSenshi/common.js

/**
 * Autocomplete/Dropdown list
 * Uses https://yuku-t.com/textcomplete/
 *
 * Notes:
 * - Won't work with CodeEditor since it doesn't use a textarea but that's fine
 *   since CodeEditor won't be used for wikitext
 * - $.getScript() is used since mw.loader.load() doesn't wait for the code to load
 *   mw.loader.load('https://unpkg.com/textcomplete@0.13.1/dist/textcomplete.min.js');
 * Bugs:
 * - The regex fails if there is an instance of {{Color| before it in the textarea? tho it's fine in the example webpage
 * - In addition, whenyou start a "{{Color|", then pop over to a different "{{Color|", it'll show dropdown, but append to the first "{{Color|""
 *
 */
if (mw.config.get("wgAction") == 'edit') {
	
	/* Make the strategy/ies to add */
	var Strategies = {};
	Strategies.Template = {};
	Strategies.Template.Color = new TemplateStrategy(
		"Color",
		function() {
			$.get( "https://zelda.gamepedia.com/Template:Color?action=raw", function( data ) {
				
				/** Store parameter options in instance variable */
				params["1"] = readColorArrayFromString(data);
				
				/** Callback */
				registerStrategies();
			});
			
			var readColorArrayFromString = function(text) {
				var colorArray = [];
				text.split("</includeonly>")[0]
					.split("#switch:{{{1\|}}}")[1]
					.split("\|#default")[0]
					.match(/\|[a-zA-Z0-9 ]*/g)
					.forEach(function(value, index){
					var colorName = value.slice(1);
					colorArray.push(colorName);
				});
				return colorArray;
			};
			
		}
	);
	
	/* Load Textcomplete then register the strategy/ies */
	$(document).ready(function() {
		getTextcompleteScript(
			Strategies.Template.Color.register // Callback
		);
	} );
	
}

function getTextcompleteScript(callback) {
	console.log( "Loading textcomplete..." );
	$.getScript( "https://unpkg.com/textcomplete/dist/textcomplete.min.js", function( data, textStatus, jqxhr ) {
		console.log( [ data, textStatus, jqxhr.status ] ); // Data returned, Success, 200
		console.log( "Loaded textcomplete. (Warning: May not be executed yet)" );
		// (Global) Textarea object: https://github.com/yuku-t/textcomplete/issues/114#issuecomment-318352383
		Textarea = Textcomplete.editors.Textarea;
		callback();
	});
}

// Been going over OOP in JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Example

/**
 * Strategy Object
 */

/**
 * Constructor (and non-prototype definitions)
 * (instance variables can't be accessed without "this." etc.)
 */
function TemplateStrategy(templateName, getParametersFunction) {
	
	/** Public variables */
	this.templateName = templateName;
	
	/** Private variables */
	var params = {}; // params.<name_of_param> = array of options // should each param have a 'description' variable too? applicable to both preset options and open-ended
	var strategies = [];
	
	/********************
	 ** Public methods **
	 ********************/
	
	/**
	 * register method
	 */
	this.register = function() {
		getParameters(); // Must have callback to registerStrategies()
	};
	
	/*********************
	 ** Private methods **
	 *********************/
	
	var getParameters = getParametersFunction;
	
	var registerStrategies = function() {
		/** Parameters are in instance variable */
		console.log("params: ");
		console.log(params);
		if (params.length === 0) throw (this + ": params is empty");
		
		/**
		 * Turn each parameter into a strategy; assume no named parameters for now
		 */
		for (var paramName in params) {
			if (params.hasOwnProperty(paramName)) {
				console.log(paramName + " -> " + params[paramName]);
				// Assume paramName is a number (as a String)
				var precedingParamRegex = "";
				var paramNum = parseInt(paramName);
				for (var i = 1; i < paramNum; i++) {
					precedingParamRegex += "\\|[^\\|]*";
				}
				var strategy = createStrategy(
					templateName,
					paramName,
					new RegExp("({{" + templateName + precedingParamRegex + "\\|)([^\\|]*)$","m"),
					function(term) { return params[paramName].filter(function(currentValue) { return currentValue.startsWith(term); }); },
					function(name) { return name; },
					function(name) { return "$1" + name + '}}'; }
				);
				strategies.push(strategy);
			}
		}
		
		
		var editor = new Textarea(document.getElementById('wpTextbox1'))
		  , options = {
				dropdown: {
					maxCount: 500,
					style: { 'margin-top': (-parseFloat($('body').css('margin-top')))+'px' }
				}
			}
		  , textcomplete = new Textcomplete(editor, options);
		
		textcomplete.register(strategies);
		
	};
	
	var createStrategy = function(name, param, match, search, template, replace) {
		var strategy =
			{
				id: "Template:" + name + "_" + param,
				match: match,
				search: function (term, callback) { // term is probably the 2nd capture group of the match regexp
					var nameArray = search(term);
					callback(nameArray); // List of possible completions ('names')
				},
				template: function (name) {
					var displayName = template(name);
					return displayName; // What to display in the list
				},
				replace: function (name) {
					var replacementString = replace(name);
					return replacementString; // What to replace the matched typed text with
				}
			};
		return strategy;
	};
	
}