https://ocms.eurosai.org/export/system/modules/com.saga.grid/resources/js/grid.js

1// GENERACIÓN DE CLASES CSS EN BASE A SETTINGS/CAMPOS DEL RECURSO
2function gridClaseAlVuelo(html) {
3    const style = document.createElement('style');
4    document.head.appendChild(style);
5    style.innerHTML = html;
6}
7
8// SIRVE PARA CUADRAR LOS CONTENEDORES TENIENDO EN CUENTA QUE ESTÉN VACÍOS O NO
9function infoContenido_grid() {
10    /* AÑADE UN ATRIBUTO HTML AL CONTENEDOR PRINCIPAL DE UN SECTION INDICANDO EL NÚMERO DE COLUMNAS QUE TIENE */
11    $(document).find('.sgsection-main_container').each(function () {
12        const nColumnas = $(this).find('.sgsection-columna').length;
13
14        $(this).attr('data-ncolumnas', 'columnas_' + nColumnas);
15    });
16    /* AÑADE UN ATRIBUTO HTML AL CONTENEDOR DE LA COLUMNA DE UN SECTION INDICANDO EL NÚMERO DE FILAS QUE QUE TIENE */
17    $(document).find('.sgsection-columna').each(function () {
18        const nFilas = $(this).find('.sgrow-wrapper').length;
19
20        $(this).attr('data-nfilas', 'filas_' + nFilas);
21    });
22    /* AÑADE UN ATRIBUTO HTML AL CONTENEDOR PRINCIPAL DE UN ROW INDICANDO EL NÚMERO DE COLUMNAS QUE TIENE */
23    $(document).find('.sgrow-main_container').each(function () {
24        const nColumnas = $(this).find('.sgrow-columna').length;
25
26        $(this).attr('data-ncolumnas', 'columnas_' + nColumnas);
27    });
28}
29
30function gridElementCssClass(element) {
31    // console.log('------');
32    // console.log('function gridElementCssClass');
33
34    $(element).each(function () {
35
36        const class_a_crear = $(this).attr('data-cssid');
37        const contenedor_propiedades = $('input[data-cssid="' + class_a_crear + '"]');
38
39        // console.log('id: '+$(this).attr('data-cssid'));
40        // console.log('input a buscar: '+'input[data-cssid="' + class_a_crear + '"]');
41        // console.log('customprops del input: '+$('input[data-cssid="' + class_a_crear + '"]').attr('data-customprops'));
42
43        if (contenedor_propiedades.attr('data-customprops') === 'true') {
44            // console.log('Tiene settings CSS');
45
46            const estilos_a_aplicar = [];
47            const padding_superior = contenedor_propiedades.attr('data-psup');
48            const padding_inferior = contenedor_propiedades.attr('data-pinf');
49            const margin_superior = contenedor_propiedades.attr('data-msup');
50            const margin_inferior = contenedor_propiedades.attr('data-minf');
51            const background_image = contenedor_propiedades.attr('data-bgi');
52            const background_color = contenedor_propiedades.attr('data-bgc');
53
54            if (padding_superior !== undefined) {
55                estilos_a_aplicar.push("padding-top : " + padding_superior + "px !important;");
56            }
57            if (padding_inferior !== undefined) {
58                estilos_a_aplicar.push("padding-bottom : " + padding_inferior + "px !important;");
59            }
60            if (margin_superior !== undefined) {
61                estilos_a_aplicar.push("margin-top : " + margin_superior + "px !important;");
62            }
63            if (margin_inferior !== undefined) {
64                estilos_a_aplicar.push("margin-bottom : " + margin_inferior + "px !important;");
65            }
66            if (background_image !== undefined) {
67                $(this).addClass('bgi-definido');
68                estilos_a_aplicar.push("background-image: url('" + background_image + "') !important;");
69            }
70            if (background_color !== undefined) {
71                $(this).addClass('bgc-definido');
72                estilos_a_aplicar.push("background-color: " + background_color + " !important;");
73            }
74
75            let estilos_a_aplicar_string = '';
76
77            for (let i = 0; i < estilos_a_aplicar.length; i++) {
78                estilos_a_aplicar_string += estilos_a_aplicar[i];
79            }
80
81            // console.log('Estilos a aplicar'+ estilos_a_aplicar_string);
82
83            const clase_final = element + '[data-cssid="' + class_a_crear + '"]' + '{' + estilos_a_aplicar_string + '}';
84
85            gridClaseAlVuelo(clase_final);
86        }
87    });
88
89    // console.log('------');
90}
91
92function fondoTuning() {
93    $('.fondo_tuning').each(function () {
94
95        const class_a_crear = $(this).attr('data-cssid');
96        const contenedor_propiedades = $('input[data-cssid="' + class_a_crear + '"]');
97
98        const estilos_a_aplicar = [];
99        const background_image = contenedor_propiedades.attr('data-bgi');
100
101        if (background_image !== undefined) {
102            estilos_a_aplicar.push("background-image: url('" + background_image 

102+ "') !important;");
103
104            let estilos_a_aplicar_string = '';
105
106            for (let i = 0; i < estilos_a_aplicar.length; i++) {
107                estilos_a_aplicar_string += estilos_a_aplicar[i];
108            }
109
110            const clase_final_fondo = '.fondo_tuning[data-cssid="' + class_a_crear + '"] ' + '{background-image: url(' + background_image + ') !important;}';
111
112            gridClaseAlVuelo(clase_final_fondo);
113        }
114    });
115}
116
117function gridColumnasIgualadas(element) {
118    let altoMasAlto;
119
120    $(element).each(function () {
121        altoMasAlto = '';
122
123        $(this).find('.sgrow-columna').each(function () {
124            if ($(this).outerHeight() > altoMasAlto) {
125                altoMasAlto = $(this).innerHeight();
126                // console.log('El alto mas alto es:' + altoMasAlto);
127            }
128        });
129
130        const class_a_crear = $(this).attr('data-cssid');
131        const clase_final = element + '[data-cssid="' + class_a_crear + '"] .sgrow-columna .sgrow-columna-wrapper' + '{height:' + altoMasAlto + 'px;}';
132        // console.log('Clase final: '+clase_final);
133        gridClaseAlVuelo(clase_final);
134    });
135}
136
137function gridSectionColumnasIgualadas(element) {
138    let altoMasAlto;
139
140    $(element).each(function () {
141        $(this).find('.sgsection-columna').each(function () {
142            if ($(this).outerHeight() > altoMasAlto) {
143                altoMasAlto = $(this).innerHeight();
144                console.log('El alto mas alto es:' + altoMasAlto);
145            }
146        });
147    });
148
149    const class_a_crear = $(element).attr('data-cssid');
150    const clase_final = element + '[data-cssid="' + class_a_crear + '"] .sgsection-columna' + '{height:' + altoMasAlto + 'px;}';
151    // console.log('Clase final: '+clase_final);
152    gridClaseAlVuelo(clase_final);
153}
154
155$(function () {
156    gridColumnasIgualadas('.sgrow-main_container.columnasIgualadas');
157    gridSectionColumnasIgualadas('.sgsection-main_container.columnasIgualadas');
158    fondoTuning();
159
160    gridElementCssClass('.sgsection-main_container');
161    gridElementCssClass('.sgsection-columna');
162    gridElementCssClass('.sgrow-main_container');
163    gridElementCssClass('.sgrow-columna');
164});
165
166$(document).on('click', '.cms_container-template-toggle-button, .cms_container-template-toggle-button-ocultar', function () {
167    const contenedorBoton = $(this).parents('.cms_container-template-toggle-wrapper');
168
169    if ($(this).hasClass('fila')) {
170        const filaPadre = $(this).parents('.sgrow-main_container');
171        const contenedoresFila = filaPadre.find('> .sgrow-wrapper');
172
173        filaPadre.toggleClass('desplegada');
174        contenedorBoton.toggleClass('desplegada');
175
176        contenedoresFila.each(function () {
177            $(this).slideToggle();
178        });
179    } else if ($(this).hasClass('columnaSeccion')) {
180        const columnaSeccionPadre = $(this).closest('.sgsection-columna');
181        const contenedoresColumnaSeccion = columnaSeccionPadre.find('> .sgsection-columna-wrapper');
182
183        columnaSeccionPadre.toggleClass('desplegada');
184        contenedorBoton.toggleClass('desplegada');
185
186        contenedoresColumnaSeccion.each(function () {
187            $(this).slideToggle();
188        });
189    } else if ($(this).hasClass('columnaFila')) {
190        const columnaFilaPadre = $(this).closest('.sgrow-columna');
191        const contenedoresColumnaFila = columnaFilaPadre.find('> .sgrow-columna-wrapper');
192
193        columnaFilaPadre.toggleClass('desplegada');
194        contenedorBoton.toggleClass('desplegada');
195
196        contenedoresColumnaFila.each(function () {
197            $(this).slideToggle();
198        });
199    } else {
200        const seccionPadre = $(this).parents('.sgsection-main_container');
201        const contenedoresSeccion = seccionPadre.find('> .sgsection-wrapper > .sgsection-main_wrapper');
202
203        seccionPadre.toggleClass('desplegada');
204        contenedorBoton.toggleClass('desplegada');
205
206        contenedoresSeccion.each(function () {
207            $(this).slideToggle();
208        });
209    }
210});
211
212infoContenido_grid();
213
214// ELIMINAMOS LOS CMS:CONTAINER VACÍOS
215if ($('body').hasClass('estado_online')) {
216
217    $('.sgrow-main_container').each(function () {
218        const cssID = $(this).attr('data-cssid');
219        const nElementos = $('.sgrow-main_container[data-cssid=' + cssI

219D + '] .sgrow-columna .cms_container-row > *').children().length;
220
221        if (nElementos === 0) {
222            $(this).hide();
223        }
224    });
225
226    $('.sgsection-main_container').each(function () {
227        let nElementosTotales = 0;
228
229        $(this).find('.sgsection-columna').each(function () {
230            $(this).find('.sgrow-main_container').each(function () {
231                const cssID = $(this).attr('data-cssid');
232                const nElementos = $('.sgrow-main_container[data-cssid=' + cssID + '] .sgrow-columna .cms_container-row > *').children().length;
233
234                if (nElementos > 0) {
235                    nElementosTotales++;
236                }
237            });
238        });
239
240        console.log('Elementos totales: ' + nElementosTotales);
241
242        if (nElementosTotales === 0) {
243            $(this).hide();
244        }
245    });
246}