Corrección

- Corrige error al intentar regresar a orden original botones, al no quedar almacenados simplemente se borraban sin reinsertarlos :/ - Deja serviceworker con networkfirst - Activa verificación compatibilidad navigator.share
Alplox · Mar 21, 2024 · 92d8b00 · 92d8b00
1 parent f4a1652
commit 92d8b00
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 44 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
diff --git a/assets/js/botonesCompartir.js b/assets/js/botonesCompartir.js
@@ -8,10 +8,8 @@ const datosCompartir = {
 
   const btnCompartir = document.querySelector('button.btn-compartir');
   const contenedorBtnsCompartirExistentes = document.querySelector('#contenedor-botones-compartir');
-
-console.log(isMobile.any)
 
-  if (isMobile.any){
+  if (isMobile.any && navigator.share){
     btnCompartir.classList.remove('d-none');
     btnCompartir.addEventListener('click', async () => {
       try {

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1078,8 +1078,6 @@ let tele = {
 
     document.querySelectorAll('#modal-collapse-botones-listado-filtro-paises button:not(#modal-btn-mostrar-todo-pais)').forEach(btn => {
       btn.addEventListener('click', () => {
-        console.log("El clic se originó dentro del contenedor containerModalBody")
-        // El clic se originó dentro del contenedor containerBtnBanderas
         let todoBtn = document.querySelector('#modal-collapse-botones-listado-filtro-paises').querySelectorAll('button');
         todoBtn.forEach(btn => {
           btn.classList.replace('btn-primary', 'btn-outline-secondary');
@@ -1094,7 +1092,6 @@ let tele = {
 
     document.querySelectorAll('#offcanvas-collapse-botones-listado-filtro-paises button:not(#offcanvas-btn-mostrar-todo-pais)').forEach(btn => {
       btn.addEventListener('click', () => {
-        console.log("El clic se originó dentro del contenedor containerOffcanvasBody")
         let todoBtn = document.querySelector('#offcanvas-collapse-botones-listado-filtro-paises').querySelectorAll('button');
         todoBtn.forEach(btn => {
           btn.classList.replace('btn-primary', 'btn-outline-secondary');
@@ -1107,7 +1104,8 @@ let tele = {
       });
     });
 
-
+    guardarOrdenOriginal('modal-body-botones-canales');
+    guardarOrdenOriginal('offcanvas-body-botones-canales');
   },
   init: async () => {
 

diff --git a/assets/js/ordenBotones.js b/assets/js/ordenBotones.js
@@ -5,8 +5,14 @@ let ordenOriginalEnOffcanvas = [];
 
 // Función para almacenar el orden original de los botones
 function guardarOrdenOriginal(containerBotones) {
-  let buttonsContainer = document.getElementById(containerBotones);
-  containerBotones.startsWith('modal') ? ordenOriginalEnModal = Array.from(buttonsContainer.children) : ordenOriginalEnOffcanvas = Array.from(buttonsContainer.children);
+    const buttonsContainer = document.getElementById(containerBotones);
+    const buttons = buttonsContainer.querySelectorAll('button');
+
+    if (containerBotones.startsWith('modal')) {
+        ordenOriginalEnModal = Array.from(buttons);
+    } else if (containerBotones.startsWith('offcanvas')) {
+        ordenOriginalEnOffcanvas = Array.from(buttons);
+    }
 }
 
 // Función para ordenar los botones en orden ascendente
@@ -41,7 +47,6 @@ function sortButtonsDesc(containerBotones) {
 function restoreOriginalOrder(containerBotones) {
   let buttonsContainer = document.getElementById(containerBotones);
   buttonsContainer.innerHTML = ''; // Limpiar el contenedor de botones
-
     if (containerBotones.startsWith('modal')) {
         ordenOriginalEnModal.forEach((button) => {
             buttonsContainer.appendChild(button);
@@ -53,12 +58,6 @@ function restoreOriginalOrder(containerBotones) {
     }
 }
 
-// Función para guardar "orden original" botones en opción de ordenado, una vez que ya existen en el DOM
-document.addEventListener('DOMContentLoaded', () => {
-    guardarOrdenOriginal('modal-body-botones-canales');
-    guardarOrdenOriginal('offcanvas-body-botones-canales');
-});
-
 
 let modalBotonOrdenAscendente = document.getElementById('modal-boton-orden-ascendente');
 modalBotonOrdenAscendente.addEventListener('click', () => {

diff --git a/index.html b/index.html
@@ -46,8 +46,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
-
-    <!-- isMobileJS -->
+    <!-- isMobile -->
     <script src="https://cdn.jsdelivr.net/npm/ismobilejs@1.1.1/dist/isMobile.min.js"></script>
     <!-- Service worker -->
     <meta name="theme-color" content="#212529" />
@@ -303,7 +302,7 @@ <h5 class="modal-title">Selecciona tus canales</h5>
                             </div>
                        </div>
 
-                        <div class="modal-body-canales" id="modal-body-botones-canales">
+                        <div>
                             <!-- Mensaje alerta sin resultados modal -->
                             <div class="modal-mensaje-alerta d-none shadow" tabindex="0">
                                 <div
@@ -324,6 +323,8 @@ <h5 class="modal-title">Selecciona tus canales</h5>
                                 </div>
                             </div>
                             <!-- /Mensaje alerta sin resultados -->
+                            <div class="modal-body-canales" id="modal-body-botones-canales">
+                            </div>
                         </div>
                     </div>
                     <div class="modal-footer">
@@ -406,10 +407,7 @@ <h5 class="offcanvas-title" id="offcanvasCanalesLabel">Selecciona tus canales</h
             </div>
 
             <div class="offcanvas-body mb-2 scrollbar-thin-gray">
-
-
-
-                <div class="offcanvas-body-canales h-100" id="offcanvas-body-botones-canales">
+                <div class="h-100">
                     <!-- Mensaje alerta sin resultados offcanvas -->
                     <div class="offcanvas-mensaje-alerta d-none shadow" tabindex="0">
                         <div
@@ -429,6 +427,8 @@ <h5 class="offcanvas-title" id="offcanvasCanalesLabel">Selecciona tus canales</h
                         </div>
                     </div>
                     <!-- /Mensaje alerta sin resultados -->
+                    <div class="offcanvas-body-canales h-100" id="offcanvas-body-botones-canales">
+                    </div>
                 </div>
             </div>
 
@@ -1604,9 +1604,9 @@ <h5>¿Seguro que quieres reiniciar todas tus personalizaciones?</h5>
         <script src="assets/js/F_ocultarBotonesDeQuitarTodaSeñal.js"></script>
         <script src="assets/js/F_enableTooltipBS.js"></script>
 
+        <script src="assets/js/ordenBotones.js"></script>
         <script src="assets/js/main.js"></script>
 
-        <script src="assets/js/ordenBotones.js"></script>
         <script src="assets/js/botonesQuitarTodo.js"></script>
         <script src="assets/js/botonesCompartir.js"></script>
         <script src="assets/js/botonPantallaCompleta.js"></script>

diff --git a/pwabuilder-sw.js b/pwabuilder-sw.js
@@ -1,17 +1,3 @@
-importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
-
-const HTML_CACHE = "html";
-const JS_CACHE = "javascript";
-const STYLE_CACHE = "stylesheets";
-const IMAGE_CACHE = "images";
-const FONT_CACHE = "fonts";
-
-self.addEventListener("message", (event) => {
-  if (event.data && event.data.type === "SKIP_WAITING") {
-    self.skipWaiting();
-  }
-});
-
 workbox.routing.registerRoute(
   ({event}) => event.request.destination === 'document',
   new workbox.strategies.NetworkFirst({
@@ -22,12 +8,11 @@ workbox.routing.registerRoute(
       }),
     ],
   })
-
 );
 
 workbox.routing.registerRoute(
   ({event}) => event.request.destination === 'script',
-  new workbox.strategies.StaleWhileRevalidate({
+  new workbox.strategies.NetworkFirst({
     cacheName: JS_CACHE,
     plugins: [
       new workbox.expiration.ExpirationPlugin({
@@ -39,7 +24,7 @@ workbox.routing.registerRoute(
 
 workbox.routing.registerRoute(
   ({event}) => event.request.destination === 'style',
-  new workbox.strategies.StaleWhileRevalidate({
+  new workbox.strategies.NetworkFirst({
     cacheName: STYLE_CACHE,
     plugins: [
       new workbox.expiration.ExpirationPlugin({
@@ -51,7 +36,7 @@ workbox.routing.registerRoute(
 
 workbox.routing.registerRoute(
   ({event}) => event.request.destination === 'image',
-  new workbox.strategies.StaleWhileRevalidate({
+  new workbox.strategies.NetworkFirst({
     cacheName: IMAGE_CACHE,
     plugins: [
       new workbox.expiration.ExpirationPlugin({
@@ -63,7 +48,7 @@ workbox.routing.registerRoute(
 
 workbox.routing.registerRoute(
   ({event}) => event.request.destination === 'font',
-  new workbox.strategies.StaleWhileRevalidate({
+  new workbox.strategies.NetworkFirst({
     cacheName: FONT_CACHE,
     plugins: [
       new workbox.expiration.ExpirationPlugin({