https://www.uide.edu.ec/wp-content/themes/softek/assets/js/uide-mobile-filter.js

1// uide-mobile-filter.js - Versión ULTRA optimizada para LCP
2(function($) {
3    'use strict';
4
5    function loadFullFilter() {
6        const skeleton = document.getElementById('mobile-filter-skeleton');
7        if (!skeleton) return;
8
9        // Reemplazamos el skeleton por el formulario completo
10        skeleton.outerHTML = `
11            <div class="row justify-content-md-center">                
12                <div class="col-9">
13                    <div class="row">
14                        <div class="col-3 p-0 text-right"><p style="color:#fff;">Paso 1:</p></div>
15                        <div class="col-9">
16                            <label for="select-uide-nivel-mobile" class="sr-only-uide">Nivel Académico</label>
17                            <select name="nivel" id="select-uide-nivel-mobile" class="category-search-mobile" aria-label="Selecciona el nivel académico">
18                                <option value="0" selected disabled>Nivel Académico</option>
19                                <option value="Pregrado">Pregrado</option>
20                                <option value="Posgrado">Posgrado</option>
21                            </select>
22                        </div>
23                    </div>
24                </div>
25            </div>
26
27            <div class="row justify-content-md-center">
28                <div class="col-9">
29                    <div class="row">
30                        <div class="col-3 p-0 text-right"><p style="color:#fff;">Paso 2:</p></div>
31                        <div class="col-9">
32                            <label for="select-uide-sede-mobile" class="sr-only-uide">Sede o Modalidad</label>
33                            <select name="sede" id="select-uide-sede-mobile" class="category-search-mobile" aria-label="Selecciona la sede o modalidad" disabled>
34                                <option value="0" selected disabled>Sede o Modalidad</option>
35                            </select>
36                        </div>
37                    </div>
38                </div>
39            </div>
40
41            <div class="row justify-content-md-center">
42                <div class="col-9">
43                    <div class="row">
44                        <div class="col-3 p-0 text-right"><p style="color:#fff;">Paso 3:</p></div>
45                        <div class="col-9">
46                            <label for="select-uide-carreras-mobile" class="sr-only-uide">Carrera</label>
47                            <select name="carrera" id="select-uide-carreras-mobile" class="category-search-mobile" aria-label="Selecciona la carrera" disabled>
48                                <option value="0" selected disabled>Carrera</option>
49                            </select>
50                        </div>
51                    </div>
52                </div>
53            </div>
54
55            <div class="row justify-content-md-center">
56                <div class="col-6 text-center">
57                    <button id="button-uide-carreras-mobile" class="elementor-button-link elementor-button elementor-size-sm border-0" disabled>Visitar</button>
58                </div>
59            </div>`;
60

61        // Ahora inicializamos la interactividad
62        const $nivel   = $('#select-uide-nivel-mobile');
63        const $sede    = $('#select-uide-sede-mobile');
64        const $carrera = $('#select-uide-carreras-mobile');
65        const $btn     = $('#button-uide-carreras-mobile');
66
67        function setLoading($el, text) {
68            $el.prop('disabled', true).empty().append($('<option>', {value:'0', text:text, selected:true, disabled:true}));
69        }
70
71        $nivel.on('change', function(){
72            const nivel = $nivel.val();
73            if (!nivel || nivel === '0') return;
74            setLoading($sede, 'Cargando...');
75            $carrera.prop('disabled', true).empty().append($('<option>', {value:'0', text:'Carrera', selected:true, disabled:true}));
76            $btn.prop('disabled', true);
77
78            $.post(uideMobileFilter.ajaxurl, {
79                action: 'get_ajax_posts_data_sede',
80                _ajax_nonce: uideMobileFilter.nonce,
81                nivel: nivel
82            }).done(function(res){
83                $sede.empty().append($('<option>', {value:'0', text:'Sede o Modalidad', selected:true, disabled:true}));
84                if (res.success && Array.isArray(res.data) && res.data.length) {
85                    res.data.forEach(val => $sede.append($('<option>', {value:val, text:val})));
86                    $sede.prop('disabled', false);
87                }
88            });
89        });
90
91        $sede.on('change', function(){
92            const sede  = $sede.val();
93            const nivel = $nivel.val();
94            if (!sede || !nivel) return;
95            setLoading($carrera, 'Cargando...');
96            $btn.prop('disabled', true);
97
98            $.post(uideMobileFilter.ajaxurl, {
99                action: 'get_ajax_posts_data',
100                _ajax_nonce: uideMobileFilter.nonce,
101                sede: sede,
102                nivel: nivel
103            }).done(function(res){
104                $carrera.empty().append($('<option>', {value:'0', text:'Selecciona una Carrera...', selected:true, disabled:true}));
105                if (res.success && Array.isArray(res.data) && res.data.length) {
106                    var carreras = res.data.filter(function(i){ return i.type !== 'ejecutivo'; });
107                    var ejecutivos = res.data.filter(function(i){ return i.type === 'ejecutivo'; });
108                    if (ejecutivos.length && carreras.length) {
109                        var $cg = $('<optgroup>', {label: 'Carreras en Línea'});
110                        carreras.forEach(function(item){ $cg.append($('<option>', {value:item.guid, text:item.post_title})); });
111                        $carrera.append($cg);
112                        var $eg = $('<optgroup>', {label: 'Programas Ejecutivos'});
113                        ejecutivos.forEach(function(item){ $eg.append($('<option>', {value:item.guid, text:item.post_title})); });
114                        $carrera.append($eg);
115                    } else {
116                        res.data.forEach(function(item){ $carrera.append($('<option>', {value:item.guid, text:item.post_title})); });
117                    }
118                    $carrera.prop('disabled', false);
119                }
120            });
121        });
122
123        $carrera.on('change', function(){
124            const url = $carrera.val();
125            if (url && url !== '0') window.location.href = url;
126            $btn.prop('disabled', !$carrera.val() || $carrera.val() === '0');
127        });
128
129        $btn.on('click', function(e){
130            e.preventDefault();
131            const url = $carrera.val();
132            if (url && url !== '0') window.location.href = url;
133        });
134    }
135
136    // Carga EXTREMADAMENTE diferida
137    window.addEventListener('load', function() {
138        if ('requestIdleCallback' in window) {
139            requestIdleCallback(loadFullFilter, { timeout: 3000 });
140        } else {
141            setTimeout(loadFullFilter, 1800);
142        }
143    });
144
145})(jQuery);