source: admin/WebConsole/clases/jscripts/MenuContextual.js @ 4a03527

918-git-images-111dconfigfileconfigure-oglivegit-imageslgromero-new-oglivemainmaint-cronmount-efivarfsmultivmmultivm-ogboot-installerogClonningEngineogboot-installer-jenkinsoglive-ipv6test-python-scriptsticket-301ticket-50ticket-50-oldticket-577ticket-585ticket-611ticket-612ticket-693ticket-700ubu24tplunification2use-local-agent-oglivevarios-instalacionwebconsole3
Last change on this file since 4a03527 was 3ec149c, checked in by alonso <alonso@…>, 15 years ago

git-svn-id: https://opengnsys.es/svn/trunk@1314 a21b9725-9963-47de-94b9-378ad31fedc9

  • Property mode set to 100644
File size: 15.0 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
13gmenuctx=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        dpzx=16
33        dpzy=16
34        wtop=calculatop_ctx(y,dpzy,margen,menuctx) // Calcula posición del menu contextual
35        wleft=calculaleft_ctx(x,dpzx,margen,menuctx)
36        ftop=wtop+parseInt(document.body.scrollTop) // Tiene en cuenta el scrolling
37        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        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        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        (MenuconImagen(contextual(o)) ? i0=2:i0=1);
214        var nh=o.childNodes.length;
215        for (var i=i0;i<nh-1;i++){
216                var oTD=o.childNodes[i];
217                var oIMGS=oTD.getElementsByTagName('IMG');
218                if (oIMGS.length>0){
219                        var oIMG=oIMGS[0];
220                        if (oIMG.getAttribute("name")=="swsbfn"){ // imagen switch submenu
221                                oTD.style.backgroundColor=wfondo
222                                oTD.style.color=wcolor
223                                if (sw)
224                                        oIMG.setAttribute("src","../images/flotantes/swsbfb.gif",null);
225                                else
226                                        oIMG.setAttribute("src","../images/flotantes/swsbfn.gif",null);
227                        }
228                        else{ // imagen del item
229                                if (sw){ // Marcar
230                                        oIMG.style.border="1px";
231                                        oIMG.style.borderStyle="outset";
232
233                                }
234                                else{ // Desmarcar
235                                        oIMG.style.borderStyle="none";
236                                }
237                        }
238                }
239                else{
240                                oTD.style.backgroundColor=wfondo
241                                var oSPAN=oTD.getElementsByTagName('SPAN');
242                                if (oSPAN.length>0)
243                                                        oSPAN[0].style.color=wcolor
244                }
245        }
246}
247//____________________________________________________________________________
248//
249// Detecta si el menu contextual tiene items con imágenes asociadas
250// Devuelve true en caso afirmativo y false en caso contrario.
251//____________________________________________________________________________
252function MenuconImagen(o){
253        var oDIV=contextual(o);
254        var oIMGS=oDIV.getElementsByTagName('IMG');
255        return(oIMGS.length>0);
256}
257//____________________________________________________________________________
258function reset_contextual(x,y){
259        var swm=false;
260        for (var i=0;i<idxmnu;i++ ){
261                if (gmenuctx[i].style.visibility=="visible")
262                        swm=swm || EnContextual(x,y,gmenuctx[i])
263        }
264        if (!swm){ // No se ha hecho click en ningún menu contextual
265                for (var i=0;i<idxmnu;i++ ){
266                        desmarcar_item(gmenuctx[i]);
267                        gmenuctx[i].style.visibility="hidden";
268                        gmenuctx[i]=null
269                }
270                idxmnu=0;
271        }
272}
273//____________________________________________________________________________
274//
275// Detecta si ha hecho fuera del menu contextual pasado como parametro
276// Parametros:
277//      - x : Coordenada X de la pantalla donde se hizo click
278//      - y : Coordenada Y de la pantalla donde se hizo click
279//      - menuctx: El submenu (objeto DIV)
280//____________________________________________________________________________
281function EnContextual(x,y,menuctx){
282        origen_x=parseInt(menuctx.offsetLeft)-parseInt(document.body.scrollLeft)
283        origen_y=parseInt(menuctx.offsetTop)-parseInt(document.body.scrollTop)
284        anchodiv=parseInt(menuctx.offsetWidth)
285        largodiv=parseInt(menuctx.offsetHeight)
286
287        if ( x>=origen_x && x<=origen_x+anchodiv && y>=origen_y  && y<=origen_y+largodiv  ) return true
288        return(false)
289}
290//____________________________________________________________________________
291//
292// Muestra un submenu
293// Parametros:
294//      - item: El objeto <TR> padre del submenu
295//____________________________________________________________________________
296function muestra_submenu(){
297        if(currentPadresubmenu==currentItem){
298                var objdiv=contextual(currentPadresubmenu)
299                var menuctx=document.getElementById(currentPadresubmenu.getAttribute("name")); // Obtiene el submenu
300                //desmarcar_item(menuctx)  // Desmarca el   submenu por si  se ha usado anteriormente
301                wleft=subcalculaleft_ctx(objdiv,menuctx) // La x en función del padre
302                wtop=subcalculatop_ctx(currentPadreY,menuctx) // La y depende de la longitud del submenu
303                menuctx.style.top=wtop
304                menuctx.style.left=wleft
305                menuctx.style.visibility="visible";
306                menuctxSetSelectedIndex(menuctx,-1) // Coloca el nuevo indice
307                gmenuctx[idxmnu++]=menuctx;
308        }
309}
310//____________________________________________________________________________
311//
312// Calcula coordenada top para el submenu contextual que se mostrará.
313// Parametros:
314//      - y : Coordenada Y de la pantalla donde se hizo click
315//      - menuctx: El submenu (objeto DIV) que se mostrará
316//____________________________________________________________________________
317function subcalculatop_ctx(y,menuctx){ // Calcula el posicionamiento (y) del DIV ( SUBmenu contextual)
318        var dpl=0
319        largodiv=parseInt(menuctx.offsetHeight)
320        var wtop=y+dpl+parseInt(document.body.scrollTop)
321        if (parseInt(wtop+largodiv)>parseInt(document.body.clientHeight+parseInt(document.body.scrollTop))){
322                var nwtop=y+parseInt(document.body.scrollTop)-16-largodiv
323                if (nwtop>0) wtop=nwtop
324        }
325        return(wtop)
326}
327//____________________________________________________________________________
328//
329// Calcula coordenada left para el submenu contextual que se mostrará.
330// Parametros:
331//      - padrediv : Objeto DIV padre del submenu a mostrar
332//      - menuctx: El submenu (objeto DIV) que se mostrará
333//____________________________________________________________________________
334function subcalculaleft_ctx(padrediv,menuctx){ // Calcula el posicionamiento (x) del DIV ( SUBmenu contextual)
335        anchopadrediv=parseInt(padrediv.offsetWidth) // Ancho del div padre
336        anchomenuctx=parseInt(menuctx.offsetWidth) // Ancho del div
337        if(IE)
338                leftpadrediv=padrediv.style.pixelLeft // Coordenada x del div padre
339        else
340                if(NS)
341                        leftpadrediv=parseInt(padrediv.style.left) // Coordenada x del div padre
342        desplazamiento=leftpadrediv+anchopadrediv-4 // Desplazamiento
343        var wleft=parseInt(desplazamiento)
344        var maximodpl=parseInt(document.body.clientWidth)+parseInt(document.body.scrollLeft)
345        if (wleft+anchomenuctx>maximodpl){
346                var nwleft=leftpadrediv-anchomenuctx
347                if (nwleft>0) wleft=nwleft
348                else{
349                        wleft=maximodpl-anchomenuctx;
350                        if(wleft<document.body.scrollLeft) wleft=document.body.scrollLeft+18
351                }
352        }
353        return(wleft)
354}
355//____________________________________________________________________________
356//
357//      Se ejecuta cada vez que se hace click con el puntero del ratón. Se usa para desmarca
358//      cualquier item de menu contextual que estuviese activo
359//____________________________________________________________________________
360function click_de_raton(e){     
361        if(IE){
362                botonraton=event.button
363                event.returnValue=true;
364        }
365        if(NS){
366                botonraton=e.which;
367                e.returnValue=true;
368        }
369        if (gmenuctx.length>0){
370                reset_contextual(ClickX,ClickY);
371        }
372}
373//____________________________________________________________________________
374//
375//      Se ejecuta cada vez que se mueve el puntero del ratón. Se usa para capturar coordenadas
376//____________________________________________________________________________
377function move_de_raton(e){     
378        if(IE){
379                ClickX=event.clientX
380                ClickY=event.clientY
381                event.returnValue=true;
382        }
383        if(NS){
384                ClickX=e.clientX
385                ClickY=e.clientY
386                e.returnValue=true;
387        }
388}
389//____________________________________________________________________________
390//
391//      Redirecciona el evento onmousedown a la función de usuario especificada.
392//____________________________________________________________________________
393document.onmousedown = click_de_raton; // Redefine el evento onmousedown
394document.onmousemove = move_de_raton; // Redefine el evento onmousedown
Note: See TracBrowser for help on using the repository browser.