Buscar imágenes

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')
      }
}```

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);
}

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 😦

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)
    }
}```

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')
			}
		}
	})
}

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()
  })
}

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

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')
            }
        }
    })
}

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')
 
}      

}

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

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();
    })
  }
}

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');
            }
        }
    });
}

Yo al menos lo hice así:

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)
                console.log('fileName', fileName)
                console.log('regex', regex)
                if (fileName.match(regex)) {
                    thumbs[i].parentNode.classList.remove("hidden")
                } else {
                    thumbs[i].parentNode.classList.add("hidden")
                }
            }
            selectFirstImg()
        } else {
            const thumbs = document.querySelectorAll("li.list-group-item img")

            for (let i = 0; i < thumbs.length; i++) {
                thumbs[i].parentNode.classList.remove("hidden")
            }
            selectFirstImg()
        }
    })
}```