source: admin/WebConsole/clases/jscripts/MenuContextual.js @ b6906f7

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 b6906f7 was b0dc2e4, checked in by alonso <alonso@…>, 16 years ago

git-svn-id: https://opengnsys.es/svn/trunk@489 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
5// Fichero: menucontextual.js
6// Este fichero implementa las funciones javascript de la clase MenuContextual
7// ***************************************************************************
8var ctx_grissistema="#d4d0c8"
9var ctx_azulmarino="#0a266a";
10var ctx_blanco="#ffffff";
11var ctx_negro="#000000";
12var ctx_grissombra="#808080";
13
14gmenuctx=new Array(); // Guarda el último menu flotante
15var idxmnu=0 // Indice de los menus flotantes
16var currentItem=null;
17var currentPadresubmenu;
18var currentPadreY;
19
20var ClickX=null // Coordenada x del evento click del boton derecho
21var ClickY=null // Coordenada y del evento click del boton derecho
22var botonraton=null;
23//____________________________________________________________________________
24//     
25//      Esta función muestra un menu contextual
26// Parámetros:
27//              - x: Coordenada x de referencia
28//              - y: Coordenada y de referencia
29//              - menuctx: Objeto DIV contenedor del menu contextual
30//____________________________________________________________________________
31function muestra_contextual(x,y,menuctx){
32        var margen=0
33        dpzx=16
34        dpzy=16
35        wtop=calculatop_ctx(y,dpzy,margen,menuctx) // Calcula posición del menu contextual
36        wleft=calculaleft_ctx(x,dpzx,margen,menuctx)
37        ftop=wtop+parseInt(document.body.scrollTop) // Tiene en cuenta el scrolling
38        fleft=wleft+parseInt(document.body.scrollLeft)
39        menuctx.style.top=ftop
40        menuctx.style.left=fleft
41        menuctx.style.visibility="visible"
42        menuctxSetSelectedIndex(menuctx,-1) // Coloca el nuevo indice
43        gmenuctx[idxmnu++]=menuctx;
44}
45//____________________________________________________________________________
46//
47// Calcula coordenada top para el menu contextual que se mostrará.
48// Parametros:
49//      - oriy : Coordenada Y del objeto que provoca el evento
50//      - dpzy : Desplazamiento sobre el eje y
51//      - margen : Margen para que el menu aparezca un poco separado del ese objeto
52//      - menuctx: El menu (objeto DIV) que se mostrará
53//____________________________________________________________________________
54function calculatop_ctx(oriy,dpzy,margen,menuctx){ // Calcula Y del menu contextual
55        largodiv=parseInt(menuctx.offsetHeight);
56        var wtop=oriy+dpzy+margen
57        if (wtop+largodiv>parseInt(document.body.clientHeight)){
58                var nwtop=oriy-dpzy-margen-largodiv
59                if (nwtop>0) wtop=nwtop
60        }
61        return(wtop)
62}
63//____________________________________________________________________________
64//
65// Calcula coordenada left para el menu contextual que se mostrará.
66// Parametros:
67//      - orix : Coordenada X del objeto que provoca el evento
68//      - dpzx : Desplazamiento sobre el eje x
69//      - margen : Margen para que el menu aparezca un poco separado del ese objeto
70//      - menuctx: El menu (objeto DIV) que se mostrará
71//____________________________________________________________________________
72function calculaleft_ctx(orix,dpzx,margen,menuctx){ // Calcula Y del menu contextual
73        anchodiv=parseInt(menuctx.offsetWidth)
74        var wleft=orix+dpzx+margen
75        var maximodpl=parseInt(document.body.clientWidth)
76        if (wleft+anchodiv>maximodpl){ // Si no cabe a la derecha
77                var nwleft=orix-dpzx-margen-anchodiv // lo intenta a la izda.
78                if (nwleft>0) wleft=nwleft
79                else{
80                        wleft=maximodpl-dpzx-margen-anchodiv;
81                        if(wleft<document.body.scrollLeft) wleft=document.body.scrollLeft+16
82                }
83        }
84        return(wleft)
85}
86//____________________________________________________________________________
87//
88// Esta función devuelve el objeto DIV al que pertenece el item <TR> 
89// Parametros:
90//      - o: El objeto <TR>
91//____________________________________________________________________________
92function contextual(o){
93        while(o.tagName!="DIV")
94                o=o.parentNode
95        return(o)
96}
97//____________________________________________________________________________
98//
99// Esta función devuelve el objeto <TR> apuntado por el indice
100// Parametros:
101//      - o: El objeto TR
102//  - idx: el indice del item, si es nulo se devuelve el item(objeto TR), seleccionado
103//____________________________________________________________________________
104function menuctxSelectedItem(o,idx){
105        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
106        var oTABLE=oDIV.childNodes[0]; // objeto TABLE
107        var oINPUT=oDIV.childNodes[1]; // objeto INPUT
108        var oTBODY=oTABLE.getElementsByTagName('TBODY')[0];
109        if(idx==null) // No se especificó indice, devuelve el item seleccionado
110                idx=oINPUT.getAttribute("value");
111        var oTRS=oTBODY.getElementsByTagName('TR');
112        for (var i=0;i<oTRS.length;i++){
113                var oTR=oTRS[i];
114                if(oTR.getAttribute("id")==idx) return(oTR);
115        }
116        return(null);
117}
118//____________________________________________________________________________
119//
120// Esta función actualiza el nuevo el indice del item seleccionado
121// Parametros:
122//      - o: El objeto DIV que contiene el menu contextual o un item(objeto TR) de él
123//  - i: El valor del indice
124//____________________________________________________________________________
125function menuctxSetSelectedIndex(o,idx){
126        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
127        var oINPUT=oDIV.childNodes[1];
128        oINPUT.value=idx;
129}
130//____________________________________________________________________________
131//
132// Esta función devuelve el indice del item seleccionado
133// Parametros:
134//      -o : El objeto DIV que contiene el menu contextual o un item(objeto TR) de él
135//____________________________________________________________________________
136function menuctxSelectedIndex(o){
137        var oDIV=contextual(o); // Se asegura que el objeto de inicio es DIV
138        var oINPUT=oDIV.childNodes[1];
139        return(oINPUT.value);
140}
141//____________________________________________________________________________
142// Se ejecuta cuando se posiciona el cursor dentro de un item de algún menú contextual.
143// Parámetros:
144//      - o: El item (objeto TR) donde se ha colocado el ratón
145//____________________________________________________________________________
146function sobre_contextual(o){
147        var oDIV=contextual(o) // Se asegura que el objeto de inicio es DIV
148        var idx=menuctxSelectedIndex(oDIV) // Indice del Item anterior seleccionado
149        var nwid=o.getAttribute("id");
150        if (parseInt(idx)!=parseInt(nwid)){ // Si cambio de item
151                if(idx>0){ // Si existía item anterior seleccionado
152                        desmarcar_item(oDIV,idx) // Desmarca item anterior
153                }
154                marcar_item(o); // Marca el actual item
155                currentItem=o;
156        }
157}
158//____________________________________________________________________________
159//
160// Hace resaltar el item del menu contextual donde se coloca el cursor.
161// Si este item tuviese un submenu contextual,éste también aparecería.
162// Además, inicializa el campo oculto de cada DIV donde se guarda el índice
163// del item selecionado.
164//
165// Parametros:
166//      - item: El objeto <TR>
167//____________________________________________________________________________
168function marcar_item(item){
169        marca_desmarca(item,true) // Marca el item
170        if (item.getAttribute("name")!=""){ // Existe submenu contextual
171                currentPadresubmenu=item
172                currentPadreY=ClickY
173                setTimeout ("muestra_submenu();", 300);
174        }
175        menuctxSetSelectedIndex(contextual(item),item.getAttribute("id")); // Coloca el nuevo indice
176}
177//____________________________________________________________________________
178//
179// Quita el resalte de un item y oculta los posibles submenus que tuviera
180// Parametros:
181//      -o : El objeto DIV que contiene el menu contextual
182//  - idx: el indice del item, si es nulo desmarca el item(objeto TR), seleccionado
183//____________________________________________________________________________
184function desmarcar_item(o,idx){
185        var oDIV=contextual(o) // Se asegura que el objeto de inicio es DIV
186        if(idx==null) // No se especificó indice
187                idx=menuctxSelectedIndex(oDIV) // Indice del Item seleccionado
188        var item=menuctxSelectedItem(oDIV,idx)
189        if(item==null) return // No hay item seleccionado
190        marca_desmarca(item,false);
191        var nomsub=item.getAttribute("name");
192        if (nomsub!=null &&nomsub!=""){ // Tiene submenu
193                var submenuctx=document.getElementById(nomsub);
194                desmarcar_item(submenuctx); // Desmarca submenu
195                submenuctx.style.visibility="hidden";
196        }
197}
198//____________________________________________________________________________
199//
200// Marca o desmarca items dependiendo del parametro sw.
201// Parámetros:
202//      - o: El item (objeto TR)
203//      Si sw=true marca, si sw=false demarca
204//____________________________________________________________________________
205function marca_desmarca(o,sw){
206        if(sw){ // Marca
207                var wfondo=ctx_azulmarino;
208                var wcolor=ctx_blanco;
209        }
210        else{ // Desmarca
211                var wfondo=ctx_grissistema;
212                var wcolor=ctx_negro;
213        }
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        origen_x=parseInt(menuctx.offsetLeft)-parseInt(document.body.scrollLeft)
284        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        anchopadrediv=parseInt(padrediv.offsetWidth) // Ancho del div padre
337        anchomenuctx=parseInt(menuctx.offsetWidth) // Ancho del div
338        if(IE)
339                leftpadrediv=padrediv.style.pixelLeft // Coordenada x del div padre
340        else
341                if(NS)
342                        leftpadrediv=parseInt(padrediv.style.left) // Coordenada x del div padre
343        desplazamiento=leftpadrediv+anchopadrediv-4 // Desplazamiento
344        var wleft=parseInt(desplazamiento)
345        var maximodpl=parseInt(document.body.clientWidth)+parseInt(document.body.scrollLeft)
346        if (wleft+anchomenuctx>maximodpl){
347                var nwleft=leftpadrediv-anchomenuctx
348                if (nwleft>0) wleft=nwleft
349                else{
350                        wleft=maximodpl-anchomenuctx;
351                        if(wleft<document.body.scrollLeft) wleft=document.body.scrollLeft+18
352                }
353        }
354        return(wleft)
355}
356//____________________________________________________________________________
357//
358//      Se ejecuta cada vez que se hace click con el puntero del ratón. Se usa para desmarca
359//      cualquier item de menu contextual que estuviese activo
360//____________________________________________________________________________
361function click_de_raton(e){     
362        if(IE){
363                botonraton=event.button
364                event.returnValue=true;
365        }
366        if(NS){
367                botonraton=e.which;
368                e.returnValue=true;
369        }
370        if (gmenuctx.length>0){
371                reset_contextual(ClickX,ClickY);
372        }
373}
374//____________________________________________________________________________
375//
376//      Se ejecuta cada vez que se mueve el puntero del ratón. Se usa para capturar coordenadas
377//____________________________________________________________________________
378function move_de_raton(e){     
379        if(IE){
380                ClickX=event.clientX
381                ClickY=event.clientY
382                event.returnValue=true;
383        }
384        if(NS){
385                ClickX=e.clientX
386                ClickY=e.clientY
387                e.returnValue=true;
388        }
389}
390//____________________________________________________________________________
391//
392//      Redirecciona el evento onmousedown a la función de usuario especificada.
393//____________________________________________________________________________
394document.onmousedown = click_de_raton; // Redefine el evento onmousedown
395document.onmousemove = move_de_raton; // Redefine el evento onmousedown
Note: See TracBrowser for help on using the repository browser.