Utilisateur:CreatixEA/Aide à la saisie/Script
Un article de Wikipédia, l'encyclopédie libre.
/*
<templates>
<template id="test1" name="Test" label="Boite test 1">
<field id="f1" nature="text" label="Test 1" />
<field id="f2" nature="text" label="Test 2" />
<field id="f3" nature="checkbox" label="Test 3" checked="Oui" unchecked="Non" />
<field id="f4" nature="hidden" />
<field id="f5" nature="fixed" label="Figé" />
<field id="f6" nature="select" label="Multichoix" values="Multichoix 1, Multichoix 2, Multichoix 3" />
<field id="f7" nature="textarea" label="Textarea" />
</template>
<template id="test1" name="Test" label="Boite test 2">
<field id="f1" nature="text" label="Test 1" />
<field id="f2" nature="text" label="Test 2" />
<field id="f3" nature="checkbox" label="Test 3" checked="Oui" unchecked="Non" />
<field id="f4" nature="hidden" />
<field id="f5" nature="fixed" label="Figé" />
<field id="f6" nature="select" label="Multichoix" values="Multichoix 1, Multichoix 2, Multichoix 3" />
<field id="f7" nature="textarea" label="Textarea" />
</template>
</templates>
{{Test|Val test 1|Val test2|Non|Caché|Figé|Multichoix 1|Test}}
{{Test|Val test 12|Val test22|Oui|Caché2|Figé2|Multichoix 1|Test}}
*/
/* FormParser
* This object parses the content of the textarea looking for templates declaration
*/
var myFormParser = new FormParser();
myMonobook.addEvent(window, 'load', executeFormParser);
function executeFormParser()
{
myFormParser.execute();
}
function validateFormParser()
{
myFormParser.validate();
}
function FormParser()
{
this.templates = new Array();
this.execute = function()
{
this.init()
do
{
from = this.text.indexOf('<' + 'templates');
to = this.text.indexOf('<' + '/templates>');
if (from != -1 && to != -1)
{
this.parser(from, to + 12);
this.text = this.text.replace(new RegExp(this.text.substring(from, to + 12), 'gi'), '');
}
} while (from != -1 && to != -1);
myMonobook.addEvent(document.getElementById('wpSave'), 'click', validateFormParser);
myMonobook.addEvent(document.getElementById('wpPreview'), 'click', validateFormParser);
this.appendTo(this.form);
this.setValues();
}
this.init = function()
{
this.form = document.getElementById('editform');
this.Textarea = document.getElementById('wpTextbox1');
this.text = this.Textarea.innerHTML;
this.text = this.text.replace(/</gi, '<');
this.text = this.text.replace(/>/gi, '>');
}
this.parser = function(from, to)
{
tobeparsed = this.text.substring(from, to);
var xmlDoc = null;
if (typeof DOMParser != "undefined") /* For firefox ... */
{
xmlParser = new DOMParser();
xmlDoc = xmlParser.parseFromString(tobeparsed, 'text/xml');
}
else /* For Internet Explorer */
{
// TODO
}
xmlTemplates = xmlDoc.childNodes[0];
for (var i = 0; i < xmlTemplates.childNodes.length; i++)
{
var node = xmlTemplates.childNodes.item(i);
if (node.nodeType == Node.TEXT_NODE) { continue; }
if (node.tagName == 'template');
{
var template = new FormTemplate();
template.parse(node);
this.templates.push(template);
}
}
}
this.appendTo = function (control)
{
for (var i = 0; i < this.templates.length; i++)
{
this.templates[i].appendTo(control);
}
}
this.setValues = function ()
{
this.text = this.Textarea.innerHTML;
for (var i = 0; i < this.templates.length; i++)
{
this.templates[i].setValues();
}
}
this.validate = function()
{
for (var i = 0; i < this.templates.length; i++)
{
this.templates[i].validate();
}
this.Textarea.innerHTML = this.Textarea.innerHTML.replace(new RegExp('§§' + 'DONE§§', 'gi'), '');
}
}
/* FormTemplate
* This object regroups all fields declared for one template
*/
function FormTemplate ()
{
this.init = function(id, name, label) {
this.fields = new Array();
this.id = id;
this.name = name;
this.regex = null;
this.div = document.createElement('div');
this.div.id = 'fe_template_' + id;
this.div.className = 'tplTemplate';
labelDiv = document.createElement('div');
labelDiv.innerHTML = label;
this.div.appendChild(labelDiv);
}
this.parse = function (xmlTemplate)
{
this.init(xmlTemplate.getAttribute('id'), xmlTemplate.getAttribute('name'), xmlTemplate.getAttribute('label'));
this.regex = '\\{\\{' + xmlTemplate.getAttribute('name');
for (var i = 0; i < xmlTemplate.childNodes.length; i++)
{
var node = xmlTemplate.childNodes[i];
var field;
if (node.nodeType == Node.TEXT_NODE) { continue; }
if (node.getAttribute('nature') == 'textarea')
{
field = new FormElementTextArea();
}
else if (node.getAttribute('nature') == 'text')
{
field = new FormElement();
}
else if (node.getAttribute('nature') == 'fixed')
{
field = new FormElementFixed();
}
else if (node.getAttribute('nature') == 'hidden')
{
field = new FormElementHidden();
}
else if (node.getAttribute('nature') == 'checkbox')
{
field = new FormElementCheckBox(node.getAttribute('checked'), node.getAttribute('unchecked'));
}
else if (node.getAttribute('nature') == 'select')
{
field = new FormElementSelect(node.getAttribute('values'));
}
field.init(node.getAttribute('id'), node.getAttribute('label'));
this.fields.push(field);
this.regex += '\\|([^\\|]*)';
}
this.regex += '\\}\\}';
}
this.appendTo = function(control)
{
control.appendChild(this.div);
for (var i = 0; i < this.fields.length; i++)
{
this.fields[i].appendTo(control);
}
}
this.setValues = function ()
{
var reg = new RegExp(this.regex, 'i');
var values = reg.exec(myFormParser.text);
myFormParser.text = myFormParser.text.replace(reg, '');
if (!values) { return; }
for (var i = 0; i < this.fields.length; i++)
{
var field = this.fields[i];
field.setValue(values[i+1]);
}
}
this.validate = function()
{
var reg = new RegExp(this.regex + '(?!§§' + 'DONE§§)', 'i');
myFormParser.Textarea.innerHTML = myFormParser.Textarea.innerHTML.replace(reg, this.getCompiledForm() + '§§' + 'DONE§§');
}
this.getCompiledForm = function()
{
var html = '{{' + this.name;
for (var i = 0; i < this.fields.length; i++)
{
html += '|' + this.fields[i].getValue();
}
html += '}}';
return html;
}
}
/* FormElement
* This object is a basic form element. If not extended it represents a text box.
*/
function FormElement()
{
/* This function inits the HTML components */
this.init = function (id, label)
{
this.div = document.createElement('div');
this.div.id = 'fe_div_' + id;
this.div.className = 'tplElement';
this.label = document.createElement('span');
this.label.id = 'fe_label_' + id;
if (label != null)
{
this.label.innerHTML = label + ': ';
}
this.Input = this.buildInput(id);
}
/* This function should be extended: it constructs the input HTML component. */
this.buildInput = function (id)
{
var Input = document.createElement('input');
Input.id = 'fe_field_' + id;
Input.name = 'fe_field_' + id;
Input.type = 'text';
Input.size = 100;
return Input;
}
/* This function appends the final HTML components to the given control */
this.appendTo = function (control)
{
this.div.appendChild(this.label);
this.div.appendChild(this.Input);
control.appendChild(this.div);
}
/* This function sets the value to the input. Must be extended if not text box type */
this.setValue = function (value)
{
this.Input.value = value;
}
/* This function returns the textbox value. Must be extended if not text box type */
this.getValue = function ()
{
return this.Input.value;
}
}
/* FormElementTextArea
* This object extends FormElement implementing the TextArea input type
*/
FormElementTextArea = function () { this.parent = FormElement; }
FormElementTextArea.prototype = new FormElement();
FormElementTextArea.prototype.buildInput = function (id)
{
this.Input = document.createElement('textarea');
this.Input.name = 'fe_field_' + id;
this.Input.id = 'fe_field_' + id;
this.Input.rows = 20;
return this.Input;
}
FormElementTextArea.prototype.getValue = function () { return this.Input.value; }
FormElementTextArea.prototype.setValue = function (value) { this.Input.innerHTML = value; }
/* FormElementFixed
* This object extends FormElement implementing a field fixed, uneditable. Usefull when a template should have only a few params editable !
*/
FormElementFixed = function() { this.parent = FormElement; }
FormElementFixed.prototype = new FormElement();
FormElementFixed.prototype.buildInput = function (id)
{
var div = document.createElement('span');
this.labelValue = document.createElement('span');
this.hiddenInput = document.createElement('input');
this.hiddenInput.name = 'fe_field_' + id;
this.hiddenInput.id = 'fe_field_' + id;
this.hiddenInput.type = 'hidden';
div.appendChild(this.hiddenInput);
div.appendChild(this.labelValue);
return div;
}
FormElementFixed.prototype.getValue = function () { return this.hiddenInput.value; }
FormElementFixed.prototype.setValue = function (value) { this.hiddenInput.value = value; this.labelValue.innerHTML = value; }
/* FormElementHidden
* This object extends FormElement implementing a field not shown. Usefull when a template should have only a few params editable !
*/
FormElementHidden = function() { this.parent = FormElement; }
FormElementHidden.prototype = new FormElement();
FormElementHidden.prototype.buildInput = function (id)
{
var div = document.createElement('span');
this.labelValue = document.createElement('span');
this.hiddenInput = document.createElement('input');
this.hiddenInput.name = 'fe_field_' + id;
this.hiddenInput.id = 'fe_field_' + id;
this.hiddenInput.type = 'hidden';
div.appendChild(this.hiddenInput);
div.appendChild(this.labelValue);
return div;
}
FormElementHidden.prototype.getValue = function () { return this.hiddenInput.value; }
FormElementHidden.prototype.setValue = function (value) { this.hiddenInput.value = value; this.labelValue.innerHTML = ''; }
/* FormElementCheckBox
* This object extends FormElement implementing a field not shown. Usefull when a template should have only a few params editable !
*/
FormElementCheckBox = function(checked, unchecked) { this.checked = checked; this.unchecked = unchecked; this.parent = FormElement; }
FormElementCheckBox.prototype = new FormElement();
FormElementCheckBox.prototype.buildInput = function (id)
{
this.Input = document.createElement('input');
this.Input.type = 'checkbox';
this.id = id;
this.name = name;
return this.Input;
}
FormElementCheckBox.prototype.getValue = function () { if (this.Input.checked == true) return this.checked; return this.unchecked;}
FormElementCheckBox.prototype.setValue = function (value) { if (value == this.checked) this.Input.checked = true; else this.Input.checked = false; }
/* FormElementSelect
* This object extends FormElement implementing a field not shown. Usefull when a template should have only a few params editable !
*/
FormElementSelect = function(values)
{
this.values = values.split(/[,]+/g);
this.options = new Array();
this.parent = FormElement;
}
FormElementSelect.prototype = new FormElement();
FormElementSelect.prototype.buildInput = function (id)
{
this.Input = document.createElement('select');
this.id = id;
this.name = name;
for (var i = 0; i < this.values.length; i++)
{
Option = document.createElement('option');
Option.value = this.values[i];
Option.innerHTML = this.values[i];
this.Input.appendChild(Option);
this.options.push(Option);
}
return this.Input;
}
FormElementSelect.prototype.getValue = function () { return this.Input.value; }
FormElementSelect.prototype.setValue = function (value)
{
for (var i = 0; i < this.options.length; i++)
{
if (this.options[i].value == value)
{
this.options[i].selected = true;
return;
}
}
}
/*
*/
