tp fini

index.html

@@ -34,6 +34,8 @@
 				<li><a href="/help" class="helpLink">Support</a></li>
 			</ul>
 		</nav>
+		<div class="testdiv"><button class="test">test1</button><button class="test">test2</button><button class="test">test3</button></div>
+		<div class="testdiv2"><button class="test2">test1</button><button class="test2">test2</button><button class="test2">test3</button></div>
 	</header>
 	<section class="viewContainer">
 		<header class="viewTitle"></header>

src/AboutView.js

 import Router from './Router.js';
 import View from './View.js';
+import $ from './lib/jqlite.js';
 
 /**
  * Classe de la page "A propos"
@@ -8,6 +9,7 @@ import View from './View.js';
 export default class AboutView extends View {
 	show() {
 		super.show();
+		this.element.addClass('is-loading');
 		// quand on affiche la page, on charge le fichier `about.html`
 		// on pourrait optimiser ici le fonctionnement en ne le chargeant qu'une seule fois
 		// (pour le moment à chaque fois qu'on affiche la view, une nouvelle requête AJAX est déclenchée)
@@ -24,12 +26,16 @@ export default class AboutView extends View {
 	 * @see #handleButtonClick
 	 */
 	showFileContent(html) {
-		this.element.innerHTML = html;
+		this.element.html(html);
+		this.element.removeClass('is-loading');
 		// l'ajout d'écouteur d'événement ne peut se faire qu'une fois que la page HTML a été modifiée
 		// (sinon le bouton n'existe pas encore)
+		// this.element
+		// 	.querySelector('.button')
+		// 	.addEventListener('click', event => this.handleButtonClick(event));
 		this.element
-			.querySelector('.button')
-			.addEventListener('click', event => this.handleButtonClick(event));
+			.find('.button')
+			.on('click', event => this.handleButtonClick(event));
 	}
 	/**
 	 * Méthode déclenchée par le click sur le bouton "Nous contacter"

src/GameDetailView.js

 import { API_KEY } from './config.js';
 import Router from './Router.js';
 import View from './View.js';
+import $ from './lib/jqlite.js';
 
 export default class GameDetailView extends View {
 	game;
@@ -13,7 +14,8 @@ export default class GameDetailView extends View {
 	show(slug) {
 		super.show();
 		// ajout de l'état "loading"
-		this.element.classList.add('is-loading');
+		$(this.element).addClass('is-loading');
+		//this.element.classList.add('is-loading');
 		// création des URL de l'API pour le détail et les screenshots
 		const detailApiUrl =
 				`https://api.rawg.io/api/games/` + encodeURIComponent(slug),
@@ -28,7 +30,7 @@ export default class GameDetailView extends View {
 			.then(data => {
 				this.screenshots = data;
 				this.render();
-				this.element.classList.remove('is-loading');
+				$(this.element).removeClass('is-loading');
 			});
 	}
 
@@ -51,7 +53,7 @@ export default class GameDetailView extends View {
 		} = this.game;
 		const releasedDate = new Date(released);
 		// rendu dans la vue
-		this.element.innerHTML = /*html*/ `
+		$(this.element).html(`
 			<div class="backgroundImage">
 				<img src="${background_image}" />
 			</div>
@@ -91,14 +93,20 @@ export default class GameDetailView extends View {
 				</div>
 			</section>
 			<section class="description">${description}</section>
-			`;
+			`);
 
 		// écoute du clic sur les liens du "fil d'Ariane" pour éviter le rechargement de page
-		this.element.querySelectorAll('.breadcrumb a').forEach(link =>
-			link.addEventListener('click', event => {
+		$(this.element)
+			.find('.breadcrumb a')
+			.on('click', event => {
 				event.preventDefault();
 				Router.navigate(event.currentTarget.getAttribute('href'));
-			})
-		);
+			});
+		// this.element.querySelectorAll('.breadcrumb a').forEach(link =>
+		// 	link.addEventListener('click', event => {
+		// 		event.preventDefault();
+		// 		Router.navigate(event.currentTarget.getAttribute('href'));
+		// 	})
+		// );
 	}
 }

src/GameListView.js

@@ -2,6 +2,7 @@ import { API_KEY } from './config.js';
 import renderGameThumbnail from './renderGameThumbnail.js';
 import Router from './Router.js';
 import View from './View.js';
+import $ from './lib/jqlite.js';
 
 export default class GameListView extends View {
 	searchForm;
@@ -10,13 +11,15 @@ export default class GameListView extends View {
 	constructor(element) {
 		super(element);
 		// détection du clic sur le bouton "loupe" pour afficher/masquer le form de recherche
-		this.toggleSearchButton = this.element.querySelector('.toggleSearchButton');
-		this.toggleSearchButton.addEventListener('click', event =>
+		// this.toggleSearchButton = this.element.querySelector('.toggleSearchButton');
+		this.toggleSearchButton = $(this.element).find('.toggleSearchButton');
+		$(this.toggleSearchButton).on('click', event =>
 			this.toggleSearchForm(event)
 		);
 		// détection de la soumission du formulaire de recherche
-		this.searchForm = this.element.querySelector('.searchForm');
-		this.searchForm.addEventListener('submit', event =>
+		//this.searchForm = this.element.querySelector('.searchForm');
+		this.searchForm = $(this.element).find('.searchForm');
+		$(this.searchForm).on('submit', event =>
 			this.handleSearchFormSubmit(event)
 		);
 	}
@@ -36,9 +39,11 @@ export default class GameListView extends View {
 	 * @param {string} ordering ordre d'affichage des résultats
 	 */
 	renderGameList(search = '', ordering) {
-		this.element.querySelector('.results').classList.add('is-loading');
-		this.searchForm.querySelector('button').disabled = true;
-		this.searchForm.querySelector('button').setAttribute('disabled', true);
+		// this.element.querySelector('.results').classList.add('is-loading');
+		// this.searchForm.querySelector('button').disabled = true;
+		// this.searchForm.querySelector('button').setAttribute('disabled', true);
+		$(this.element).find('.results').addClass('is-loading');
+		$(this.searchForm.find('button')).attr('disabled', true);
 		fetch(
 			`https://api.rawg.io/api/games?search=${encodeURIComponent(
 				search
@@ -49,19 +54,28 @@ export default class GameListView extends View {
 				// rendu de la liste des jeux
 				let html = '';
 				data.results.forEach(game => (html += renderGameThumbnail(game)));
-				this.element.querySelector('.results').innerHTML = html;
-				// suppression du "loader" et réactivation du formulaire
-				this.element.querySelector('.results').classList.remove('is-loading');
-				this.searchForm.querySelector('button').disabled = false;
+				// this.element.querySelector('.results').innerHTML = html;
+				// // suppression du "loader" et réactivation du formulaire
+				// this.element.querySelector('.results').classList.remove('is-loading');
+				// this.searchForm.querySelector('button').disabled = false;
+				$(this.element).find('.results').html(html);
+				$(this.element).find('.results').removeClass('is-loading');
+				$(this.searchForm.find('button')).removeAttr('disabled');
 				// détection du clic sur les vignettes de jeu
 				// pour navigation vers la page détail (sans rechargement de page)
-				const gameLinks = this.element.querySelectorAll('.results > a');
-				gameLinks.forEach(gameLink =>
-					gameLink.addEventListener('click', event => {
+				// const gameLinks = this.element.querySelectorAll('.results > a');
+				// gameLinks.forEach(gameLink =>
+				// 	gameLink.addEventListener('click', event => {
+				// 		event.preventDefault();
+				// 		Router.navigate(gameLink.getAttribute('href'));
+				// 	})
+				// );
+				$(this.element)
+					.find('.results > a')
+					.on('click', event => {
 						event.preventDefault();
-						Router.navigate(gameLink.getAttribute('href'));
-					})
-				);
+						Router.navigate(event.currentTarget.getAttribute('href'));
+					});
 			});
 	}
 	/**
@@ -69,13 +83,13 @@ export default class GameListView extends View {
 	 * @param {Event} event événement déclenché par le bouton sur lequel on a cliqué
 	 */
 	toggleSearchForm(event) {
-		const isOpened = this.searchForm.getAttribute('style') !== 'display: none;';
+		const isOpened = $(this.searchForm).attr('style') !== 'display: none;';
 		if (!isOpened) {
-			this.searchForm.setAttribute('style', '');
-			this.toggleSearchButton.classList.add('opened');
+			$(this.searchForm).attr('style', '');
+			$(this.toggleSearchButton).addClass('opened');
 		} else {
-			this.searchForm.setAttribute('style', 'display: none;');
-			this.toggleSearchButton.classList.remove('opened');
+			$(this.searchForm).attr('style', 'display: none;');
+			$(this.toggleSearchButton).removeClass('opened');
 		}
 	}
 	/**
@@ -86,8 +100,8 @@ export default class GameListView extends View {
 	 */
 	handleSearchFormSubmit(event) {
 		event.preventDefault();
-		const searchInput = this.searchForm.querySelector('[name=search]'),
-			orderingSelect = this.searchForm.querySelector('[name=ordering]');
-		this.renderGameList(searchInput.value, orderingSelect.value);
+		const searchInput = $(this.searchForm).find('[name=search]'),
+			orderingSelect = $(this.searchForm).find('[name=ordering]');
+		this.renderGameList(searchInput.val(), orderingSelect.val());
 	}
 }

src/HelpView.js

 import View from './View.js';
+import $ from './lib/jqlite.js';
 
 export default class HelpView extends View {
 	/**
@@ -9,9 +10,9 @@ export default class HelpView extends View {
 	constructor(element) {
 		super(element);
 		// détection du submit du formulaire
-		this.element
-			.querySelector('.helpForm')
-			.addEventListener('submit', event => this.handleSubmit(event));
+		$(this.element)
+			.find('.helpForm')
+			.on('submit', event => this.handleSubmit(event));
 	}
 
 	/**
@@ -23,11 +24,11 @@ export default class HelpView extends View {
 	handleSubmit(event) {
 		event.preventDefault();
 		// récupération des 2 champs du formulaire
-		const subjectInput = this.element.querySelector('input[name=subject]');
-		const bodyTextarea = this.element.querySelector('textarea[name=body]');
+		const subjectInput = $(this.element).find('input[name=subject]');
+		const bodyTextarea = $(this.element).find('textarea[name=body]');
 		// récupération du texte saisi par l'utilisateur.rice
-		const subject = subjectInput.value,
-			body = bodyTextarea.value;
+		const subject = subjectInput.val(),
+			body = bodyTextarea.val();
 		// vérification des champs obligatoires
 		if (subject === '') {
 			alert('le champ "SUJET" est obligatoire');
@@ -42,8 +43,8 @@ export default class HelpView extends View {
 			subject
 		)}&body=${encodeURIComponent(body)}`;
 		// on vide les champs
-		subjectInput.value = '';
-		bodyTextarea.value = '';
+		subjectInput.val('');
+		bodyTextarea.val('');
 		// on aurait aussi pu faire : form.reset();
 	}
 }

src/Router.js

+import $ from './lib/jqlite.js';
 /**
  * Classe Router qui permet de gérer la navigation dans l'application sans rechargement de page.
  * (Single Page Application)
@@ -23,15 +24,23 @@ export default class Router {
 	static setMenuElement(menuElement) {
 		this.#menuElement = menuElement;
 		// on écoute le clic sur tous les liens du menu
-		const menuLinks = this.#menuElement.querySelectorAll('a');
-		menuLinks.forEach(link =>
-			link.addEventListener('click', event => {
+		// const menuLinks = this.#menuElement.querySelectorAll('a');
+		// menuLinks.forEach(link =>
+		// 	link.addEventListener('click', event => {
+		// 		event.preventDefault();
+		// 		// on récupère le href du lien cliqué pour déclencher navigate(...)
+		// 		const linkHref = event.currentTarget.getAttribute('href');
+		// 		Router.navigate(linkHref);
+		// 	})
+		// );
+
+		const $menuLinks = $(this.#menuElement).find('a');
+		$menuLinks.on('click', event => {
 			event.preventDefault();
 			// on récupère le href du lien cliqué pour déclencher navigate(...)
-				const linkHref = event.currentTarget.getAttribute('href');
+			const linkHref = $(event.currentTarget).attr('href');
 			Router.navigate(linkHref);
-			})
-		);
+		});
 	}
 	/**
 	 * Affiche la view correspondant à `path` dans le tableau `routes`
@@ -70,13 +79,14 @@ export default class Router {
 				viewParam = pathEnd;
 			}
 			route.view.show(viewParam);
-			this.titleElement.innerHTML = `<h1>${route.title}</h1>`;
+			$(this.titleElement).html(`<h1>${route.title}</h1>`);
 
 			// Activation/désactivation des liens du menu
-			const previousMenuLink = this.#menuElement.querySelector('a.active'),
-				newMenuLink = this.#menuElement.querySelector(`a[href="${path}"]`);
-			previousMenuLink?.classList.remove('active'); // on retire la classe "active" du précédent menu
-			newMenuLink?.classList.add('active'); // on ajoute la classe CSS "active" sur le nouveau lien
+			const $previousMenuLink = $(this.#menuElement).find('a.active'),
+				$newMenuLink = $(this.#menuElement).find(`a[href="${path}"]`);
+
+			$previousMenuLink.removeClass('active'); // on retire la classe "active" du précédent menu
+			$newMenuLink.addClass('active'); // on ajoute la classe CSS "active" sur le nouveau lien
 
 			// History API : ajout d'une entrée dans l'historique du navigateur
 			// pour pouvoir utiliser les boutons précédent/suivant

src/View.js

+import $ from './lib/jqlite.js';
 /**
  * Classe de base des vues de notre application.
  * Permet d'associer une balise HTML à la vue et de l'afficher/masquer.
@@ -15,12 +16,12 @@ export default class View {
 	 * Affiche la vue en lui ajoutant la classe CSS `active`
 	 */
 	show() {
-		this.element.classList.add('active');
+		$(this.element).addClass('active');
 	}
 	/**
 	 * Masque la vue en enlevant la classe CSS `active`
 	 */
 	hide() {
-		this.element.classList.remove('active');
+		$(this.element).removeClass('active');
 	}
 }

src/lib/JQObject.js

+import $ from './jqlite.js';
+
+export default class JQObject {
+	constructor(DOMElements) {
+		let i = 0;
+		DOMElements.forEach(Element => {
+			this[i] = Element;
+			i++;
+		});
+		this.length = i;
+	}
+
+	html(newHTML) {
+		for (let i = 0; i < this.length; i++) {
+			this[i].innerHTML = newHTML;
+		}
+		return this;
+	}
+
+	append(newHTML) {
+		return this.html(this.html() + newHTML);
+	}
+
+	find(querySelector) {
+		return $(querySelector, this[0]);
+	}
+
+	addClass(className) {
+		for (let i = 0; i < this.length; i++) {
+			this[i].classList.add(className);
+		}
+		return this;
+	}
+
+	removeClass(className) {
+		for (let i = 0; i < this.length; i++) {
+			this[i].classList.remove(className);
+		}
+		return this;
+	}
+
+	attr(attributeName, newValue = null) {
+		if (newValue != null) {
+			for (let i = 0; i < this.length; i++) {
+				this[i].setAttribute(attributeName, newValue);
+			}
+			return this;
+		}
+
+		return this[0].getAttribute(attributeName);
+	}
+
+	removeAttr(attributeName) {
+		for (let i = 0; i < this.length; i++) {
+			this[i].removeAttribute(attributeName);
+		}
+		return this;
+	}
+
+	val(newValue = null) {
+		if (newValue) {
+			for (let i = 0; i < this.length; i++) {
+				this[i].value = newValue;
+			}
+			return this;
+		}
+		return this[0].value;
+	}
+
+	on(eventName, eventHandler) {
+		if (this[0]) {
+			this[0].addEventListener(eventName, eventHandler);
+		}
+		return this;
+	}
+}

src/lib/jqlite.js

+import JQObject from './JQObject.js';
+
+export default function $(querySelector, element = document) {
+	if (typeof querySelector === 'object') {
+		if (querySelector instanceof JQObject) {
+			return querySelector;
+		}
+		querySelector = querySelector.className;
+		querySelector = querySelector
+			.split(' ')
+			.map(className => '.' + className)
+			.join(' ');
+	}
+	return new JQObject(element.querySelectorAll(querySelector));
+}

src/main.js

@@ -3,22 +3,31 @@ import GameDetailView from './GameDetailView.js';
 import GameListView from './GameListView.js';
 import HelpView from './HelpView.js';
 import Router from './Router.js';
+import $ from './lib/jqlite.js';
+
+$('.logo').on('click', event => {
+	event.preventDefault();
+	Router.navigate('/', true);
+});
+
+$('body > footer a').on('mouseover', event => {
+	$(event.currentTarget).addClass('mouseover');
+});
+
+$('body > footer a').on('mouseout', event => {
+	$(event.currentTarget).removeClass('mouseover');
+});
 
 // Modification du footer
-document.querySelector('body > footer > div:nth-of-type(2)').innerHTML +=
-	' / CSS inspirée de <a href="https://store.steampowered.com/">steam</a>';
+$('body > footer > div:nth-of-type(2)').append(
+	' / CSS inspirée de <a href="https://store.steampowered.com/">steam</a>'
+);
 
 // création des vues de notre application
-const helpView = new HelpView(document.querySelector('.viewContent .help'));
-const gameListView = new GameListView(
-	document.querySelector('.viewContent > .gameList')
-);
-const aboutView = new AboutView(
-	document.querySelector('.viewContent > .about')
-);
-const gameDetailView = new GameDetailView(
-	document.querySelector('.viewContent > .gameDetail')
-);
+const helpView = new HelpView($('.viewContent .help'));
+const gameListView = new GameListView($('.viewContent > .gameList'));
+const aboutView = new AboutView($('.viewContent > .about'));
+const gameDetailView = new GameDetailView($('.viewContent > .gameDetail'));
 
 // mise en place du Router
 const routes = [
@@ -29,11 +38,19 @@ const routes = [
 ];
 Router.routes = routes;
 // élément dans lequel afficher le <h1> de la vue
-Router.titleElement = document.querySelector('.viewTitle');
+Router.titleElement = $('.viewTitle');
 // gestion des liens du menu (détection du clic et activation/désactivation)
-Router.setMenuElement(document.querySelector('.mainMenu'));
+Router.setMenuElement($('.mainMenu'));
 
 // chargement de la vue initiale selon l'URL demandée par l'utilisateur.rice (Deep linking)
 Router.navigate(window.location.pathname, true);
 // gestion des boutons précédent/suivant du navigateur (History API)
 window.onpopstate = () => Router.navigate(document.location.pathname, true);
+
+// console.log($('.logo span').html('<em>jquery</em>steam'));
+// console.log($('a').html('<em>jquery</em>steam'));
+
+// import $$ from './lib/jqlite.js';
+
+// $('.testdiv').find('.test').attr('test', 'hello');
+// $$('.testdiv2').find('.test2').attr('test', 'hello');