//============================IMPORTANT================
// utilisation de 'jQuery' et non '$' dans ce fichier
//
//ce fichier js est împorté sur certaines pages exterieures
//du site Comptoir des Cotonniers. Sur ces pages, la librairie
//prototype est utilisée. prototype utilise '$' et rend impossible
//son utilisation par jQuery. Pour y remédier, il faut, dans ce
//fichier utiliser jQuery(XXX) partout où on utiliserait
//en général $(XXX)
// Postionnement du footer selon la hauteur de page
function footer_positionnement_corporate() {
// Hauteur visible par l'internaute
var hauteur_visible = jQuery(window).height(); // returns height of browser viewport
// Hauteur de mon contenus avec footer et header
var zone_contenus = jQuery('.corps'); //je recupere le div
//var contenus_ecart_haut = zone_contenus.offset().top; // positionnement du corps par rapport au haut de page
var hauteur_contenus = zone_contenus.height() + 84; //sa hauteur + header height
if (hauteur_visible>hauteur_contenus)
{
jQuery('div.footer').addClass("posi_2");
jQuery('div.corps').addClass("posi_2");
}
else if (hauteur_visible<=hauteur_contenus)
{
jQuery('div.footer').removeClass("posi_2");
jQuery('div.corps').removeClass("posi_2");
}
//s'occuper du centrage du footer
var width_total = jQuery('div.footer').width();
//alert(total_width);
var width_contents = 0;
//ajouter la largeur de chaque lien
jQuery('div.footer').find("a").each(function() {
width_contents = width_contents + jQuery(this).outerWidth();
//alert(width_contents);
});
//ajouter la largeur du lecteur flash
width_contents = width_contents + jQuery('div.footer').find("div#musicPlayer").outerWidth();
//pour centrer, on décale à gauche et à droite
var difference = (width_total - width_contents )/2;
if(difference > 0){
//ajouter du padding a gauche
jQuery('div.footer >ul').css("padding-left",difference);
//retrecir la largeur
jQuery('div.footer >ul').css("width",width_total - difference);
}
}
//TDESODT 07/2010
// met en place un watermark sur un element (cad un texte par defaut qui disparait quand on clique)
//-element_selector : un selecteur jQuery pour selectionner l'element
//-default_text : le texte à afficher
//la classe CSS 'watermark' est ajoutée tant que le texte par défaut est présent
function waterMark(element_selector,default_text){
var css_class = 'watermark';
//fonction lors du focus du champ : effacer le texte
jQuery(element_selector).focus(function(){
//si on n'a pas change la valeur, effacer quand on clique
if(jQuery(element_selector).attr('value')==default_text){
jQuery(element_selector).attr('value','');
}
jQuery(element_selector).removeClass(css_class);
});
//en sortant du champ remettre une valeur par defaut si on n'a rien saisi
jQuery(element_selector).blur(function(){
//si on n'a pas change la valeur, effacer quand on clique
if(jQuery(element_selector).attr('value')==''){
jQuery(element_selector).attr('value',default_text);
jQuery(element_selector).addClass(css_class);
}
});
//forcer la premiere fois
if(jQuery(element_selector).attr('value')==''){
jQuery(element_selector).attr('value',default_text);
jQuery(element_selector).addClass(css_class);
}
}
//=====MENU DE NAVIGATION===
//charge les handlers pour le menu de navigation
//nav_selector : le selecteur pour le container nav
//niv2selector : le selecteur pour les containers de nav de niveau 2
//niv3selector : le selecteur pour les containers de nav de niveau 3
function loadMenuNav(nav_selector, niv2selector, niv3selector){
//les liens externes ou sans enfants ne doivent pas declencher d'evenements
jQuery(nav_selector).find("a.lk_niv1:not(.external,.nochildren)").click(
function(event){
//est-ce que mon sous menu est deja visible ?
if(jQuery(this).siblings(niv2selector).css("display")=="block"){
//si oui, on le cache au moment du clic
jQuery(this).siblings(niv2selector).css("display","none");
jQuery(this).removeClass("on");
}
else{
//d'abord cacher tout les elements et les deselectionner
jQuery(nav_selector).find(niv2selector).css("display","none");
jQuery(nav_selector).find("a.lk_niv1").removeClass("on");
jQuery(niv2selector).find(niv3selector).css("display","none");
jQuery(niv2selector).find("a.lk_niv2").removeClass("on");
//puis afficher l'element selectionne
jQuery(this).siblings(niv2selector).css("display","block");
jQuery(this).addClass("on");
}
//et on empeche le navigateur de suivre le lien
event.preventDefault();
}
);
//les liens externes ne doivent pas declencher d'evenements
jQuery(niv2selector).find("a.lk_niv2:not(.external)").hover(
function(event){
jQuery(niv2selector).find(niv3selector).css("display","none");
jQuery(niv2selector).find("a.lk_niv2").removeClass("on");
jQuery(this).siblings(niv3selector).css("display","block");
jQuery(this).addClass("on");
event.preventDefault();
}
);
}
//fonction de gestion des mouvements dans la zone de zoom
//appelee lors du "mousemove" sur la zone zoomable
function handleMouseMovement(e,zonezoom_selector,tooltip_selector){
var mouseX = e.pageX;
var mouseY = e.pageY;
//ajouter le scroll pour bien se positionner + 2 pixels autour pour ne pas coller à la souris
jQuery(tooltip_selector).css({left:mouseX - jQuery(document).scrollLeft() + 10 +"px",top:mouseY - jQuery(document).scrollTop() + -13 +"px"});
//position dans le div
var zoomdiv = jQuery(zonezoom_selector); //je recupere le div
var _height = zoomdiv.height(); //sa hauteur
var _width = zoomdiv.width(); //sa largeur
var _offset = zoomdiv.offset(); //emplacement du div sur la page
//position de la souris dans le div
var posX_insidediv = mouseX - _offset.left;
var posY_insidediv = mouseY -_offset.top;
//en pourcents -> on devra reproduire cette proportion dans la position de l'image
var posX_insidediv_pct = posX_insidediv/_width ;
var posY_insidediv_pct = posY_insidediv /_height;
//image dans le div image ?
var img = zoomdiv.find('img').first();
var img_h = img.height();
var img_w = img.width();
//ou suis-je actuellement par rapport aux bords de l'image ?
var img_insideX = posX_insidediv + zoomdiv.scrollLeft(); //le scroll represente la portion non visible de l'image
var img_insideY = posY_insidediv + zoomdiv.scrollTop();
//l'objectif est que si ma souris est à 15% du bord du haut dans le div, il soit aussi à 15% du haut de l'image
var img_insideX_goal = posX_insidediv_pct * img_w;
var img_insideY_goal = posY_insidediv_pct * img_h;
//deplacement a effectur pour se positionner au bon endroit
var chgmtX = img_insideX_goal -img_insideX
var chgmtY = img_insideY_goal -img_insideY
//maintenant je scroll pour que les 2 se rejoignent
zoomdiv.scrollLeft(zoomdiv.scrollLeft() + chgmtX);
zoomdiv.scrollTop(zoomdiv.scrollTop() + chgmtY);
}
function loadZoom(zonezoom_selector, tooltip_selector){
//fixer la taille de la div de zoom pour eviter le scroll
//position de la zone zoom dans la page
var zoomdiv = jQuery(zonezoom_selector);
var _offset_top = zoomdiv.offset().top; //emplacement du div sur la page
var hauteurfenetre = jQuery(window).height();
var hauteur_footer = jQuery('.footer').height();
var new_size = hauteurfenetre - _offset_top - hauteur_footer;
zoomdiv.height(new_size);
zoomdiv.find('img').hover(
function(){
jQuery(tooltip_selector).css('display','block');
//besoin de suivre les mouvements pour savoir ou on est
jQuery(this).mousemove(function(e){
handleMouseMovement(e,zonezoom_selector,tooltip_selector);
});
//je commence a surveiller les mouvements
jQuery(this).css('cursor','default');
},
function(){
//j'enleve mon curseur de nav
jQuery(this).css('cursor','default');
jQuery(this).unbind('mousemove');
jQuery(tooltip_selector).css('display','none');
});
//revenir en arriere quand on clique l'image pour annuler le zoom
zoomdiv.find('img').click(
function(){
window.history.back();
}
);
}
/***************************************************************************
* ==== CENTRAGE/SCROLL D'UN ELEMENT DANS UN CONTAINER ====
* TDESODT 2010 - OpenResources
* Fonction pour rendre visible et centrer un element eventuellement caché
* dans un conteneur avec overflow
*
* typiquement :
*
* où div#moncontainer aurait overflow:hidden et une taille fixe
* eventuellement plus petite que l'ensemble de ses contenus
*
* cette fonction permet de centrer l'element selectionné
* dans le conteneur en scrollant correctement le container
*
* =parametres=
* -container_selector : un selecteur jQuery pour trouver le container
* -items_selector : un selecteur auquel doivent correspondre tous les elements contenus
* -selected_class : la classe CSS qui permet de savoir quel element est actif
* -speed : la vitesse d'animation du scrolling
***********************************************************************/
function centerSelectedItem(container_selector, items_selector, selected_class, speed){
var container = jQuery(container_selector);
var items =container.find(items_selector);
/* == calcul de l'espace à scroller à gauche et en haut == *
* somme des largeurs des elements à gauche de l'element actif *
* somme des hauteurs des elements au dessus de l'element actif *
****************************************************************/
var scroll_a_gauche =0;
var scroll_en_haut = 0;
items.each(function(){
if(jQuery(this).hasClass(selected_class)){
//on s'arrete la
return false;
}
scroll_a_gauche += jQuery(this).outerWidth();
scroll_en_haut += jQuery(this).outerHeight();
});
//scroll_a_gauche contient la distance totale entre la gauche
//de la zone (pas forcement visible) et la gauche de l'image active
//si on scrolle tout ça, l'image serait collée à gauche de la zone visible
//j'enleve donc la moitié de la largeur de la zone visible (la gauche de mon image serait alors centrée)
scroll_a_gauche = scroll_a_gauche - container.width()/2 ;
//j'ajoute donc la moitié de la largeur de mon image (pour que le centre soit centré)
scroll_a_gauche = scroll_a_gauche + items.first("." + selected_class).outerWidth()/2;
//de la meme maniere, verticalement
scroll_en_haut = scroll_en_haut - container.height()/2 ;
scroll_en_haut = scroll_en_haut + items.first("." + selected_class).outerHeight()/2;
//je scrolle (avec une animation)
container.animate({scrollLeft: scroll_a_gauche, scrollTop: scroll_en_haut}, speed);
}
//==DIAPORAMA - liste de miniatures ==
//Fonction utilisée pour scroller la liste des images lorsqu'on
//s'approche de la gauche/droite/haut/bas de la zone
//
//appelee tous les X tant qu'on est dans le div du zoom
//-on regarde ou on est dans l'image : si on est dans la partie basse, on scrolle vers le bas, si on est vers le haut, on scrolle vers le haut etc...
//sinon, on ne fait rien !
//=parametres=
// -zoom_selector : le selecteur qui permet de recuperer la zone de zoom
// -mouseX : la position de la souris
// -mouseY : la position de la souris
//
// cette fonction est faite pour être appelée de manièere répétée
function handleMouseOverElement(zoom_selector, mouseX, mouseY){
//obtenir la position de la souris dans la div : ces valeurs sont rafraichies dans l'evenement $(zoom_selector).mousemove
if(mouseX!=0 && mouseY!=0){
//position dans le div
var zoomdiv = jQuery(zoom_selector); //je recupere le div
var _height = zoomdiv.height(); //sa hauteur
var _width = zoomdiv.width(); //sa largeur
var _offset = zoomdiv.offset(); //emplacement du div sur la page
//position de la souris dans le div
var posX_insidediv = mouseX - _offset.left;
var posY_insidediv = mouseY -_offset.top;
//en pourcents -> on devra reproduire cette proportion dans la position de l'image
var posX_insidediv_pct = posX_insidediv/_width ;
var posY_insidediv_pct = posY_insidediv /_height;
//on cherche le div enfant (qui est plus grand que la zone actuelle) ?
var zone_a_scroller = zoomdiv.find('div').first();
var zone_a_scroller_h = zone_a_scroller.height();
var zone_a_scroller_h = zone_a_scroller.width();
//ou suis-je actuellement par rapport aux bords de l'image ?
var zone_insideX = posX_insidediv + zoomdiv.scrollLeft(); //le scroll represente la portion non visible de l'image
var zone_insideY = posY_insidediv + zoomdiv.scrollTop();
//l'objectif est que si ma souris est a 15% du bord du haut dans le div, il soit aussi a 15% du haut de l'image
var zone_insideX_goal = posX_insidediv_pct * zone_a_scroller_h;
var zone_insideY_goal = posY_insidediv_pct * zone_a_scroller_h;
//deplacement a effectur pour se positionner au bon endroit
var chgmtX = zone_insideX_goal -zone_insideX
var chgmtY = zone_insideY_goal -zone_insideY
//maintenant je scroll pour que les 2 se rejoignent
zoomdiv.scrollLeft(zoomdiv.scrollLeft() + chgmtX);
zoomdiv.scrollTop(zoomdiv.scrollTop() + chgmtY);
}
}
//==DIAPORAMA - Fonctions d'affichage ==
//Fonction permettant l'alternance d'affichage
function toggleInfos(){
if(jQuery("#tooltip > .more").css('display') !='none'){
//console.log("show");
showInfos();
}
else{
//console.log("hide");
hideInfos();
}
}
//Fonction de masquage
function hideInfos(){
jQuery("a.close").hide();
jQuery(".items > div").find("div.infos_sup").slideUp('slow');
jQuery("#tooltip > .more").show();
jQuery("#tooltip > .less").hide();
}
//Fonction d'affichage
function showInfos(){
jQuery(".items > div").find("div.infos_sup").slideDown('slow',function(){
//n'afficher le bouton que lorsque la zone est visible
$("a.close").show();
}
);
jQuery("#tooltip > .more").hide();
jQuery("#tooltip > .less").show();
}
// fonction de customisation des checkbox/radio
/*--------------------------------------------------------------------
* jQuery plugin: customInput()
* by Maggie Wachs and Scott Jehl, http://www.filamentgroup.com
* Copyright (c) 2009 Filament Group
* Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
* Article: http://www.filamentgroup.com/lab/accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/
* Usage example below (see comment "Run the script...").
--------------------------------------------------------------------*/
jQuery.fn.customInput = function(){
jQuery(this).each(function(i){
if(jQuery(this).is('[type=checkbox],[type=radio]')){
var input = jQuery(this);
// get the associated label using the input's id
var label = jQuery('label[for='+input.attr('id')+']');
//get type, for classname suffix
var inputType = (input.is('[type=checkbox]')) ? 'checkbox' : 'radio';
// wrap the input + label in a div
jQuery('').insertBefore(input).append(input, label);
// find all inputs in this set using the shared name attribute
var allInputs = jQuery('input[name='+input.attr('name')+']');
// necessary for browsers that don't support the :hover pseudo class on labels
label.hover(
function(){
jQuery(this).addClass('hover');
if(inputType == 'checkbox' && input.is(':checked')){
jQuery(this).addClass('checkedHover');
}
},
function(){ jQuery(this).removeClass('hover checkedHover'); }
);
//bind custom event, trigger it, bind click,focus,blur events
input.bind('updateState', function(){
if (input.is(':checked')) {
if (input.is(':radio')) {
allInputs.each(function(){
jQuery('label[for='+jQuery(this).attr('id')+']').removeClass('checked');
});
};
label.addClass('checked');
}
else { label.removeClass('checked checkedHover checkedFocus'); }
})
.trigger('updateState')
.click(function(){
jQuery(this).trigger('updateState');
})
.focus(function(){
label.addClass('focus');
if(inputType == 'checkbox' && input.is(':checked')){
jQuery(this).addClass('checkedFocus');
}
})
.blur(function(){ label.removeClass('focus checkedFocus'); });
}
});
};