Correcciones

- Corregido error con opciones de ordenar botones canales tras reapertura modal, no permitiendo regreso a orden original ya que se sobreescribia el orden
- Añadido blur a fondo botones modal cambiar canal activo
- Añadida librería isMobile para comprobación si equipo que carga sitio es desde un teléfono/tablet

NOTICE.md

@@ -22,6 +22,8 @@ Para licencia del proyecto "teles" referirse al archivo LICENSE.
 
 * Fondos SVG generados con https://wickedbackgrounds.com/app - (No licencia) y transformados a CSS con https://yoksel.github.io/url-encoder/ - (No licencia)
 
+* Screenshots PWA hechas con Progressier https://progressier.com - [(Terms)](https://progressier.com/terms)
+
 # Este software utiliza los siguientes paquetes de código abierto:
 
 * Biblioteca CSS https://getbootstrap.com/ - [(MIT)](https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -54,4 +56,4 @@ Para licencia del proyecto "teles" referirse al archivo LICENSE.
 
 * [Audio] User Interface Clicks and Buttons 1 por original_sound https://freesound.org/people/original_sound/sounds/493551/ - [(CC BY 4.0 DEED)](https://creativecommons.org/licenses/by/4.0/)
 
-* Screenshots PWA hechas con Progressier https://progressier.com - [(Terms)](https://progressier.com/terms)
+* isMobile https://github.com/kaimallea/isMobile - [(MIT)](https://github.com/kaimallea/isMobile/blob/main/LICENSE)

assets/js/botonesCompartir.js

@@ -9,7 +9,9 @@ const datosCompartir = {
   const btnCompartir = document.querySelector('button.btn-compartir');
   const contenedorBtnsCompartirExistentes = document.querySelector('#contenedor-botones-compartir');
 
-  if (checkMovil()){
+console.log(isMobile.any)
+
+  if (isMobile.any){
     btnCompartir.classList.remove('d-none');
     btnCompartir.addEventListener('click', async () => {
       try {

assets/js/filtroCanales.js

@@ -6,7 +6,7 @@ const filtroCanalesModal = document.querySelector('#modal-input-filtro');
 const filtroCanalesOffcanvas = document.querySelector('#offcanvas-input-filtro');
 
 document.querySelector('#modal-canales').addEventListener('shown.bs.modal', () => {
-  !checkMovil() && filtroCanalesModal.focus();
+  !isMobile.any && filtroCanalesModal.focus();
 });
 
 // ----- filtro de canales https://css-tricks.com/in-page-filtered-search-with-vanilla-javascript/

assets/js/main.js

@@ -127,7 +127,7 @@ if (lsTransmisionesFila !== null) {
   botonDejarActivo.classList.replace('bg-light-subtle', 'btn-primary')
 }
 // si se carga desde telefono por primera vez ajusta cantidad y botón seleccionado en numero de canales por fila
-if (checkMovil() && lsTransmisionesFila === null) {
+if (isMobile.any && lsTransmisionesFila === null) {
   let botonDejarActivo = document.querySelector(`#transmision-por-fila button[value='${sizeMovil}']`)
   transmisionesFila.forEach(btn => {
     btn.classList.replace('btn-primary', 'bg-light-subtle')
@@ -659,7 +659,7 @@ function crearOverlay(nombre, fuente, pais, altIcon, canalId) {
     modalHeader.classList.add('modal-header', 'bg-transparent', 'border-0');
 
     let modalBody = document.createElement('div');
-    modalBody.classList.add('modal-body', 'vh-100', 'scrollbar-thin-gray', 'pt-0');
+    modalBody.classList.add('modal-body', 'vh-100', 'scrollbar-thin-gray', 'px-2', 'modal-blur', 'rounded-3');
 
     let formFloating = document.createElement('div');
     formFloating.classList.add('form-floating');
@@ -720,7 +720,7 @@ function crearOverlay(nombre, fuente, pais, altIcon, canalId) {
     // Activar el modal, darle focus al input si esta en PC y mostrar listado sugerencias canales
     let myModal = new bootstrap.Modal(document.getElementById(`Modal-cambiar-${canalId}`));
     modal.addEventListener('shown.bs.modal', () => {
-      !checkMovil() && inputCambioCanal.focus();
+      !isMobile.any && inputCambioCanal.focus();
     });
     myModal.show();
     let listaBotones = document.querySelectorAll(`#modal-canales button[data-canal]`);
@@ -868,7 +868,7 @@ let tele = {
         canalesStorage[canal] = nombre;
         localStorage.setItem('canales_storage', JSON.stringify(canalesStorage));
         let divTransmision = document.createElement('div');
-        divTransmision.classList.add('position-relative', `col-${checkMovil() ? sizeMovil : size}`, 'shadow');
+        divTransmision.classList.add('position-relative', `col-${isMobile.any ? sizeMovil : size}`, 'shadow');
         divTransmision.setAttribute('data-canal', canal);
         /// esto estaba
         if (typeof iframe_url !== 'undefined') {
@@ -1119,7 +1119,7 @@ let tele = {
     const canalesPredeterminados = ['24-horas-2', 'meganoticias-3', 't13-4'];
     const canalesExtras = ['chv-noticias-3', 'galeria-cima', 'lofi-girl'];
 
-    const canalesAgregar = checkMovil() ? canalesPredeterminados : canalesPredeterminados.concat(canalesExtras);
+    const canalesAgregar = isMobile.any ? canalesPredeterminados : canalesPredeterminados.concat(canalesExtras);
 
     if (localStorageCanales === null) {
       canalesAgregar.forEach(canal => tele.add(canal));

assets/js/ordenBotones.js

@@ -14,11 +14,11 @@ function sortButtonsAsc(containerBotones) {
   let buttonsContainer = document.getElementById(containerBotones);
   let buttons = Array.from(buttonsContainer.getElementsByTagName('button'));
 
-  buttons.sort(function(a, b) {
+  buttons.sort((a, b) => {
       return a.textContent.trim().localeCompare(b.textContent.trim());
   });
 
-  buttons.forEach(function(button) {
+  buttons.forEach((button) => {
       buttonsContainer.appendChild(button);
   });
 }
@@ -28,11 +28,11 @@ function sortButtonsDesc(containerBotones) {
   let buttonsContainer = document.getElementById(containerBotones);
   let buttons = Array.from(buttonsContainer.getElementsByTagName('button'));
 
-  buttons.sort(function(a, b) {
+  buttons.sort((a, b) => {
       return b.textContent.trim().localeCompare(a.textContent.trim());
   });
 
-  buttons.forEach(function(button) {
+  buttons.forEach((button) => {
       buttonsContainer.appendChild(button);
   });
 }
@@ -43,24 +43,23 @@ function restoreOriginalOrder(containerBotones) {
   buttonsContainer.innerHTML = ''; // Limpiar el contenedor de botones
 
     if (containerBotones.startsWith('modal')) {
-        ordenOriginalEnModal.forEach(function(button) {
+        ordenOriginalEnModal.forEach((button) => {
             buttonsContainer.appendChild(button);
         });
     } else if (containerBotones.startsWith('offcanvas')) {
-        ordenOriginalEnOffcanvas.forEach(function(button) {
+        ordenOriginalEnOffcanvas.forEach((button) => {
             buttonsContainer.appendChild(button);
         });
     }
 }
 
-
-
-// Función para abrir el modal
-let modalCanales = document.getElementById('modal-canales');
-modalCanales.addEventListener('shown.bs.modal', () => {
+// 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', () => {
     sortButtonsAsc('modal-body-botones-canales');
@@ -77,13 +76,6 @@ modalBotonOrdenOriginal.addEventListener('click', () => {
 });
 
 
-
-// Función para abrir el offcanvas
-let offcanvasCanales = document.getElementById('offcanvasCanales');
-offcanvasCanales.addEventListener('shown.bs.offcanvas', () => {
-    guardarOrdenOriginal('offcanvas-body-botones-canales');
-});
-
 let offcanvasBotonOrdenAscendente = document.getElementById('offcanvas-boton-orden-ascendente');
 offcanvasBotonOrdenAscendente.addEventListener('click', () => {
     sortButtonsAsc('offcanvas-body-botones-canales');

changelog.md

@@ -40,6 +40,7 @@ Chile
 - Alerta en caso de que búsqueda canales no arroje resultados
 - Opción para reordenar botones canales de forma ascendente o descendente
 - screenshots para PWA, hechas con Progressier https://progressier.com
+- Librería isMobile https://github.com/kaimallea/isMobile
 
 #### 📺 Canales
 Chile

index.html

@@ -46,6 +46,9 @@
     <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 -->
+    <script src="https://cdn.jsdelivr.net/npm/ismobilejs@1.1.1/dist/isMobile.min.js"></script>
     <!-- Service worker -->
     <meta name="theme-color" content="#212529" />
     <link rel="manifest" href="site.webmanifest">
@@ -1598,14 +1601,12 @@ <h5>¿Seguro que quieres reiniciar todas tus personalizaciones?</h5>
 
         <script src="assets/js/darkMode.js"></script>
         <script src="assets/js/filtroCanales.js"></script>
-        <script src="assets/js/F_checkMovil.js"></script>
         <script src="assets/js/F_ocultarBotonesDeQuitarTodaSeñal.js"></script>
         <script src="assets/js/F_enableTooltipBS.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>