https://centroricardobsalinaspliego.org/Scripts/Areas/BibliotecaRBSP/vue-home.js

1let app = new Vue({
2    el: '#biblioteca-home',
3    data: {
4        pathBase: path + 'umbraco/surface',
5        libros: [],
6        imagenesBanner: [],
7        tematicas: [],
8        banner: {},
9        tags: [],
10        tag: null,
11        url_embed: '',
12        ContadorCargar: 0,
13        swiperInstance: null,
14        showPrevArrow: false,
15        showNextArrow: true,
16        initialSlide: 1,
17        redes: [],
18        creditos: []
19    },
20    mounted() {
21        this.ObtenerTematicaLibros();
22        this.obtenerCatalogoTematicas();
23        this.obtenerBannerTags();
24        this.obtenerRedesSociales();
25
26        const storedVisita = localStorage.getItem('primeraVisita');
27        if (storedVisita !== null) {
28            localStorage.setItem('primeraVisita', 'false');
29        } else {
30            localStorage.setItem('primeraVisita', 'true');
31        }
32
33        this.ObtenerCreditos(); 
34    },
35    methods: {
36        ObtenerTematicaLibros() {
37            this.ContadorCargar++;
38            axios.get(this.pathBase + '/Biblioteca/getTematicaLibros')
39                .then(response => {
40                    if (response.data.Estatus == 200) {
41                        var json = JSON.parse(response.data.Resultado.Entidad);
42
43                        json.Tematica.forEach((e) => {
44                            e.Libros = JSON.parse(e.Libros)
45                        });
46                        this.libros = json.Tematica;
47                    }
48                    this.$nextTick(() => {
49                        var elementos = this.libros.length;
50                        initOwl(this.libros);
51                        $(".container-img-libro").css("height", $(".CarruselDesktop").width());
52                    });
53                })
54                .catch(error => {
55                    console.error('Error cargando datos:', error);
56                })
57                .finally(function () {
58                    app.ContadorCargar--;
59                });
60        },
61        obtenerCatalogoTematicas() {
62            this.ContadorCargar++;
63            axios.get(this.pathBase + '/Biblioteca/getTematicas')
64                .then(response => {
65                    if (response.data.Estatus == 200) {
66                        var json = JSON.parse(response.data.Resultado.Entidad);
67                        this.tematicas = json.Tematicas;
68                    }
69                })
70                .catch(error => {
71                    console.error('Error cargando datos:', error);
72                })
73                .finally(function () {
74                    app.ContadorCargar--;
75                });
76        },
77        ajustarEstiloImagen() {
78            this.$nextTick(() => {
79                this.imagenesBanner.forEach((imagen, index) => {
80                    const imgElement = document.getElementById(`banner-img-${index}`);
81                    if (imgElement) {
82                        imgElement.onload = () => {
83                            const width = imgElement.naturalWidth;
84                            const height = imgElement.naturalHeight;
85
86                            // Condición para asegurarse de que la imagen es suficientemente ancha
87                            if (width > imgElement.parentElement.offsetWidth) {
88                                imgElement.style.width = '100%';
89                            } else {
90                                imgElement.style.width = 'auto';
91                            }
92                        };
93                    }
94                });
95            });
96        },
97        updateArrows() {
98            if (!this.swiperInstance) return;
99
100            const currentIndex = this.swiperInstance.realIndex;
101
102            if (this.imagenesBanner.length > 4) {
103                this.showPrevArrow = currentIndex != 2;
104                this.showNextArrow = currentIndex != 1;
105            } else {
106                this.showPrevArrow = currentIndex == this.imagenesBanner.length - 1;
107                this.showNextArrow = currentIndex == 0;
108            }
109
110        },
111        initSwiper() {
112            if (this.imagenesBanner.length > 4) {
113                this.reorderImages(3);
114            }
115
116            this.initialSlide = this.imagenesBanner.length > 4 ? 2 : 0;
117
118            this.swiperInstance = new Swiper('.swiper-container', {
119                loop: true,
120                autoplay: {
121                    delay: 10000,
122                },
123                initialSlide: this.initialSlide,
124                navigation: {
125                    nextEl: '.swiper-button-next',
126                    prevEl: '.swiper-button-prev',
127                },
128                pagination: {
129                    el: '.swiper-pagination',
130                    clickable: true,
131                    dynamicBullets: true
132                },
133                breakpoints: {
134                    0: {
135                        navigation: {
136                            enabled: false,
137                            nextEl: '.swiper-button-next',
138                            prevEl: '.swiper-button-prev'
139                        }
140                    },
141                    992: {
142                        navigation: {
143                            enabled: true,
144                            nextEl: '.swiper-button-next',
145                            prevEl: '.swiper-button-prev'
146                        }
147                    }
148                },
149                //on: {
150                //    slideChange: this.updateArrows
151                //}
152            });
153        },
154        obtenerBannerTags() {
155            this.ContadorCargar++;
156            axios.get(this.pathBase + '/Biblioteca/getBannerTags')
157                .then(response => {
158                    if (response.data.Estatus == 200) {
159                        var json = JSON.parse(response.data.Resultado.Entidad);
160                        this.banner = JSON.parse(json.Banner);
161                        this.tags = json.Tags;
162                        this.imagenesBanner = json.BannerImg;
163
164                        this.getPosterVideo();
165
166                        this.$nextTick(() => {
167                            // inicializas tu swiper
168                            this.initSwiper();
169
170                            // 2) si hay TweetId, creamos el embed
171                            if (this.banner.TweetId && window.twttr && twttr.widgets) {
172                                // vaciamos el contenedor por si acaso
173                                const cont = document.getElementById('tweet-embed');
174                                cont.innerHTML = '';
175                                twttr.widgets.createTweet(
176                                    this.banner.TweetId,
177                                    cont,
178                                    {
179                                        theme: 'dark',
180                                        conversation: 'none',
181                                        width: '100%'  // o 550, como prefieras
182                                    }
183                                );
184                            }
185
186
187                            const storedVisita = localStorage.getItem('primeraVisita');
188                            if (storedVisita === 'false') {
189                                const accordionCollapseElementList = document.querySelectorAll('#accordion-mensaje .collapse')
190                                const accordionCollapseList = [...accordionCollapseElementList].map(accordionCollapseEl =>
191                                    new bootstrap.Collapse(accordionCollapseEl, { toggle: true })
192                                );
193
194                            }
195
196                        });
197                    }
198                })
199                .catch(error => {
200                    console.error('Error cargando datos:', error);
201                })
202                .finally(function () {
203                    app.ContadorCargar--;
204                });
205        },
206        reorderImages(startIndex) {
207            if (startIndex < 0 || startIndex >= this.imagenesBanner.length) {
208                console.error('Invalid startIndex');
209                return;
210            }
211
212            // Divide el arreglo en dos partes y reordena
213            const beforeStart = this.imagenesBanner.slice(0, startIndex);
214            const afterStart = this.imagenesBanner.slice(startIndex);
215            this.imagenesBanner = [...afterStart, ...beforeStart];
216        },
217        modalTematicas: function () {
218            $('#menu-categorias').modal('show');
219
220            $('.modal-backdrop').css("background-color", "black");
221            $('.modal-backdrop').css("opacity", .6);
222
223            new Promise(function (resolve, reject) {
224                setTimeout(function () { resolve(1); }, 200)
225            }).then(function (val) {
226                $(".contenedor-categorias").masonry({
227                    columnWidth: 345,
228                    itemSelector: '.tema-block',
229                    fitWidth: true,
230                    gutter: 16
231
232                });
233            });
234        },
235        openModalTag: function (tag) {
236            this.tag = tag.Descripcion;
237        },
238        getModalId(tag, index) {
239            if (index === 0) {
240                return '#modal-black';
241            } else {
242                return '#modal-tag-2';
243            }
244        },
245        openModalVideo: function () {

246            $('#modal-black-video').modal('show');
247            let video = document.getElementById("video-banner-modal");
248            video.play();
249        },
250        getPosterVideo: function () {
251            var url = this.banner.UrlVideo;
252
253            var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
254            var match = url.match(regExp);
255            if (match && match[7].length == 11) {
256                this.url_embed = 'https://img.youtube.com/vi/' + match[7] + '/maxresdefault.jpg';
257            }
258        },
259        cumpleCondicionesResponsive(libros) {
260            const windowWidth = window.innerWidth;
261
262            if (windowWidth < 600) {
263                return libros.length >= 2;
264            } else if (windowWidth < 1200) {
265                return libros.length >= 3;
266            } else {
267                return libros.length >= 5;
268            }
269        },
270        obtenerRedesSociales() {
271            axios.get(this.pathBase + '/Biblioteca/getRedesSociales')
272                .then(response => {
273                    if (response.data.Estatus == 200) {
274                        var json = JSON.parse(response.data.Resultado.Entidad);
275                        this.redes = json.RedSocial;
276                    }
277                })
278                .catch(error => {
279                    console.error('Error cargando datos:', error);
280                });
281        },
282        ObtenerCreditos() {
283            //this.ContadorCargar++;
284            axios.get(this.pathBase + '/Biblioteca/ObtenerCreditos')
285                .then(response => {
286                    console.log(response)
287                    if (response.status === 200) {
288                        if (response.data.Estatus === 1) {
289                            var json = JSON.parse(response.data.Data);
290                            this.creditos = json;
291                            console.log(json)
292                        }
293                    }
294                })
295                .catch(error => {
296                    console.error('Error cargando datos:', error);
297                })
298                .finally(function () {
299                    //app.ContadorCargar--;
300                });
301        }
302    },
303    watch: {
304        ContadorCargar(newValue, oldValue) {
305            if (newValue <= 0) {
306                $.when($("#loaderGeneral").animate({ 'opacity': '0' }, 1500)).then(function () {
307                    $("#loaderGeneral").removeClass('d-block').addClass('d-none');
308                });
309            } else {
310                $("#loaderGeneral").removeClass('d-none').addClass('d-block');
311                $("#loaderGeneral").animate({ 'opacity': '1' });
312            }
313        }
314    }
315});