Buscar imágenes

Clase 16 de 52 • Curso de Electron: Apps de escritorio en Windows y Mac

Resumen

Agregamos el evento de la caja de búsqueda para hacer filtros y así poder buscar imágenes de la lista.

RETO 1: En éste vídeo agregamos el evento de la caja de búsqueda para hacer filtros y así poder encontrar imágenes de la lista, cuando no se ingresa texto en la caja de búsqueda la lista de imágenes debería mostrarse completa, trata de solucionarlo y cuéntanos como te fue en la sección de comentarios.

Adriana Villalobos

student•

Mi forma de resolver el reto:

function searchImagesEvent () {
  const searchBox = document.getElementById('search-box')

  searchBox.addEventListener('keyup', function () {
    const regex = new RegExp(this.value.toLowerCase(), 'gi')

    if (this.value.length > 0) {
      const thumbs = document.querySelectorAll('li.list-group-item img')
      for (let i = 0; i < thumbs.length; i++) {
        const fileUrl = url.parse(thumbs[i].src)
        const fileName = path.basename(fileUrl.pathname)
        if (fileName.match(regex)) {
          thumbs[i].parentNode.classList.remove('hidden')
        } else {
          thumbs[i].parentNode.classList.add('hidden')
        }
      }
      selectFirstImage()
    } else {
      showAll()
    }
  })
}
function showAll() {
  const listItems = document.querySelectorAll('li.list-group-item')

  for (var i = 0; i < listItems.length; i++) {
    listItems[i].classList.remove('hidden')
  }
  selectFirstImage()
}```

Omar Crespo

student•

el select first image podrias colocarlo despues de las condicionales, ya que lo colocas en los dos bloques y se ejecutara si o si da igual colocarlo fuera

Oscar Javier Alvarez Jimenez

student•

Esta fue mi solución:

function searchImagesEvent () {
  const searchBox = document.getElementById('search-box')

  searchBox.addEventListener('keyup', function () {    
    const regex = new RegExp(this.value.toLowerCase(), 'gi')
    if (this.value.length > 0) {
      const thumbs = document.querySelectorAll('li.list-group-item img')
      for (let i = 0, length1 = thumbs.length; i < length1; i++) {
        const fileUrl = url.parse(thumbs[i].src)
        const fileName = path.basename(fileUrl.pathname)
        if (fileName.match(regex)) {
          thumbs[i].parentNode.classList.remove('hidden')
        } else {
          thumbs[i].parentNode.classList.add('hidden')
        }
      }
      selectFirstImage()
    } else {
      showAllImages()
      selectFirstImage()
    }
  })
}

function selectFirstImage () {
  const image = document.querySelector('li.list-group-item:not(.hidden)')
  changeImage(image)
}

function showAllImages () {
  const thumbs = document.querySelectorAll('li.list-group-item img')
      for (let i = 0, length1 = thumbs.length; i < length1; i++) {
        thumbs[i].parentNode.classList.remove('hidden')
      }
}```

jose zuñiga

student•

Actualización 2023 En la clase pasada les indique como activar la integración de node en el frontend. (Clase 14)

Para versiones superiores de Electron 8 es necesario que para cada ventana donde agregues la integración de node “nodeIntegration” la actives y desactivar la seguridad de la ventana “contextIsolation”. Este es el código necesario para hacerlo:

  const win = new BrowserWindow({
    title: 'Images Resizes',
    width: isDev ? 800:1000,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }

En las versiones de Electron 8 es necesario agregar los paquetes de node mediante requiere si estas trabajando con el paquete de electron directamente o con import si usar electron-compile. En mi caso prefiero usar electron como paquete. Dejo mi código usando electron. Recuerda: import si usas electron-compile:

//import os from 'os';
const os = require('os');
//import path from 'path';
const path = require('path');
//import url from 'url';
const url = require('url');

window.addEventListener('load', () => {
  addImagesEvents();
  serchImagesEvent();
})

// Agrega el evento click a toda la lista de imagenes
function addImagesEvents () {
  // Selecciona todos los elementos lista de imagenes
  const thumbs = document.querySelectorAll('li.list-group-item');
  // Recorre todos los elementos y les agrega el evento click
  for (let i = 0, length = thumbs.length; i < length; i++){
    thumbs[i].addEventListener('click', function(){
      // Al dar click sobre algun elemento de la lista (thumbs[i])
      // Envia como parametro el actual thumbs this
      // A una función encargada de cambiar la imagen
      changeImages(this);
    })
  }
}

// Función para cambiar imagenes
function changeImages(node){
  // Detectamos el elemnto li con la clase selected y se la eliminamos
  document.querySelector('li.selected').classList.remove('selected');
  // Luego se la agregamos al nodo donde dimos click
  node.classList.add('selected');
  // Y cambiamos la imagen que tenemos actualmente en pantalla por la del nodo
  document.getElementById('image-displayed').src = node.querySelector('img').src;
}


//Función para buscar una imagen especifica
function serchImagesEvent () {
  // Seleccionamos la barra de busqueda
  const searchBox = document.getElementById('search-box');
  // Evento que se ejecuta al presionar y liberar una tecla
  searchBox.addEventListener('keyup', function(){

    // Agregamos una expresión regular para comparar si lo escrito coincide
    // con algún valor.
    // g => global, hace coincidir todas las instancias del patrón en una cadena, no solo una
    // i => no distingue entre mayúsculas y minúsculas (así, por ejemplo, /a/icoincidirá con 
    // la cadena "a"o "A"
    const regex = new RegExp(this.value.toLowerCase(), 'gi')

    if(this.value.length > 0){
      const thumbs = document.querySelectorAll('li.list-group-item img');
      for (let i = 0, length1 = thumbs.length; i < length1; i++){
        //Ruta donde se encuentra la imagen
        const fileUrl = url.parse(thumbs[i].src);
        // Solo toma el nombre del archivo
        const fileName = path.basename(fileUrl.pathname);
        // Si el nombre entregado coincide con el nombre del archivo
        if (fileName.match(regex)){
          // Elimina la clase hidden del nodo padre que es la etiqueta li
          thumbs[i].parentNode.classList.remove('hidden');
        }else{
          // Si no coincide agrega la clase hidden para ocultar el elemento
          thumbs[i].parentNode.classList.add('hidden');
        }
      }
      selectFirstImage()
    }
  });
}

//Selecciona la primera imagen que coincida con lo escrito en la barra de busqueda
function selectFirstImage () {
  //Selecciona la imagen que no tenga la clase hidden
  const image = document.querySelector('li.list-group-item:not(.hidden)')
  // Cambia la imagen de la ventana principal
  changeImages(image);
}

Camilo Bellon

student•

por favor ayúdenme! ya he intentado de toooodas las formas posibles importar los módulos de node como el profesor indica, y como aparece en la documentación actualizada, y lo unico que consigo es error en la consola de: required is not defined y señala en rojo las lineas import url... e import path... YA NO SE QUE MAS HACER :(

Camilo Bellon

student•

Camilo Bellon

student•

import { basename } from 'path' import { parse } from 'url'

window.addEventListener('load', () => { addImagesEvents() searchImagesEvent() })

//Mostrar que elemento de nuestra lista esta seleccionado añadiendo los eventos a las imagenes //consigo todos los elementos que vamos a alterar

function addImagesEvents(){ const thumbs = document.querySelectorAll('li.list-group-item')

for(let i=0, length1 = thumbs.length; i<length1; i++){
    if(i === 0) {
      thumbs[i].classList.add('selected')
    }
    thumbs[i].addEventListener('click', function () {
    changeImage(this)
  })
}

}

function changeImage (node) { document.querySelector('li.selected').classList.remove('selected') node.classList.add('selected') document.getElementById('image-displayed').src = node.querySelector('img').src }

function searchImagesEvent(){

const searchBox = document.getElementById('search-box')

searchBox.addEventListener('keyup',function() {

const regex = new RegExp(this.value.toLowerCase(), 'gi')

if (this.value.length > 0 ){
  const thumbs = document.querySelectorAll('li.list-group-item img')
  for(let i=0, length1 = thumbs.length; i<length1; i++){
    const fileUrl = parse(thumbs[i].src)
    const fileName = basename(fileUrl.pathname)
    if (fileName.match(regex)){
        thumbs[i].parentNode.classList.remove('hidden')
    }       
      else{
        thumbs[i].parentNode.classList.add('hidden')
      }
  }
}

}) }

Pablo Gabriel Mederos Caballero

student•

import url from 'url'
import path from 'path'

window.addEventListener('load', () => {
    addImagesEvents()
    searchImagesEvent()
})

function addImagesEvents() {
    const thumbs = document.querySelectorAll('li.list-group-item')

    for (const elem in thumbs) {
        if (typeof thumbs[elem] === 'object') {
            thumbs[elem].addEventListener('click', function () {
                changeImage(this)
            })
        }

    }
}

function changeImage(node) {
    document.querySelector('li.selected').classList.remove('selected')
    node.classList.add('selected')
    document.getElementById('image-displayed').src = node.querySelector('img').src
}

let hiddenImages = [];

function searchImagesEvent() {
    const searchBox = document.getElementById('search-box')

    searchBox.addEventListener('keyup', function () {
        if (this.value.length > 0) {
            const thumbs = document.querySelectorAll('li.list-group-item img')
            const regex = new RegExp(this.value.toLowerCase(), 'gi')

            for (const elem in thumbs) {
                if (typeof thumbs[elem] === 'object') {
                    const fileUrl = url.parse(thumbs[elem].src)
                    const fileName = path.basename(fileUrl.pathname)
                    if (fileName.match(regex)) {
                        thumbs[elem].parentNode.classList.remove('hidden')
                    }
                    else {
                        thumbs[elem].parentNode.classList.add('hidden')
                        hiddenImages.push(thumbs[elem].parentNode)
                    }
                }
            }
            selectFirstImage()
        }
        else {
            if (hiddenImages.length > 0) {
                hiddenImages.forEach(element => {
                    element.classList.remove('hidden')
                });
                hiddenImages = []
            }
        }
    })

    function selectFirstImage() {
        const image = document.querySelector('li.list-group-item:not(.hidden)')
        if (image)
            changeImage(image)
    }
}```

Angelica Landazabal

student•

function searImagesEvent () {
	const searchBox = document.getElementById('search-box')

	searchBox.addEventListener('keyup', function () {
		const regex = new RegExp(this.value.toLowerCase(), 'gi')
		
		const thumbs = document.querySelectorAll('li.list-group-item img')

		if (this.value.length > 0) {
			for (let i = 0, length1 = thumbs.length; i < length1; i++) {
				const fileUrl = url.parse(thumbs[i].src)
				const fileName = path.basename(fileUrl.pathname)
				if (fileName.match(regex)) {
					thumbs[i].parentNode.classList.remove('hidden')
				} else {
					thumbs[i].parentNode.classList.add('hidden')
				}
			}

			selectFisrtImage()
		} else {
			for (let i = 0, length1 = thumbs.length; i < length1; i++) {
				thumbs[i].parentNode.classList.remove('hidden')
			}
		}
	})
}

Karl Heitmann

student•

¿Y qué pasa si el filtro no da resultados? Yo lo probé así y me tira un error, que después no puedo seleccionar a un item del menú lateral.

Arley Hernández Rodríguez

student•

El server B no funciona

Yesica Lizeth Cortés Pineda

teacher•

Hola @arleyhr muchas gracias por el reporte, ya quedó solucionado 😃

Jose Luis Orozco Mejia

student•

El código para volver a listar todas las imagenes se debe hacer cuando el length del input de búsqueda no es mayor a 0:

function searchImagesEvent () {
  
  const searchBox = document.getElementById('seach-box');

  searchBox.addEventListener('keyup', function () {
    const regex = new RegExp(this.value.toLowerCase(), 'gi')
    if(this.value.length > 0){
      const thumbs = document.querySelectorAll('li.list-group-item img')

        for(let i = 0, length1 = thumbs.length; i<length1; i++ ){
          const fileUrl = url.parse(thumbs[i].src);
          const fileName = path.basename(fileUrl.pathname);
          if(fileName.match(regex)){
            thumbs[i].parentNode.classList.remove('hidden')
          }else{
            thumbs[i].parentNode.classList.add('hidden')
          }
        }
        selectFirstImage()

    }else{
      const thumbs = document.querySelectorAll('li.list-group-item')
      for(let i = 0, length1 = thumbs.length; i<length1; i++ ){
         thumbs[i].classList.remove('hidden')
      }
      selectFirstImage()
    }
  })
}

platzerito18092018 platzerito18092018

teacher•

Ese bug lo corrijo en el siguiente video creo 😛… abhi disculpas

Alonso Alejandro Zúñiga Beltrán

student•

Mi forma de resolverlo fue:

function changeImage(node) {
	//valido que el node sea válido para continuar
	if (!node) return;
	document.querySelector('li.selected').classList.remove('selected');
	node.classList.add('selected');
	document.getElementById('image-displayed').src = node.querySelector('img').src;
}

function searchImagesEvent() {
	const searchBox = document.getElementById('search-box');
	searchBox.addEventListener('keyup', function () {
		const value = this.value;
		const regex = new RegExp(value.toLowerCase(), 'gi');
		//Reubiqué el if
		const thumbs = document.querySelectorAll('li.list-group-item img');

		for (let i = 0; i < thumbs.length; i++) {
			const fileUrl = url.parse(thumbs[i].src);
			const fileName = path.basename(fileUrl.pathname);
			//Puse la validación del if en esta parte...
			if (fileName.match(regex) || value.length === 0) {
				thumbs[i].parentNode.classList.remove('hidden');
			} else {
				thumbs[i].parentNode.classList.add('hidden');
			}
		}
		selectFirstImage();
	});
}

Luis Gutiérrez

student•

El forEach es mas comodo y mas fácil de leer.

function searchImage() {
  const searchBox = document.getElementById('searchBox')
  const thumbs = document.querySelectorAll('li.list-group-item img')

  searchBox.addEventListener('keyup', function() {
    const regex = new RegExp(this.value.toLowerCase(), 'gi')
    if (this.value.length > 0) {
      thumbs.forEach((e, pos, ob) => {
        const fileUrl = url.parse( e.src )
        const fileName = path.basename( fileUrl.pathname )
        if (fileName.match(regex)) {
          e.parentNode.classList.remove('hidden')
        } else {
          e.parentNode.classList.add('hidden')
        }
      })
      selectFirstImage()
    } else {
      thumbs.forEach((e) => {
        e.parentNode.classList.remove('hidden')
      })
    }
  })
}

function selectFirstImage() {
  const image = document.querySelector('li.list-group-item:not(.hidden)')
  if ( image != null) {
    changeImage(image)
  }
}

Francisco Javier Rodriguez Gomez

student•

Saludos, hice algunos ajustes adicionales para que funcionara como deseaba y eliminar algunos errores que se presentaban.

En la función changeImage()

Valido si la imágen es nula o ya esta seleccionada, en este caso retorna.
Cabe anotar que la expresión image==null || image.classList.contains('selected') funciona bien cuando image es nula ya que funciona en corto circuito.

function changeImage(image){
  // Ignorar si la imagen es nula o ya esta seleccionada
  if (image==null || image.classList.contains('selected'))
  {
    console.log('Imagen nula o ya seleccionada')
    return
  }
  // Cambiar el image seleccionado de la lista 
  document.querySelector('li.selected').classList.remove('selected')
  image.classList.add('selected')
  // Mostrar la imagen seleccionada
  document.getElementById('image-displayed').src=
    image.querySelector('img').src
}

En la función searchImageEvent()

Agregue el método trim() para la expresión regular y la condición del if, ya que al colocar espacios se generaban errores.
Al mostrar todo
- No ejecuto selectFirstImage() ya que queda en la imágen seleccionada anteriormente (y así quiero que funcione).
- Lo realizo convirtiendo thumbs a un arreglo y luego aplicadole un map().

function searchImageEvent(){
  const searchBox = document.getElementById('search-box')
  searchBox.addEventListener('keyup', function(){
    const regex = new RegExp(searchBox.value.trim().toLowerCase(), 'gi')
    if (this.value.trim().length>0){
      const thumbs = document.querySelectorAll('li.list-group-item img')
      for (let i = 0; i < thumbs.length; i++) {
        const pathName = url.parse(thumbs[i].src).pathname
        const fileName = path.basename(pathName)
        console.log(fileName)
        if (fileName.match(regex)){
          thumbs[i].parentNode.classList.remove('hidden')
        } else{
          thumbs[i].parentNode.classList.add('hidden')
        }
      }
      selectFirstImage()  
    }
    // Mostrar todas
    else
    {
      const thumbs = Array.from(document.querySelectorAll('li.list-group-item'))
      thumbs.map(el => el.classList.remove('hidden'))
    }
  })
}

Me comentan como les parece, FELICIDADES

Clarena Rodriguez

student•

Hola a todos, yo hice dos modificaciones:

SelectFirstImage(): Validé el caso en que la imagen estuviera null. Si no era null que procediera a realizar la visualización del contenido. Pero si era null, lo ajuste para que el contenido se borrara en caso de que la búsqueda no obtuviera resultados
searchImagesEvent(): No quería hace otro for que recorriera el listado de elementos, así que suprimí la validación de if (this.value.length > 0) y agregue la validación en el caso de remover la class hidden if (fileName.match(regex) || this.value.length==0).

function selectFirstImage() {
    var image = document.querySelector('li.list-group-item:not(.hidden)');
    if (image!=null) changeImage(image);
    else document.getElementById('image-displayed').src = ""
}

function searchImagesEvent() {
    var searchBox = document.getElementById('search-box')
    searchBox.addEventListener('keyup', function () {
        var regex = new RegExp(this.value.toLowerCase(), 'gi')
        var thumbs = document.querySelectorAll("li.list-group-item img");
        var countThums = thumbs.length;
        
        for (var index = 0; index < countThums; index++) {
            var fileUrl = url.parse(thumbs[index].src)
            var fileName = path.basename(fileUrl.pathname)
            if (fileName.match(regex) || this.value.length==0) {
                thumbs[index].parentNode.classList.remove('hidden')
            }
            else {
                thumbs[index].parentNode.classList.add('hidden')
            }
        }
        selectFirstImage();
    })
}

Damian Spizzirri

student•

Cambie un poco la funcion searchImagesEvent

function searchImagesEvent(){
  const searchBox = document.getElementById('search-box')
  searchBox.addEventListener('keyup', function () {
    const thumbs = document.querySelectorAll('li.list-group-item img')
      const regex = new RegExp(this.value.toLowerCase(), 'gi')
      for (let i = 0, length1 = thumbs.length ; i < length1 ; i++) {
        const fileUrl = url.parse(thumbs[i].src)
        const fileName = path.basename(fileUrl.pathname)

        if ( this.value.length > 0 ) {
          if (fileName.match(regex)) {
            thumbs[i].parentNode.classList.remove('hidden')
          } else {
            thumbs[i].parentNode.classList.add('hidden')
          }
        }else{
          thumbs[i].parentNode.classList.remove('hidden')
        }
      }
      selectFirstImage()
  })
}

Alejandro Robleto

student•

tengo un problema de compilacion creo y no se por donde hacerle.. Uncaught SyntaxError: Unexpected identifier Failed to compile /Users/axell/un_app/src/renderer/frontEnd.js:

alguna ayuda

Diego Forero

Team Platzi•

Hola, puedes compartir el error completo, lo que te menciona es que no puede compilar el archivo frontEnd.js, puede ser que haya algún carácter extraño o falte cerrar algo en el código. También si puedes compartir tu código sería de gran ayuda.

Alejandro Robleto

student•

claro que si pondre mi codigo por aqui...

import url from 'url' import path from 'path'

window.addEventListener('load', () =>{ addImagesEvent() })

function addImagesEvent (){ const thumbs = document.querySelectorAll('li.list-group-item img')

for (let i = 0; length1 = thumbs.length; i < length; i++) { thumbs[i].addEventListener('click', function () { changeImage(this) }) } }

function changeImage(){ document.querySelector('li.selected').classList.remove('selected') node.classList.add('selected') document.getElementById('image-displayed').src = node.querySelector('img').src }

function searImagesEvent(){ const searchBox = document.getElementById('search-box')

searchBox.addEventListener('keyup', function(){ const regex = new RegExp(this.value.toLowerCase(), 'gi')

if (this.value.length > 0){ const thumbs = document.querySelectorAll('li.list-group-item img') for (let i = 0, length1 = thumbs.length; i < length; i++){ const fileUrl = url.parse(thumbs[i].src) const fileName = path.basename(fileUrl.pathname) if (fileName.match(regex)){ thumbs[i].parenNode.classList.remove('hidden') } else{ thumbs[i].parenNode.classList.add('hidden') } } selectFisrtImage() } }) } function selectFisrtImage(){ const image = document.querySelector('li.list-group-item:not(.hidden)') changeImage(image) }

José Roberto Arroyo García

company_admin•

Buen día, les comparto mi solución, basicamente solo agregue un else recorriendo la constante thumbs y quitando la clase hidden de cada elemento

function searchImagesEvent() {
    const searchBox = document.getElementById('search-box')
    
    searchBox.addEventListener('keyup', function() {
        const regex = new RegExp(this.value.toLowerCase(), 'gi')
        
        if (this.value.length > 0) {
            const thumbs = document.querySelectorAll('li.list-group-item img')
            for (let i = 0; i < thumbs.length; i++) {
                
                const fileUrl = url.parse(thumbs[i].src)
                const fileName = path.basename(fileUrl.pathname)

                if (fileName.match(regex)) {
                    thumbs[i].parentNode.classList.remove('hidden')
                } else {
                    thumbs[i].parentNode.classList.add('hidden')
                }
            }

            selectFirstImage()
        } else {
            const thumbs = document.querySelectorAll('li.list-group-item img')
            for (let i = 0; i < thumbs.length; i++) {
                thumbs[i].parentNode.classList.remove('hidden')
            }
        }
    })
}

Juan Escobar

student•

Mi solución fue realizar un else para poder eliminar el hidden de las imágenes.

function searchImagesEvent () { const searchBox = document.getElementById('search-box')

searchBox.addEventListener('keyup', function () {

const regex = new RegExp(this.value.toLowerCase(), 'gi')

if (this.value.length > 0) {
  const thumbs = document.querySelectorAll('li.list-group-item img')

  for (let i = 0, length1 = thumbs.length ; i < length1 ; i++) {

    const fileUrl = url.parse(thumbs[i].src)
    const fileName = path.basename(fileUrl.pathname)

    if (fileName.match(regex)) {

      thumbs[i].parentNode.classList.remove('hidden')
      selectedFirstImage()

    } else {
      thumbs[i].parentNode.classList.add('hidden')
    }
  }    

} else {
  showAllImages()
  selectedFirstImage()
}

}) }

function selectedFirstImage () { const image = document.querySelector('li.list-group-item:not(.hidden)') changeImage(image) }

function showAllImages() { const thumbs = document.querySelectorAll('li.list-group-item img')

for (let i = 0, length1 = thumbs.length ; i < length1 ; i++) {
    
  thumbs[i].parentNode.classList.remove('hidden')
 
}

}

Camilo Bellon

student•

Buenas tardes. tengo un error y ya no se que mas hacer para solucionarlo. Cada ves que intento importar un modulo de node en mi frontend.js

Byron Mesias Cueva Cabrera

student•

Lo realice así con TypeScript:

function searchImagesEvent() {
  const searchBox: HTMLInputElement | null = document.querySelector('#search-box');

  if (searchBox) {
    searchBox.addEventListener('keyup', function() {
      const regex = new RegExp(this.value.toLowerCase(),'gi');
      const thumbs: NodeListOf<HTMLImageElement> = document.querySelectorAll('li.list-group-item img');
      if (this.value.length > 0) {
        thumbs.forEach(thumb => {
          const fileUrl: Url = url.parse(thumb.src);
          const fileName = path.basename(fileUrl.pathname);
          const parentNode = (thumb.parentNode as HTMLElement);
          if (regex.exec(fileName)) {
            parentNode.classList.remove('hidden');
          } else {
            parentNode.classList.add('hidden');
          }
        });
      } else {
        thumbs.forEach(thumb => {
          const parentNode = (thumb.parentNode as HTMLElement);
          parentNode.classList.remove('hidden');
        });
      }
      selectFirstImage();
    })
  }
}

Victor Hernandez

student•

function searchImagesEvent() {
    const searchBox = document.getElementById('search-box');
    searchBox.addEventListener('keyup', function () {
        const regex = new RegExp( this.value.toLowerCase(), 'gi');

        const thumbs = document.querySelectorAll('li.list-group-item img');

        if (this.value.length > 0) {

            for (let i = 0, length1 = thumbs.length; i < length1; i++) {
                const fileUrl = url.parse( thumbs[i].src );
                const fileName = path.basename(fileUrl.pathname);
                if( fileName.match( regex) ){

                } else {
                    thumbs[i].parentNode.classList.add('hidden');
                }
            }
            selectFirstImage();
        } else {
            for (let i = 0, length1 = thumbs.length; i < length1; i++) {
                thumbs[i].parentNode.classList.remove('hidden');
            }
        }
    });
}

Buscar imágenes

Introducción a Electron

Paso a paso para construi aplicaciones con Electron

¿Qué es Electron?

¿Cómo funciona Electron?

Herramientas necesarias

Comenzando con Electron

Creando nuestro proyecto

Nuestra primera ventana

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

El frontend y Electron

Configurando nuestro frontend

Herramientas de desarrollo para Electron

Algunos frameworks recomendados

Construyendo el layout

Completar elementos del Layout

Agregando interacción a nuestra aplicación

JavaScript en el frontend

Selecciona imágenes

Buscar imágenes

Añadir filtros a la imagen

Comunicación entre procesos

Accesando recursos de la máquina

Leer archivos de directorios

Generar listas de imagenes

Refactor del proyecto

Usando el diálogo de guardar

Guardar imágenes en disco

Usando cajas de mensajes

Detectando errores

Interactuando con el sistema operativo

Organizando el código del proceso principal

Múltiples ventanas y comunicación entre ellas

Creando assets para una nueva ventana

Consideraciones para múltiples plataformas

Manejo de preferencias

Usuario y contraseña

Creando un ícono en la bandeja del sistema

Imprimiendo

Subir una imagen

Portapapeles con texto o imágenes

Emitiendo notificaciones

Agregando un Menú

Atajos

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

A tener en cuenta para generar ejecutables

Configurando el entorno para construcción

Configurando el entorno para construcción 2

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

Considerando instaladores para múltiples plataformas

Firmas digitales con Code Signing

Cierre del curso

Bonus

Integración continua

Escribiendo tests con Ava y Spectron

Desafios

Crear un filtro personalizado

Leer las imágenes ubicaciones remotas (Cloudup)

Previsualización de filtros