Utilisateur:CreatixEA/Aide à la saisie/Script
Apparence
/*
<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; } } } /*
*/