source: admin/WebConsole/clases/jscripts/MenuContextual.js @ 3806a31

// ***************************************************************************
//  Libreria de scripts de Javascript
// Autor: José Manuel Alonso (E.T.S.I.I.) Universidad de Sevilla
// Fichero: menucontextual.js
// Este fichero implementa las funciones javascript de la clase MenuContextual
// ***************************************************************************
var ctx_grissistema="#d4d0c8";
var ctx_azulmarino="#0a266a";
var ctx_blanco="#ffffff";
var ctx_negro="#000000";
var ctx_grissombra="#808080";

var gmenuctx=new Array(); // Guarda el último menu flotante
var idxmnu=0; // Indice de los menus flotantes
var currentItem=null;
var currentPadresubmenu;
var currentPadreY;

var ClickX=null; // Coordenada x del evento click del boton derecho
var ClickY=null; // Coordenada y del evento click del boton derecho
var botonraton=null;
//____________________________________________________________________________
//      
//      Esta función muestra un menu contextual 
// Parámetros:
//              - x: Coordenada x de referencia
//              - y: Coordenada y de referencia
//              - menuctx: Objeto DIV contenedor del menu contextual
//____________________________________________________________________________
function muestra_contextual(x,y,menuctx){
        var margen=0;
        var dpzx=16;
        var dpzy=16;
        var wtop=calculatop_ctx(y,dpzy,margen,menuctx); // Calcula posición del menu contextual
        var wleft=calculaleft_ctx(x,dpzx,margen,menuctx);
        var ftop=wtop+parseInt(document.body.scrollTop); // Tiene en cuenta el scrolling
        var fleft=wleft+parseInt(document.body.scrollLeft);
        menuctx.style.top=ftop;
        menuctx.style.left=fleft;
        menuctx.style.visibility="visible";
        menuctxSetSelectedIndex(menuctx,-1); // Coloca el nuevo indice
        gmenuctx[idxmnu++]=menuctx;
}
//____________________________________________________________________________
//
// Calcula coordenada top para el menu contextual que se mostrará.
// Parametros:
//      - oriy : Coordenada Y del objeto que provoca el evento
//      - dpzy : Desplazamiento sobre el eje y
//      - margen : Margen para que el menu aparezca un poco separado del ese objeto
//      - menuctx: El menu (objeto DIV) que se mostrará
//____________________________________________________________________________
function calculatop_ctx(oriy,dpzy,margen,menuctx){ // Calcula Y del menu contextual
        var largodiv=parseInt(menuctx.offsetHeight);
        var wtop=oriy+dpzy+margen;
        if (wtop+largodiv>parseInt(document.body.clientHeight)){
                var nwtop=oriy-dpzy-margen-largodiv;
                if (nwtop>0) wtop=nwtop
        }
        return(wtop)
}
//____________________________________________________________________________
//
// Calcula coordenada left para el menu contextual que se mostrará.
// Parametros:
//      - orix : Coordenada X del objeto que provoca el evento
//      - dpzx : Desplazamiento sobre el eje x
//      - margen : Margen para que el menu aparezca un poco separado del ese objeto
//      - menuctx: El menu (objeto DIV) que se mostrará
//____________________________________________________________________________
function calculaleft_ctx(orix,dpzx,margen,menuctx){ // Calcula Y del menu contextual
        var anchodiv=parseInt(menuctx.offsetWidth);
        var wleft=orix+dpzx+margen;
        var maximodpl=parseInt(document.body.clientWidth);
        if (wleft+anchodiv>maximodpl){ // Si no cabe a la derecha
                var nwleft=orix-dpzx-margen-anchodiv; // lo intenta a la izda.
                if (nwleft>0) wleft=nwleft;
                else{
                        wleft=maximodpl-dpzx-margen-anchodiv;
                        if(wleft<document.body.scrollLeft) wleft=document.body.scrollLeft+16
                }
        }
        return(wleft)
}
//____________________________________________________________________________
//
// Esta función devuelve el objeto DIV al que pertenece el item <TR>  
// Parametros:
//      - o: El objeto <TR>
//____________________________________________________________________________
function contextual(o){
        while(o.tagName!="DIV")
                o=o.parentNode;
        return(o)
}
//____________________________________________________________________________
//
// Esta función devuelve el objeto <TR> apuntado por el indice
// Parametros:
//      - o: El objeto TR
//  - idx: el indice del item, si es nulo se devuelve el item(objeto TR), seleccionado
//____________________________________________________________________________
function menuctxSelectedItem(o,idx){
        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
        var oTABLE=oDIV.childNodes[0]; // objeto TABLE
        var oINPUT=oDIV.childNodes[1]; // objeto INPUT
        var oTBODY=oTABLE.getElementsByTagName('TBODY')[0];
        if(idx==null) // No se especificó indice, devuelve el item seleccionado
                idx=oINPUT.getAttribute("value");
        var oTRS=oTBODY.getElementsByTagName('TR');
        for (var i=0;i<oTRS.length;i++){
                var oTR=oTRS[i];
                if(oTR.getAttribute("id")==idx) return(oTR);
        }
        return(null);
}
//____________________________________________________________________________
//
// Esta función actualiza el nuevo el indice del item seleccionado
// Parametros:
//      - o: El objeto DIV que contiene el menu contextual o un item(objeto TR) de él 
//  - i: El valor del indice
//____________________________________________________________________________
function menuctxSetSelectedIndex(o,idx){
        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
        var oINPUT=oDIV.childNodes[1];
        oINPUT.value=idx;
}
//____________________________________________________________________________
//
// Esta función devuelve el indice del item seleccionado
// Parametros:
//      -o : El objeto DIV que contiene el menu contextual o un item(objeto TR) de él 
//____________________________________________________________________________
function menuctxSelectedIndex(o){
        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
        var oINPUT=oDIV.childNodes[1];
        return(oINPUT.value);
}
//____________________________________________________________________________
// Se ejecuta cuando se posiciona el cursor dentro de un item de algún menú contextual.
// Parámetros:
//      - o: El item (objeto TR) donde se ha colocado el ratón 
//____________________________________________________________________________
function sobre_contextual(o){
        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
        var idx=menuctxSelectedIndex(oDIV); // Indice del Item anterior seleccionado
        var nwid=o.getAttribute("id");
        if (parseInt(idx)!=parseInt(nwid)){ // Si cambio de item
                if(idx>0){ // Si existía item anterior seleccionado
                        desmarcar_item(oDIV,idx) // Desmarca item anterior
                }
                marcar_item(o); // Marca el actual item
                currentItem=o;
        }
}
//____________________________________________________________________________
//
// Hace resaltar el item del menu contextual donde se coloca el cursor.
// Si este item tuviese un submenu contextual,éste también aparecería.
// Además, inicializa el campo oculto de cada DIV donde se guarda el índice
// del item selecionado.
//
// Parametros:
//      - item: El objeto <TR>
//____________________________________________________________________________
function marcar_item(item){
        marca_desmarca(item,true); // Marca el item
        if (item.getAttribute("name")!=""){ // Existe submenu contextual
                currentPadresubmenu=item;
                currentPadreY=ClickY;
                setTimeout ("muestra_submenu();", 300); 
        }
        menuctxSetSelectedIndex(contextual(item),item.getAttribute("id")); // Coloca el nuevo indice
}
//____________________________________________________________________________
//
// Quita el resalte de un item y oculta los posibles submenus que tuviera 
// Parametros:
//      -o : El objeto DIV que contiene el menu contextual
//  - idx: el indice del item, si es nulo desmarca el item(objeto TR), seleccionado
//____________________________________________________________________________
function desmarcar_item(o,idx){ 
        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
        if(idx==null) // No se especificó indice
                idx=menuctxSelectedIndex(oDIV); // Indice del Item seleccionado
        var item=menuctxSelectedItem(oDIV,idx);
        if(item==null) return; // No hay item seleccionado
        marca_desmarca(item,false);
        var nomsub=item.getAttribute("name");
        if (nomsub!=null &&nomsub!=""){ // Tiene submenu
                var submenuctx=document.getElementById(nomsub);
                desmarcar_item(submenuctx); // Desmarca submenu
                submenuctx.style.visibility="hidden";
        }
}
//____________________________________________________________________________
//
// Marca o desmarca items dependiendo del parametro sw.
// Parámetros:
//      - o: El item (objeto TR) 
//      Si sw=true marca, si sw=false demarca
//____________________________________________________________________________
function marca_desmarca(o,sw){
        if(sw){ // Marca
                var wfondo=ctx_azulmarino;
                var wcolor=ctx_blanco;
        }
        else{ // Desmarca
                var wfondo=ctx_grissistema;
                var wcolor=ctx_negro;
        }
        var i0;
        (MenuconImagen(contextual(o)) ? i0=2 : i0=1);
        var nh=o.childNodes.length;
        for (var i=i0;i<nh-1;i++){
                var oTD=o.childNodes[i];
                var oIMGS=oTD.getElementsByTagName('IMG');
                if (oIMGS.length>0){
                        var oIMG=oIMGS[0];
                        if (oIMG.getAttribute("name")=="swsbfn"){ // imagen switch submenu
                                oTD.style.backgroundColor=wfondo;
                                oTD.style.color=wcolor;
                                if (sw) 
                                        oIMG.setAttribute("src","../images/flotantes/swsbfb.gif",null);
                                else
                                        oIMG.setAttribute("src","../images/flotantes/swsbfn.gif",null);
                        }
                        else{ // imagen del item
                                if (sw){ // Marcar
                                        oIMG.style.border="1px";
                                        oIMG.style.borderStyle="outset";

                                }
                                else{ // Desmarcar
                                        oIMG.style.borderStyle="none";
                                }
                        }
                }
                else{
                                oTD.style.backgroundColor=wfondo;
                                var oSPAN=oTD.getElementsByTagName('SPAN');
                                if (oSPAN.length>0)
                                                        oSPAN[0].style.color=wcolor
                }
        }
}
//____________________________________________________________________________
//
// Detecta si el menu contextual tiene items con imágenes asociadas
// Devuelve true en caso afirmativo y false en caso contrario.
//____________________________________________________________________________
function MenuconImagen(o){
        var oDIV=contextual(o);
        var oIMGS=oDIV.getElementsByTagName('IMG');
        return(oIMGS.length>0);
}
//____________________________________________________________________________
function reset_contextual(x,y){
        var swm=false;
        for (var i=0;i<idxmnu;i++ ){
                if (gmenuctx[i].style.visibility=="visible")
                        swm=swm || EnContextual(x,y,gmenuctx[i])
        }
        if (!swm){ // No se ha hecho click en ningún menu contextual
                for (var i=0;i<idxmnu;i++ ){
                        desmarcar_item(gmenuctx[i]);
                        gmenuctx[i].style.visibility="hidden";
                        gmenuctx[i]=null
                }
                idxmnu=0;
        }
}
//____________________________________________________________________________
//
// Detecta si ha hecho fuera del menu contextual pasado como parametro
// Parametros:
//      - x : Coordenada X de la pantalla donde se hizo click
//      - y : Coordenada Y de la pantalla donde se hizo click
//      - menuctx: El submenu (objeto DIV)
//____________________________________________________________________________
function EnContextual(x,y,menuctx){
        var origen_x=parseInt(menuctx.offsetLeft)-parseInt(document.body.scrollLeft);
        var origen_y=parseInt(menuctx.offsetTop)-parseInt(document.body.scrollTop);
        anchodiv=parseInt(menuctx.offsetWidth);
        largodiv=parseInt(menuctx.offsetHeight);

        if ( x>=origen_x && x<=origen_x+anchodiv && y>=origen_y  && y<=origen_y+largodiv  ) return true;
        return(false)
}
//____________________________________________________________________________
//
// Muestra un submenu
// Parametros:
//      - item: El objeto <TR> padre del submenu
//____________________________________________________________________________
function muestra_submenu(){
        if(currentPadresubmenu==currentItem){
                var objdiv=contextual(currentPadresubmenu); 
                var menuctx=document.getElementById(currentPadresubmenu.getAttribute("name")); // Obtiene el submenu
                //desmarcar_item(menuctx)  // Desmarca el   submenu por si  se ha usado anteriormente
                wleft=subcalculaleft_ctx(objdiv,menuctx); // La x en función del padre
                wtop=subcalculatop_ctx(currentPadreY,menuctx); // La y depende de la longitud del submenu
                menuctx.style.top=wtop;
                menuctx.style.left=wleft;
                menuctx.style.visibility="visible";
                menuctxSetSelectedIndex(menuctx,-1); // Coloca el nuevo indice
                gmenuctx[idxmnu++]=menuctx;
        }
}
//____________________________________________________________________________
//
// Calcula coordenada top para el submenu contextual que se mostrará.
// Parametros:
//      - y : Coordenada Y de la pantalla donde se hizo click
//      - menuctx: El submenu (objeto DIV) que se mostrará
//____________________________________________________________________________
function subcalculatop_ctx(y,menuctx){ // Calcula el posicionamiento (y) del DIV ( SUBmenu contextual)
        var dpl=0;
        largodiv=parseInt(menuctx.offsetHeight);
        var wtop=y+dpl+parseInt(document.body.scrollTop);
        if (parseInt(wtop+largodiv)>parseInt(document.body.clientHeight+parseInt(document.body.scrollTop))){
                var nwtop=y+parseInt(document.body.scrollTop)-16-largodiv;
                if (nwtop>0) wtop=nwtop
        }
        return(wtop)
}
//____________________________________________________________________________
//
// Calcula coordenada left para el submenu contextual que se mostrará.
// Parametros:
//      - padrediv : Objeto DIV padre del submenu a mostrar
//      - menuctx: El submenu (objeto DIV) que se mostrará
//____________________________________________________________________________
function subcalculaleft_ctx(padrediv,menuctx){ // Calcula el posicionamiento (x) del DIV ( SUBmenu contextual)
        var anchopadrediv=parseInt(padrediv.offsetWidth); // Ancho del div padre
        var anchomenuctx=parseInt(menuctx.offsetWidth); // Ancho del div 
        var leftpadrediv; // Coordenada x del div padre
        if(IE)
                leftpadrediv=padrediv.style.pixelLeft;
        else 
                if(NS)
                        leftpadrediv=parseInt(padrediv.style.left); // Coordenada x del div padre
        var desplazamiento=leftpadrediv+anchopadrediv-4; // Desplazamiento
        var wleft=parseInt(desplazamiento);
        var maximodpl=parseInt(document.body.clientWidth)+parseInt(document.body.scrollLeft);
        if (wleft+anchomenuctx>maximodpl){
                var nwleft=leftpadrediv-anchomenuctx;
                if (nwleft>0) wleft=nwleft;
                else{
                        wleft=maximodpl-anchomenuctx;
                        if(wleft<document.body.scrollLeft) wleft=document.body.scrollLeft+18
                }
        }
        return(wleft)
}
//____________________________________________________________________________
//
//      Se ejecuta cada vez que se hace click con el puntero del ratón. Se usa para desmarca
//      cualquier item de menu contextual que estuviese activo
//____________________________________________________________________________
function click_de_raton(e){     
        if(IE){
                botonraton=event.button;
                event.returnValue=true;
        }
        if(NS){
                botonraton=e.which;
                e.returnValue=true;
        }
        if (gmenuctx.length>0){
                reset_contextual(ClickX,ClickY);
        }
}
//____________________________________________________________________________
//
//      Se ejecuta cada vez que se mueve el puntero del ratón. Se usa para capturar coordenadas
//____________________________________________________________________________
function move_de_raton(e){      
        if(IE){
                ClickX=event.clientX;
                ClickY=event.clientY;
                event.returnValue=true;
        }
        if(NS){
                ClickX=e.clientX;
                ClickY=e.clientY;
                e.returnValue=true;
        }
}
//____________________________________________________________________________
//
//      Redirecciona el evento onmousedown a la función de usuario especificada. 
//____________________________________________________________________________
document.onmousedown = click_de_raton; // Redefine el evento onmousedown
document.onmousemove = move_de_raton; // Redefine el evento onmousedown