Discussion :

[splifferwolf]

Bonjour à tous,

Je suis occupé de développer un module GRH pour notre CRM/ERP.

J'ai donc un tableau :
Nom travailleur | 01 | 02 .... | 31

Bien sur les colonne dépende du mois (exemple pour février il ira jusque 28 sauf pour les année bissextile où il ira jusqu’à 29).

Jusque là pas de soucis, on me demande alors de pouvoir au clic droit sur une case définir un état de prestation (presté, vacance,etc...)
Encore une fois pas de soucis le script fonctionne. mon problème est sur le positionnement de ce menu contextuel

en faite quand je suis sur les dernière ligne (donc tout en bas de la page, mon menu s'affiche mais pas en entier, il manque le bas du menu, pareil si je clique sur les première ligne il me manque le haut du menu.
La hauteur du menu est variable, pas fixe car certaine case contiennent un item en plus ou en moins en fonction de certaine propriété liée au travailleur, je n'arrive donc pas à faire en sorte que ce menu évite de sortir de la page, idem si je clique sur la dernière cellule le menu sort à droite et donc on ne vois pas tout le menu.

Je sais pas si je m'explique bien :s

Voici le JS qui génère mon menu

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
// Exécute une requête ajax pour aller chercher les item du menu et les injecter dans le conteneur
function creatMyMenu(event){
    // Création du dom
    var div = $('<div class="custom-menu"></div>');
    // On l'ajoute au DOM pour pouvoir le ciblé
    $("body").prepend(div);
    // Appel Ajax
    callback = function(j){ div.append(j); };
    mdata = { /* mes paramètre dont l'id du travailleur pour personalisé le menu */ };
    toXhr(mdata,callback,true,'post');
 
    // Affiche le menu et le positionne à droit du cursor (là où on à cliquer)
    div.finish().toggle(100).css({ top: event.pageY + "px", left: event.pageX + "px" });
}
$(document).bind("contextmenu", function(event){
    // Reset event click droit
    event.preventDefault();
 
    // Création du menu
    creatMyMenu(event);
});
 
// Si on click ailleur que sur l'élemnt
$(document).bind("mousedown", function (e) {
    // Si il y'a un menu actif on le supprime
    if (!$(e.target).parents(".custom-menu").length > 0) {
        // Suppression
        $(".custom-menu").remove();
    }
});

Donc comme je le dit, le problème n'est pas l'affichage en soit, mais bien le positionnement du conteneur (div avec la classe "custom-menu")

Je cherche à mettre en place une fonction générique qui va récupérer les dimension du conteneur et adapter sa position pour pas qu'il sorte de l'écran d'affichage.
Quelques chose comme $(".custom-menu").posIt(); ou encore posIt($(".custom-menu"));.

Si quelqu'un avait l'amabilité de m'expliquer les étape afin de comprendre comment mettre cela en place car j'avoue à avoir des difficulté à imaginer la chose, je lui en serais reconnaissant.
D'avance merci de votre participation.

Bien à vous
Spliffer

[splifferwolf]

Bonsoir tout le monde,

J'ai essayé de bricoler quelques chose, c'est pas très propre à mon sens et pas du tout optimal, mais ça fait le taff.
Plus de dépassement ni à gauche, ni à droite

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
40
 
function posIt(elem){
    // Taille de la fenêtre
    maxPosX = (document.body.clientWidth);
    maxPosY = (document.body.clientHeight);
 
    // Position X et Y du coin supérieur gauche du menu
    aPosX = elem.position().left;
    aPosY = elem.position().top;
 
    // FIX
    // Pour une raison que j'ignore, si je ne précise pas le [0], il me retourne undefined sur offsetWidth
    el = elem[0];
 
    // Largeur du div (menu)
    elWidth = el.offsetWidth;
    // Pour une raison que j'ignore offsetHeight me retourne toujours 0, 
    // scrollHeight lui me retourne bien une hauteur
    elHeight = el.scrollHeight;
 
    /** On commence à corriger le bas **/
    // Position Y + Hauteur nous diras si on dépasse de la page
    posy_height = aPosY+elHeight;
    // Si c'est le cas on retire la différence de la propriété top, sinon on ne fait rien
    if(posy_height > maxPosY){
        diff = (posy_height - maxPosY);
        newTop = aPosY-diff;
        elem.css({top : newTop+"px"});
    }
 
    /** On corrige maintenant le côté droit **/
    // Position X + Largeur nous diras si on dépasse de la page
    posx_width = aPosX+elWidth;
    // Si c'est le cas on retire la largeur de la propriété left (pour le faire apparaître à gauche au lieu de droite), sinon on ne fait rien
    if(posx_width > maxPosX){
        diff = (posx_width - maxPosX);
        newLeft = aPosX-elWidth;
        elem.css({left : newLeft+"px"});
    }
}

me reste plus qu'a optimiser ce code quand j'aurais un peu plus de temps, en tout cas il est fonctionnel en l'état c'est un bon début je pense.

Bonne soirée à tous.