From 678bcf536b03fa37c8d4a0c6df61c58ea9b3191b Mon Sep 17 00:00:00 2001 From: olgazh565 Date: Mon, 23 Oct 2023 23:53:25 +0300 Subject: [PATCH] header added --- dist/index.html | 4 +- features/likeSvg/likeSvg.js | 2 +- modules/Header/Header.js | 117 ++++++++++++++++++++++++++++++++++++ 3 files changed, 120 insertions(+), 3 deletions(-) create mode 100644 modules/Header/Header.js diff --git a/dist/index.html b/dist/index.html index d7e3fce..1f0dfdb 100644 --- a/dist/index.html +++ b/dist/index.html @@ -9,7 +9,7 @@ Мебельный маркет Koff - + @@ -18,6 +18,6 @@ - + diff --git a/features/likeSvg/likeSvg.js b/features/likeSvg/likeSvg.js index a63e6c8..e16c682 100644 --- a/features/likeSvg/likeSvg.js +++ b/features/likeSvg/likeSvg.js @@ -2,7 +2,7 @@ let like = null; export const likeSvg = async () => { if (!like) { - const response = await fetch('/img/like.svg'); + const response = await fetch('./img/like.svg'); const svg = await response.text(); like = new DOMParser() diff --git a/modules/Header/Header.js b/modules/Header/Header.js new file mode 100644 index 0000000..9e4322d --- /dev/null +++ b/modules/Header/Header.js @@ -0,0 +1,117 @@ +import {Logo} from '../../features/Logo/Logo'; +import {likeSvg} from '../../features/likeSvg/likeSvg'; +import {router} from '../../main'; +import {addContainer} from '../addContainer'; + +export class Header { + static instance = null; + + constructor() { + if (!Header.instance) { + Header.instance = this; + + this.element = document.createElement('header'); + this.element.classList.add('header'); + this.containerElement = addContainer(this.element, 'header__container'); + this.isMounted = false; + } + return Header.instance; + } + + mount() { + if (this.isMounted) return; + + const logo = new Logo('header').create(); + const searchForm = this.getSearchForm(); + const navigation = this.getNavigation(); + this.changeCount(); + + this.containerElement.append(logo, searchForm, navigation); + + document.body.append(this.element); + this.isMounted = true; + } + + unmount() { + this.element.remove(); + this.isMounted = false; + } + + getSearchForm() { + const searchForm = document.createElement('form'); + searchForm.classList.add('header__search'); + searchForm.method = 'get'; + + searchForm.innerHTML = ` + + + `; + + searchForm.addEventListener('submit', (e) => { + e.preventDefault(); + const search = searchForm.search.value.trim(); + if (!search) return; + searchForm.reset(); + router.navigate(`/search?q=${search}`); + }); + + return searchForm; + } + + getNavigation() { + const navigation = document.createElement('nav'); + navigation.classList.add('header__control'); + + const favoriteLink = document.createElement('a'); + favoriteLink.classList.add('header__link'); + favoriteLink.href = '/favorite'; + + const favoriteText = document.createElement('p'); + favoriteText.classList.add('header__link-text'); + favoriteText.textContent = 'Избранное'; + + favoriteLink.prepend(favoriteText); + + likeSvg().then(svg => { + favoriteLink.append(svg); + }); + + const cartLink = document.createElement('a'); + cartLink.classList.add('header__link'); + cartLink.href = '/cart'; + + const cartText = document.createElement('span'); + cartText.classList.add('header__link-text'); + cartText.textContent = 'Корзина'; + + const countElement = document.createElement('span'); + countElement.classList.add('header__count'); + countElement.textContent = '(0)'; + + cartLink.append(cartText, countElement); + cartLink.insertAdjacentHTML('beforeend', ` + + + + + + + + + `); + navigation.append(favoriteLink, cartLink); + + this.countElement = countElement; + return navigation; + } + + changeCount(count) { + this.countElement.textContent = count ? `(${count})` : '(0)'; + } +}