Discussion :

[Concombre Masqué]

Bonjour,

Si la réponse existe déjà sur le forum, je n'ai pas su la formuler assez bien pour la rechercher.

Mon but est que, lors d'un clic sur un mot, une petite fenêtre s'ouvre sur la page (si le reste de la page se grise s'est encore mieux !), qui me permette de l'éditer.

Sans être un expert, je commence à être un familier de prototype.js, je sais comment faire un appel à un script php et l'afficher dans un div (donc je peux afficher un input avec un bouton "envoyer"). Il me manque le fait de mettre une sorte de "voile" sur le reste de la page.

Merci d'avance des réponses !

[gwyohm]

Salut,

En général pour griser le fond de ma page je fais quelque chose comme ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
function protect(zIdx) {
  // on essaye de recuperer la div de protection
  var protectDiv = $("protectDiv");
  if(! protectDiv ) {
    // si on ne la trouve pas on la créé
    protectDiv  = new Element("div", {id:"protectDiv", style:"position:absolute;top:0;left:0;display:none;"});
    $(document.body).insert(protectDiv);
  }
  // on recupere les dimensions du viewport
  var vpDim = document.viewport.getDimensions();
  // ... les dimensions du body
  var bodyDim = $(document.body).getDimensions();
  // On garde le max 
  var protectDim = {
    width: Math.max(vpDim.width, bodyDim.width), 
    height: Math.max(vpDim.height, bodyDim.height)
  };
  // qui definissent la taile de notre div de protection
  protectDiv.setStyle({
    width:protectDim.width + "px",
    height: protectDim.height + "px",
    zIndex:zIdx
  });
  // on l'affiche
  protectDiv.show();
}
 
function hideProtect() {
  var protectDiv =$("protectDiv");
  if(protectDiv ) {protectDiv.hide();}
}
 
// ...
 
// Met une div de protection en zIndex 10
protect(10);
 
hideProtect();

EDIT : qqs commentaires

[Concombre Masqué]

Merci beaucoup gwyohm, peux-tu m'expliquer ces quelques points (que je comprends à moitié, mais une confirmation ce sera mieux !) :

Qu'appelles-tu la div de protection ? En fait, c'est un div qui prendrait toute la page pour recouvrir tout ce qui est cliquable, et transparent pour quand même voir c'est ça ?

Qu'est ce qu'un "viewport" ? la fenetre de navigation ?


Si j'ai bien compris l'utilisation de ton code adapté à ce que je veux faire, c'est :
1) Clic sur un élément à éditer
2) utilisation de protect() pour protéger les clics de partout en mettant un div au dessus.
3) afficher mon "div d'édition" au dessus du div sus-mentionné.

J'ai juste ?

[gwyohm]

Qu'appelles-tu la div de protection ? En fait, c'est un div qui prendrait toute la page pour recouvrir tout ce qui est cliquable, et transparent pour quand même voir c'est ça ?

Oui, c'est ca, j'ai oublié de mettre un bout de code pour qu'elle grise le fond de ta page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function protect(zIdx) {
  // on essaye de recuperer la div de protection
  var protectDiv = $("protectDiv");
  if(! protectDiv ) {
    // si on ne la trouve pas on la créé
    protectDiv  = new Element("div", {id:"protectDiv", style:"background-color:#000000;position:absolute;top:0;left:0;display:none;"});
    $(document.body).insert(protectDiv);
    protectDiv.setOpacity(0.2);
  }
  // on recupere les dimensions du viewport
  var vpDim = document.viewport.getDimensions();
  // ... les dimensions du body
  var bodyDim = $(document.body).getDimensions();
  // On garde le max 
  var protectDim = {
    width: Math.max(vpDim.width, bodyDim.width), 
    height: Math.max(vpDim.height, bodyDim.height)
  };
  // qui definissent la taile de notre div de protection
  protectDiv.setStyle({
    width:protectDim.width + "px",
    height: protectDim.height + "px",
    zIndex:zIdx
  });
  // on l'affiche
  protectDiv.show();
}

Qu'est ce qu'un "viewport" ? la fenetre de navigation ?

document.viewport te permet d'avoir des infos comme la taille visible de la fenêtre... plus d'infos http://prototypejs.org/api/document/viewport

Si j'ai bien compris l'utilisation de ton code adapté à ce que je veux faire, c'est :
1) Clic sur un élément à éditer
2) utilisation de protect() pour protéger les clics de partout en mettant un div au dessus.
3) afficher mon "div d'édition" au dessus du div sus-mentionné.

J'ai juste ?

Oui, c'est ca. Lors de l'appel à protect, il faut lui passer la valeur du zIndex que tu veux pour ta div de protection

[Concombre Masqué]

Merci beaucoup pour toutes tes explications claires !

Je me suis abusivement inspiré de ta fonction, avec ces modifications :
"background-color = grey" (je changerai plus tard pour l'adapter a ma charte graphique)
protectDiv.setOpacity(0.8);

Et voici maintenant, comment je l'utilise (si ça peut servir à quelqu'un d'autre ) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function edit_value(idvalue){
protectDiv=protect(8);
// tout est protégé, maintenant, je veux une fenetre au dessus moi !
// tant qu'à faire, autant la centrer
var vpDim=document.viewport.getDimensions();
divEdit= new Element("div", {"id":"mon_div_edit", "style": "background-color : white; border : 2px solid black; position : absolute; top:"+(vpDim.height/2-75)+"px; left:"+(vpDim.width/2-150)+"px; width:300px; height: 150px"});
divEdit.setStyle({zIndex:10});
// Et on l'insère dans le document et non pas dans le div de protection, pour ne pas avoir de problème avec la transparence/opacité de ce dernier
$(document.body).insert(divEdit);
// Et j'appelle un script qui va remplir mon div. idvalue est utilisée pour aller chercher cette dernière dans la base de données
new Ajax.Updater ("mon_div_edit", 'ajax.php', { 
parameters:{ 'action' : 'edit_value', 'id':idvalue}
});
return false;
}