source: admin/WebConsole/clases/jscripts/MenuContextual.js @ 21e2ab8

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 21e2ab8 was 19fb068, checked in by ramon <ramongomez@…>, 13 years ago

Versión 1.0.4, #531: Corregir algunos aviso en sintaxis JavaScript?.

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

  • Property mode set to 100644
File size: 15.1 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.