// JavaScript Document
/***********************************************************/
/* Auteur : Benjamin DUPUIS */
/* Version : 2.1 - 14/12/2008 */
/* */
/* Historique : */
/* 2.1 - 14/12/2008 */
/* Fix fixed position pour IE6 + bug 100% cpu */
/* 2.0 - 09/12/2008 */
/* Ajout déplacement DIV + 1er plan sur click */
/* 1.0 - 10/06/2008 */
/* */
/* Rôle : Fonction Ajax permettant de créer des div */
/* dynamiquement */
/* */
/* Source : Banque de librairie personnel */
/* OliBlog pour la gestion des déplacements */
/* modifiée pour répondre aux besoins */
/* */
/* Note : */
/* Vous pouvez réutiliser ce code a quelque fin */
/* que ce soit, privée ou commercial, sans en */
/* demander la permission de l'auteur. Vous ne */
/* pouvez/devez pas retirer ce bandeau de votre */
/* code final sans en demander la permission. */
/* */
/* Remerciement : */
/* JohnSmith pour les cours de JavaScript */
/* Oli pour la base des déplacements de DIV */
/* famfam pour ses icônes */
/***********************************************************/
var isDragging=new Array();
var ecartX=new Array();
var ecartY=new Array();
var curX=new Array();
var curY=new Array();
var endY=new Array();
var move=new Array();
var availHeight;
var availWidth;
var borderWidthWidth;
var borderHeightWidth;
var correctionIE;
function addElement(id_target, id_newelem, url, position, posleft, postop, width, height, textalign, border, backgroundcolor, otherstyle, movable, out) {
var target = document.getElementById(id_target);
var elem = document.createElement('div');
elem.setAttribute('id',id_newelem); // on défini l'identifiant de notre element
var zIndex=returnZindexMax(id_target);
var zIndexCtrl=zIndex+1;
/* creation de la variable contenant le style de notre element */
var monstyle = 'position:'+position+';';
monstyle += 'z-index:'+zIndex+';';
monstyle += 'top:'+postop+';';
monstyle += 'left:'+posleft+';';
monstyle += 'width:'+width+';';
monstyle += 'height:'+height+';';
monstyle += 'border: '+border+';';
monstyle += 'overflow: auto;';
monstyle += 'background-color:'+backgroundcolor+';';
monstyle += 'text-align:'+textalign+';';
monstyle += otherstyle;
/* on applique le style en fonction du navigateur */
if (BrowserDetect.browser!='Explorer') {
elem.setAttribute('style',monstyle);
} else {
elem.style.setAttribute('cssText',monstyle);
if (BrowserDetect.version<=6 && position=='fixed') {
elem.style.position='absolute';
elem.style.setExpression("top","documentElement.scrollTop + body.scrollTop + 80");
}
}
if (movable==1) { // Déplacement sur la DIV
// Move sur la Div
if (BrowserDetect.browser!='Explorer') {
elem.setAttribute('onmousedown','changeZindex(\''+id_target+'\',\''+id_newelem+'\'); beginDrag(\''+id_newelem+'\',event); setBodyDrag(\''+id_newelem+'\',event)');
target.setAttribute('onmouseup','endDrag(\''+id_newelem+'\');');
elem.setAttribute('onmouseup','endDrag(\''+id_newelem+'\');');
} else {
elem.onmousedown=function () {
changeZindex(id_target,id_newelem);
beginDrag(id_newelem,event);
setBodyDrag(id_newelem, out);
};
/*target.onmousedown=function() {
changeZindex(id_target,id_newelem);
};*/ // Pas pris en compte !
target.onmouseup=function () { endDrag(id_newelem) };
elem.onmouseup=function () { endDrag(id_newelem) };
}
}
/* on efface les elements si ils existent deja */
if (document.getElementById(id_newelem+'_shut')) {
removeElement(id_newelem,id_newelem+'_shut');
}
if (document.getElementById(id_newelem+'_move')) {
removeElement(id_newelem,id_newelem+'_move');
}
if (document.getElementById(id_newelem)) {
removeElement(id_target,id_newelem);
}
target.appendChild(elem); // on créé l'élément
getXhr()
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) { // Si on a choppé le contenu de l'URL
elem.innerHTML=xhr.responseText; // On insère ce contenu dans l'element créé
finwait(); // fin curseur en attente
addShut(id_target, id_newelem, zIndexCtrl); // On créer également une div permettant de fermer l'element
if (movable==1) { // On affiche le cadena pour verrouiller deverrouiller la div
addLocker(id_target, id_newelem, zIndexCtrl);
} else if (movable==2) { // On affiche le bouton de déplacement
addMove(id_target, id_newelem, zIndexCtrl, out);
}
}
else {
waitme(); // debut curseur attente
}
}
xhr.open("GET",url,true); // on choppe l'url qu'il faut insérer
xhr.send(null);
}
function addShut(id_target, id_newelem, zIndexCtrl) {
var target = document.getElementById(id_newelem);
var elem = document.createElement('div');
var id_newelem_shut=id_newelem+'_shut';
var shut_style = 'position: absolute;';
shut_style += 'top:0px;';
shut_style += 'right:0px;';
shut_style += 'z-index:'+zIndexCtrl+';';
shut_style += 'top:'+top+';';
shut_style += 'width:16px; ';
shut_style += 'height:16px; ';
elem.setAttribute('id',id_newelem_shut);
if (BrowserDetect.browser!='Explorer') {
elem.setAttribute('style',shut_style);
} else {
elem.style.setAttribute('cssText',shut_style);
}
elemcontent='';
elem.innerHTML = elemcontent;
target.appendChild(elem);
}
function addLocker(id_target, id_newelem, zIndexCtrl) {
var target = document.getElementById(id_newelem);
var elem = document.createElement('div');
var id_newelem_locker=id_newelem+'_locker';
var check_style = 'position: absolute;';
check_style += 'top:0px;';
check_style += 'right:18px;';
check_style += 'z-index:'+zIndexCtrl+';';
check_style += 'top:'+top+';';
check_style += 'width:16px; ';
check_style += 'height:16px; ';
elem.setAttribute('id',id_newelem_locker);
if (BrowserDetect.browser!='Explorer') {
elem.setAttribute('style',check_style);
} else {
elem.style.setAttribute('cssText',check_style);
}
if (move[id_newelem]==true) {
elemcontent = '';
elem.innerHTML = elemcontent;
target.appendChild(elem);
}
function addMove(id_target, id_newelem, zIndexCtrl, out) {
var target = document.getElementById(id_newelem);
var elem = document.createElement('div');
var id_newelem_move=id_newelem+'_move';
move[id_newelem]=true; // mm si la variable de déplacement n'est pas init la div peut se déplacer
var move_style = 'position: absolute;';
move_style += 'top:0px;';
move_style += 'right:20px;';
move_style += 'z-index:'+zIndexCtrl+';';
move_style += 'top:'+top+';';
move_style += 'width:16px; ';
move_style += 'height:16px; ';
elem.setAttribute('id',id_newelem_move);
if (BrowserDetect.browser!='Explorer') {
elem.setAttribute('style',move_style);
} else {
elem.style.setAttribute('cssText',move_style);
}
elemcontent='';
elem.innerHTML = elemcontent;
target.appendChild(elem);
// Move sur la Div
if (BrowserDetect.browser!='Explorer') {
elem.setAttribute('onmousedown','event.preventDefault(); changeZindex(\''+id_target+'\',\''+id_newelem+'\'); beginDrag(\''+id_newelem+'\',event); setBodyDrag(\''+id_newelem+'\',event)');
target.setAttribute('onmousedown','changeZindex(\''+id_target+'\',\''+id_newelem+'\');');
target.setAttribute('onmouseup','endDrag(\''+id_newelem+'\');');
elem.setAttribute('onmouseup','endDrag(\''+id_newelem+'\');');
} else {
elem.onmousedown=function () {
//event.returnValue=false; // Marche pas
changeZindex(id_target,id_newelem);
beginDrag(id_newelem,event);
//event.returnValue=false; // Marche pas
setBodyDrag(id_newelem, out);
};
/*target.onmousedown=function() {
changeZindex(id_target,id_newelem);
};*/ // Pas pris en compte !
target.onmouseup=function () { endDrag(id_newelem) };
elem.onmouseup=function () { endDrag(id_newelem) };
}
}
function setBodyDrag(id_newelem, out) {
if (BrowserDetect.browser!='Explorer') {
document.body.setAttribute('onmousemove','drag(\''+id_newelem+'\',\''+out+'\',event)');
} else {
document.body.onmousemove=function () { drag(id_newelem,out,event); };
}
}
function returnZindexMax(idbase) {
var elembase=document.getElementById(idbase);
var elements = elembase.getElementsByTagName('*'); //On récupère tous les éléments de la page
var zIndex = 0;
for( var i=0; i < elements.length; i++) {
zIndex = Math.max(zIndex,elements[i].style.zIndex);
}
zIndex = zIndex + 1; //toujours plus haut que le plus haut
return zIndex;
}
function changeZindex(id_target, id_newelem) {
var zIndex=returnZindexMax(id_target);
var zIndexCtrl = zIndex +1
var elements;
var elem=document.getElementById(id_newelem);
var cptelem=parseInt(elem.style.zIndex) + 2;
var elementslength;
if (elem) {
if (zIndex>cptelem) {
elem.style.zIndex=zIndex;
elements=elem.getElementsByTagName('div');
elementslength=elements.length; // Fix for IE6 who count at each for i
for( var i=0; i < elementslength; i++) {
elements[i].style.zIndex=zIndexCtrl;
}
}
}
}
function removeElement(id_target,id_newelem) {
var d = document.getElementById(id_target);
var del = document.getElementById(id_newelem);
d.removeChild(del);
}
function pausecomp(millis) {
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
function positionne(p_id, p_posX, p_pos_Y){
document.getElementById(p_id).style.left = p_posX;
document.getElementById(p_id).style.top = p_pos_Y;
}
function windowsize() {
if (BrowserDetect.browser=='Explorer') {
if (BrowserDetect.version>=6) { // IE 6 et supérieur
availWidth=document.documentElement.clientWidth;
availHeight=document.documentElement.clientHeight;
} else { // IE 4 et supérieur
availWidth=document.body.clientWidth;
availHeight=document.body.clientHeight;
}
}
else { // Opera Firefox ...
availWidth=window.innerWidth;
availHeight=window.innerHeight;
}
}
function getPositionCurseur(id_newelem, e){
//ie
if(document.all){
curX[id_newelem] = event.clientX; // ou screenX ? ou autre ??
curY[id_newelem] = event.clientY; // ou screenY ? ou autre ??
}
//netscape 4
else if(document.layers){
curX[id_newelem] = e.pageX;
curY[id_newelem] = e.pageY;
}
//mozilla
else if(document.getElementById){
curX[id_newelem] = e.clientX;
curY[id_newelem] = e.clientY;
}
}
function beginDrag(id_newelem,e){
if (move[id_newelem]==true) {
isDragging[id_newelem] = true;
objectToDrag = document.getElementById(id_newelem);
getPositionCurseur(id_newelem, e);
ecartX[id_newelem] = curX[id_newelem] - parseInt(objectToDrag.style.left);
ecartY[id_newelem] = curY[id_newelem] - parseInt(objectToDrag.style.top);
objectToDrag.style.cursor='move';
// On choppe la taille de bordure et la taille de notre fenetre
borderWidthWidth=parseInt(objectToDrag.style.borderRightWidth)+parseInt(objectToDrag.style.borderLeftWidth);
borderHeightWidth=parseInt(objectToDrag.style.borderBottomWidth)+parseInt(objectToDrag.style.borderTopWidth);
windowsize();
// Fix Selection de texte IE
if (BrowserDetect.browser=='Explorer') {
document.onselectstart=new Function ("return false");
document.unselectable = "on";
document.body.focus();
}
}
}
function drag(id_newelem, out, e){
objectToDrag = document.getElementById(id_newelem);
var newPosX;
var newPosY;
var divHeight;
var divHeightPx;
var divWidth;
var divWidthPx;
if(isDragging[id_newelem] == true) {
getPositionCurseur(id_newelem, e);
newPosX = curX[id_newelem] - ecartX[id_newelem];
newPosY = curY[id_newelem] - ecartY[id_newelem];
// Dimension de la div en PX ou en %
divHeight=parseInt(objectToDrag.style.height);
divWidth=parseInt(objectToDrag.style.width);
if (out==0) {
// Empecher DIV de sortir de l'écran
if (BrowserDetect.browser!='Explorer' || (BrowserDetect.browser=='Explorer' && BrowserDetect.version>=7)) {
// Empecher de sortir a Gauche et en Haut
if (newPosX<0) { newPosX=0; }
if (newPosY<0) { newPosY=0; }
// Empecher de sortir en bas et a droite
// Si Hauteur en %
if ( objectToDrag.style.height.search('%') != -1 ) {
divHeightPx=(availHeight/100)*divHeight;
if (newPosX>(availHeight-divHeightPx-borderHeightWidth)) {
newPosX=(availHeight-divHeightPx-borderHeightWidth);
}
}
// Si Hauteur en PX
else {
if (newPosY>(availHeight-divHeight-borderHeightWidth)) {
newPosY=(availHeight-divHeight-borderHeightWidth);
}
}
// Si Largeur en %
if ( objectToDrag.style.width.search('%') != -1 ) {
divWidthPx=(availWidth/100)*divWidth;
if (newPosX>(availWidth-divWidthPx-borderWidthWidth)) {
newPosX=(availWidth-divWidthPx-borderWidthWidth);
}
}
// Si Largeur en Px
else {
if (newPosX>(availWidth-divWidth-borderWidthWidth)) {
newPosX=(availWidth-divWidth-borderWidthWidth);
}
}
}
// Fix temporaire 0,0 est à -150,0 car position curseur est dans l'element courant 'content' et pas le body ?
else {
divHeight=parseInt(objectToDrag.style.height);
divWidth=parseInt(objectToDrag.style.width);
if (newPosX<0) { newPosX=0; }
if (newPosY<0) { newPosY=0; } //if (newPosY<-150) { newPosY=-150; }
// Si largeur en %
if ( objectToDrag.style.height.search('%') != -1 ) {
divHeightPx=(availHeight/100)*divHeight;
if (newPosX>(availHeight-divHeightPx-borderHeightWidth)-150) {
newPosX=(availHeight-divHeightPx-borderHeightWidth)-150;
}
}
// Si largeur en Px
else {
if (newPosY>(availHeight-divHeight-borderHeightWidth)-150) {
newPosY=(availHeight-divHeight-borderHeightWidth)-150;
}
}
// Si largeur en %
if ( objectToDrag.style.width.search('%') != -1 ) {
divWidthPx=(availWidth/100)*divWidth;
if (newPosX>(availWidth-divWidthPx-borderWidthWidth)) {
newPosX=(availWidth-divWidthPx-borderWidthWidth);
}
}
// Si largeur en Px
else {
if (newPosX>(availWidth-divWidth-borderWidthWidth)) {
newPosX=(availWidth-divWidth-borderWidthWidth);
}
}
}
}
// On positionne notre élement
objectToDrag.style.left = newPosX + 'px';
objectToDrag.style.top = newPosY + 'px';
endY[id_newelem] = newPosY;
}
}
function endDrag(id_newelem) {
objectToDrag = document.getElementById(id_newelem);
if(isDragging[id_newelem] == true) {
objectToDrag.style.cursor='';
isDragging[id_newelem] = false;
// On remet la position Fixed pour IE
if ( (BrowserDetect.browser=='Explorer') && (BrowserDetect.version<=6) ) {
if (objectToDrag.style.setExpression!='') {
var valY;
//valY=objectToDrag.scrollTop;
//window.alert(tmp);
/* Ne fonctionne pas - Not Working */
//var valY=eval (endY[id_newelem]);
//window.alert(valY);
//var oc='documentElement.scrollTop + body.scrollTop + '+valY;
//objectToDrag.style.setExpression("top",oc);
}
}
// Fix Selection de texte IE
if (BrowserDetect.browser=='Explorer') {
document.onselectstart = new Function ("return true");
}
}
}