source: admin/WebConsole/clases/jscripts/MenuContextual.js @ 5d05b06

Last change on this file since 5d05b06 was 3806a31, checked in by ramon <ramongomez@…>, 7 years ago

#834: Limpiar código JavaScript?: terminar instrucciones con ";" y evitar asignaciones duplicadas.

git-svn-id: https://opengnsys.es/svn/branches/version1.1@5630 a21b9725-9963-47de-94b9-378ad31fedc9

  • Property mode set to 100644
File size: 15.2 KB
Line 
1// ***************************************************************************
2//  Libreria de scripts de Javascript
3// Autor: José Manuel Alonso (E.T.S.I.I.) Universidad de Sevilla
4// Fichero: menucontextual.js
5// Este fichero implementa las funciones javascript de la clase MenuContextual
6// ***************************************************************************
7var ctx_grissistema="#d4d0c8";
8var ctx_azulmarino="#0a266a";
9var ctx_blanco="#ffffff";
10var ctx_negro="#000000";
11var ctx_grissombra="#808080";
12
13var gmenuctx=new Array(); // Guarda el último menu flotante
14var idxmnu=0; // Indice de los menus flotantes
15var currentItem=null;
16var currentPadresubmenu;
17var currentPadreY;
18
19var ClickX=null; // Coordenada x del evento click del boton derecho
20var ClickY=null; // Coordenada y del evento click del boton derecho
21var botonraton=null;
22//____________________________________________________________________________
23//     
24//      Esta función muestra un menu contextual
25// Parámetros:
26//              - x: Coordenada x de referencia
27//              - y: Coordenada y de referencia
28//              - menuctx: Objeto DIV contenedor del menu contextual
29//____________________________________________________________________________
30function muestra_contextual(x,y,menuctx){
31        var margen=0;
32        var dpzx=16;
33        var dpzy=16;
34        var wtop=calculatop_ctx(y,dpzy,margen,menuctx); // Calcula posición del menu contextual
35        var wleft=calculaleft_ctx(x,dpzx,margen,menuctx);
36        var ftop=wtop+parseInt(document.body.scrollTop); // Tiene en cuenta el scrolling
37        var fleft=wleft+parseInt(document.body.scrollLeft);
38        menuctx.style.top=ftop;
39        menuctx.style.left=fleft;
40        menuctx.style.visibility="visible";
41        menuctxSetSelectedIndex(menuctx,-1); // Coloca el nuevo indice
42        gmenuctx[idxmnu++]=menuctx;
43}
44//____________________________________________________________________________
45//
46// Calcula coordenada top para el menu contextual que se mostrará.
47// Parametros:
48//      - oriy : Coordenada Y del objeto que provoca el evento
49//      - dpzy : Desplazamiento sobre el eje y
50//      - margen : Margen para que el menu aparezca un poco separado del ese objeto
51//      - menuctx: El menu (objeto DIV) que se mostrará
52//____________________________________________________________________________
53function calculatop_ctx(oriy,dpzy,margen,menuctx){ // Calcula Y del menu contextual
54        var largodiv=parseInt(menuctx.offsetHeight);
55        var wtop=oriy+dpzy+margen;
56        if (wtop+largodiv>parseInt(document.body.clientHeight)){
57                var nwtop=oriy-dpzy-margen-largodiv;
58                if (nwtop>0) wtop=nwtop
59        }
60        return(wtop)
61}
62//____________________________________________________________________________
63//
64// Calcula coordenada left para el menu contextual que se mostrará.
65// Parametros:
66//      - orix : Coordenada X del objeto que provoca el evento
67//      - dpzx : Desplazamiento sobre el eje x
68//      - margen : Margen para que el menu aparezca un poco separado del ese objeto
69//      - menuctx: El menu (objeto DIV) que se mostrará
70//____________________________________________________________________________
71function calculaleft_ctx(orix,dpzx,margen,menuctx){ // Calcula Y del menu contextual
72        var anchodiv=parseInt(menuctx.offsetWidth);
73        var wleft=orix+dpzx+margen;
74        var maximodpl=parseInt(document.body.clientWidth);
75        if (wleft+anchodiv>maximodpl){ // Si no cabe a la derecha
76                var nwleft=orix-dpzx-margen-anchodiv; // lo intenta a la izda.
77                if (nwleft>0) wleft=nwleft;
78                else{
79                        wleft=maximodpl-dpzx-margen-anchodiv;
80                        if(wleft<document.body.scrollLeft) wleft=document.body.scrollLeft+16
81                }
82        }
83        return(wleft)
84}
85//____________________________________________________________________________
86//
87// Esta función devuelve el objeto DIV al que pertenece el item <TR> 
88// Parametros:
89//      - o: El objeto <TR>
90//____________________________________________________________________________
91function contextual(o){
92        while(o.tagName!="DIV")
93                o=o.parentNode;
94        return(o)
95}
96//____________________________________________________________________________
97//
98// Esta función devuelve el objeto <TR> apuntado por el indice
99// Parametros:
100//      - o: El objeto TR
101//  - idx: el indice del item, si es nulo se devuelve el item(objeto TR), seleccionado
102//____________________________________________________________________________
103function menuctxSelectedItem(o,idx){
104        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
105        var oTABLE=oDIV.childNodes[0]; // objeto TABLE
106        var oINPUT=oDIV.childNodes[1]; // objeto INPUT
107        var oTBODY=oTABLE.getElementsByTagName('TBODY')[0];
108        if(idx==null) // No se especificó indice, devuelve el item seleccionado
109                idx=oINPUT.getAttribute("value");
110        var oTRS=oTBODY.getElementsByTagName('TR');
111        for (var i=0;i<oTRS.length;i++){
112                var oTR=oTRS[i];
113                if(oTR.getAttribute("id")==idx) return(oTR);
114        }
115        return(null);
116}
117//____________________________________________________________________________
118//
119// Esta función actualiza el nuevo el indice del item seleccionado
120// Parametros:
121//      - o: El objeto DIV que contiene el menu contextual o un item(objeto TR) de él
122//  - i: El valor del indice
123//____________________________________________________________________________
124function menuctxSetSelectedIndex(o,idx){
125        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
126        var oINPUT=oDIV.childNodes[1];
127        oINPUT.value=idx;
128}
129//____________________________________________________________________________
130//
131// Esta función devuelve el indice del item seleccionado
132// Parametros:
133//      -o : El objeto DIV que contiene el menu contextual o un item(objeto TR) de él
134//____________________________________________________________________________
135function menuctxSelectedIndex(o){
136        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
137        var oINPUT=oDIV.childNodes[1];
138        return(oINPUT.value);
139}
140//____________________________________________________________________________
141// Se ejecuta cuando se posiciona el cursor dentro de un item de algún menú contextual.
142// Parámetros:
143//      - o: El item (objeto TR) donde se ha colocado el ratón
144//____________________________________________________________________________
145function sobre_contextual(o){
146        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
147        var idx=menuctxSelectedIndex(oDIV); // Indice del Item anterior seleccionado
148        var nwid=o.getAttribute("id");
149        if (parseInt(idx)!=parseInt(nwid)){ // Si cambio de item
150                if(idx>0){ // Si existía item anterior seleccionado
151                        desmarcar_item(oDIV,idx) // Desmarca item anterior
152                }
153                marcar_item(o); // Marca el actual item
154                currentItem=o;
155        }
156}
157//____________________________________________________________________________
158//
159// Hace resaltar el item del menu contextual donde se coloca el cursor.
160// Si este item tuviese un submenu contextual,éste también aparecería.
161// Además, inicializa el campo oculto de cada DIV donde se guarda el índice
162// del item selecionado.
163//
164// Parametros:
165//      - item: El objeto <TR>
166//____________________________________________________________________________
167function marcar_item(item){
168        marca_desmarca(item,true); // Marca el item
169        if (item.getAttribute("name")!=""){ // Existe submenu contextual
170                currentPadresubmenu=item;
171                currentPadreY=ClickY;
172                setTimeout ("muestra_submenu();", 300);
173        }
174        menuctxSetSelectedIndex(contextual(item),item.getAttribute("id")); // Coloca el nuevo indice
175}
176//____________________________________________________________________________
177//
178// Quita el resalte de un item y oculta los posibles submenus que tuviera
179// Parametros:
180//      -o : El objeto DIV que contiene el menu contextual
181//  - idx: el indice del item, si es nulo desmarca el item(objeto TR), seleccionado
182//____________________________________________________________________________
183function desmarcar_item(o,idx){
184        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
185        if(idx==null) // No se especificó indice
186                idx=menuctxSelectedIndex(oDIV); // Indice del Item seleccionado
187        var item=menuctxSelectedItem(oDIV,idx);
188        if(item==null) return; // No hay item seleccionado
189        marca_desmarca(item,false);
190        var nomsub=item.getAttribute("name");
191        if (nomsub!=null &&nomsub!=""){ // Tiene submenu
192                var submenuctx=document.getElementById(nomsub);
193                desmarcar_item(submenuctx); // Desmarca submenu
194                submenuctx.style.visibility="hidden";
195        }
196}
197//____________________________________________________________________________
198//
199// Marca o desmarca items dependiendo del parametro sw.
200// Parámetros:
201//      - o: El item (objeto TR)
202//      Si sw=true marca, si sw=false demarca
203//____________________________________________________________________________
204function marca_desmarca(o,sw){
205        if(sw){ // Marca
206                var wfondo=ctx_azulmarino;
207                var wcolor=ctx_blanco;
208        }
209        else{ // Desmarca
210                var wfondo=ctx_grissistema;
211                var wcolor=ctx_negro;
212        }
213        var i0;
214        (MenuconImagen(contextual(o)) ? i0=2 : i0=1);
215        var nh=o.childNodes.length;
216        for (var i=i0;i<nh-1;i++){
217                var oTD=o.childNodes[i];
218                var oIMGS=oTD.getElementsByTagName('IMG');
219                if (oIMGS.length>0){
220                        var oIMG=oIMGS[0];
221                        if (oIMG.getAttribute("name")=="swsbfn"){ // imagen switch submenu
222                                oTD.style.backgroundColor=wfondo;
223                                oTD.style.color=wcolor;
224                                if (sw)
225                                        oIMG.setAttribute("src","../images/flotantes/swsbfb.gif",null);
226                                else
227                                        oIMG.setAttribute("src","../images/flotantes/swsbfn.gif",null);
228                        }
229                        else{ // imagen del item
230                                if (sw){ // Marcar
231                                        oIMG.style.border="1px";
232                                        oIMG.style.borderStyle="outset";
233
234                                }
235                                else{ // Desmarcar
236                                        oIMG.style.borderStyle="none";
237                                }
238                        }
239                }
240                else{
241                                oTD.style.backgroundColor=wfondo;
242                                var oSPAN=oTD.getElementsByTagName('SPAN');
243                                if (oSPAN.length>0)
244                                                        oSPAN[0].style.color=wcolor
245                }
246        }
247}
248//____________________________________________________________________________
249//
250// Detecta si el menu contextual tiene items con imágenes asociadas
251// Devuelve true en caso afirmativo y false en caso contrario.
252//____________________________________________________________________________
253function MenuconImagen(o){
254        var oDIV=contextual(o);
255        var oIMGS=oDIV.getElementsByTagName('IMG');
256        return(oIMGS.length>0);
257}
258//____________________________________________________________________________
259function reset_contextual(x,y){
260        var swm=false;
261        for (var i=0;i<idxmnu;i++ ){
262                if (gmenuctx[i].style.visibility=="visible")
263                        swm=swm || EnContextual(x,y,gmenuctx[i])
264        }
265        if (!swm){ // No se ha hecho click en ningún menu contextual
266                for (var i=0;i<idxmnu;i++ ){
267                        desmarcar_item(gmenuctx[i]);
268                        gmenuctx[i].style.visibility="hidden";
269                        gmenuctx[i]=null
270                }
271                idxmnu=0;
272        }
273}
274//____________________________________________________________________________
275//
276// Detecta si ha hecho fuera del menu contextual pasado como parametro
277// Parametros:
278//      - x : Coordenada X de la pantalla donde se hizo click
279//      - y : Coordenada Y de la pantalla donde se hizo click
280//      - menuctx: El submenu (objeto DIV)
281//____________________________________________________________________________
282function EnContextual(x,y,menuctx){
283        var origen_x=parseInt(menuctx.offsetLeft)-parseInt(document.body.scrollLeft);
284        var origen_y=parseInt(menuctx.offsetTop)-parseInt(document.body.scrollTop);
285        anchodiv=parseInt(menuctx.offsetWidth);
286        largodiv=parseInt(menuctx.offsetHeight);
287
288        if ( x>=origen_x && x<=origen_x+anchodiv && y>=origen_y  && y<=origen_y+largodiv  ) return true;
289        return(false)
290}
291//____________________________________________________________________________
292//
293// Muestra un submenu
294// Parametros:
295//      - item: El objeto <TR> padre del submenu
296//____________________________________________________________________________
297function muestra_submenu(){
298        if(currentPadresubmenu==currentItem){
299                var objdiv=contextual(currentPadresubmenu);
300                var menuctx=document.getElementById(currentPadresubmenu.getAttribute("name")); // Obtiene el submenu
301                //desmarcar_item(menuctx)  // Desmarca el   submenu por si  se ha usado anteriormente
302                wleft=subcalculaleft_ctx(objdiv,menuctx); // La x en función del padre
303                wtop=subcalculatop_ctx(currentPadreY,menuctx); // La y depende de la longitud del submenu
304                menuctx.style.top=wtop;
305                menuctx.style.left=wleft;
306                menuctx.style.visibility="visible";
307                menuctxSetSelectedIndex(menuctx,-1); // Coloca el nuevo indice
308                gmenuctx[idxmnu++]=menuctx;
309        }
310}
311//____________________________________________________________________________
312//
313// Calcula coordenada top para el submenu contextual que se mostrará.
314// Parametros:
315//      - y : Coordenada Y de la pantalla donde se hizo click
316//      - menuctx: El submenu (objeto DIV) que se mostrará
317//____________________________________________________________________________
318function subcalculatop_ctx(y,menuctx){ // Calcula el posicionamiento (y) del DIV ( SUBmenu contextual)
319        var dpl=0;
320        largodiv=parseInt(menuctx.offsetHeight);
321        var wtop=y+dpl+parseInt(document.body.scrollTop);
322        if (parseInt(wtop+largodiv)>parseInt(document.body.clientHeight+parseInt(document.body.scrollTop))){
323                var nwtop=y+parseInt(document.body.scrollTop)-16-largodiv;
324                if (nwtop>0) wtop=nwtop
325        }
326        return(wtop)
327}
328//____________________________________________________________________________
329//
330// Calcula coordenada left para el submenu contextual que se mostrará.
331// Parametros:
332//      - padrediv : Objeto DIV padre del submenu a mostrar
333//      - menuctx: El submenu (objeto DIV) que se mostrará
334//____________________________________________________________________________
335function subcalculaleft_ctx(padrediv,menuctx){ // Calcula el posicionamiento (x) del DIV ( SUBmenu contextual)
336        var anchopadrediv=parseInt(padrediv.offsetWidth); // Ancho del div padre
337        var anchomenuctx=parseInt(menuctx.offsetWidth); // Ancho del div
338        var leftpadrediv; // Coordenada x del div padre
339        if(IE)
340                leftpadrediv=padrediv.style.pixelLeft;
341        else
342                if(NS)
343                        leftpadrediv=parseInt(padrediv.style.left); // Coordenada x del div padre
344        var desplazamiento=leftpadrediv+anchopadrediv-4; // Desplazamiento
345        var wleft=parseInt(desplazamiento);
346        var maximodpl=parseInt(document.body.clientWidth)+parseInt(document.body.scrollLeft);
347        if (wleft+anchomenuctx>maximodpl){
348                var nwleft=leftpadrediv-anchomenuctx;
349                if (nwleft>0) wleft=nwleft;
350                else{
351                        wleft=maximodpl-anchomenuctx;
352                        if(wleft<document.body.scrollLeft) wleft=document.body.scrollLeft+18
353                }
354        }
355        return(wleft)
356}
357//____________________________________________________________________________
358//
359//      Se ejecuta cada vez que se hace click con el puntero del ratón. Se usa para desmarca
360//      cualquier item de menu contextual que estuviese activo
361//____________________________________________________________________________
362function click_de_raton(e){     
363        if(IE){
364                botonraton=event.button;
365                event.returnValue=true;
366        }
367        if(NS){
368                botonraton=e.which;
369                e.returnValue=true;
370        }
371        if (gmenuctx.length>0){
372                reset_contextual(ClickX,ClickY);
373        }
374}
375//____________________________________________________________________________
376//
377//      Se ejecuta cada vez que se mueve el puntero del ratón. Se usa para capturar coordenadas
378//____________________________________________________________________________
379function move_de_raton(e){     
380        if(IE){
381                ClickX=event.clientX;
382                ClickY=event.clientY;
383                event.returnValue=true;
384        }
385        if(NS){
386                ClickX=e.clientX;
387                ClickY=e.clientY;
388                e.returnValue=true;
389        }
390}
391//____________________________________________________________________________
392//
393//      Redirecciona el evento onmousedown a la función de usuario especificada.
394//____________________________________________________________________________
395document.onmousedown = click_de_raton; // Redefine el evento onmousedown
396document.onmousemove = move_de_raton; // Redefine el evento onmousedown
Note: See TracBrowser for help on using the repository browser.