/** * Librairie utilitaire JavaScript pour CiDRUX * ------------------------------------------- * @version 1.00 2008/10/30 Cédric Talbot * ------------------------------------------- * Cette librairie contient des fonctions utilitaires pour la plate-forme CiDRUX */ /** * Toutes les fonctions sont groupées sous le nom cidrux, ceci permet d'éviter des conflits de nomenclature */ var cidrux = { /** * Module de validation */ valide: { /** * Constantes du module validation */ MIN_EMAIL_LENGTH:6, MAX_EMAIL_LENGTH:80, /** * Méthode de validation pour un nom / prénom * @param {Object} string */ nom: function(string) { // Motif de validation var motif = /^[^0-9\"@\_\&\$\/\%\?\*\(\)~\[\]\{\}<>:;#]{2,80}$/; return motif.test(string); }, /** * Méthode de validation du numéro de téléphone * @param {Object} string */ telephone: function(string) { var motif = /^[0-9]{3}\-[0-9]{3}\-[0-9]{4}$/; return motif.test(string); }, /** * Méthode de validation de courriel * @param {Object} email La chaîne à valider * @return {bool} */ courriel: function(email){ /* * Motif de validation * * Un courriel doit avoir la forme /user@domain.extension/ * Et il ne peut pas avoir plus de 100 caractères */ var motif = /^[\w\.\-]{1,}@[\w\.\-]{1,}\.[a-zA-Z]{2,3}$/; return motif.test(email) && email.length >= cidrux.valide.MIN_EMAIL_LENGTH && email.length <= cidrux.valide.MAX_EMAIL_LENGTH; }, /** * Méthode de validation d'un mot de passe * --------------------------------------- * * @param {Object} pw La chaîne à valider * @param {Object} min La longueur minimale de la chaîne * @param {Object} max La longueur maximale de la chaîne * @return {bool} */ mp:function(pw, min, max) { /* * Motif de validation * * Un mot de passe valide contient au moins 1 chiffre et 1 lettre. */ var motif = /([0-9]{1,}[a-zA-Z]{1,})|([a-zA-Z]{1,}[0-9]{1,})/; return motif.test(pw) && pw.length >= min && pw.length <= max; } }, /** Module d'interface utilisateur minimaliste */ ui: { /** Constructeur de fenêtre HTML (div utilisé comme fenêtre) --- PROTOTYPE et SCRIPTACULOUS sont requis @param {Object} id : ID de la balise html div qui contient la fenêtre. @param {Object} titre : Titre de la fenêtre. @param {Object} contenuHtml : HTML à insérer dans la fenêtre. @param {Object} hauteur : Hauteur de la fenêtre. @param {Object} largeur : Largeur de la fenêtre. */ Window:function(id, titre, contenuHtml, largeur) { // Date, pour faire un ID unique var date = new Date(); // Construction du div principal var windowFrame = document.createElement("div"); windowFrame.id = id + "_" + date.getTime(); windowFrame.className = "cux-window"; windowFrame.style.position = "absolute"; windowFrame.style.display = "none"; // Détermine la position de départ (centré) var vpDim = document.viewport.getDimensions(); var vpOff = document.viewport.getScrollOffsets(); var LeftPos = Math.round((vpDim.width / 2) - (largeur / 2)); var TopPos = Math.round((vpDim.height / 2) - 100) + vpOff.top; windowFrame.style.left = LeftPos + "px"; windowFrame.style.top = TopPos + "px"; windowFrame.style.width = largeur + "px"; // Construit le h1 servant de titre var windowTitle = document.createElement("h1"); windowTitle.className = "cux-window-title"; windowTitle.style.zIndex = 2; windowTitle.innerHTML = titre; // Création du corps var windowBody = document.createElement("div"); windowBody.style.zIndex = 2; windowBody.className = "cux-window-body"; windowBody.innerHTML = contenuHtml; // Assemblage final windowFrame.appendChild(windowTitle); windowFrame.appendChild(windowBody); // Méthodes windowFrame.getBody = function() { return windowBody; } // Ajoute la fenêtre créée au document document.body.appendChild(windowFrame); // Retourne une valeur true return windowFrame; }, /** * Constructeur de fenêtre Prompt qui remplacent la fonction native JS Prompt() * @param {Object} id * @param {Object} titre * @param {Object} contenuHtml * @param {Object} largeur * @param {Object} hauteur */ Prompt:function(id, titre, contenuHtml, largeur) { // Obtient d'abord une fenêtre var win = new cidrux.ui.Window(id, titre, contenuHtml, largeur); // Construit le input de saisie var txtInput = document.createElement("input"); txtInput.type = "text"; txtInput.maxlength = "255"; txtInput.className = "cux-prompt"; // Construit le input OK var okInput = document.createElement("input"); okInput.type = "button"; okInput.value = "Ok"; okInput.className = "cux-opts"; // Construit le input Annuler var cancel = document.createElement("input"); cancel.type = "button"; cancel.value = "Annuler"; cancel.className = "cux-opts"; // Construit le conteneur de boutons var options = document.createElement("div"); options.className = "cux-opts-ct"; options.appendChild(okInput); options.appendChild(cancel); // Comportement du OK $(okInput).observe("click", function(e) { win.fire("prompt:close", { promptValue: txtInput.value }); win.remove(); }); // Comportement du CANCEL $(cancel).observe("click", function(e) { win.fire("prompt:close", { promptValue: null }); win.remove(); }); // Insertion des éléments var wBody = win.getBody(); wBody.appendChild(txtInput); wBody.appendChild(options); // Retourne le Prompt return win; }, MiniFiche:function(produit, modele, image_src, data) { // Vérifie la langue var url = cidrux.getPath(); var motif = /\/fr\//; if (motif.test(url)) { var lang = "fr"; } else { var lang = "en"; } // Surcharge de langue pour le nouveau module if ($('APP_LOCALE') != null) { switch($('APP_LOCALE').value) { case "fr-CA": lang = "fr"; break; case "en-CA": case "en-US": lang = "en"; break; } } // Liste des étiquettes var labels = new Array(); labels.push("pow"); labels.push("kw"); labels.push("volt"); labels.push("phase"); labels.push("hautMM"); labels.push("hautPO"); labels.push("longMM"); labels.push("longPO"); labels.push("poidsKG"); labels.push("poidsLB"); labels.push("prix"); labels.push("prix_no_bb"); labels.push("btuh"); labels.push("nbmoteurs"); labels.push("unit"); // Le texte est déterminé par la langue switch(lang) { case "fr": var titre = "Votre sélection : " + modele; var corps = "Voici les spécifications de votre sélection :"; // Étiquettes des spécifications var stringlabels = new Array(); stringlabels.push("Puissance (W)"); stringlabels.push("Puissance (kW)"); stringlabels.push("Voltage"); stringlabels.push("Phase"); stringlabels.push("Hauteur (mm)"); stringlabels.push("Hauteur (po)"); stringlabels.push("Longueur (mm)"); stringlabels.push("Longueur (po)"); stringlabels.push("Poids (kg)"); stringlabels.push("Poids (lb)"); stringlabels.push("Prix"); stringlabels.push("Prix sans boîte arrière"); stringlabels.push("btu/h"); stringlabels.push("moteurs"); stringlabels.push("unité"); // Couleurs var colors = new Array(); colors['W'] = "Couleur : W Blanc (W)"; colors['A'] = "Couleur : A Amande (A)"; colors['SS'] = "Couleur : SS Acier inoxydable (SS)"; // Boutons var PrintText = "Imprimer"; var CloseText = "Fermer"; // Avertissement couleur var ColorWarning = "La couleur et/ou les dimensions affichées sur l'image peuvent différer de celles sélectionnées."; break; case "en": var titre = "Your selection : " + modele; var corps = "Here are the specifications for your selection :"; // Étiquettes des spécifications var stringlabels = new Array(); stringlabels.push("Power (W)"); stringlabels.push("Power (kW)"); stringlabels.push("Voltage"); stringlabels.push("Phase"); stringlabels.push("Height (mm)"); stringlabels.push("Height (in)"); stringlabels.push("Length (mm)"); stringlabels.push("Length (in)"); stringlabels.push("Weight (kg)"); stringlabels.push("Weight (lb)"); stringlabels.push("Price"); stringlabels.push("Price w/o back box"); stringlabels.push("btu/h"); stringlabels.push("motors"); stringlabels.push("unit"); // Couleurs var colors = new Array(); colors['W'] = "Color : W White (W)"; colors['A'] = "Color : A Almond (A)"; colors['SS'] = "Color : SS Stainless Steel (SS)"; // Boutons var PrintText = "Print"; var CloseText = "Close"; // Avertissement couleur var ColorWarning = "Picture color and/or size may differ from selection."; break; } // Construit le corps corps += "
"; // Image du produit corps += ""+produit+""; // Spécifications corps += ""; // Ajoute l'avertissement de couleur corps += "

" + ColorWarning + "

"; // Obtient d'abord une fenêtre var win = new cidrux.ui.Window("miniFicheProduit", titre, corps, 475); // Extension avec prototype win = $(win); // Suite du script win.addClassName("mini-fiche"); // Construit le input IMPRIMER var okInput = document.createElement("input"); okInput.type = "button"; okInput.value = PrintText; okInput.className = "cux-opts"; // Construit le input FERMER var cancel = document.createElement("input"); cancel.type = "button"; cancel.value = CloseText; cancel.className = "cux-opts"; // Construit le conteneur de boutons var options = document.createElement("div"); options.className = "cux-opts-ct"; options.appendChild(okInput); options.appendChild(cancel); // Comportement du OK $(okInput).observe("click", function(e) { // Création d'un iframe pour imprimer var iframe = document.createElement("iframe"); iframe.name = "pv"; //iframe.id = "pv"; iframe.style.visibility = "hidden"; iframe.style.position = "absolute"; document.body.appendChild(iframe); // Récupère le document du iframe var doc = null; if(iframe.contentDocument) // Firefox, Opera doc = iframe.contentDocument; else if(iframe.contentWindow) // Internet Explorer doc = iframe.contentWindow.document; else if(iframe.document) // Others? doc = iframe.document; if(doc == null) return false; // Initialise le document et ajoute le logo stelpro doc.open(); doc.write("Stelpro Design"); doc.close(); // Ajoute le HTML dans le document du iframe var div = doc.createElement("div"); div.innerHTML = win.innerHTML; doc.body.appendChild(div); pv.focus(); pv.print(); }); // Comportement du CANCEL $(cancel).observe("click", function(e) { e.element().ancestors()[2].remove(); }); // Insertion des éléments var wBody = win.getBody(); wBody.appendChild(options); // Effet Effect.Appear(win, { duration:.2 }); // Retourne la fenêtre return win; }, /** * Méthode qui construit une minifiche produit pour l'outil de sélection * @param {Object} produit * @param {Object} modele * @param {Object} codeImg * @param {Object} data */ MiniFicheAjax:function(produit, modele, codeImg, data) { // Initialise var titre, corps, warning, PrintText, CloseText; // Le texte est déterminé par la langue switch($F('APP_LOCALE')) { case "fr-CA": titre = "Votre sélection : " + modele; corps = "Voici les spécifications de votre sélection :"; warning = "La couleur et/ou les dimensions affichées peuvent différer de celles sélectionnées."; // Boutons PrintText = "Imprimer"; CloseText = "Fermer"; break; case "en-CA": case "en-US": titre = "Your selection : " + modele; corps = "Here are the specifications for your selection :"; warning = "Picture color and/or size may differ from your selection."; // Boutons PrintText = "Print"; CloseText = "Close"; break; } // Conteneur pour le HTML de la mini fiche var mfhtml = document.createElement("div"); mfhtml.id = "mini-fiche-html"; // Obtient d'abord une fenêtre var win = new cidrux.ui.Window("miniFicheProduit", titre, corps, 600); // Extension avec prototype win = $(win); // Suite du script win.addClassName("mini-fiche"); // Paragraphe de warning var warningP = document.createElement("p"); warningP.className = "mf-warning"; warningP.innerHTML = warning; // Construit le input IMPRIMER var okInput = document.createElement("input"); okInput.type = "button"; okInput.value = PrintText; okInput.className = "cux-opts"; // Construit le input FERMER var cancel = document.createElement("input"); cancel.type = "button"; cancel.value = CloseText; cancel.className = "cux-opts"; // Construit le conteneur de boutons var options = document.createElement("div"); options.className = "cux-opts-ct"; options.appendChild(okInput); options.appendChild(cancel); // Comportement du OK $(okInput).observe("click", function(e) { // Fonction pour impression window.open("index.php?prod="+$F('CODE_PRODUIT')+"&action=printminifiche", "pwindow", "width=650,height=600,scrollbars=yes"); e.element().ancestors()[2].remove(); }); // Comportement du CANCEL $(cancel).observe("click", function(e) { e.element().ancestors()[2].remove(); // Avise le DOM qu'une minifiche est fermée document.fire("cx:minificheajaxclosed"); }); // Insertion des éléments var wBody = win.getBody(); $(wBody).hide(); wBody.appendChild(mfhtml); //wBody.appendChild(warningP); wBody.appendChild(options); // Effet Effect.Appear(win, { duration:.2 }); // Appel AJAX pour le html de la minifiche new Ajax.Request('index.php?prod=' + produit + '&action=ajaxminifiche',{ method:"post", parameters:{ mod:modele, img:codeImg, 'specs[]':data, avis:warning }, onSuccess:function(xhr) { // Affiche $('mini-fiche-html').update(xhr.responseText); Effect.Appear(wBody, { duration:0.5 }); // Avise le DOM qu'une minifiche est produite document.fire("cx:minificheajaxloaded"); } }) // Retourne la fenêtre return win; }, /** * Fonction qui affiche un lecteur vidéo * @param {Object} parentId * @param {Object} videoID */ VideoPlayer:function(parentId, videoID) { // Retire les lecteurs déjà affichés $$(".cux-vdo-player").invoke("remove"); // Surcharge de langue pour le nouveau module if ($('APP_LOCALE') != null) { switch($('APP_LOCALE').value) { case "fr-CA": lang = "fr"; break; case "en-CA": case "en-US": lang = "en"; break; } } // Volet lang switch(lang) { case "en": var titre = "Video player"; var CloseText = "Close"; break; case "fr": var titre = "Lecteur vidéo"; var CloseText = "Fermer"; break; } // Construit le input FERMER var cancel = document.createElement("input"); cancel.type = "button"; cancel.value = CloseText; cancel.className = "cux-opts"; // Construit un div pour loger l'objet flash var container = document.createElement("div"); container.id = "vdo-div"; $(container).setStyle({ width:"550px", height:"300px", margin:"0 auto", background:"transparent url('assets/common/img/ajax-loader-2.gif') no-repeat center" }); // Construit le conteneur de boutons var options = document.createElement("div"); options.className = "cux-opts-ct"; options.appendChild(cancel); // Comportement du CANCEL $(cancel).observe("click", function(e) { e.element().ancestors()[2].remove(); }); // Génère le lecteur var player = new cidrux.ui.Window(parentId, titre, "", 600); // Z-Index élevé $(player).setStyle({ zIndex:10 }); // Ajout d'une classe d'identification $(player).addClassName("cux-vdo-player"); // Insère le html var wBody = player.getBody(); // Ajoute les éléments $(wBody).appendChild(container); $(wBody).appendChild(options); // Retourne le player return $(player); }, /** * Formulaire de question * @param {Object} parentId */ Question:function(parentId) { // Retire les questionnaires déjà affichés $$(".cux-quest").invoke("remove"); // Surcharge de langue pour le nouveau module if ($('APP_LOCALE') != null) { switch($('APP_LOCALE').value) { case "fr-CA": lang = "fr"; break; case "en-CA": case "en-US": lang = "en"; break; } } // Volet lang switch(lang) { case "en": var titre = "Question"; var CloseText = "Close"; var SubmitText = "Submit"; var InvalidText = new Array(); InvalidText['cx-quest-prenom'] = "First-name is required (must be between 2 and 30 characters long)"; InvalidText['cx-quest-nom'] = "Name is required (must be between 2 and 30 characters long)"; InvalidText['cx-quest-ville'] = "City name is required (must be between 2 and 50 characters long)"; InvalidText['cx-quest-mail'] = "Email address is invalid"; InvalidText['cx-quest-phone'] = "Phone number is invalid (expected format : 999-999-9999)"; InvalidText['cx-quest-code'] = "Security code must be 4 characters long"; InvalidText['cx-quest-q'] = "You must enter a question (at least 10 characters)"; var InvalidGeneric = "This value is invalid"; var InvalidCode = "Security code is incorrect, please try again"; var MessageFinal = "Thank you for your interest in Stelpro Design products. Customer service will answer your question shortly."; break; case "fr": var titre = "Question"; var CloseText = "Fermer"; var SubmitText = "Envoyer"; var InvalidText = new Array(); InvalidText['cx-quest-prenom'] = "Le prénom est requis (doit avoir entre 2 et 30 caractères)"; InvalidText['cx-quest-nom'] = "Le nom est requis (doit avoir entre 2 et 30 caractères)"; InvalidText['cx-quest-ville'] = "La ville est requise (doit avoir entre 2 et 50 caractères)"; InvalidText['cx-quest-mail'] = "L'adresse courriel est invalide"; InvalidText['cx-quest-phone'] = "Le numéro de téléphone est invalide (format attendu : 999-999-9999)"; InvalidText['cx-quest-code'] = "Le code de sécurité doit contenir 4 caractères"; InvalidText['cx-quest-q'] = "Vous devez écrire une question (au moins 10 caractères)"; var InvalidGeneric = "Cette valeur est invalide"; var InvalidCode = "Le code de sécurité est erroné, veuillez réessayer"; var MessageFinal = "Merci de votre intérêt pour les produits Stelpro Design. Notre service à la clientèle répondra sous peu à votre question."; break; } // Génère la fenêtre var quest = new cidrux.ui.Window(parentId, titre, "", 730); // Construit le input SUBMIT var submitInput = document.createElement("input"); submitInput.id = 'cx-quest-submit-btn'; submitInput.type = "button"; submitInput.value = SubmitText; submitInput.className = "cux-opts"; // Construit le input FERMER var cancel = document.createElement("input"); cancel.type = "button"; cancel.value = CloseText; cancel.className = "cux-opts"; // Construit un div pour loger l'objet flash var container = document.createElement("div"); container.id = "quest"; $(container).setStyle({ width:"550px", height:"300px", margin:"0 auto", background:"transparent url('assets/common/img/ajax-loader-2.gif') no-repeat center" }); // Construit le conteneur de boutons var options = document.createElement("div"); options.className = "cux-opts-ct"; options.appendChild(submitInput); options.appendChild(cancel); // Comportement du CANCEL $(cancel).observe("click", function(e) { e.element().ancestors()[2].remove(); }); // Comportement du SUBMIT $(submitInput).observe("click", function(e){ // Réinitialise la validation $('VError').hide(); $('VError').update(""); $$('.cx-quest-invalid-icon').invoke('remove'); // Instance de l'image pour marquer l'invalidité var invalidImage = new Image(); invalidImage.src = 'http://www.stelpro.com/produits/assets/common/img/error.png'; invalidImage.title = InvalidGeneric; invalidImage.className = "cx-quest-invalid-icon"; // Flag de validation var valide = true; var verrors = new Array(); // Validation des données // 1- Prénom if (!cidrux.valide.nom($F('cx-quest-prenom'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-prenom']); // Icone d'invalidité $('cx-quest-prenom').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 2- Nom if (!cidrux.valide.nom($F('cx-quest-nom'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-nom']); // Icone d'invalidité $('cx-quest-nom').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 3- Ville if (!cidrux.valide.nom($F('cx-quest-ville'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-ville']); // Icone d'invalidité $('cx-quest-ville').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 4- Prénom if (!cidrux.valide.courriel($F('cx-quest-mail'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-mail']); // Icone d'invalidité $('cx-quest-mail').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 5- Phone // Construit le numéro var phoneNum = $F('cx-quest-phone1') + "-" + $F('cx-quest-phone2') + "-" + $F('cx-quest-phone3') if (phoneNum != "" && !cidrux.valide.telephone(phoneNum)) { // Message d'erreur verrors.push(InvalidText['cx-quest-phone']); // Icone d'invalidité $('cx-quest-phone3').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 6- Code var motifCode = /^[0-9a-z]{4}$/i; if (!motifCode.test($F('cx-quest-code'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-code']); // Icone d'invalidité $('cx-quest-code').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 7- Question var qText = $F('cx-quest-q').strip(); if (qText.length < 10) { // Message d'erreur verrors.push(InvalidText['cx-quest-q']); // Icone d'invalidité $('qError').update(invalidImage.clone()); // Flag valide = false; } // Vérification et traitement ajax if (valide) { // Ok traitement ajax pour le code et la soumission new Ajax.Request('index.php?action=ajaxquestprocess&prod=' + $F('CODE_PRODUIT'), { method:'post', parameters:$('cx-quest-form').serialize(true), onCreate:function() { $('cx-quest-div').hide(); $('cx-quest-process').show(); }, onSuccess:function(xhr) { var state = parseInt(xhr.status); switch(state) { case 200: // Tout est ok $('cx-quest-div').update("

"+MessageFinal+"

"); $('cx-quest-submit-btn').remove(); break; case 201: // Code sécurimage invalide $('VError').update(InvalidCode); $('VError').show(); $('cx-quest-code').insert({ after:invalidImage.clone() }); $('captcha').src = 'http://www.stelpro.com/fr/securimage/securimage_show.php?sid='+Math.random(); break; } }, onComplete:function(xhr) { if ($('cx-quest-div') != null && $('cx-quest-process') != null) { $('cx-quest-div').show(); $('cx-quest-process').hide(); } } }) } else { // Affiche le message d'erreur dans le conteneur prévu $('VError').update(verrors.join('
')); // Affiche l'erreur $('VError').show(); } }); // Z-Index élevé $(quest).setStyle({ zIndex:11 }); // Ajout d'une classe d'identification $(quest).addClassName("cux-quest"); // Insère le html var wBody = quest.getBody(); // Ajoute les éléments $(wBody).appendChild(container); $(wBody).appendChild(options); // Retourne le player return $(quest); }, /** * Formulaire d'envoi à un ami * @param {Object} parentId */ Sendpage:function(parentId) { // Retire les questionnaires déjà affichés $$(".cux-quest").invoke("remove"); // Surcharge de langue pour le nouveau module if ($('APP_LOCALE') != null) { switch($('APP_LOCALE').value) { case "fr-CA": lang = "fr"; break; case "en-CA": case "en-US": lang = "en"; break; } } // Volet lang switch(lang) { case "en": var titre = "Send this page"; var CloseText = "Close"; var SubmitText = "Submit"; var InvalidText = new Array(); InvalidText['cx-quest-prenom'] = "First-name is required (must be between 2 and 30 characters long)"; InvalidText['cx-quest-nom'] = "Name is required (must be between 2 and 30 characters long)"; InvalidText['cx-quest-ville'] = "City name is required (must be between 2 and 50 characters long)"; InvalidText['cx-quest-mail'] = "Email address is invalid"; InvalidText['cx-quest-phone'] = "Phone number is invalid (expected format : 999-999-9999)"; InvalidText['cx-quest-code'] = "Security code must be 4 characters long"; InvalidText['cx-quest-q'] = "You must enter a question (at least 10 characters)"; InvalidText['cx-quest-dest1'] = "You must enter a valid e-mail address for the first contact"; InvalidText['cx-quest-dest2'] = "Specified e-mail is invalid for contact #2"; InvalidText['cx-quest-dest3'] = "Specified e-mail is invalid for contact #3"; var InvalidGeneric = "This value is invalid"; var InvalidCode = "Security code is incorrect, please try again"; var MessageFinal = "Thank you for sharing your interest in Stelpro Design products."; break; case "fr": var titre = "Envoyer la page"; var CloseText = "Fermer"; var SubmitText = "Envoyer"; var InvalidText = new Array(); InvalidText['cx-quest-prenom'] = "Le prénom est requis (doit avoir entre 2 et 30 caractères)"; InvalidText['cx-quest-nom'] = "Le nom est requis (doit avoir entre 2 et 30 caractères)"; InvalidText['cx-quest-ville'] = "La ville est requise (doit avoir entre 2 et 50 caractères)"; InvalidText['cx-quest-mail'] = "L'adresse courriel est invalide"; InvalidText['cx-quest-phone'] = "Le numéro de téléphone est invalide (format attendu : 999-999-9999)"; InvalidText['cx-quest-code'] = "Le code de sécurité doit contenir 4 caractères"; InvalidText['cx-quest-q'] = "Vous devez écrire une question (au moins 10 caractères)"; InvalidText['cx-quest-dest1'] = "Vous devez inscrire une adresse courriel valide pour le premier destinataire."; InvalidText['cx-quest-dest2'] = "Le courriel du 2e destinataire est invalide"; InvalidText['cx-quest-dest3'] = "Le courriel du 3e destinataire est invalide"; var InvalidGeneric = "Cette valeur est invalide"; var InvalidCode = "Le code de sécurité est erroné, veuillez réessayer"; var MessageFinal = "Merci de partager votre intérêt pour les produits de Stelpro Design."; break; } // Génère la fenêtre var quest = new cidrux.ui.Window(parentId, titre, "", 730); // Construit le input SUBMIT var submitInput = document.createElement("input"); submitInput.id = 'cx-quest-submit-btn'; submitInput.type = "button"; submitInput.value = SubmitText; submitInput.className = "cux-opts"; // Construit le input FERMER var cancel = document.createElement("input"); cancel.type = "button"; cancel.value = CloseText; cancel.className = "cux-opts"; // Construit un div pour loger l'objet flash var container = document.createElement("div"); container.id = "quest"; $(container).setStyle({ width:"550px", height:"300px", margin:"0 auto", background:"transparent url('assets/common/img/ajax-loader-2.gif') no-repeat center" }); // Construit le conteneur de boutons var options = document.createElement("div"); options.className = "cux-opts-ct"; options.appendChild(submitInput); options.appendChild(cancel); // Comportement du CANCEL $(cancel).observe("click", function(e) { e.element().ancestors()[2].remove(); }); // Comportement du SUBMIT $(submitInput).observe("click", function(e){ // Réinitialise la validation $('VError').hide(); $('VError').update(""); $$('.cx-quest-invalid-icon').invoke('remove'); // Instance de l'image pour marquer l'invalidité var invalidImage = new Image(); invalidImage.src = 'http://www.stelpro.com/produits/assets/common/img/error.png'; invalidImage.title = InvalidGeneric; invalidImage.className = "cx-quest-invalid-icon"; // Flag de validation var valide = true; var verrors = new Array(); // Validation des données // 1- Prénom if (!cidrux.valide.nom($F('cx-quest-prenom'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-prenom']); // Icone d'invalidité $('cx-quest-prenom').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 2- Nom if (!cidrux.valide.nom($F('cx-quest-nom'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-nom']); // Icone d'invalidité $('cx-quest-nom').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 4- Courriel du demandeur if (!cidrux.valide.courriel($F('cx-quest-mail'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-mail']); // Icone d'invalidité $('cx-quest-mail').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 5- Courriel du destinataire 1 if (!cidrux.valide.courriel($F('cx-quest-dest1'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-dest1']); // Icone d'invalidité $('cx-quest-dest1').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 5.1 - Courriel du destinataire 2 if ($F('cx-quest-dest2') != "" && !cidrux.valide.courriel($F('cx-quest-dest2'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-dest2']); // Icone d'invalidité $('cx-quest-dest2').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 5.2 - Courriel du destinataire 2 if ($F('cx-quest-dest3') != "" && !cidrux.valide.courriel($F('cx-quest-dest3'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-dest3']); // Icone d'invalidité $('cx-quest-dest3').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // 6- Code var motifCode = /^[0-9a-z]{4}$/i; if (!motifCode.test($F('cx-quest-code'))) { // Message d'erreur verrors.push(InvalidText['cx-quest-code']); // Icone d'invalidité $('cx-quest-code').insert({ after:$(invalidImage).clone() }); // Flag valide = false; } // Vérification et traitement ajax if (valide) { // Ok traitement ajax pour le code et la soumission new Ajax.Request('index.php?action=ajaxpagesendprocess&prod=' + $F('CODE_PRODUIT'), { method:'post', parameters:$('cx-quest-form').serialize(true), onCreate:function() { $('cx-quest-div').hide(); $('cx-quest-process').show(); }, onSuccess:function(xhr) { var state = parseInt(xhr.status); switch(state) { case 200: // Tout est ok $('cx-quest-div').update("

"+MessageFinal+"

"); $('cx-quest-submit-btn').remove(); break; case 201: // Code sécurimage invalide $('VError').update(InvalidCode); $('VError').show(); $('cx-quest-code').insert({ after:invalidImage.clone() }); $('captcha').src = 'http://www.stelpro.com/fr/securimage/securimage_show.php?sid='+Math.random(); break; } }, onComplete:function(xhr) { if ($('cx-quest-div') != null && $('cx-quest-process') != null) { $('cx-quest-div').show(); $('cx-quest-process').hide(); } } }) } else { // Affiche le message d'erreur dans le conteneur prévu $('VError').update(verrors.join('
')); // Affiche l'erreur $('VError').show(); } }); // Z-Index élevé $(quest).setStyle({ zIndex:11 }); // Ajout d'une classe d'identification $(quest).addClassName("cux-quest"); // Insère le html var wBody = quest.getBody(); // Ajoute les éléments $(wBody).appendChild(container); $(wBody).appendChild(options); // Retourne le player return $(quest); } }, /** Méthode qui permet d'obtenir l'url pour cidrux */ getPath:function() { // L'url complet var url = location.href; return url; }, activateCalView:function() { // Active les calendarview 'embed' $$("div.CV_Embed").each(function(div) { Calendar.setup({ dateField : div.id + "_df", parentElement : div.id }); }); // Active les calendarview popup $$("input.CV_Popup").each(function(input) { Calendar.setup({ dateField : input.id, triggerElement : input.id }); }); } } // Gère le chargement du DOM Event.observe(document, "dom:loaded", function() { cidrux.activateCalView(); });