Une zForm avec Mootools

var ZForm = new Class({
	
	Implements : Options,

	options : {	
		textId : 'text', //	id du textarea
		preview : 'prev', // id de la div de prévisualisation
		buttons : '.splButtons', // les boutons simples			
		dlgButtons : '.dlgButtons', //	les boutons ouvrant une boîte de dialogue
		listButtons : '.listButtons', //	les boutons liste ouvrant un menu de choix
		slider : '.sliderBox', //	les boîtes contenant un menu de choix
		sliderLink : '.slider-link',  //	les liens du menu de choix
		closeDelay : 500 // temps avant fermeture de la boîte de menu en millisecondes
	},
        //Constructeur
	initialize : function(options) {
	        this.setOptions(options);
		this.input = $(this.options.textId); // getElementById(textId)
		this.preview = $(this.options.preview); // getElementById(preview)
		this.timer = 0;		
		//Buttons
		this.buttons = $$(this.options.buttons);  // tableau de tous les boutons simples
		this.dlgButtons = $$(this.options.dlgButtons); // tableau de tous les boutons ouvrant une boîte de dialogue
		this.sliders = $$(this.options.slider); // tableau de toutes les boîtes contenant un menu de choix
		this.listButtons = $$(this.options.listButtons); // tableau de tous les boutons liste ouvrant un menu de choix
		this.sliderLink = $$(this.options.sliderLink); // tableau de tous les liens de menu de choix
		this.closeDelay = this.options.closeDelay;
	},
	
	// Écoute les événements
	listeningEvent : function() {
		this.input.focus(); // On donne le focus au champ de texte
	}
});

var zform = new ZForm({textId: 'message'});

this.buttons = $$(this.options.buttons);
// correspond à
this.buttons = $$('.splButtons');
// et nous renvoie un tableau de tous les éléments ayant une classe CSS splButtons

[...]
 * Events sur les boutons simples
 */
eventButtons : function() {
	//Si c'est I.E. on utilise plutôt l'event mousedown
	var event = (Browser.ie) ? 'mousedown' : 'click';
	// On écoute tous les boutons simples
	this.buttons.each(function(button){
		// Si un event est détecté
		button.addEvent(event, function(){
			//On récupère l'attribut data-bt de l'image
			var name = button.getProperty('data-bt');
			//On appelle la méthode d'insertion de tags avec les bons paramètres et la sélection du texte
			this.insertTag('<'+name+'>', '</'+name+'>', this.input.getSelectedText());
		}.bind(this));
	}, this);
},

//Insertion des tags 
insertTag : function(startTag, endTag, select) {    
	//On donne le focus à notre champ de texte
	this.input.focus();        
	//S'il n'y a pas de sélection
	if(select === null || undefined === select) {    
		//On insère nos tags autour du curseur
		this.input.insertAroundCursor({'before' : startTag, 'after' : endTag});
	} else {
		//Sinon on insère nos tags au curseur
		this.input.insertAtCursor(startTag + select + endTag, false);    
	}    
	this.input.focus();
},
//Écoute les événements
listeningEvent : function() {
	this.input.focus();
	this.eventButtons();
}
[...]

/**
 * Lien ouvrant une fenêtre box pour insérer une ou des valeurs au choix
 */
eventMessageBox : function() {
	var event = (Browser.ie) ? 'mousedown' : 'click';
	this.dlgButtons.each(function(bt){
		var link = $(bt);
		var text = value = '';        
		if(undefined !== link) {
			link.addEvent(event, function(){
				var name = link.getProperty('data-bt');
				var startTag = endTag = '';
				var select = this.input.getSelectedText();
				switch(name) {                    
					case 'tableau':  
						startTag = this.setTable();
						text = '';
					break;
						
					case 'liste':
					case 'listnum' :
						startTag = this.setList(name);
						text = '';
					break;
						
					case 'image' : 
						text = (select !== '') ? select : prompt("Tapez le nom d'emplacement de l'image : ");                            
						startTag = this.getSimpleTag(name, text);
					break;
						
					case 'clip':
						startTag = this.setObject(name);
					break;
					
					case 'citation' :
						value = prompt("Tapez le nom de l'auteur de la citation :");
						text = null;
						startTag = this.getTagValue(name, value, 'auteur');
					break;
					
					case 'url' :
						value = prompt("Tapez l'adresse du lien : ");
						text = (select === '') ? prompt("Tapez le texte du lien : "): select;
						startTag = this.getTagValue(name, value);
					break; 
					
					case 'urlancre' :
						value =  (select !== '') ? select : prompt("Tapez le nom de l'ancre : ");    
						text = prompt("Tapez le texte du lien : ");
						startTag = this.getTagValue(name, value);
						break;
					
					case 'ancre' :
						alert('Lier avec un lien de type:'+"\n"+'<urlancre value="nomdeLancre">Texte du lien</url>');
						value = (select !== '') ? select : prompt("Tapez le nom de l'ancre : ");    
						text = prompt("Tapez le texte du lien : ");
						startTag = this.getTagValue(name, value);
					break;                                
				}
				endTag = '</'+name+'>';
				this.insertTag(startTag, endTag, text);
			}.bind(this));
		}
	}, this);
},
[...]

/**
 * Formate un tag de la forme <tag>text
 */
getSimpleTag : function(name, text) {
	var tag = '';
	//Si aucune sélection
	if (text === '') {
		tag = '<'+name+'>null';	// null entre les balises	
	} else {
		tag = '<'+name+'>'; // Sinon on ajoute juste le tag (pour éviter qu'il se répète avec insertTag)
	}
	return tag;
},

[...]
/**
 * Formate un tag à la forme <name attribut="value">text
 */
getTagValue : function(name, value, attribut) {
	var tag = '';
	//Si aucun nom d'attribut n'est assigné
	if('' === attribut || undefined === attribut) {
		attribut = 'value';// l'attribut par défaut sera value
	}
	//Si aucune valeur d'attribut n'est assignée
	if (value === '') {
		tag += '<'+name+' '+attribut+'="null">';// attribut a pour valeur null
		
	} else {
		//Sinon on construit notre tag d'ouverture 
		tag = '<'+name+' '+attribut+'="'+ value +'">';            
	}    
	return tag;
},
[...]

[...]
   /**
 * Liste et liste numérique
 */
setList : function(name) {
    var i = 1;
    var tag = '';
    var puce = '';
    var message = 'Tapez le texte de la puce : (Si vous voulez arrêter, cliquez sur Annuler)';
    var insertText = this.input.getSelectedText();    
    if(insertText !== ''){
        puce = "\t<puce>" + insertText + "</puce>\n";
        tag = "" + tag + "" + puce + "";
    } else {
        insertText = prompt(message, "Puce " + i);
        while (insertText) {
            i++;
            if (insertText) {
                puce = "\t<puce>" + insertText + "</puce>\n";
                tag = "" + tag + "" + puce + "";
                insertText = prompt (message,"Puce " + i);
            } else {
                break;
            }
        }
    }    
    tag = "\n<"+name+">\n" + tag;
    return tag;
},

[...]

[...]
setObject : function(name) {
	var tag = '';
	var app = prompt("Saisissez le type de l'application au choix :\n\r flash|wmv|avi|mpeg");
	var video = prompt("Saisissez le chemin du clip");
	var w = prompt("Saisissez la largeur");
	var h = prompt("Saisissez la hauteur du clip");
	var autoStart = '0';
	var autoPlay = 'false';
	var type = '';
	switch(app) {
		case 'flash':
			 type =  'x-shockwave-flash';
			break;
		case 'wmv':
			 type =  'video/x-ms-wmv';
			autoPlay = '';
			break;
		case 'avi':
			 type =  'video/x-msvideo';
			autoPlay = '';
			break;
		case 'mpeg':
			 type =  'video/mpeg';
			break;
	}
	if(h ==='' || h > 600) h = 200;
	if(w === '' || w > 600) w = 150;
	if(app == '') {
		alert("Vous devez saisir le nom de l'application");
		app = prompt("Saisissez le type de l'application au choix :\n\r flash|wmv|avi|mpeg");
	} else {
		if(video != '') {
			tag = '<'+name+'="'+type+':'+w+':'+h+':'+autoStart+':'+autoPlay+'">'+video;
		} else {
			tag = '<'+name+'="'+type+':'+w+':'+h+':'+autoStart+':'+autoPlay+'">';
		}	
	}
	return tag;
},
[...]

[...]
// Écoute les événements
listeningEvent : function() {
	this.input.focus();
	this.eventButtons();
	this.eventMessageBox();
},
[...]

/**
* Positionne et cache les boîtes des sélecteurs de liste
*/
initListButtons : function() {
	if(undefined !== this.sliders) {
		//On fait une boucle sur toutes les boîtes à menu
		this.sliders.each(function(slider){
			//Je récupère l'attribut name de l'image
			var img = slider.getPrevious('img');
			//Sa position
			var x = img.getPosition().x.toInt();
			var y = img.getPosition().y.toInt() + img.getSize().y.toInt();
			//Positionne les box par rapport au bouton cliqué
			slider.setStyles({
				'position' : 'absolute',
				'left' : x,
				'top' : y,
				'display' : 'none',
				'visibility' : 'hidden'		
			});
		});
	}
},

[...]
/**
 * Events sur les boutons sélecteurs
 */
eventList : function() {
	//Événements sur les listes de choix
	this.listButtons.each(function(bt){
		if(undefined !== bt) {	
			bt.addEvents({
				'mouseenter' : function(){ //On affiche la box et on écoute ses events 		
					this.eventBoxList(bt);
				}.bind(this),
				'mouseleave' : function() { //On cache la box 					
					this.timer = this.hide.delay(this.closeDelay, this, bt.getNext(this.options.slider));
				}.bind(this)
			});		
		}
	}, this);
},
[...]

[...]
// Event sur les menus 
eventBoxList : function(el) {
	var box = el.getNext('div');
	if(undefined !==  box) {				
		this.show(el, box); //On affiche le menu			
		box.addEvents({
			'mouseleave': function(){
				this.timer = this.hide.delay(this.closeDelay, this, box); //On cache le menu au bout de 500 millisecondes
			}.bind(this),
			'mouseenter': function(){
				clearTimeout(this.timer);//On remet le timer à 0
			}.bind(this)
		});
	}
},
[...]

[...]
// Event sur les liens de la liste
eventLinkList : function() {
	if(undefined !== this.sliderLink) {
		//On boucle sur tous les lien slider-link
		this.sliderLink.each(function(link){
			//Si on clique
			link.addEvent('mousedown', function(){
				//On récupère l'attribut data-bt de l'image
				var name = link.getParent('div').getPrevious('img').getProperty('data-bt');
				//On insère notre tag avec la valeur de l'attribut rel du lien cliqué
				this.insertTag('<'+name+' value="'+link.get('rel')+'">', '</'+name+'>');
			}.bind(this));
		}, this);
	}
},		
[...]

/**
 * Cache les boîtes de menus
 */
hide :  function(box) {
	var fx = new Fx.Morph(box, {duration:800,transition: Fx.Transitions.linear});
	fx.start({
		opacity : [1,0],
		display : 'block',
		visibility : 'hidden'
	});
},    
/**
 * Affiche les boîtes de menus
 */
show : function(el, box) {
	var fx = new Fx.Morph(box, {duration:800,transition: Fx.Transitions.linear});
	fx.start({
		left : el.getPosition().x.toInt(),
		display : 'block',
		visibility : 'visible',
		opacity : [0,1]
	});        
},

this.eventSelectors();
this.eventLinkList();

this.initListButtons();

[...]
//Parse le texte via PHP pour la visualisation
parseText : function(text) {
	var prev = this.preview;
	var req = new Request({
		url : 'parse.php',
		method : 'post',
		onComplete: function() {
			prev.set('html', this.response.text);
		}			
	});
	req.send('text='+escape(text));
},	
[...]

//Visualisation dans la div id=prev
previewParser : function() {
	var txt = this.input.value; 			
	this.parseText(txt);			
}

/**
 * @author franckysolo
 * @see Tuto ZForm avec mootools - Site du Zéro
 * @since 24/09/2010 
 * @revision 13/02/2011
 */

var ZForm = new Class({

    Implements : Options,
    options : {    
        textId : 'text', //    id du textarea
        preview : 'prev', // id de la div de prévisualisation
        buttons : '.splButtons', //    les boutons simples            
        dlgButtons : '.dlgButtons', //    les boutons ouvrant une boite de dialogue
        listButtons : '.listButtons', //    les boutons listes ouvrant un menu de choix
        slider : '.sliderBox', //    les boites contenant un menu de choix
        sliderLink : '.slider-link',  //    les liens du menu de choix
        closeDelay : 500 // temps avant fermeture de la boite de menu en milliseconde
    },
    /**
     * @param options
     */
    initialize : function(options) {
        this.setOptions(options);
        this.input = $(this.options.textId); // getElementById(textId)
        this.preview = $(this.options.preview); // getElementById(preview)
        this.timer = 0;        
        //Buttons
        this.buttons = $$(this.options.buttons);  //tableau de tous les boutons simples
        this.dlgButtons = $$(this.options.dlgButtons);//tableau de tous les boutons ouvrant une boite de dialogue
        this.sliders = $$(this.options.slider);//tableau de toutes les boites contenant un menu de choix
        this.listButtons = $$(this.options.listButtons);//tableau de toutes les listes ouvrant un menu de choix
        this.sliderLink = $$(this.options.sliderLink);//tous les liens de menu de choix
        this.initListButtons();        
    },
    
    //Écoute les événements
    listeningEvent : function() {
        this.input.focus();
        this.eventButtons();
        this.eventMessageBox();
        this.eventList();
        this.eventLinkList();
        //Preview du parser
        if(undefined !== this.input) {
            this.input.addEvent('keyup', function() {
                this.previewParser();
            }.bind(this));
        }    
    },
    
    initListButtons : function() {
        if(undefined !== this.sliders) {
            //On fait une boucle sur toutes les boites à menu
            this.sliders.each(function(slider){
                //Je récupère l'attribut name de l'image
                var img = slider.getPrevious('img');
                var x = img.getPosition().x.toInt();
                var y = img.getPosition().y.toInt() + img.getSize().y.toInt();
                //Positionne les box par rapport au bouton cliqué
                slider.setStyles({
                    'position' : 'absolute',
                    'left' : x,
                    'top' : y,
                    'display' : 'none',
                    'visibility' : 'hidden'        
                });
            });
        }
    },
    
    /**
     * Events sur les boutons simples
     */
    eventButtons : function() {
        //Si c'est I.E. on utilise plutôt l'event mousedown
        var event = (Browser.ie) ? 'mousedown' : 'click';
        //On écoute tous les boutons simples
        this.buttons.each(function(button){
            //Si un event est détecté
            button.addEvent(event, function(){
                //On récupère l'attribut data-bt de l'image
                var name = button.getProperty('data-bt');
                //On appelle la méthode d'insertion de tags avec les bons paramètres
                this.insertTag('<'+name+'>', '</'+name+'>', this.input.getSelectedText());
            }.bind(this));
        }, this);
    },
    
    //Insertion des tags 
    insertTag : function(startTag, endTag, select) {    
        //On donne le focus à notre champ de texte
        this.input.focus();        
        //S'il n'y a pas de sélection
        if(select === null || undefined === select) {    
            //On insère nos tags autour du curseur
            this.input.insertAroundCursor({'before' : startTag, 'after' : endTag});
        } else {
            //Sinon on insère nos tags au curseur
            this.input.insertAtCursor(startTag + select + endTag, false);    
        }    
        this.input.focus();
        this.previewParser();    
    },
    
    /**
     * Lien ouvrant une fenêtre box pour insérer une ou des valeurs au choix
     */
    eventMessageBox : function() {
        var event = (Browser.ie) ? 'mousedown' : 'click';
        this.dlgButtons.each(function(bt){
            var link = $(bt);
            var text = value = '';        
            if(undefined !== link) {
                link.addEvent(event, function(){
                    var name = link.getProperty('data-bt');
                    var startTag = endTag = '';
                    var select = this.input.getSelectedText();
                    switch(name) {                    
                        case 'tableau':  
                            startTag = this.setTable();
                            text = null;
                        break;
                            
                        case 'liste':
                        case 'listnum' :
                            startTag = this.setList(name);
                            text = null;
                        break;
                            
                        case 'image' : 
                            text = (select !== '') ? select : prompt("Tapez le nom d'emplacement de l'image : ");                            
                            startTag = this.getSimpleTag(name, text);
                        break;
                            
                        case 'clip':
                            startTag = this.setObject(name);
                        break;
                        
                        case 'citation' :
                            value = prompt("Tapez le nom de l'auteur de la citation :");
                            text = null;
                            startTag = this.getTagValue(name, value, 'auteur');
                        break;
                        
                        case 'url' :
                            value = prompt("Tapez l'adresse du lien : ");
                            text = (select === '') ? prompt("Tapez le texte du lien : "): select;
                            startTag = this.getTagValue(name, value);
                        break; 
                        
                        case 'urlancre' :
                            value =  (select !== '') ? select : prompt("Tapez le nom de l'ancre : ");    
                            text = prompt("Tapez le texte du lien : ");
                            startTag = this.getTagValue(name, value);
                            break;
                        
                        case 'ancre' :
                            alert('Lier avec un lien de type:'+"\n"+'<urlancre value="nomdeLancre">Texte du lien</url>');
                            value = (select !== '') ? select : prompt("Tapez le nom de l'ancre : ");    
                            text = prompt("Tapez le texte du lien : ");
                            startTag = this.getTagValue(name, value);
                        break;                                
                    }
                    endTag = '</'+name+'>';
                    this.insertTag(startTag, endTag, text);
                }.bind(this));
            }
        }, this);
    },
    /**
     * Formate un tag à la forme <name attribut="value">text
     */
    getTagValue : function(name, value, attribut) {
        var tag = '';
        //Si aucun nom d'attribut n'est assigné
        if('' === attribut || undefined === attribut) {
            attribut = 'value'; // L'attribut par défaut sera value
        }
        //Si aucune valeur d'attribut n'est assignée
        if (value === '') {
            tag += '<'+name+' '+attribut+'="null">'; // attribut a pour valeur null
            
        } else {
            //Sinon on construit notre tag d'ouverture 
            tag = '<'+name+' '+attribut+'="'+ value +'">';            
        }    
        return tag;
    },
    /**
     * Formate un tag à la forme <tag>text
     */
    getSimpleTag : function(name, text) {
        var tag = '';
        //Si aucune sélection
        if (text === '') {
            tag = '<'+name+'>null';        //null entre les balises    
        } else {
            tag = '<'+name+'>'; //sinon on ajoute juste le tag
        }
        return tag;
    },
    /**
     * Tableau
     */
    setTable : function() {
        var tag = '';
        var lineNumber = rowNumber = 0;        
        lineNumber = prompt('Tapez le nombre de lignes que contiendra le tableau :','Nombre de lignes');
        rowNumber = prompt('Tapez le nombre de colonnes que contiendra le tableau :','Nombre de colonnes');
        for ( var i = 0; i < lineNumber; i++) {
            tag += "\t<ligne>\n";
            for (var j = 1; j <= rowNumber; j++) {            
                var text = prompt("Ligne:" + (i + 1)+ "\nTapez le texte de cette colonne : ", "Texte colonne "+ j);
                if (text) {
                    tag += "\t\t<colonne>" + text + "</colonne>\n";
                } else {
                    break;
                }
            }
            tag += "\t</ligne>\n";
        }
        tag = "<tableau>\n" + tag;
        return tag;
    },
    /**
     * Liste et liste numérique
     */
    setList : function(name) {
        var i = 1;
        var tag = '';
        var insertText = prompt (
            "Tapez le texte de la puce : (Si vous voulez arrêter, cliquez sur Annuler) ",
            "Puce " + i
        );    
        while (insertText) {
            i++;
            if (insertText) {
                var puce = "\t<puce>" + insertText + "</puce>\n";
                tag = "" + tag + "" + puce + "";
                insertText = prompt (
                    "Tapez le texte de la puce : (Si vous voulez arrêter, cliquez sur Annuler) ",
                    "Puce " + i
                );
            } else {
                break;
            }
        }
        tag = "\n<"+name+">\n" + tag;
        return tag;
    },    
    
    setObject : function(name) {
        var tag = '';
        var app = prompt("Saisissez le type de l'application au choix:\n\r flash|wmv|avi|mpeg");
        var video = prompt("Saisissez le chemin du clip");
        var w = prompt("Saisissez la largeur");
        var h = prompt("Saisissez la hauteur du clip");
        var autoStart = '0';
        var autoPlay = 'false';
        var type = '';
        switch(app) {
            case 'flash':
                 type =  'x-shockwave-flash';
                break;
            case 'wmv':
                 type =  'video/x-ms-wmv';
                autoPlay = '';
                break;
            case 'avi':
                 type =  'video/x-msvideo';
                autoPlay = '';
                break;
            case 'mpeg':
                 type =  'video/mpeg';
                break;
        }
        if(h ==='' || h > 600) h = 200;
        if(w === '' || w > 600) w = 150;
        if(app == '') {
            alert("Vous devez saisir le nom de l'application");
            app = prompt("Saisissez le type de l'application au choix:\n\r flash|wmv|avi|mpeg");
        } else {
            if(video != '') {
                tag = '<'+name+'="'+type+':'+w+':'+h+':'+autoStart+':'+autoPlay+'">'+video;
            } else {
                tag = '<'+name+'="'+type+':'+w+':'+h+':'+autoStart+':'+autoPlay+'">';
            }    
        }
        return tag;
    },
    
    // Cache les boites à menu
    hide :  function(box) {        
        var fx = new Fx.Morph(box, {duration : 800, transition: Fx.Transitions.linear});
        fx.start({
            opacity : [1,0],
            display : 'block',
            visibility : 'hidden'
        });
    },    
    // Affiche les boites à menu
    show : function(el, box) {
        var fx = new Fx.Morph(box, {duration : 800, transition: Fx.Transitions.linear});
        fx.start({
            left : el.getPosition().x.toInt(),
            display : 'block',
            visibility : 'visible',
            opacity : [0,1]
        });        
    },    
    // Event sur les boites à liste
    eventBoxList : function(el) {
        var box = el.getNext('div');
        if(undefined !==  box) {                
            this.show(el, box);            
            box.addEvents({
                'mouseleave': function(){
                    this.timer = this.hide.delay(this.closeDelay, this, box);
                }.bind(this),
                'mouseenter': function(){
                    clearTimeout(this.timer);
                }.bind(this)
            });
        }
    },
    // Event sur les liens de la liste
    eventLinkList : function() {
        if(undefined !== this.sliderLink) {
            //On boucle sur tous les lien slider-link
            this.sliderLink.each(function(link){
                //Si on clique
                link.addEvent('mousedown', function(){
                    //On récupère l'attribut data-bt de l'image
                    var name = link.getParent('div').getPrevious('img').getProperty('data-bt');
                    //On insère notre tag avec la valeur de l'attribut rel du lien cliqué
                    this.insertTag('<'+name+' value="'+link.get('rel')+'">', '</'+name+'>');
                    this.previewParser();
                }.bind(this));
            }, this);
        }
    },    
    /**
     * Events sur les boutons sélecteurs
     */
    eventList : function() {
        //Événements sur un bouton sélecteur
        this.listButtons.each(function(bt){
            if(undefined !== bt) {    
                bt.addEvents({
                    'mouseenter' : function(){ //On affiche la box et on écoute ses events         
                        this.eventBoxList(bt);
                    }.bind(this),
                    'mouseleave' : function() { //On cache la box                     
                        this.timer = this.hide.delay(this.closeDelay, this, bt.getNext(this.options.slider));
                    }.bind(this)
                });        
            }
        }, this);
    },
    
    //Parse le texte via PHP pour la visualisation
    parseText : function(text) {
        var prev = this.preview;
        var req = new Request({
            url : 'parse.php',
            method : 'post',
            evalResponse : true,
            evalScripts : true,
            onComplete: function() {
                prev.set('html', this.response.text);
            }            
        });
        req.send('text='+escape(text));
    },    
    //Visualisation dans la div id=prev
    previewParser : function() {
        var txt = this.input.value; 
        this.parseText(txt);
    }
});