/*
Title: videotron.remoteLoad.js
Author: nurun.com
Updated: September 2008
Content: - VIDEOTRON.widget.Overlay
- VIDEOTRON.widget.remoteLoad
- VIDEOTRON.widget.Dialog
*/
if (typeof VIDEOTRON === "undefined" || !VIDEOTRON) {
var VIDEOTRON = {};
}
if (typeof VIDEOTRON.widget === "undefined" || !VIDEOTRON.widget) {
VIDEOTRON.widget = {};
}
// ------[ WIDGET OVERLAY ]------------------------------------------------- //
/**
* Overlay crée un panel YUI avec un contenu lié à un objet (lien/form/etc.)
*
* @param {Object} UserConfig Un objet contenant les valeurs initials pour les
configs initials du panel
* @param {String | HTMLElement} target Id | Element for the overlay panel
* @param {Objetc remoteLoad} rl - Référence à l'objet remoteLoad qui demande la construction
*/
VIDEOTRON.widget.Overlay = function(userConfig, hookedElement, rl) {
/**********
Private member
**********/
var that = this; //Référence à l'object lui même
this.submittedId = false;
// Crée le Namespace de travail (scope global à tous les overlays)
if(!YAHOO.custom || !YAHOO.custom.overlay) {
this.scope = YAHOO.namespace('custom.overlay');
} else {
this.scope = YAHOO.custom.overlay;
}
// Ajoute le Overlay Manager s'il n'existe pas (scope global à tous les overlay)
if(!this.scope.manager) {
this.scope.manager = new YAHOO.widget.OverlayManager();
}
// Ajoute automatiquement le script pour les objets flash
// IE ne supporte pas bien le onload sur les script donc le script doit être chargé le plus tôt possible
if(typeof(swfobject) == 'undefined') {
var script = document.createElement("script");
script.src = "/service/static/residentiel/js/swfobject.js";
script.type = "text/javascript";
var hd = document.getElementsByTagName("head")[0];
hd.appendChild(script);
}
// Crée un div qui sert de wrapper au différent overlay du scope
if(!this.scope.wrapper) {
this.scope.wrapper = document.createElement('div');
this.scope.wrapper.id='custom-overlay-wrapper';
this.scope.wrapper.style.position = 'absolute';
this.scope.wrapper.style.zIndex = '102';
this.scope.wrapper.style.left = '0px';
this.scope.wrapper.style.top = '0px';
document.body.appendChild(this.scope.wrapper);
}
this.hookedElement = hookedElement;
this._isLoaded = false; // indique si le panel a été chargé
this._headerContent = ''; // Contenue par défaut du header du overlay
this._bodyConent = ''; // Contenue par défaut du body du overlay
this._footerContent = ''; // Contenue par défaut du footer du overlay
// Configuration initial par défaut
this.cfg = {
/**
* ID {String} Identifiant du container du panel
* Optionnel : Identifiant par défaut du panel. Le Id est généré à partir du targetId ou du ID du hookedElement lors du rendering du panel
* Défaut : remoteLoad
**/
id: "remoteLoad",
/**
* renderTarget {Object} Noeud du DOM qui sert de point d'origine pour le rendering du panel et la recherche des éléments
* Optionnel : Le noeud sert de point d'origine, donc définir sur le container parent pour les sous-panels
* Défaut : document.body
**/
renderTarget: document.body,
/**
* title {String} Titre du panel
* Optionnel : Peut être défini avec la config meta overlay-title si le contentType est défini à "remote"
* Défaut : ""
**/
title: "",
/**
* width {Integer} largeur total du panel
* Optionnel : Peut être défini avec la config meta overlay-width si le contentType est défini à "remote"
* Défaut : 50em - Éviter les mesures en pourcentage (%).
**/
width: "50em",
/**
* height {Integer} hauteur total du panel
* Optionnel : Peut être défini avec la config meta overlay-height si le contentType est défini à "remote"
* Défaut : auto - Éviter les mesures en pourcentage (%).
**/
height: 'auto',
/**
* fixedCenter {Boolean} Indique si le panel doit être centré
* Optionnel : Positionne le panel au centre de l'espace visible à l'écran et le conserve centré même si l'utilisateur scroll le contenue
* Cette propriété est automatiquement défini à false pour les panel qui affiche des objets flash
* Défaut : true
**/
fixedCenter: true,
/**
* dragable {Boolean} Indique si le panel peut être déplacé par l'utilisateur
* Optionnel : Permet à l'utilisateur de déplacer la fenêtre avec la souris
* Défaut : false
**/
dragable: false,
/**
* showCloseX {Boolean} Permettre la fermeture du panel
* Optionnel : Fait référence à la propriété 'close' du panel.
* Défaut : true
**/
showCloseX: true,
/**
* modal {Boolean} Indique si le panel est modal ou pas
* Optionnel : Ajoute un mask qui couvre tout le contenue et gère les click pour prévenir tout action sur le contenu
* à l'extérieur du panel lorsqu'il est affiché
* Défaut : true
**/
modal: true,
/**
* addCloseLink {Boolean} Permet de générer un lien (bouton) "fermmer" dans le footer du panel
* Optionnel : Cette propriété dépend directement de la méthode getFooterContent().
* Défaut : false
**/
addCloseLink: false,
/**
* useTooltips {Boolean} Indique que le panel utilise des fonctionnalité du YAHOO.widget.Tooltip
* Optionnel : Requiert la présence des scripts nécessaire au fonctionnement du YAHOO.widget.Tooltip.
* Peut être défini avec la config meta overlay-useTooltips si le contentType est défini à "remote".
* Cette valeur sert uniquement d'indiquateur. Si le contentType est défini à "remote", la page chargé
* doit contenir les scripts nécessaire à l'initialisation des Tooltips.
* Défaut : false
**/
useTooltips: false,
/**
* useColapsedList {Boolean} Indique que le panel utilise des fonctionnalité de list Collapse
* Optionnel : Cette fonctionnalité a été ajouté dans le cadre du projet refonte Vidéotron.
* Requiert la présence des scripts nécessaire au fonctionnement des liste Collapse (voir fonction collapseUncollapseDataList() du projet refonte Vidéotron)
* Peut être défini avec la config meta overlay-useColapsedList si le contentType est défini à "remote".
* Défaut : false
**/
useColapsedList: false,
/**
* useSWFObject {Boolean} Indique que le panel utilise des fonctionnalité du objectswf.js
* Optionnel : Requiert la présence des scripts nécessaire au fonctionnement du objectswf.
* Peut être défini avec la config meta overlay-useSWFObject si le contentType est défini à "remote".
* Cette valeur sert uniquement d'indiquateur. Si le contentType est défini à "remote", la page chargé
* doit contenir les scripts nécessaire à l'initialisation des swf. La méthode _testSWFScript convertie
* automatiquement les calls embedSWF en createSWF.
* Voir la méthode _testSWFScript pour plus de détails.
* Défaut : false
**/
useSWFObject: false,
/**
* contentType {String | Function} Indique le mode de fonctionnement du chargement des données du panel.
* Optionnel : {String} 'remote' - Utilise l'attribut href d'un lien ou l'attribut action d'un form pour charger le
* contenue avec un YUI.connection (AJAX)
* {Function} - Appelle une fonction pour récupérer le contenue du overlay. La fonction doit retourner un objet
* strucuturé {head: 'head content', body: 'body content', foot: 'footer content'}
* Défaut : 'remote'
**/
contentType: 'remote',
/**
* useMetaConfig {Boolean} Indique que des metas sont définie dans le document pour configurer les différentes options du Panel.
* Optionnel : Applicable uniquement avec le contentType 'remote'.
* Utilisation : i.e.:
* Configuration meta disponible :
* overlay-title : Défini le titre du panel
* overlay-width : Largeur total du panel
* overlay-height : Hauteur total du panel
* overlay-addCloseLink : Indique qu'un lien (bouton) de fermeture doit être ajouté automatiqment dans le footer du panel
* overlay-useTooltips : Le panel utilise des fonctionnalité de tooltips, la fonction applicable doit donc être exécuté
* Plus vraiment utile de l'indquer dans cette version, la détection et l'exécution des script est maintenant automatisé
* overlay-useColapsedList : Dans le cadre du projet Vidéotron, cette fonction permet d'exécuter les initialisation des liste rétractable
* Fonctionnalité ajouté uniquement pour le projet refonte Vidéotron.
* overlay-useSWFObject : Le panel contient du flash et doit s'afficher proprement en concéquence de cette option
* Optionnel, la détection est automatisé au moment de parser les scripts
* contenue avec un YUI.connection (AJAX)
* Défaut : true
**/
useMetaConfig: true,
/**
* useRemotePreLoader {Boolean} Indique si une image de préchargement doit être affiché.
* Optionnel : Affiche une image de préchargement sur un mask modal.
* Applicable uniquement si le contentType est défini à "remote"
* Défaut : true
**/
useRemotePreLoader: true,
/**
* remoteSourceElements {Object} Indique les sources de données pour le head, le body et le footer du panel
* Optionnel : Applicable uniquement si le contentType est défini à "remote".
* L'objet contient 3 propriété qui indentifi les ID des noeuds à utiliser pour les infos du panel
* Structure de l'objet :
* header {String) Id du noeud à récupérer dans le DOM pour le contenu du header du panel.
* * Si le test du header retourne false, le contenu par défaut sera utilisé
* Défaut : false
* content {String) Id du noeud à récupérer dans le DOM pour le contenu du body du panel.
* * Si le test du content retourne false, le contenu par défaut sera utilisé
* Défaut : 'content'
* footer {String) Id du noeud à récupérer dans le DOM pour le contenu du footer du panel.
* * Si le test du footer retourne false, le contenu par défaut sera utilisé
* Défaut : false
**/
remoteSourceElements: {
header: false,
content: 'content',
footer: false
},
/**
* imgPreloader {Object} Information sur l'image utilisé pour l'affichage du preloader.
* Optionnel : Applicable uniquement si le contentType est défini à "remote".
* L'objet contient 3 propriétés obligatoires qui indentifi la source, le width et le height de l'image
* Structure de l'objet :
* src {String) Url de l'image à utiliser
* Défaut : '/service/static/residentiel/img/interface/ajax-loader4.gif'
* width {Integer) Width en PX de l'image pour l'affichage
* Défaut : 62
* height {Integer) Height en PX de l'image pour l'affichage
* Défaut : 62
**/
imgPreloader: {
src: '/service/static/residentiel/img/interface/ajax-loader4.gif',
width: '62',
height: '62'
},
/**
* effect {Boolean false | Object} Effet à utiliser pour l'affichage du panel
* Optionnel : Si un effet est défini, elle sera appliqué au panel pour l'affichage et la fermetur du panel
* La structure de l'objet dépend de l'effet demandé.
* Les code d'exécution de l'effet doivent être préalablement chargé pour le bon fonctionnement de l'effet
* Défaut : {effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.5}
**/
effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5}
};
// Récupère les configs initial passé en paramètre
for (var key in userConfig) {
if (userConfig.hasOwnProperty(key)) {
this.cfg[key] = userConfig[key];
}
}
// initialise le target pour le rendering du panel
// Si le hookedElement est une string, l'élément doit être récupéré dans le dom
if(typeof hookedElement == 'string') {
var tmpEl = document.getElementById(hookedElement);
// Si l'élément n'a pas été trouvé le overlay ne peut pas exister!
if(!tmpEl || typeof tmpEl == 'undefined') {
return false;
} else {
hoodedElement = tmpEl;
}
}
this.cfg.renderTarget = hookedElement.targetId || hookedElement.id || this.cfg.id;
// Défini le nom du panel
this.panelName = '_panel_' + this.cfg.renderTarget;
/***** OLD TRACKING
WORS WITH ALL BROWSER EXCEPT IE < 8 -- Not tested on IE 8
*****
this._timerID = null;
this._startHistoryTracking = function() {
that._historyLength = window.history.length;
that._timerID = setInterval(that._checkHistoryHash, 5000);
};
this._checkHistoryHash = function() {
alert('check history hash Loc = ' + document.location.href);
if(!/\#overlay-/i.test(document.location.href)) {
alert('hide panel!');
that.scope[that.panelName].hide();
that._stopHistoryTracking();
}
};
this._stopHistoryTracking = function() {
clearInterval(that._timerID);
};
*****/
/**
* Ajoute la possibilité d'avoir un callback après que le panel soit fermé
* @return void
*/
this._afterHide = function () {
/*****
::: TO DO :::
Ajouter les fonctionnalités d'extension qui doit être exécuté après la fermeture du panel
***** Le callback est déjà implémenté dans la méthode _prepareMyPanel
*****/
//alert('afterHide - ' + that.scope.wrapper.style.zIndex);
//that.scope.wrapper.style.zIndex = '102';
that.scope[that.panelName].isVisible = false;
YAHOO.util.Dom.removeClass(document.body, "overlay-print-layout");
YAHOO.util.Dom.removeClass('yui-panel-' + that.cfg.renderTarget, "overlay-print-layout");
YAHOO.util.Dom.removeClass('yui-panel-' + that.cfg.renderTarget + '_c', "overlay-print-layout");
};
/**
* Ajoute la possibilité d'avoir un callback juste avant que le panel se ferme
* @return void
*/
this._beforeHide = function () {
/*****
::: TO DO :::
Ajouter les fonctionnalités d'extension de cette méhode qui doit être exécuté avant la fermeture du panel
***** Le callback est déjà implémenté dans la méthode _prepareMyPanel
*****/
//if(/^\#overlay-/i.test(document.location.hash)) {
// history.back(1);
//}
};
/**
* Ajoute la possibilité d'avoir un callback lorsque le panel est affiché
* @return void
*/
this._afterShow = function () {
/*****
::: TO DO :::
Ajouter les fonctionnalités d'extension et de callback de cette méhode qui doit être exécuté après l'affichage du panel
*****/
//var loc = document.location;
//window.location.assign('#' + that.cfg.renderTarget);
//document.location = '#' + that.cfg.renderTarget;
//window.navigate('#' + that.cfg.renderTarget);
//that._startHistoryTracking();
};
/**
* Ajoute la possibilité d'avoir un callback avant l'affichage du panel
* @return void
*/
this._beforeShow = function () {
/*****
::: TO DO :::
Ajouter les fonctionnalités d'extension de cette méhode qui doit être exécuté avant l'affichage du panel
***** Le callback est déjà implémenté dans la méthode _prepareMyPanel
*****/
// Assure que le wrapper des panel est toujours au dessus du mask avant de faire l'affichage
that.scope.wrapper.style.zIndex = that.scope[that.panelName].cfg.getProperty('zIndex');
YAHOO.util.Dom.addClass(document.body, "overlay-print-layout");
YAHOO.util.Dom.addClass('yui-panel-' + that.cfg.renderTarget, "overlay-print-layout");
YAHOO.util.Dom.addClass('yui-panel-' + that.cfg.renderTarget + '_c', "overlay-print-layout");
};
/**
* Ajoute la possibilité d'avoir un callback après le chargement des données du panel
* @return void
*/
this._afterLoad = function () {
/*****
::: TO DO :::
Ajouter les fonctionnalités d'extension de cette méhode qui doit être exécuté après le chargement des données du panel
*****/
// Initialise le panel
that._prepareMyPanel();
if(that.submittedId){
// rl.manageOnReady(null ,null ,rl);
// rl.manageLinks(that.submittedId,rl);
}
};
/**
* Ajoute la possibilité d'avoir un callback avant le chargement des données du panel (avant le call AJAX)
* @return void
*/
this._beforeRemoteLoad = function() {
/*****
::: TO DO :::
Ajouter les fonctionnalités d'extension de cette méhode qui doit être exécuté avant le call AJAX pour chargé les données du panel.
Incluant la possibilité d'avoir d'autre code exécuté avant le code de la fonction elle même et la possibilité d'overwriter la méthode elle même.
*****/
/*****
Un seul preloader est généré pour tous les overlay. Le scope du preloader est donc global à tous les overlay.
*****/
// Si le preloader doit être affiché pour indiquer un téléchargement
if(that.cfg.useRemotePreLoader) {
// Si le preloader n'a pas encore été créé, crée le preloader
if(!this.scope.preloader) {
// Si un div#overlay-preloader existe déjà dans le document, récupère se DIV
var div = document.getElementById('overlay-preloader');
// Si aucune div#overlay-preloader, ajoute le div au DOM
if(!div) {
div = document.createElement('div');
div.id = 'overlay-preloader';
this.scope.wrapper.appendChild(div);
div.style.position = 'relative';
}
// Initialise le panel pour le preloader temporaire qui sera afficher jusqu'a se que les données externe soit reçus et que le panel soit prêt à afficher
this.scope.preloader =
new YAHOO.widget.Panel("preloader",
{ width:"50em",
fixedcenter:true,
close:false,
draggable:false,
zindex:1,
modal:true,
visible:false
}
);
this.scope.preloader.isVisible = false;
/**
* setPosition permet de centrer l'image du preloader au centre de la zone visible de la fenêtre
* @return void
*/
this.scope.preloader.setPosition = function() {
var l, t, Dom;
Dom = YAHOO.util.Dom;
// Calcul la position horizontal
l = Dom.getDocumentScrollLeft() + Math.ceil(Dom.getViewportWidth()/2) - Math.ceil(that.cfg.imgPreloader.width/2);
// Calcul la position vertical
t = Dom.getDocumentScrollTop() + Math.ceil(Dom.getViewportHeight()/2) - Math.ceil(that.cfg.imgPreloader.height/2);
// Applique le positionnement sur l'image
that.scope.preloader.loaderImage.style.left = l + 'px';
that.scope.preloader.loaderImage.style.top = t + 'px';
// Applique le positionnement sur le label
t += parseInt(that.cfg.imgPreloader.height);
that.scope.preloader.loaderLabel.style.top = t + 'px';
that.scope.preloader.loaderLabel.style.left = '0px';
};
// Ajoute le preloader au manager des overlays
this.scope.manager.register(this.scope.preloader);
// Gestion du positionnement de l'image du preloader
that.scope.preloader.showMaskEvent.subscribe(function() {
if(!that.scope.preloader.loaderImage) {
var img = new Image;
img.src = that.cfg.imgPreloader.src;
img.id = 'CPNL_overlay___ajax_img_loader___';
img.style.width = that.cfg.imgPreloader.width + 'px';
img.style.height = that.cfg.imgPreloader.height + 'px';
img.style.position = 'absolute';
img.style.zIndex = 101;
img.setAttribute('alt', rl.lang.lbl.titlePreloader);
document.body.appendChild(img);
that.scope.preloader.loaderImage = img;
var lbl = document.createElement('div');
lbl.className = 'overlay-loading-label';
lbl.id = 'CPNL_overlay___ajax_lbl_loader___';
lbl.style.zIndex = 102;
lbl.innerHTML = rl.lang.lbl.titlePreloader;
document.body.appendChild(lbl);
that.scope.preloader.loaderLabel = lbl;
}
that.scope.preloader.setPosition();
that.scope.preloader.loaderImage.style.display = 'block';
that.scope.preloader.loaderLabel.style.display = 'block';
}, that.scope.preloader, true);
}
// Aucun panel n'est affiché pour le preloader. L'image du preloader est affiché au dessus du mask
// du panel et centré dans la zone visible de l'écran
this.scope.preloader.buildMask();
this.scope.preloader.sizeMask();
this.scope.preloader.cfg.setProperty('zIndex', 100);
this.scope.preloader.stackMask();
this.scope.preloader.showMask();
this.scope.preloader.isVisible = true;
// Charge le contenue du overlay
that._loadContent();
}
};
/**
* searchNodes est utilisé par la méthode getElementsByAttribute qui permet
* de recherche des nodes à travers un DOM XML pour IE
*
* @param {Node Object} node Un objet représentant une node d'un DOM XML
* @param {Function} func Fonction utilisé pour la récursivité
*/
this.searchNodes = function _searchNodes(node, func) {
// Exécute la fonction avec le paramètre node
func(node);
// Récupère la node suivante
node = node.firstChild;
// Boucle récursive pour rechercher dans tous les nodes enfants
while(node) {
_searchNodes(node, func);
node = node.nextSibling;
}
};
/**
* getElementsByAttribute est une méthode utilisée pour rechercher des nodes d'un
* DOM XML ayant une valeur précise dans un attribut précis.
*
* @param {DOM Object} dom Un objet représentant un DOM XML ou un noeud de DOM XML
* @param {String} attr Nom de l'attribut à tester
* @param {String} value Valeur recherché dans l'attribut attr
* @param [Integer] limit Valeur optionnel permettant de limiter le nombre de noeuds retourné par la fonction
*/
this.getElementsByAttribute = function (dom, attr, value, limit) {
// S'il n'y a pas de dom, retourne false
if(!dom) return false; // Défini le limit à false si aucune limite (numérique) n'est reçus
if(typeof limit == 'undefined' || typeof limit != 'number') limit = false;
var results = [];
// Recherche récursive pour trouver les nodes correspondante
this.searchNodes(dom, function (node) {
// Récupère uniquement si le node type est un element et que la node contient l'attribut voulue
var curNode = node.nodeType === 1 && node.getAttribute(attr);
// Si curNode est une string et éguale à value ou que value n'est pas une string récupère la node
if(typeof curNode === 'string' && (curNode == value || typeof value !== 'string')) {
// Si le DOM ne supporte pas le innerHTML sur les node (IE par exemple)
if(!node.innerHTML) {
// Reconstruit le résultat produit par le innerHTML.
// Le innerHTML ne contient pas le XML (html) de la node courrante, mais seulement l'intérieur
var inHTML = '';
if(node.hasChildNodes()) {
for(var c=0;c limit) return results.slice(0, limit); // Retourne le nombre d'éléments imposé par la limite
else return results; // Retourne le array de nodes trouvé (aucune limite)
};
/**
* getHeaderContent est la méthode utilisée pour préparer le contenu HTML à envoyer dans le header du panel
*
* @return {String} Html à injecter dans le header du panel
*/
this.getHeaderContent = function() {
/*****
::: TO DO :::
Ajouter les fonctionnalités d'extension de cette méhode pour remplacer le code utilsé par défaut
*****/
//Prépare le header du overlay
var txtHeader = '' + rl.lang.lbl.xCloseLabel + '
';
if(that.cfg.title) {
txtHeader = "" + that.cfg.title + "" + txtHeader;
}
return txtHeader;
};
/**
* getBodyContent est la méthode utilisée pour préparer le contenu HTML à envoyer dans le body du panel
*
* @return {String} Html à injecter dans le body du panel
*/
this.getBodyContent = function() {
/*****
::: TO DO :::
Ajouter les fonctionnalités d'extension de cette méhode pour remplacer le code utilsé par défaut
*****/
return '' + that._bodyContent + '
';
};
/**
* getFooterContent est la méthode utilisée pour préparer le contenu HTML à envoyer dans le footer du panel
*
* @return {String} Html à injecter dans le footer du panel
*/
this.getFooterContent = function() {
/*****
::: TO DO :::
Ajouter les fonctionnalités d'extension de cette méhode pour remplacer le code utilsé par défaut
*****/
// Par défaut, si l'option de configuration addCloseLink est false, retourne une string vide
return (that.cfg.addCloseLink ? '' : '');
};
this._handleCLose = function() {
try {
YAHOO.util.History.navigate("cpnl", "none");
that.scope[that.panelName].hide();
} catch (e) {
that.scope[that.panelName].hide();
}
}
/**
* _prepareMyPanel est la méthode utilisée pour préparer le panel pour l'affichage
*
* @return void
*/
this._prepareMyPanel = function() {
// Si le panel n'a pas encore été créé, crée le panel
//if(!that.scope[that.panelName]) {
// Si le div qui doit contenir le panel n'existe pas, il sera ajouté dans le wrapper
//if(!document.getElementById(that.cfg.renderTarget)) {
// Créé un div pour le marqueur des URL pourqu'un saut soit possible
var div = document.createElement('div');
div.id = that.cfg.renderTarget;
div.name = that.cfg.renderTarget;
that.scope.wrapper.appendChild(div);
// }
// Configuration initial du panel
var conf = {};
conf['width'] = that.cfg.width;
if(that.cfg.height != 'auto') conf['height'] = that.cfg.height;
conf['fixedcenter'] = that.cfg.fixedCenter;
conf['close'] = that.cfg.showCloseX;
conf['dragable'] = that.cfg.dragable;
conf['AutoFillHeight'] = true;
conf['zindex'] = 10 + that.scope.manager.overlays.length;
conf['modal'] = that.cfg.modal;
conf['visible'] = false;
if(that.cfg.effect) conf['effect'] = that.cfg.effect;
// Crée un nouveau panel et l'ajoute au scope
that.scope[that.panelName] = new YAHOO.widget.Panel('yui-panel-' + that.cfg.renderTarget, conf);
that.scope[that.panelName].setHeader(that.getHeaderContent());
that.scope[that.panelName].setBody(that.getBodyContent());
that.scope[that.panelName].setFooter(that.getFooterContent());
//Ajoute la gestion de la touche ESC pour fermer la fenêtre
var kl = new YAHOO.util.KeyListener(document, { keys:27 },
{ fn:that._handleCLose,
scope:that.scope[that.panelName],
correctScope:true }, "keyup" );
// keyup is used here because Safari won't recognize the ESC
// keydown event, which would normally be used by default
that.scope[that.panelName].cfg.queueProperty("keylisteners", kl);
// Prépare le panel
that.scope[that.panelName].render(document.getElementById(that.cfg.renderTarget));
// Gestion des footers multiple. Les div.ft qui sont définis dans le code qui est chargé sont utilisés
// pour l'affichage sans javascript. Ils doivent donc être caché à l'exception du dernier si l'option
// de configuration "addCloseLink" est à false
var fts = YAHOO.util.Dom.getElementsByClassName("ft", "div", that.cfg.renderTarget);
if(fts) {
for(var i=0; i Temp, for test focus !
that.scope[that.panelName].isVisible = true;
//console.debug('zindex = ' + that.scope[that.panelName].cfg.getProperty('zIndex'));
that.scope[that.panelName].show();
that.emptyForm();
that.scope.manager.focus([that.panelName]);
}
};
/**
* _enumProps est une méthode utilisé pour le débugage et permet d'afficher un alert avec toutes les propriétés d'un objet
*
* @return void
*/
this._enumProps = function(obj) {
if(console && console.dir) {
console.dir(obj);
} else {
var res = '';
try {
for(var i in obj) {
res += i + ' : ' + typeof(obj[i]) + "\n";
}
} catch(e) {res += i + ' : error';}
alert(res);
}
};
/**
* _loadConent est la méthode utilisée pour charger le contenue du panel
*
* @return void
*/
this._loadContent = function() {
if(typeof that.cfg.contentType == 'string' && that.cfg.contentType == 'remote') {
var src = ((that.hookedElement.tagName == 'A')||(that.hookedElement.tagName == 'AREA')) ? that.hookedElement.href : that.hookedElement.action;
if(src) {
if((that.hookedElement.tagName == 'A')||(that.hookedElement.tagName == 'AREA')) {
that.conn = YAHOO.util.Connect.asyncRequest("get", src, {success: that._loadCallback_success, failure: that._loadCallback_failure});
} else {
that.conn = YAHOO.util.Connect.asyncRequest(that.hookedElement.method, src, {success: that._loadCallback_success, failure: that._loadCallback_failure});
}
}
} else {
/*****
::: TO DO :::
Ajouter la fonctionnalité d'un callback pour exécuter une fonction au lieu du call AJAX pour préparer le contenue
*****/
alert('_loadConent function callback not implemented yet!');
}
};
/**
* _loadCallback_succes est la méthode appelé suite à un call AJAX avec un status 'success'
* Cette méthode privé permet de traiter le résultat XML reçus par le REQUEST
*
* @param {Response Object} o Reçois l'objet response retournée par le YAHOO.connection
*
* @return void
*/
this._loadCallback_success = function(o){
// Récupère le contenue XML du response
//console.dir(o);
var doc = o.responseXML;
var res = '';
// Conserve le contenue XML original
that.contentXML = doc.documentElement;
// Si le panel utilise la configuration par méta, cherche les configuration dans le dom
if(that.cfg.useMetaConfig) that._metasConfigFromXML(doc.documentElement);
// Récupère les contenus du Head, Body et footer du panel
// Si le DOM récupéré supporte le getElementById, utilise cette fonctionnalité
if(doc.getElementById) {
var pHead = that.cfg.remoteSourceElements.header ? doc.getElementById(that.cfg.remoteSourceElements.header) : '';
var pBody = that.cfg.remoteSourceElements.content ? doc.getElementById(that.cfg.remoteSourceElements.content) : '';
var pFoot = that.cfg.remoteSourceElements.footer ? doc.getElementById(that.cfg.remoteSourceElements.footer) : '';
} else { // Hack pour le DOM IE qui ne supporte pas toutes les fonctionnalités des autres browser au niveau du DOM XML
var pHead = that.cfg.remoteSourceElements.header ? that.getElementsByAttribute(doc, 'id', that.cfg.remoteSourceElements.header, 1) : '';
var pBody = that.cfg.remoteSourceElements.content ? that.getElementsByAttribute(doc, 'id', that.cfg.remoteSourceElements.content, 1) : '';
var pFoot = that.cfg.remoteSourceElements.footer ? that.getElementsByAttribute(doc, 'id', that.cfg.remoteSourceElements.footer, 1) : '';
}
// Récupère les contenus HTML de chaque section du overlay
if(pHead && pHead.innerHTML) that._headerContent = pHead.innerHTML;
if(pBody && pBody.innerHTML) that._bodyContent = pBody.innerHTML;
if(pFoot && pFoot.innerHTML) that._footerContent = pFoot.innerHTML;
// Si le panel utilise l'affichage du preloader et que le preloader existe et qu'il est visible, cache le preloader
if(that.cfg.useRemotePreLoader && that.scope.preloader && that.scope.preloader.isVisible) {
that.scope.preloader.hideMask();
if(that.scope.preloader.loaderImage) that.scope.preloader.loaderImage.style.display = 'none';
if(that.scope.preloader.loaderLabel) that.scope.preloader.loaderLabel.style.display = 'none';
that.scope.preloader.isVisible = false;
}
// Indique que le panel a été chargé, donc au prochains affichage, aucune chargement nécessaire, affichage direct du panel
//that._isLoaded = true;
// Méthode exécuté avant le rendering du panel / après le chargement des données
that._afterLoad();
};
/**
* _loadCallback_failure est la méthode appelé suite à un call AJAX avec un status 'failled'
* Cette méthode privé permet de gérer les requête AJAX qui sont en erreur
*
* @param {Response Object} o Reçois l'objet response retournée par le YAHOO.connection
*
* @return void
*/
this._loadCallback_failure = function(o) {
that._isLoaded = false;
/*****
::: TO DO :::
Définir quoi faire lors d'un failled par défaut. Ajouter la possibilité d'étendre cette fonctionnalité pour
une gestion personnalisé des erreur pour l'application courrante.
*****/
// force le bouton fermer
that.cfg.addCloseLink = true;
var error_text = (rl.lang.lang != "en") ? "Une erreur s'est produite, s.v.p. réessayer plus tard." : "An error has occured, please try again later";
that._bodyContent = ""+error_text+"
";
// Si le panel utilise l'affichage du preloader et que le preloader existe et qu'il est visible, cache le preloader
if(that.cfg.useRemotePreLoader && that.scope.preloader && that.scope.preloader.isVisible) {
that.scope.preloader.hideMask();
if(that.scope.preloader.loaderImage) that.scope.preloader.loaderImage.style.display = 'none';
if(that.scope.preloader.loaderLabel) that.scope.preloader.loaderLabel.style.display = 'none';
that.scope.preloader.isVisible = false;
}
// Indique que le panel a été chargé, donc au prochains affichage, aucune chargement nécessaire, affichage direct du panel
//that._isLoaded = true;
// Méthode exécuté avant le rendering du panel / après le chargement des données
that._afterLoad();
};
/**
* _metasConfigFromXML est la méthode utilisé pour récupérer les configuration défini dans les métas du
* document chargé avec un call AJAX (remote).
* Configuration des metas disponibles :
* overlay-title : Permet de définir le titre du overlay (default = '')
* overlay-width : Défini la largeur du Panel (default = 50em)
* overlay-height : Défini la hauteur du Panel (default = 'auto')
* overlay-addCloseLink : Indique si un lien fermé doit être ajouté dans le footer du overlay (default : true)
* overlay-useSWFObject : Indique si le overlay utilise des objet flash - DEPRECATED pour la version 2, détection automatique intégré
* overlay-useTooltips: Indique l'utilisation de tooltip dans le panel (default : false) - DEPRECATED pour la version 2, ajouté un ID sur le script contenant le code
* overlay-useColapsedList: Indique l'utilisate de table calapse dans le panel - ajouté dans le cadre du projet Vidéotron (default : false)
*
* @param {DOMXml Object} oXML DOM Xml à utiliser pour le traitement. Normalement le documentElement du
* responseXML de l'objet YAHOO.connection
*
* @return void
*/
this._metasConfigFromXML = function(oXML) {
// Récupère les élements 'meta' dans le dom
var metas = oXML.getElementsByTagName('meta');
var metas_conf = [];
var attrName = new String();
var attrContent = new String();
// Boucle pour récupérer les configurations
for(var i=0; i= 3) {
for(var i=0;i
if(!this.cfg.defaultLang || this.cfg.defaultLang !== 'fr' || this.cfg.defaultLang !== 'en') this.cfg.defaultLang = document.documentElement.lang;
/* Récupère la langue de la page courante */
var curDocLang = document.body.className.substring(0,2);
// Définition des labels initiaux pour le français
this.fr = {
'xCloseLabel': 'Fermer',
'xCloseTitle': 'Fermer',
'btnCloseCaption': 'Fermer',
'titlePreloader': 'Chargement...'
};
// Définition des labels initiaux pour l'anglais
this.en = {
'xCloseLabel': 'Close',
'xCloseTitle': 'Close',
'btnCloseCaption': 'Close',
'titlePreloader': 'Loading...'
};
// Définition de l'objet dictionnaire lang
this.lang = {
lbl: ((that.cfg.defaultLang === 'en') ? this.en : this.fr), // Initilise les libellé en fonction de la langue par défaut
lang: that.cfg.defaultLang,
/**
* addLabel permet d'ajouter des libellé au dictionnaire
*
* @param {String} name Nom du libellé à ajouter
* @param {String} value Valeur du libellé
*
* @return void
*/
addLabel: function(name, value) {
this.lang[name] = value;
}
};
// Collections des overlays qui sont chargé
this.overlays = [];
// Gestion du browser history
if(typeof this._defaultState === 'undefined') {
this._defaultState = 'none'; // Le targetIs est utilisé pour le state du panel (none = toute fermé, un id ouvre le panel qui si ratache)
this._bookmarkedState = YAHOO.util.History.getBookmarkedState("cpnl");
this._initialState = this._bookmarkedState || this._defaultState;
this.manageLinks = function (state) {
//console.debug("in manageLinks " + state);
// This is called after calling YAHOO.util.History.navigate, or after the user
// has trigerred the back/forward button. We cannot discrminate between
// these two situations.
// console.debug("StateChange to : " + state);
var rl = arguments[1];
// Show the right overlay according to the "state" parameter:
for(var i=0; i