User:KokoroSenshi/common.js: Difference between revisions
Jump to navigation
Jump to search
KokoroSenshi (talk | contribs) (Refactored to be more general, though under simplified assumptions; not fully tested) |
KokoroSenshi (talk | contribs) (Fix?) |
||
Line 10: | Line 10: | ||
* Bugs: | * Bugs: | ||
* - The regex fails if there is an instance of {{Color| before it in the textarea? tho it's fine in the example webpage | * - 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, | * - In addition, when you start a "{{Color|", then pop over to a different "{{Color|", it'll show dropdown, but append to the first "{{Color|"" | ||
* | * | ||
*/ | */ | ||
Line 21: | Line 21: | ||
"Color", | "Color", | ||
function() { | function() { | ||
var self = this; | |||
$.get( "https://zelda.gamepedia.com/Template:Color?action=raw", function( data ) { | $.get( "https://zelda.gamepedia.com/Template:Color?action=raw", function( data ) { | ||
/** Store parameter options in instance variable */ | /** Store parameter options in instance variable */ | ||
params["1"] = readColorArrayFromString(data); | self.params["1"] = readColorArrayFromString(data); | ||
/** Callback */ | /** Callback */ | ||
registerStrategies(); | self.registerStrategies(); | ||
}); | }); | ||
Line 78: | Line 80: | ||
function TemplateStrategy(templateName, getParametersFunction) { | function TemplateStrategy(templateName, getParametersFunction) { | ||
var self = this; | |||
/** | /********************* | ||
** Public variables ** | |||
**********************/ | |||
this.templateName = templateName; | |||
this.params = {}; // params.<name_of_param> = array of options // should each param have a 'description' variable too? applicable to both preset options and open-ended | |||
this.strategies = []; | |||
/******************** | /******************** | ||
** Public methods ** | |||
********************/ | |||
/** | /** | ||
Line 93: | Line 97: | ||
*/ | */ | ||
this.register = function() { | this.register = function() { | ||
getParameters(); // Must have callback to registerStrategies() | self.getParameters(); // Must have callback to registerStrategies() | ||
}; | }; | ||
this.getParameters = getParametersFunction; | |||
var | this.registerStrategies = function() { | ||
var params = self.params; | |||
var strategies = self.strategies; | |||
/** | |||
/** Validate parameters */ | |||
console.log("params: "); | console.log("params: "); | ||
console.log(params); | console.log(params); | ||
Line 120: | Line 123: | ||
precedingParamRegex += "\\|[^\\|]*"; | precedingParamRegex += "\\|[^\\|]*"; | ||
} | } | ||
var strategy = createStrategy( | var strategy = self.createStrategy( | ||
templateName, | templateName, | ||
paramName, | paramName, | ||
Line 146: | Line 149: | ||
}; | }; | ||
this.createStrategy = function(name, param, match, search, template, replace) { | |||
var strategy = | var strategy = | ||
{ | { |
Revision as of 03:40, 4 May 2018
/**
* 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, when you 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() {
var self = this;
$.get( "https://zelda.gamepedia.com/Template:Color?action=raw", function( data ) {
/** Store parameter options in instance variable */
self.params["1"] = readColorArrayFromString(data);
/** Callback */
self.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) {
var self = this;
/*********************
** Public variables **
**********************/
this.templateName = templateName;
this.params = {}; // params.<name_of_param> = array of options // should each param have a 'description' variable too? applicable to both preset options and open-ended
this.strategies = [];
/********************
** Public methods **
********************/
/**
* register method
*/
this.register = function() {
self.getParameters(); // Must have callback to registerStrategies()
};
this.getParameters = getParametersFunction;
this.registerStrategies = function() {
var params = self.params;
var strategies = self.strategies;
/** Validate parameters */
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 = self.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);
};
this.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;
};
}