From a3d21b1e26572a150939cfed2934273bf8bcd1b4 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Sun, 22 Dec 2019 21:09:34 +0300 Subject: [PATCH 01/29] Updated .gitignore. Started js --- .gitignore | 2 +- index.html | 12 ++++++------ js/index.js | 2 ++ js/product-card-popup.js | 8 ++++++++ 4 files changed, 17 insertions(+), 7 deletions(-) create mode 100644 js/product-card-popup.js diff --git a/.gitignore b/.gitignore index 6aaaf01..2691d9a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ /node_modules /dist - +notes.txt yarn-error.log .idea .cache diff --git a/index.html b/index.html index bb24f27..89b44be 100644 --- a/index.html +++ b/index.html @@ -136,7 +136,7 @@

Популярные товары

-
+
Зонт
@@ -147,7 +147,7 @@

Популярные товары

-
+
Сумка
@@ -158,7 +158,7 @@

Популярные товары

-
+
Шлепанцы
@@ -169,7 +169,7 @@

Популярные товары

-
+
Футболка
sale
@@ -182,7 +182,7 @@

Популярные товары

-
+
Толстовка
@@ -193,7 +193,7 @@

Популярные товары

-
+
Подушка
diff --git a/js/index.js b/js/index.js index f8b8ff8..1040c7f 100644 --- a/js/index.js +++ b/js/index.js @@ -1,2 +1,4 @@ import "./grid"; +import "./model"; import "./slider"; +import "./product-card-popup"; diff --git a/js/product-card-popup.js b/js/product-card-popup.js new file mode 100644 index 0000000..88d38a9 --- /dev/null +++ b/js/product-card-popup.js @@ -0,0 +1,8 @@ +//Повесить обработчик клика по карточке товара +let productCards = document + .querySelectorAll(".product-card") + .forEach(productCard => { + addEventListener("onclick", () => { + console.log(`${productCard.dataset.goods - id}`); + }); + }); From 1a83e887d390425bd08371e999c9e5ba45acb3c0 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Mon, 23 Dec 2019 09:17:09 +0300 Subject: [PATCH 02/29] Removed _popup modifier from product-card --- css/blocks/product-card/product-card.less | 14 ++++++-------- index.html | 18 +++++++++--------- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/css/blocks/product-card/product-card.less b/css/blocks/product-card/product-card.less index 52acb32..0609049 100644 --- a/css/blocks/product-card/product-card.less +++ b/css/blocks/product-card/product-card.less @@ -9,15 +9,13 @@ font-size: 0; position: relative; - &_popup { - width: 212px; - height: 212px; - margin: 0 auto 10px auto; + width: 212px; + height: 212px; + margin: 0 auto 10px auto; - @media @screen-gt-m { - width: 290px; - height: 290px; - } + @media @screen-gt-m { + width: 290px; + height: 290px; } &_form { diff --git a/index.html b/index.html index 89b44be..5a1cffc 100644 --- a/index.html +++ b/index.html @@ -136,7 +136,7 @@

Популярные товары

-
+
Зонт
@@ -147,7 +147,7 @@

Популярные товары

-
+
Сумка
@@ -158,7 +158,7 @@

Популярные товары

-
+
Шлепанцы
@@ -169,7 +169,7 @@

Популярные товары

-
+
Футболка
sale
@@ -182,7 +182,7 @@

Популярные товары

-
+
Толстовка
@@ -193,7 +193,7 @@

Популярные товары

-
+
Подушка
@@ -468,7 +468,7 @@

Красная хлопоковая фут

-
+
Красная хлопоковая фут
- - + + From e7f4f6abc19d054d4db16dc4f47fdc8b1bed3687 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Mon, 23 Dec 2019 19:13:40 +0300 Subject: [PATCH 03/29] Started with popup for product-card --- css/blocks/product-card/product-card.less | 1 - js/index.js | 1 - js/model.js | 69 ++++++++++++++ js/product-card-popup.js | 26 +++++- js/render-product-card.js | 107 ++++++++++++++++++++++ 5 files changed, 199 insertions(+), 5 deletions(-) create mode 100644 js/model.js create mode 100644 js/render-product-card.js diff --git a/css/blocks/product-card/product-card.less b/css/blocks/product-card/product-card.less index 0609049..3b0c44b 100644 --- a/css/blocks/product-card/product-card.less +++ b/css/blocks/product-card/product-card.less @@ -5,7 +5,6 @@ cursor: pointer; &__image-container { - margin-bottom: 10px; font-size: 0; position: relative; diff --git a/js/index.js b/js/index.js index 1040c7f..2fd920f 100644 --- a/js/index.js +++ b/js/index.js @@ -1,4 +1,3 @@ import "./grid"; -import "./model"; import "./slider"; import "./product-card-popup"; diff --git a/js/model.js b/js/model.js new file mode 100644 index 0000000..7e27a79 --- /dev/null +++ b/js/model.js @@ -0,0 +1,69 @@ +export let productsData = [ + { + id: "1", + name: "Зонт", + description: "Красный зонт с логотипом HH", + image: "product-1.jpg", + price: "1 990" + }, + { + id: "2", + name: "Сумка", + description: "Красная сумка с логотипом HH", + image: "product-2.jpg", + price: "290" + }, + { + id: "3", + name: "Шлепанцы", + description: "Красные шлепанцы с логотипом HH", + image: "product-3.jpg", + price: "790", + sizes: { + xs: true, + x: true, + m: true, + l: true, + xl: true, + xxl: true + } + }, + { + id: "4", + name: "Футболка", + description: "Красная футболка с логотипом HH", + image: "product-4.jpg", + price: "690", + salePrice: "390", + sizes: { + xs: true, + x: true, + m: true, + l: true, + xl: true, + xxl: true + } + }, + { + id: "5", + name: "Толстовка", + description: "Красная толстовка с логотипом HH", + image: "product-5.jpg", + price: "3 990", + sizes: { + xs: true, + x: true, + m: true, + l: true, + xl: true, + xxl: true + } + }, + { + id: "6", + name: "Подушка", + description: "Красная подушка с логотипом HH", + image: "product-6.jpg", + price: "990" + } +]; diff --git a/js/product-card-popup.js b/js/product-card-popup.js index 88d38a9..c112d7f 100644 --- a/js/product-card-popup.js +++ b/js/product-card-popup.js @@ -1,8 +1,28 @@ +import { productsData } from "./model"; +import { renderProductCard } from "./render-product-card"; + +let showDataId = e => { + let target = e.target; + + while (!target.classList.contains("product-card")) { + target = target.parentNode; + + if (target.classList.contains("content-section")) { + return; + } + } + + const productData = productsData.find( + product => product.id === target.dataset.productId + ); + + console.log(productData); + const productCardTemplate = renderProductCard(productData); +}; + //Повесить обработчик клика по карточке товара let productCards = document .querySelectorAll(".product-card") .forEach(productCard => { - addEventListener("onclick", () => { - console.log(`${productCard.dataset.goods - id}`); - }); + productCard.addEventListener("click", showDataId); }); diff --git a/js/render-product-card.js b/js/render-product-card.js new file mode 100644 index 0000000..936dc56 --- /dev/null +++ b/js/render-product-card.js @@ -0,0 +1,107 @@ +export let renderProductCard = productData => { + return `
+
+ +
+
+
+ ${productData.name} + ${ + productData.salePrice + ? '
sale
' + : "" + }; +
+ +
${productData.name}
+ ${ + productData.salePrice + ? `
${productData.price} ₽
${productData.salePrice} ₽
` + : `
+ ${productData.price} ₽
` + }; + +

+ ${productData.description} +

+ +
`; +}; +/* +
+ + + + + + + + + + + + + + + + + +
+
+ */ From 0d629f5fc390695e482eaec272c833af18cbbb43 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Thu, 26 Dec 2019 12:29:12 +0300 Subject: [PATCH 04/29] Added disabled style for labels and style fot popup --- css/blocks/popup/popup.less | 6 +++++- css/common/label/label.less | 4 ++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/css/blocks/popup/popup.less b/css/blocks/popup/popup.less index db87c20..084798a 100644 --- a/css/blocks/popup/popup.less +++ b/css/blocks/popup/popup.less @@ -1,7 +1,11 @@ .popup { width: 280px; border: 1px solid; - margin: 40px auto; + position: absolute; + top: 300px; + left: 300px; + transition: all 1s linear; + z-index: 100; @media @screen-gt-s { width: 242px; diff --git a/css/common/label/label.less b/css/common/label/label.less index 29eb911..a8067e7 100644 --- a/css/common/label/label.less +++ b/css/common/label/label.less @@ -6,4 +6,8 @@ .label { .label-default(); + + &_disabled { + opacity: 0.7; + } } From adb1a35b1ae530dfbdc8eef469ed17c5cab96443 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Thu, 26 Dec 2019 12:30:28 +0300 Subject: [PATCH 05/29] Designed js-model scheme for products --- js/model.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/model.js b/js/model.js index 7e27a79..aa7facf 100644 --- a/js/model.js +++ b/js/model.js @@ -22,7 +22,7 @@ export let productsData = [ sizes: { xs: true, x: true, - m: true, + m: false, l: true, xl: true, xxl: true From 507716f313a6184c3b9c609796d99962d13f5401 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Thu, 26 Dec 2019 12:31:22 +0300 Subject: [PATCH 06/29] Designed js-function for rendering product-card-tempalte --- js/render-product-card.js | 133 +++++++++++++------------------------- 1 file changed, 45 insertions(+), 88 deletions(-) diff --git a/js/render-product-card.js b/js/render-product-card.js index 936dc56..91f1652 100644 --- a/js/render-product-card.js +++ b/js/render-product-card.js @@ -1,5 +1,7 @@ +//Простой шаблон карточки продукта, основанный на интерполяции строк + export let renderProductCard = productData => { - return `
+ let productCardMainTemplate = `
@@ -7,101 +9,56 @@ export let renderProductCard = productData => {
${productData.name} - ${ - productData.salePrice - ? '
sale
' - : "" - }; + src="/${productData.image}" + alt="${productData.name}"/> + + ${ + productData.salePrice + ? '
sale
' + : "" + };
${productData.name}
+ ${ productData.salePrice - ? `
${productData.price} ₽
${productData.salePrice} ₽
` - : `
- ${productData.price} ₽
` - }; + ? `
${productData.price} ₽
${productData.salePrice} ₽
\n` + : `
${productData.price} ₽
\n` + } -

- ${productData.description} -

+

${productData.description}

\n`; -
`; -}; -/* -
- - + let submitButtonTemplate = + ''; - - + if (!productData.sizes) { + //если у товар безразмерный, то возвращаем шаблон + return productCardMainTemplate + "
\n" + submitButtonTemplate; + } else { + //иначе дополнительно генерируем для каждого размера блоки input-label с учётом доступности размера + let productCardSizesTemplate = '
\n'; - - + for (let size in productData.sizes) { + let labelPart = ""; + let inputPart = ""; - - + if (productData.sizes[size] == false) { + labelPart = `\n`; + inputPart = `\n`; + } else { + labelPart = `\n`; + inputPart = `\n`; + } + productCardSizesTemplate += inputPart + labelPart; + } - - - - - -
-
- */ + return ( + productCardMainTemplate + + productCardSizesTemplate + + "
\n" + + "
\n" + + submitButtonTemplate + ); + } +}; From 84d5a120070996a3e6e13e1cb5566353fc101a3e Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Fri, 27 Dec 2019 18:00:32 +0300 Subject: [PATCH 07/29] Added styles for popup and button --- css/blocks/popup/popup.less | 14 +++++++++++--- css/common/button/button.less | 4 ++++ index.html | 11 +++++------ 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/css/blocks/popup/popup.less b/css/blocks/popup/popup.less index 084798a..e321cfa 100644 --- a/css/blocks/popup/popup.less +++ b/css/blocks/popup/popup.less @@ -2,11 +2,15 @@ width: 280px; border: 1px solid; position: absolute; - top: 300px; - left: 300px; - transition: all 1s linear; + opacity: 0; + transition: all 300ms linear; + background-color: @color-light; z-index: 100; + &_active { + opacity: 1; + } + @media @screen-gt-s { width: 242px; } @@ -34,5 +38,9 @@ z-index: 100; right: -10px; top: -10px; + + @media @screen-gt-m { + display: none; + } } } diff --git a/css/common/button/button.less b/css/common/button/button.less index e8f5762..a49c1e7 100644 --- a/css/common/button/button.less +++ b/css/common/button/button.less @@ -36,6 +36,10 @@ .button(); width: 100%; + &_disabled { + opacity: 0.5; + } + @media @screen-gt-s { width: 138px; } diff --git a/index.html b/index.html index 5a1cffc..4f702fe 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ HTML и CSS - +
@@ -300,7 +300,7 @@

Популярные товары

- + + From 8f8286b34232448595a209eb07d9d7c78684a4c4 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Fri, 27 Dec 2019 18:01:43 +0300 Subject: [PATCH 08/29] Reorganized structure of js-folders and did following: -added popup-js logic (show, hide) -added getCoords common js function -added template for popup-product card --- js/common/getCoords.js | 9 +++ js/{ => dev}/grid.js | 0 js/index.js | 6 +- js/{model.js => models/productCardModel.js} | 12 ++-- js/popup/getPopupShifts.js | 36 ++++++++++ js/popup/hidePopup.js | 25 +++++++ js/popup/popup.js | 11 ++++ js/popup/renderPopup.js | 27 ++++++++ js/popup/showPopup.js | 65 +++++++++++++++++++ js/product-card-popup.js | 28 -------- js/{ => slider}/slider.js | 0 .../productCardPopupTemplate.js} | 13 ++-- 12 files changed, 190 insertions(+), 42 deletions(-) create mode 100644 js/common/getCoords.js rename js/{ => dev}/grid.js (100%) rename js/{model.js => models/productCardModel.js} (84%) create mode 100644 js/popup/getPopupShifts.js create mode 100644 js/popup/hidePopup.js create mode 100644 js/popup/popup.js create mode 100644 js/popup/renderPopup.js create mode 100644 js/popup/showPopup.js delete mode 100644 js/product-card-popup.js rename js/{ => slider}/slider.js (100%) rename js/{render-product-card.js => templates/productCardPopupTemplate.js} (82%) diff --git a/js/common/getCoords.js b/js/common/getCoords.js new file mode 100644 index 0000000..8e718e2 --- /dev/null +++ b/js/common/getCoords.js @@ -0,0 +1,9 @@ +// получаем координаты элемента в контексте документа +export const getCoords = elem => { + let box = elem.getBoundingClientRect(); + + return { + top: box.top + pageYOffset, + left: box.left + pageXOffset + }; +}; diff --git a/js/grid.js b/js/dev/grid.js similarity index 100% rename from js/grid.js rename to js/dev/grid.js diff --git a/js/index.js b/js/index.js index 2fd920f..4ee23d2 100644 --- a/js/index.js +++ b/js/index.js @@ -1,3 +1,3 @@ -import "./grid"; -import "./slider"; -import "./product-card-popup"; +import "./dev/grid"; +import "./slider/slider"; +import "./popup/popup"; diff --git a/js/model.js b/js/models/productCardModel.js similarity index 84% rename from js/model.js rename to js/models/productCardModel.js index aa7facf..e8bc393 100644 --- a/js/model.js +++ b/js/models/productCardModel.js @@ -3,21 +3,21 @@ export let productsData = [ id: "1", name: "Зонт", description: "Красный зонт с логотипом HH", - image: "product-1.jpg", + image: "product-1.e0fb58ad.jpg", price: "1 990" }, { id: "2", name: "Сумка", description: "Красная сумка с логотипом HH", - image: "product-2.jpg", + image: "product-2.59eda275.jpg", price: "290" }, { id: "3", name: "Шлепанцы", description: "Красные шлепанцы с логотипом HH", - image: "product-3.jpg", + image: "product-3.83c9f311.jpg", price: "790", sizes: { xs: true, @@ -32,7 +32,7 @@ export let productsData = [ id: "4", name: "Футболка", description: "Красная футболка с логотипом HH", - image: "product-4.jpg", + image: "product-4.9853c0ec.jpg", price: "690", salePrice: "390", sizes: { @@ -48,7 +48,7 @@ export let productsData = [ id: "5", name: "Толстовка", description: "Красная толстовка с логотипом HH", - image: "product-5.jpg", + image: "product-5.593f3620.jpg", price: "3 990", sizes: { xs: true, @@ -63,7 +63,7 @@ export let productsData = [ id: "6", name: "Подушка", description: "Красная подушка с логотипом HH", - image: "product-6.jpg", + image: "product-6.5aa0fac8.jpg", price: "990" } ]; diff --git a/js/popup/getPopupShifts.js b/js/popup/getPopupShifts.js new file mode 100644 index 0000000..0e18eef --- /dev/null +++ b/js/popup/getPopupShifts.js @@ -0,0 +1,36 @@ +export const getPopupShifts = () => { + //Common + const popupBorderWidth = 1; + const screenGreaterS = 768; + const screenGreaterM = 1000; + + //Tablet + const popupPaddingLeftTablet = 15; + const popupPaddingTopTablet = 20; + + //Desktop + const popupPaddingLeftDesktop = 20; + const popupPaddingTopDesktop = 20; + + let shiftLeft = 0; + let shiftTop = 0; + + //получить текущие размеры окна + const screenWidth = document.documentElement.clientWidth; + + //Рассчитать смещение + + //Tablet + if (screenWidth >= screenGreaterS && screenWidth < screenGreaterM) { + shiftLeft = popupBorderWidth + popupPaddingLeftTablet; + shiftTop = popupBorderWidth + popupPaddingTopTablet; + return { shiftLeft, shiftTop }; + } + + //Desktop + if (screenWidth >= screenGreaterM) { + shiftLeft = popupBorderWidth + popupPaddingLeftDesktop; + shiftTop = popupBorderWidth + popupPaddingTopDesktop; + return { shiftLeft, shiftTop }; + } +}; diff --git a/js/popup/hidePopup.js b/js/popup/hidePopup.js new file mode 100644 index 0000000..74a6531 --- /dev/null +++ b/js/popup/hidePopup.js @@ -0,0 +1,25 @@ +export const hidePopup = e => { + let target = e.target; + + while (!target.classList.contains("body")) { + target = target.parentNode; + + //если клик по активному попапу, то ничего не делать + if (target.classList.contains("popup_active")) { + return; + } + + //если клик на кнопку "Закрыть", то скрыть попап + if (target.classList.contains("popup-container__button-close")) { + break; + } + } + + const currentPopup = document.querySelector(".popup_active"); + if (currentPopup) { + currentPopup.classList.remove("popup_active"); + setTimeout(() => { + currentPopup.remove(); + }, 300); + } +}; diff --git a/js/popup/popup.js b/js/popup/popup.js new file mode 100644 index 0000000..22e8e5a --- /dev/null +++ b/js/popup/popup.js @@ -0,0 +1,11 @@ +import { showPopup } from "./showPopup"; +import { hidePopup } from "./hidePopup"; + +//Назначить обработчик клика по карточке товара +document.querySelectorAll(".product-card").forEach(productCard => { + productCard.addEventListener("click", showPopup); +}); + +//Назначить обработчик клика по документу +//(закрытие попапа при клике не по нему) +document.addEventListener("click", hidePopup); diff --git a/js/popup/renderPopup.js b/js/popup/renderPopup.js new file mode 100644 index 0000000..cbb1263 --- /dev/null +++ b/js/popup/renderPopup.js @@ -0,0 +1,27 @@ +//Рендер попапа карточки продукта + +export const renderPopup = (popupHTML, coords) => { + const popup = document.createElement("div"); + + popup.classList.add("js-popup"); + popup.classList.add("popup"); + popup.innerHTML = popupHTML; + + //Если есть координаты, значит Tablet/Desktop + if (coords) { + popup.style.left = coords.left + "px"; + popup.style.top = coords.top + "px"; + } else { + //если нет координат, значит Mobile - центрируем попап + popup.style.position = "fixed"; + popup.style.left = "50%"; + popup.style.top = "50%"; + popup.style.transform = "translate(-50%, -50%)"; + } + + document.body.append(popup); + + setTimeout(() => { + popup.classList.add("popup_active"); + }, 0); +}; diff --git a/js/popup/showPopup.js b/js/popup/showPopup.js new file mode 100644 index 0000000..157c230 --- /dev/null +++ b/js/popup/showPopup.js @@ -0,0 +1,65 @@ +import { productsData } from "../models/productCardModel"; +import { productCardPopupTemplate } from "../templates/productCardPopupTemplate"; +import { hidePopup } from "./hidePopup"; +import { renderPopup } from "./renderPopup"; +import { getPopupShifts } from "./getPopupShifts"; +import { getCoords } from "../common/getCoords"; +const screenGreaterS = 768; + +export const showPopup = e => { + let target = e.target; + + while (!target.classList.contains("product-card")) { + target = target.parentNode; + + if (target.classList.contains("content-section")) { + return; + } + } + + //Если клик был по карточке, то получить информацию по продукту из модели + const productData = productsData.find( + product => product.id === target.dataset.productId + ); + + //Получить шаблон попап для данного продукта + const popupHTML = productCardPopupTemplate(productData); + + //получить текущие размеры окна + const screenWidth = document.documentElement.clientWidth; + //Если попап не для Mobile, то вычислить координты размещения + if (screenWidth > screenGreaterS) { + //Получить опорные координаты (img) для размещения попапа {left, top} + var pivotCoords = getCoords(target); + + //Получить смещение координат в зависимости от размера попапа (tablet, desktop) + var popupShifts = getPopupShifts(); + + pivotCoords.left -= popupShifts.shiftLeft; + pivotCoords.top -= popupShifts.shiftTop; + } + + //Рендер попапа на странице + renderPopup(popupHTML, pivotCoords); + + //Назначить обработчик клика по кнопке "Закрыть", чтобы скрывать попап + document + .querySelector(".popup-container__button-close") + .addEventListener("click", hidePopup); + + //Назначить обработчик клика по размеру (если товар не безразмерный) + if (productData.sizes) { + document + .querySelectorAll(".radio-button-size-item__label") + .forEach(size => { + size.addEventListener("click", () => { + //если выбрнан размер, то разблокировать кнопку заказа + const submitButton = document.querySelector( + ".product-card__button-submit" + ); + submitButton.classList.remove("button-submit_disabled"); + submitButton.disabled = false; + }); + }); + } +}; diff --git a/js/product-card-popup.js b/js/product-card-popup.js deleted file mode 100644 index c112d7f..0000000 --- a/js/product-card-popup.js +++ /dev/null @@ -1,28 +0,0 @@ -import { productsData } from "./model"; -import { renderProductCard } from "./render-product-card"; - -let showDataId = e => { - let target = e.target; - - while (!target.classList.contains("product-card")) { - target = target.parentNode; - - if (target.classList.contains("content-section")) { - return; - } - } - - const productData = productsData.find( - product => product.id === target.dataset.productId - ); - - console.log(productData); - const productCardTemplate = renderProductCard(productData); -}; - -//Повесить обработчик клика по карточке товара -let productCards = document - .querySelectorAll(".product-card") - .forEach(productCard => { - productCard.addEventListener("click", showDataId); - }); diff --git a/js/slider.js b/js/slider/slider.js similarity index 100% rename from js/slider.js rename to js/slider/slider.js diff --git a/js/render-product-card.js b/js/templates/productCardPopupTemplate.js similarity index 82% rename from js/render-product-card.js rename to js/templates/productCardPopupTemplate.js index 91f1652..f2b8998 100644 --- a/js/render-product-card.js +++ b/js/templates/productCardPopupTemplate.js @@ -1,12 +1,12 @@ //Простой шаблон карточки продукта, основанный на интерполяции строк -export let renderProductCard = productData => { - let productCardMainTemplate = `
+export const productCardPopupTemplate = productData => { + const productCardMainTemplate = `
-
+
{

${productData.description}

\n`; - let submitButtonTemplate = - ''; + const submitButtonTemplate = `${ + productData.sizes + ? `\n` + : `\n` + }`; if (!productData.sizes) { //если у товар безразмерный, то возвращаем шаблон From 5f0e89625d97af0f824d7cde092841cd1ad54ae7 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Mon, 30 Dec 2019 22:03:05 +0300 Subject: [PATCH 09/29] Added order form template and did improvments: -saved src html files of popup and form -improved template for product card (it`s now universal) -added separate templates for popup and form (they are both using temp for product card) -improved styles for form --- css/blocks/form/form.less | 37 ++-- html/orderForm.html | 157 ++++++++++++++++ html/productCardPopup.html | 55 ++++++ index.html | 217 ----------------------- js/orderForm/hideOrderForm.js | 22 +++ js/orderForm/renderOrderForm.js | 14 ++ js/orderForm/showOrderForm.js | 21 +++ js/popup/getPopupShifts.js | 4 +- js/popup/hidePopup.js | 1 + js/popup/renderPopup.js | 3 +- js/popup/showPopup.js | 32 +++- js/templates/orderFormTemplate.js | 123 +++++++++++++ js/templates/productCardPopupTemplate.js | 67 +------ js/templates/productCardTemplate.js | 78 ++++++++ 14 files changed, 527 insertions(+), 304 deletions(-) create mode 100644 html/orderForm.html create mode 100644 html/productCardPopup.html create mode 100644 js/orderForm/hideOrderForm.js create mode 100644 js/orderForm/renderOrderForm.js create mode 100644 js/orderForm/showOrderForm.js create mode 100644 js/templates/orderFormTemplate.js create mode 100644 js/templates/productCardTemplate.js diff --git a/css/blocks/form/form.less b/css/blocks/form/form.less index 82d7be8..78aa32c 100644 --- a/css/blocks/form/form.less +++ b/css/blocks/form/form.less @@ -1,5 +1,15 @@ .form { background-color: @color-light; + margin: 5px auto; + max-width: 320px; + + @media @screen-gt-s { + max-width: 768px; + } + + @media @screen-gt-m { + max-width: 1010px; + } &__heading { margin-top: 20px; @@ -59,21 +69,18 @@ } } -.form-pug { - /* Заглушка, будет popup */ - width: 290px; - height: 450px; - background-color: black; - opacity: 0.1; - font-size: 50px; - float: right; - margin-top: 136px; - color: white; - justify-content: center; - align-items: center; - display: none; +.orderForm { + position: fixed; + top: 0; + z-index: 100; + overflow: hidden; + opacity: 0; + transition: all 300ms linear; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); - @media @screen-gt-s { - display: flex; + &_active { + opacity: 1; } } diff --git a/html/orderForm.html b/html/orderForm.html new file mode 100644 index 0000000..6540f33 --- /dev/null +++ b/html/orderForm.html @@ -0,0 +1,157 @@ + +
+
+
+ +
+
+
+ +
+
+

Оформление заказа

+

Контактное лицо

+ + +
+ +
+ + + +
+
+ +
+

Способ получения заказа

+
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+

Адрес

+
+ +
+
+ +
+
+
+ +
+
+

Оплата

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+

Уведомления

+ +
+ + +
+ +
+
+ + + +
+ +
+
+ +
+
+ Футболка +
sale
+
+ +
Футболка
+
+
690
+ 390 ₽ +
+

Красная хлопоковая футболка + с коротким руковом

+ +
+ + + + + + + + + + + + + + + + + +
+
+
+
+ +
+ \ No newline at end of file diff --git a/html/productCardPopup.html b/html/productCardPopup.html new file mode 100644 index 0000000..4fce733 --- /dev/null +++ b/html/productCardPopup.html @@ -0,0 +1,55 @@ +
+
+
+ +
+
+
+ Футболка +
sale
+
+ +
Футболка
+
+
690
+ 390 ₽ +
+

Красная хлопоковая футболка + с коротким руковом

+ +
+ + + + + + + + + + + + + + + + + +
+
+ +
+ + \ No newline at end of file diff --git a/index.html b/index.html index 4f702fe..8eaee71 100644 --- a/index.html +++ b/index.html @@ -300,223 +300,6 @@

Популярные товары

- - diff --git a/js/orderForm/hideOrderForm.js b/js/orderForm/hideOrderForm.js new file mode 100644 index 0000000..32b05b1 --- /dev/null +++ b/js/orderForm/hideOrderForm.js @@ -0,0 +1,22 @@ +export const hideOrderForm = e => { + event.preventDefault(); + let target = e.target; + + while (!target.classList.contains("orderForm")) { + target = target.parentNode; + + //если клик на кнопку "Закрыть", то скрыть форму + if (target.classList.contains("form__button-close")) { + break; + } + } + + const currentForm = document.querySelector(".orderForm_active"); + + if (currentForm) { + currentForm.classList.remove("orderForm_active"); + setTimeout(() => { + currentForm.remove(); + }, 300); + } +}; diff --git a/js/orderForm/renderOrderForm.js b/js/orderForm/renderOrderForm.js new file mode 100644 index 0000000..8222e5c --- /dev/null +++ b/js/orderForm/renderOrderForm.js @@ -0,0 +1,14 @@ +//Рендер формы заказа + +export const renderOrderForm = orderFormHTML => { + const orderForm = document.createElement("div"); + + orderForm.classList.add("js-orderForm"); + orderForm.classList.add("orderForm"); + orderForm.innerHTML = orderFormHTML; + + document.body.append(orderForm); + setTimeout(() => { + orderForm.classList.add("orderForm_active"); + }, 0); +}; diff --git a/js/orderForm/showOrderForm.js b/js/orderForm/showOrderForm.js new file mode 100644 index 0000000..a6c05ea --- /dev/null +++ b/js/orderForm/showOrderForm.js @@ -0,0 +1,21 @@ +//Показ и работа с формой заказа + +import { renderOrderForm } from "./renderOrderForm"; +import { hideOrderForm } from "./hideOrderForm"; +import { orderFormTemplate } from "../templates/orderFormTemplate"; + +export const showOrderForm = productData => { + //Получить HTML из шаблона формы + const orderFormHTML = orderFormTemplate(productData); + + //Рендер формы + renderOrderForm(orderFormHTML); + + //Назначить обработчик клика по кнопке "Закрыть", чтобы скрывать форму + document + .querySelector(".button-close-icon") + .addEventListener("click", hideOrderForm); + + //Назначить обработчик клика по области вне формы + document.querySelector(".orderForm").addEventListener("click", hideOrderForm); +}; diff --git a/js/popup/getPopupShifts.js b/js/popup/getPopupShifts.js index 0e18eef..847e049 100644 --- a/js/popup/getPopupShifts.js +++ b/js/popup/getPopupShifts.js @@ -15,8 +15,8 @@ export const getPopupShifts = () => { let shiftLeft = 0; let shiftTop = 0; - //получить текущие размеры окна - const screenWidth = document.documentElement.clientWidth; + //получить текущее разрешение экрана + const screenWidth = window.innerWidth; //Рассчитать смещение diff --git a/js/popup/hidePopup.js b/js/popup/hidePopup.js index 74a6531..1931b4d 100644 --- a/js/popup/hidePopup.js +++ b/js/popup/hidePopup.js @@ -16,6 +16,7 @@ export const hidePopup = e => { } const currentPopup = document.querySelector(".popup_active"); + if (currentPopup) { currentPopup.classList.remove("popup_active"); setTimeout(() => { diff --git a/js/popup/renderPopup.js b/js/popup/renderPopup.js index cbb1263..e4a884d 100644 --- a/js/popup/renderPopup.js +++ b/js/popup/renderPopup.js @@ -20,8 +20,7 @@ export const renderPopup = (popupHTML, coords) => { } document.body.append(popup); - setTimeout(() => { popup.classList.add("popup_active"); - }, 0); + }, 15); }; diff --git a/js/popup/showPopup.js b/js/popup/showPopup.js index 157c230..63f5a24 100644 --- a/js/popup/showPopup.js +++ b/js/popup/showPopup.js @@ -4,17 +4,19 @@ import { hidePopup } from "./hidePopup"; import { renderPopup } from "./renderPopup"; import { getPopupShifts } from "./getPopupShifts"; import { getCoords } from "../common/getCoords"; +import { showOrderForm } from "../orderForm/showOrderForm"; const screenGreaterS = 768; export const showPopup = e => { + //если попап уже отображается, то выйти + const currentPopup = document.querySelector(".popup_active"); + if (currentPopup) { + return; + } let target = e.target; while (!target.classList.contains("product-card")) { target = target.parentNode; - - if (target.classList.contains("content-section")) { - return; - } } //Если клик был по карточке, то получить информацию по продукту из модели @@ -22,13 +24,13 @@ export const showPopup = e => { product => product.id === target.dataset.productId ); - //Получить шаблон попап для данного продукта + //Получить HTML из шаблона попапа для данного продукта const popupHTML = productCardPopupTemplate(productData); //получить текущие размеры окна - const screenWidth = document.documentElement.clientWidth; + const screenWidth = window.innerWidth; //Если попап не для Mobile, то вычислить координты размещения - if (screenWidth > screenGreaterS) { + if (screenWidth >= screenGreaterS) { //Получить опорные координаты (img) для размещения попапа {left, top} var pivotCoords = getCoords(target); @@ -59,7 +61,23 @@ export const showPopup = e => { ); submitButton.classList.remove("button-submit_disabled"); submitButton.disabled = false; + + //сохранить выбранный пользователем размер + //для последующего отображения в форме + productData.checkedSize = size.htmlFor; }); }); } + + //Назначить обработчик клика по кнопке "Заказать" + document + .querySelector(".product-card__button-submit") + .addEventListener("click", () => { + //Убрать ранее показанный попап продукта + const currentPopup = document.querySelector(".popup_active"); + currentPopup.remove(); + + //Показать форму + showOrderForm(productData); + }); }; diff --git a/js/templates/orderFormTemplate.js b/js/templates/orderFormTemplate.js new file mode 100644 index 0000000..08fc977 --- /dev/null +++ b/js/templates/orderFormTemplate.js @@ -0,0 +1,123 @@ +//Шаблон формы заказа продукта, основанный на интерполяции строк + +import { productCardTemplate } from "./productCardTemplate"; + +export const orderFormTemplate = productData => { + const formPartOneHTML = `
+
+
+ +
+
+
+ +
+
+

Оформление заказа

+

Контактное лицо

+ + +
+ +
+ + + +
+
+ +
+

Способ получения заказа

+
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+

Адрес

+
+ +
+
+ +
+
+
+ +
+
+

Оплата

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ +
+
+

Уведомления

+ +
+ + +
+ +
+
+ + + +
`; + + const formPartTwoHTML = `
+
`; + + const productCardHTML = productCardTemplate(productData, true); + + const formPartThreeHTML = `
+
+
+ `; + + return ( + formPartOneHTML + formPartTwoHTML + productCardHTML + formPartThreeHTML + ); +}; diff --git a/js/templates/productCardPopupTemplate.js b/js/templates/productCardPopupTemplate.js index f2b8998..af85f00 100644 --- a/js/templates/productCardPopupTemplate.js +++ b/js/templates/productCardPopupTemplate.js @@ -1,67 +1,12 @@ -//Простой шаблон карточки продукта, основанный на интерполяции строк +//Простой шаблон попапа карточки продукта, основанный на интерполяции строк +import { productCardTemplate } from "./productCardTemplate"; export const productCardPopupTemplate = productData => { - const productCardMainTemplate = `
+ const productCardPopupHTML = `
-
-
-
- ${productData.name} - - ${ - productData.salePrice - ? '
sale
' - : "" - }; -
+
`; + const productCardHTML = productCardTemplate(productData); -
${productData.name}
- - ${ - productData.salePrice - ? `
${productData.price} ₽
${productData.salePrice} ₽
\n` - : `
${productData.price} ₽
\n` - } - -

${productData.description}

\n`; - - const submitButtonTemplate = `${ - productData.sizes - ? `\n` - : `\n` - }`; - - if (!productData.sizes) { - //если у товар безразмерный, то возвращаем шаблон - return productCardMainTemplate + "
\n" + submitButtonTemplate; - } else { - //иначе дополнительно генерируем для каждого размера блоки input-label с учётом доступности размера - let productCardSizesTemplate = '
\n'; - - for (let size in productData.sizes) { - let labelPart = ""; - let inputPart = ""; - - if (productData.sizes[size] == false) { - labelPart = `\n`; - inputPart = `\n`; - } else { - labelPart = `\n`; - inputPart = `\n`; - } - productCardSizesTemplate += inputPart + labelPart; - } - - return ( - productCardMainTemplate + - productCardSizesTemplate + - "
\n" + - "
\n" + - submitButtonTemplate - ); - } + return productCardPopupHTML + productCardHTML + `
\n`; }; diff --git a/js/templates/productCardTemplate.js b/js/templates/productCardTemplate.js new file mode 100644 index 0000000..d25ea0a --- /dev/null +++ b/js/templates/productCardTemplate.js @@ -0,0 +1,78 @@ +//Шаблон карточки продукта, основанный на интерполяции строк +//параметр formStyle генерирует дополнительную разметку для использования в шаблоне формы + +export const productCardTemplate = (productData, formStyle = false) => { + const productCardMainTemplate = `
+ ${ + formStyle + ? `
\n` + : `
\n` + } + + ${productData.name} + + ${ + productData.salePrice + ? '
sale
' + : "" + }; +
+ +
${productData.name}
+ + ${ + productData.salePrice + ? `
${productData.price} ₽
${productData.salePrice} ₽
\n` + : `
${productData.price} ₽
\n` + } + +

${productData.description}

\n`; + + let submitButtonTemplate = ""; + if (formStyle == false) { + submitButtonTemplate = `${ + productData.sizes + ? `\n` + : `\n` + }`; + } + + if (!productData.sizes) { + //если товар безразмерный, то возвращаем шаблон + return productCardMainTemplate + "
\n" + submitButtonTemplate; + } else { + //иначе дополнительно генерируем для каждого размера блоки input-label с учётом доступности размера + let productCardSizesTemplate = '
\n'; + + for (let size in productData.sizes) { + let labelPart = ""; + let inputPart = ""; + + if (productData.sizes[size] == false) { + labelPart = `\n`; + inputPart = `\n`; + } else { + labelPart = `\n`; + inputPart = `\n`; + } + + //При вызове формы присутствует выбранный ранее размер, его нужно установить + if (formStyle && productData.checkedSize == size) { + inputPart = inputPart.replace("\n" + + "
\n" + + submitButtonTemplate + ); + } +}; From 472bc5d964a91a601ace88a810da9351a1abd690 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Wed, 1 Jan 2020 15:33:04 +0300 Subject: [PATCH 10/29] Improved hideOrderForm and configured .babelrc file --- js/dev/grid.js | 12 +- js/index.js | 22 +++ js/orderForm/hideOrderForm.js | 10 +- package.json | 5 + yarn.lock | 243 +++++++++++++++++++++++++++++++++- 5 files changed, 283 insertions(+), 9 deletions(-) diff --git a/js/dev/grid.js b/js/dev/grid.js index 2d0e99a..15aa737 100644 --- a/js/dev/grid.js +++ b/js/dev/grid.js @@ -1,9 +1,9 @@ -const grid = document.createElement('div'); -grid.className = 'grid'; +const grid = document.createElement("div"); +grid.className = "grid"; document.body.appendChild(grid); -document.addEventListener('keydown', (event) => { - if (event.ctrlKey && event.code === 'KeyG') { - grid.classList.toggle('grid_visible'); - } +document.addEventListener("keydown", event => { + if (event.ctrlKey && event.code === "KeyG") { + grid.classList.toggle("grid_visible"); + } }); diff --git a/js/index.js b/js/index.js index 4ee23d2..efeb5ca 100644 --- a/js/index.js +++ b/js/index.js @@ -1,3 +1,25 @@ import "./dev/grid"; import "./slider/slider"; import "./popup/popup"; +/* +//функция загузки произвольных данных товаров в JSON с произвольного сервера +let loadData = async function(url) { + try { + //загружаем данные + const response = await fetch(url); + + let parsedData = await response.json(); + + //Регионы parsedData.areas + + return parsedData; + } catch (err) { + alert("Ooops! Something went wrong while loading the data..."); + } +}; + +//Загрузить данные в формате JSON и вывести в bootstrap сетку на front +loadData("https://api.hh.ru/areas/113").then(parsedData => { + //рендерим список полученных объектов-карточек + console.log(parsedData); +}); */ diff --git a/js/orderForm/hideOrderForm.js b/js/orderForm/hideOrderForm.js index 32b05b1..19144f9 100644 --- a/js/orderForm/hideOrderForm.js +++ b/js/orderForm/hideOrderForm.js @@ -1,16 +1,24 @@ export const hideOrderForm = e => { - event.preventDefault(); let target = e.target; while (!target.classList.contains("orderForm")) { target = target.parentNode; + if (target.classList.contains("form")) { + return; + } + + //если клик на кнопку вне формы, то скрыть форму + if (target.classList.contains("orderForm")) { + break; + } //если клик на кнопку "Закрыть", то скрыть форму if (target.classList.contains("form__button-close")) { break; } } + event.preventDefault(); const currentForm = document.querySelector(".orderForm_active"); if (currentForm) { diff --git a/package.json b/package.json index a3d042f..e31b378 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,13 @@ "deploy": "yarn build && gh-pages -d dist" }, "devDependencies": { + "@babel/core": "^7.7.7", + "@babel/plugin-transform-runtime": "^7.7.6", "cssnano": "^4.1.10", "gh-pages": "^2.1.1", "less": "^3.10.3" + }, + "dependencies": { + "@babel/runtime-corejs2": "^7.7.7" } } diff --git a/yarn.lock b/yarn.lock index b011caf..052dae0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,152 @@ # yarn lockfile v1 +"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d" + integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw== + dependencies: + "@babel/highlight" "^7.0.0" + +"@babel/core@^7.7.7": + version "7.7.7" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9" + integrity sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.7.7" + "@babel/helpers" "^7.7.4" + "@babel/parser" "^7.7.7" + "@babel/template" "^7.7.4" + "@babel/traverse" "^7.7.4" + "@babel/types" "^7.7.4" + convert-source-map "^1.7.0" + debug "^4.1.0" + json5 "^2.1.0" + lodash "^4.17.13" + resolve "^1.3.2" + semver "^5.4.1" + source-map "^0.5.0" + +"@babel/generator@^7.7.4", "@babel/generator@^7.7.7": + version "7.7.7" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.7.tgz#859ac733c44c74148e1a72980a64ec84b85f4f45" + integrity sha512-/AOIBpHh/JU1l0ZFS4kiRCBnLi6OTHzh0RPk3h9isBxkkqELtQNFi1Vr/tiG9p1yfoUdKVwISuXWQR+hwwM4VQ== + dependencies: + "@babel/types" "^7.7.4" + jsesc "^2.5.1" + lodash "^4.17.13" + source-map "^0.5.0" + +"@babel/helper-function-name@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e" + integrity sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ== + dependencies: + "@babel/helper-get-function-arity" "^7.7.4" + "@babel/template" "^7.7.4" + "@babel/types" "^7.7.4" + +"@babel/helper-get-function-arity@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0" + integrity sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA== + dependencies: + "@babel/types" "^7.7.4" + +"@babel/helper-module-imports@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz#e5a92529f8888bf319a6376abfbd1cebc491ad91" + integrity sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ== + dependencies: + "@babel/types" "^7.7.4" + +"@babel/helper-plugin-utils@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250" + integrity sha512-CYAOUCARwExnEixLdB6sDm2dIJ/YgEAKDM1MOeMeZu9Ld/bDgVo8aiWrXwcY7OBh+1Ea2uUcVRcxKk0GJvW7QA== + +"@babel/helper-split-export-declaration@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8" + integrity sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug== + dependencies: + "@babel/types" "^7.7.4" + +"@babel/helpers@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.4.tgz#62c215b9e6c712dadc15a9a0dcab76c92a940302" + integrity sha512-ak5NGZGJ6LV85Q1Zc9gn2n+ayXOizryhjSUBTdu5ih1tlVCJeuQENzc4ItyCVhINVXvIT/ZQ4mheGIsfBkpskg== + dependencies: + "@babel/template" "^7.7.4" + "@babel/traverse" "^7.7.4" + "@babel/types" "^7.7.4" + +"@babel/highlight@^7.0.0": + version "7.5.0" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540" + integrity sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ== + dependencies: + chalk "^2.0.0" + esutils "^2.0.2" + js-tokens "^4.0.0" + +"@babel/parser@^7.7.4", "@babel/parser@^7.7.7": + version "7.7.7" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.7.tgz#1b886595419cf92d811316d5b715a53ff38b4937" + integrity sha512-WtTZMZAZLbeymhkd/sEaPD8IQyGAhmuTuvTzLiCFM7iXiVdY0gc0IaI+cW0fh1BnSMbJSzXX6/fHllgHKwHhXw== + +"@babel/plugin-transform-runtime@^7.7.6": + version "7.7.6" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61" + integrity sha512-tajQY+YmXR7JjTwRvwL4HePqoL3DYxpYXIHKVvrOIvJmeHe2y1w4tz5qz9ObUDC9m76rCzIMPyn4eERuwA4a4A== + dependencies: + "@babel/helper-module-imports" "^7.7.4" + "@babel/helper-plugin-utils" "^7.0.0" + resolve "^1.8.1" + semver "^5.5.1" + +"@babel/runtime-corejs2@^7.7.7": + version "7.7.7" + resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.7.7.tgz#44885957b275a5fd70413142eda9cff4662847ac" + integrity sha512-P91T3dFYQL7aj44PxOMIAbo66Ag3NbmXG9fseSYaXxapp3K9XTct5HU9IpTOm2D0AoktKusgqzN5YcSxZXEKBQ== + dependencies: + core-js "^2.6.5" + regenerator-runtime "^0.13.2" + +"@babel/template@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b" + integrity sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw== + dependencies: + "@babel/code-frame" "^7.0.0" + "@babel/parser" "^7.7.4" + "@babel/types" "^7.7.4" + +"@babel/traverse@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558" + integrity sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.7.4" + "@babel/helper-function-name" "^7.7.4" + "@babel/helper-split-export-declaration" "^7.7.4" + "@babel/parser" "^7.7.4" + "@babel/types" "^7.7.4" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.13" + +"@babel/types@^7.7.4": + version "7.7.4" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193" + integrity sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA== + dependencies: + esutils "^2.0.2" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@types/q@^1.5.1": version "1.5.2" resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8" @@ -160,7 +306,7 @@ caseless@~0.12.0: resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw= -chalk@^2.4.1, chalk@^2.4.2: +chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== @@ -233,6 +379,18 @@ concat-map@0.0.1: resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= +convert-source-map@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442" + integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA== + dependencies: + safe-buffer "~5.1.1" + +core-js@^2.6.5: + version "2.6.11" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c" + integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg== + core-util-is@1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" @@ -381,6 +539,13 @@ dashdash@^1.12.0: dependencies: assert-plus "^1.0.0" +debug@^4.1.0: + version "4.1.1" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791" + integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw== + dependencies: + ms "^2.1.1" + define-properties@^1.1.2, define-properties@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1" @@ -498,6 +663,11 @@ esprima@^4.0.0: resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71" integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A== +esutils@^2.0.2: + version "2.0.3" + resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" + integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g== + extend@~3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa" @@ -611,6 +781,11 @@ glob@^7.0.3, glob@^7.1.3: once "^1.3.0" path-is-absolute "^1.0.0" +globals@^11.1.0: + version "11.12.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" + integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== + globby@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c" @@ -813,6 +988,11 @@ isstream@~0.1.2: resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo= +js-tokens@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ== + js-yaml@^3.13.1: version "3.13.1" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847" @@ -826,6 +1006,11 @@ jsbn@~0.1.0: resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513" integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM= +jsesc@^2.5.1: + version "2.5.2" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" + integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== + json-parse-better-errors@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9" @@ -846,6 +1031,13 @@ json-stringify-safe@~5.0.1: resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= +json5@^2.1.0: + version "2.1.1" + resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6" + integrity sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ== + dependencies: + minimist "^1.2.0" + jsonfile@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" @@ -889,7 +1081,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@^4.17.14: +lodash@^4.17.13, lodash@^4.17.14: version "4.17.15" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== @@ -928,6 +1120,11 @@ minimist@0.0.8: resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0= +minimist@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" + integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ= + mkdirp@^0.5.0, mkdirp@~0.5.1: version "0.5.1" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" @@ -935,6 +1132,11 @@ mkdirp@^0.5.0, mkdirp@~0.5.1: dependencies: minimist "0.0.8" +ms@^2.1.1: + version "2.1.2" + resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" + integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== + node-releases@^1.1.40: version "1.1.40" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.40.tgz#a94facfa8e2d612302601ca1361741d529c4515a" @@ -1022,6 +1224,11 @@ path-is-absolute@^1.0.0: resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18= +path-parse@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c" + integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw== + performance-now@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" @@ -1374,6 +1581,11 @@ query-string@^4.1.0: object-assign "^4.1.0" strict-uri-encode "^1.0.0" +regenerator-runtime@^0.13.2: + version "0.13.3" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5" + integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw== + request@^2.83.0: version "2.88.0" resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef" @@ -1405,6 +1617,13 @@ resolve-from@^3.0.0: resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" integrity sha1-six699nWiBvItuZTM17rywoYh0g= +resolve@^1.3.2, resolve@^1.8.1: + version "1.14.1" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.14.1.tgz#9e018c540fcf0c427d678b9931cbf45e984bcaff" + integrity sha512-fn5Wobh4cxbLzuHaE+nphztHy43/b++4M6SsGFC2gB8uYwf0C8LcarfCz1un7UTW8OFQg9iNjZ4xpcFVGebDPg== + dependencies: + path-parse "^1.0.6" + rgb-regex@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1" @@ -1427,6 +1646,11 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.2: resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519" integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg== +safe-buffer@~5.1.1: + version "5.1.2" + resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" + integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== + safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0: version "2.1.2" resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" @@ -1437,6 +1661,11 @@ sax@~1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== +semver@^5.4.1, semver@^5.5.1: + version "5.7.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" + integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== + semver@^6.3.0: version "6.3.0" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" @@ -1456,6 +1685,11 @@ sort-keys@^1.0.0: dependencies: is-plain-obj "^1.0.0" +source-map@^0.5.0: + version "0.5.7" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" + integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= + source-map@^0.6.1, source-map@~0.6.0: version "0.6.1" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" @@ -1566,6 +1800,11 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= +to-fast-properties@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" + integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= + tough-cookie@~2.4.3: version "2.4.3" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781" From 4cfd73c3479dbe3c56c8aafd330278084e596438 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Fri, 3 Jan 2020 14:43:07 +0300 Subject: [PATCH 11/29] Did orderForm inputs validation --- .babelrc | 10 ++++++ css/common/input/input.less | 4 +++ js/index.js | 1 + js/input/InputValidation.js | 68 +++++++++++++++++++++++++++++++++++ js/input/inputHandler.js | 63 ++++++++++++++++++++++++++++++++ js/orderForm/showOrderForm.js | 6 ++++ 6 files changed, 152 insertions(+) create mode 100644 .babelrc create mode 100644 js/input/InputValidation.js create mode 100644 js/input/inputHandler.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..1f67998 --- /dev/null +++ b/.babelrc @@ -0,0 +1,10 @@ +{ + "plugins": [ + [ + "@babel/plugin-transform-runtime", + { + "corejs": 2 + } + ] + ] +} diff --git a/css/common/input/input.less b/css/common/input/input.less index 904a210..eea6b2a 100644 --- a/css/common/input/input.less +++ b/css/common/input/input.less @@ -58,3 +58,7 @@ border-color: @color-red; } } + +.input_invalid { + border: 1px solid #c52929; +} diff --git a/js/index.js b/js/index.js index efeb5ca..cffe542 100644 --- a/js/index.js +++ b/js/index.js @@ -1,6 +1,7 @@ import "./dev/grid"; import "./slider/slider"; import "./popup/popup"; + /* //функция загузки произвольных данных товаров в JSON с произвольного сервера let loadData = async function(url) { diff --git a/js/input/InputValidation.js b/js/input/InputValidation.js new file mode 100644 index 0000000..92be1d1 --- /dev/null +++ b/js/input/InputValidation.js @@ -0,0 +1,68 @@ +//Класс валидации для input. +//Содержит массив validaties, в который помезаются необходимые проверки, +//а также общие для input методы + +export class InputValidation { + constructor() { + this.validities = [this.isEmptyField]; + this.errors = []; + } + + //Провести необходимые валидации + checkValidities(input) { + if (input.touched) { + for (var i = 0; i < this.validities.length; i++) { + const error = this.validities[i](input); + + //Текущие ошибки храним в this.errors + //(может понадобиться, если потребуется выводить информация пользователю) + if (error) this.errors.push(error); + } + + //Обработать ошибки + input.validation.handleErrors(input); + } + } + + //Выставить класс _invalid для input + setInvalid(input) { + if (!input.classList.contains("input_invalid")) { + input.classList.add("input_invalid"); + } + } + + //Убрать класс _invalid для input + removeInvalid(input) { + if (input.classList.contains("input_invalid")) { + input.classList.remove("input_invalid"); + } + } + + //Общая для всех input проверка на пустой ввод + isEmptyField(input) { + if (!input.value.trim()) { + return "Поле не может быть пустым"; + } + } + + //Обработать текущие ошибки валидации + handleErrors(input) { + if (this.errors.length) { + this.setInvalid(input); + //Отладочная функция showErrors выводит ошибки в консль + this.showErrors(); + } else { + this.removeInvalid(input); + } + } + + //Отладочная функция - выводит текущие ошибки в консоль + showErrors() { + if (this.errors.length) { + for (var i = 0; i < this.errors.length; i++) { + console.log(this.errors[i]); + } + this.errors = []; + } + } +} diff --git a/js/input/inputHandler.js b/js/input/inputHandler.js new file mode 100644 index 0000000..f93fc2c --- /dev/null +++ b/js/input/inputHandler.js @@ -0,0 +1,63 @@ +import { InputValidation } from "./InputValidation"; + +//Обработчик для input +export const inputHandler = input => { + //присвоить необходимые для валидации общие свойства и методы для input + input.validation = new InputValidation(); + input.touched = false; + + //В зависимости от функциональной принадлежности input - добавить дополнительные проверки + if (input.name === "email") input.validation.validities.push(isEmailInvalid); + + if (input.name === "operatorCode") + input.validation.validities.push(isOperatorCodeInvalid); + + if (input.name === "telNumber") + input.validation.validities.push(isTelNumberInvalid); + + //Назначить обработчик нажатия на клавиатуру внутри поля input + input.addEventListener("keyup", e => { + //Если переключение при помощи Tab, то не обрабатывать + if (e.code === "Tab") return; + + //отметить, что с текущим input уже работали + if (!input.touched) { + input.touched = true; + } + //Провести проверку вводимого пользователем значения + input.validation.checkValidities(input); + }); +}; + +/////// + +//Проверка валидности ввода email адреса +function isEmailInvalid(input) { + const match = input.value.match( + /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ + ); + + if (!match) { + return "Введите корректный email-адрес"; + } +} + +//Проверка валидности ввода кода оператор телефона +function isOperatorCodeInvalid(input) { + const match = input.value.match(/\b\d{3}\b/); + + if (!match) { + return "Введите валидный цифровой код оператора длиной 3 символа"; + } +} + +//Проверка валидности ввода номера телефона +function isTelNumberInvalid(input) { + const match = input.value.match(/\b\d{7}\b/); + + if (!match) { + return "Введите валидный номер телефона длиной 7 символов"; + } +} + +/////// diff --git a/js/orderForm/showOrderForm.js b/js/orderForm/showOrderForm.js index a6c05ea..914e539 100644 --- a/js/orderForm/showOrderForm.js +++ b/js/orderForm/showOrderForm.js @@ -3,6 +3,7 @@ import { renderOrderForm } from "./renderOrderForm"; import { hideOrderForm } from "./hideOrderForm"; import { orderFormTemplate } from "../templates/orderFormTemplate"; +import { inputHandler } from "../input/inputHandler"; export const showOrderForm = productData => { //Получить HTML из шаблона формы @@ -18,4 +19,9 @@ export const showOrderForm = productData => { //Назначить обработчик клика по области вне формы document.querySelector(".orderForm").addEventListener("click", hideOrderForm); + + //После рендеринга формы - обработать все input + document.querySelectorAll("input").forEach(input => { + inputHandler(input); + }); }; From aee6a5a5521029e832d3a4c1f3252b5e18091dd7 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Sat, 4 Jan 2020 21:46:18 +0300 Subject: [PATCH 12/29] Added select logic and async function for getting data from server --- .gitignore | 2 +- css/common/select/select.less | 47 +++++++++++++++++++++++++++---- js/common/getDataAsync.js | 15 ++++++++++ js/index.js | 23 --------------- js/orderForm/showOrderForm.js | 5 ++++ js/select/renderSelectOptions.js | 10 +++++++ js/select/selectHandler.js | 42 +++++++++++++++++++++++++++ js/templates/orderFormTemplate.js | 6 ++-- 8 files changed, 117 insertions(+), 33 deletions(-) create mode 100644 js/common/getDataAsync.js create mode 100644 js/select/renderSelectOptions.js create mode 100644 js/select/selectHandler.js diff --git a/.gitignore b/.gitignore index 2691d9a..97e6428 100644 --- a/.gitignore +++ b/.gitignore @@ -5,5 +5,5 @@ yarn-error.log .idea .cache .DS_Store - +js/dev/hhApiAreas.json .vscode/ \ No newline at end of file diff --git a/css/common/select/select.less b/css/common/select/select.less index 863276e..c469ab8 100644 --- a/css/common/select/select.less +++ b/css/common/select/select.less @@ -7,17 +7,17 @@ display: inline-block; box-sizing: border-box; background-color: @color-light-1; - padding: 9px 10px; + padding: 9px 30px 9px 10px; border: 1px solid #c5c9ca; font: 14px/ (@control-height - 18px) Arial, sans-serif; color: @color-dark-1; -webkit-appearance: none; -moz-appearance: none; appearance: none; + } - &:hover { - cursor: pointer; - } + &:hover { + cursor: pointer; } &:before { @@ -41,9 +41,46 @@ border-width: 5px 5px 0 5px; border-color: #c5c9ca transparent transparent transparent; position: absolute; - top: 50%; + top: 45%; right: 10px; z-index: 1; pointer-events: none; } } + +.select_active { + &:after { + transform: matrix(1, 0, 0, -1, 0, 0); + top: 5%; + } +} + +.select_active > select { + background-color: @color-grey; +} + +.select-field__option { + display: none; +} + +.options-container { + padding: 23px 0px; + height: 290px; + box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); + overflow: hidden; + box-sizing: border-box; + + &__item { + padding: 11px 12px; + height: 38px; + line-height: 16px; + box-sizing: border-box; + font-size: 14px; + display: block; + + &:hover { + background-color: @color-primary; + color: white; + } + } +} diff --git a/js/common/getDataAsync.js b/js/common/getDataAsync.js new file mode 100644 index 0000000..282bbae --- /dev/null +++ b/js/common/getDataAsync.js @@ -0,0 +1,15 @@ +//функция загузки произвольных данных в JSON с произвольного сервера +export const getDataAsync = async function(url) { + try { + //загружаем данные + const response = await fetch(url); + + let parsedData = await response.json(); + + //Регионы parsedData.areas + + return parsedData; + } catch (err) { + alert("Не удалось получить данные..."); + } +}; diff --git a/js/index.js b/js/index.js index cffe542..4ee23d2 100644 --- a/js/index.js +++ b/js/index.js @@ -1,26 +1,3 @@ import "./dev/grid"; import "./slider/slider"; import "./popup/popup"; - -/* -//функция загузки произвольных данных товаров в JSON с произвольного сервера -let loadData = async function(url) { - try { - //загружаем данные - const response = await fetch(url); - - let parsedData = await response.json(); - - //Регионы parsedData.areas - - return parsedData; - } catch (err) { - alert("Ooops! Something went wrong while loading the data..."); - } -}; - -//Загрузить данные в формате JSON и вывести в bootstrap сетку на front -loadData("https://api.hh.ru/areas/113").then(parsedData => { - //рендерим список полученных объектов-карточек - console.log(parsedData); -}); */ diff --git a/js/orderForm/showOrderForm.js b/js/orderForm/showOrderForm.js index 914e539..b529628 100644 --- a/js/orderForm/showOrderForm.js +++ b/js/orderForm/showOrderForm.js @@ -4,6 +4,7 @@ import { renderOrderForm } from "./renderOrderForm"; import { hideOrderForm } from "./hideOrderForm"; import { orderFormTemplate } from "../templates/orderFormTemplate"; import { inputHandler } from "../input/inputHandler"; +import { selectHandler } from "../select/selectHandler"; export const showOrderForm = productData => { //Получить HTML из шаблона формы @@ -24,4 +25,8 @@ export const showOrderForm = productData => { document.querySelectorAll("input").forEach(input => { inputHandler(input); }); + + //Обработать селектор города + const select = document.querySelector(".select__select-field"); + select.addEventListener("click", selectHandler); }; diff --git a/js/select/renderSelectOptions.js b/js/select/renderSelectOptions.js new file mode 100644 index 0000000..dd9f0fd --- /dev/null +++ b/js/select/renderSelectOptions.js @@ -0,0 +1,10 @@ +export const renderSelectOptions = dataList => { + let optionsContainer = document.createElement("div"); + optionsContainer.classList.add("options-container"); + + dataList.forEach(dataItem => { + optionsContainer.innerHTML += `\n`; + }); + + return optionsContainer; +}; diff --git a/js/select/selectHandler.js b/js/select/selectHandler.js new file mode 100644 index 0000000..5e52d22 --- /dev/null +++ b/js/select/selectHandler.js @@ -0,0 +1,42 @@ +import { getDataAsync } from "../common/getDataAsync"; +import { renderSelectOptions } from "./renderSelectOptions"; + +export const selectHandler = e => { + let target = e.target; + while (!target.classList.contains("form")) { + if (target.classList.contains("select_active")) { + target.classList.remove("select_active"); + document.querySelector(".options-container").remove(); + return; + } + + if (target.classList.contains("select")) break; + target = target.parentNode; + } + + target.classList.add("select_active"); + + //Получить данные адресов для селектора + getDataAsync("https://api.hh.ru/areas/113").then(parsedData => { + //Для примера берем Московскую область, 7 городов + const areas = parsedData.areas[21].areas.slice(0, 7); + + //Начать рендеринг опций селектора + const optionsContainer = renderSelectOptions(areas); + target.append(optionsContainer); + + //Назначить обработчик клика по опции в селекторе + document.querySelectorAll(".options-container__item").forEach(option => { + option.addEventListener("click", e => { + const checkedArea = e.target.innerHTML; + document.querySelector(".select-field__option").innerHTML = checkedArea; + + //Скрыть выбор опций селектора + setTimeout(() => { + document.querySelector(".select").classList.remove("select_active"); + document.querySelector(".options-container").remove(); + }, 0); + }); + }); + }); +}; diff --git a/js/templates/orderFormTemplate.js b/js/templates/orderFormTemplate.js index 08fc977..f851005 100644 --- a/js/templates/orderFormTemplate.js +++ b/js/templates/orderFormTemplate.js @@ -53,10 +53,8 @@ export const orderFormTemplate = productData => {

Адрес

- +
From 08e14d6ca2d4c586da9e7610dffa5fb183a6296f Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Sat, 4 Jan 2020 23:02:23 +0300 Subject: [PATCH 13/29] Added textarea validation --- css/common/textarea/textarea.less | 4 ++++ js/input/InputValidation.js | 9 ++++++++- js/orderForm/showOrderForm.js | 6 ++++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/css/common/textarea/textarea.less b/css/common/textarea/textarea.less index aaf9ce6..c350866 100644 --- a/css/common/textarea/textarea.less +++ b/css/common/textarea/textarea.less @@ -10,6 +10,10 @@ color: #333333; resize: none; + &_invalid { + border: 1px solid #c52929; + } + ::-webkit-input-placeholder { color: #aeb5b9; /* Chrome, Safari, Opera */ } diff --git a/js/input/InputValidation.js b/js/input/InputValidation.js index 92be1d1..fa591be 100644 --- a/js/input/InputValidation.js +++ b/js/input/InputValidation.js @@ -4,7 +4,7 @@ export class InputValidation { constructor() { - this.validities = [this.isEmptyField]; + this.validities = [this.isEmptyField, this.isBigString]; this.errors = []; } @@ -45,6 +45,13 @@ export class InputValidation { } } + //Общая для всех input проверка на максимальную длину строки + isBigString(input) { + if (input.value.length > 100) { + return "Максимальная длина строки 100 символов"; + } + } + //Обработать текущие ошибки валидации handleErrors(input) { if (this.errors.length) { diff --git a/js/orderForm/showOrderForm.js b/js/orderForm/showOrderForm.js index b529628..ab60b4b 100644 --- a/js/orderForm/showOrderForm.js +++ b/js/orderForm/showOrderForm.js @@ -4,6 +4,7 @@ import { renderOrderForm } from "./renderOrderForm"; import { hideOrderForm } from "./hideOrderForm"; import { orderFormTemplate } from "../templates/orderFormTemplate"; import { inputHandler } from "../input/inputHandler"; +import { textareaHandler } from "../textarea/textareaHandler"; import { selectHandler } from "../select/selectHandler"; export const showOrderForm = productData => { @@ -29,4 +30,9 @@ export const showOrderForm = productData => { //Обработать селектор города const select = document.querySelector(".select__select-field"); select.addEventListener("click", selectHandler); + + //Обработать textarea для ввода адреса + document.querySelectorAll("textarea").forEach(textarea => { + textareaHandler(textarea); + }); }; From 4ccb95b20fd15ca8a138e24e99b5223cea4eeef8 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Sun, 5 Jan 2020 00:00:09 +0300 Subject: [PATCH 14/29] Added common class for field validation --- .../fieldValidation.js} | 50 ++++++++++--------- js/input/inputHandler.js | 4 +- js/textarea/textareaHandler.js | 20 ++++++++ 3 files changed, 48 insertions(+), 26 deletions(-) rename js/{input/InputValidation.js => common/fieldValidation.js} (56%) create mode 100644 js/textarea/textareaHandler.js diff --git a/js/input/InputValidation.js b/js/common/fieldValidation.js similarity index 56% rename from js/input/InputValidation.js rename to js/common/fieldValidation.js index fa591be..0be41d7 100644 --- a/js/input/InputValidation.js +++ b/js/common/fieldValidation.js @@ -1,18 +1,18 @@ -//Класс валидации для input. -//Содержит массив validaties, в который помезаются необходимые проверки, -//а также общие для input методы +//Класс валидации для field. +//Содержит массив validaties, в который помещаются необходимые проверки, +//а также общие для field методы -export class InputValidation { +export class FieldValidation { constructor() { this.validities = [this.isEmptyField, this.isBigString]; this.errors = []; } //Провести необходимые валидации - checkValidities(input) { - if (input.touched) { + checkValidities(field) { + if (field.touched) { for (var i = 0; i < this.validities.length; i++) { - const error = this.validities[i](input); + const error = this.validities[i](field); //Текущие ошибки храним в this.errors //(может понадобиться, если потребуется выводить информация пользователю) @@ -20,46 +20,48 @@ export class InputValidation { } //Обработать ошибки - input.validation.handleErrors(input); + field.validation.handleErrors(field); } } - //Выставить класс _invalid для input - setInvalid(input) { - if (!input.classList.contains("input_invalid")) { - input.classList.add("input_invalid"); + //Выставить класс _invalid для field + setInvalid(field) { + const className = field.tagName.toLowerCase(); + if (!field.classList.contains(`${className}_invalid`)) { + field.classList.add(`${className}_invalid`); } } //Убрать класс _invalid для input - removeInvalid(input) { - if (input.classList.contains("input_invalid")) { - input.classList.remove("input_invalid"); + removeInvalid(field) { + const className = field.tagName.toLowerCase(); + if (field.classList.contains(`${className}_invalid`)) { + field.classList.remove(`${className}_invalid`); } } - //Общая для всех input проверка на пустой ввод - isEmptyField(input) { - if (!input.value.trim()) { + //Общая для всех field проверка на пустой ввод + isEmptyField(field) { + if (!field.value.trim()) { return "Поле не может быть пустым"; } } - //Общая для всех input проверка на максимальную длину строки - isBigString(input) { - if (input.value.length > 100) { + //Общая для всех field проверка на максимальную длину строки + isBigString(field) { + if (field.value.length > 100) { return "Максимальная длина строки 100 символов"; } } //Обработать текущие ошибки валидации - handleErrors(input) { + handleErrors(field) { if (this.errors.length) { - this.setInvalid(input); + this.setInvalid(field); //Отладочная функция showErrors выводит ошибки в консль this.showErrors(); } else { - this.removeInvalid(input); + this.removeInvalid(field); } } diff --git a/js/input/inputHandler.js b/js/input/inputHandler.js index f93fc2c..6797428 100644 --- a/js/input/inputHandler.js +++ b/js/input/inputHandler.js @@ -1,9 +1,9 @@ -import { InputValidation } from "./InputValidation"; +import { FieldValidation } from "../common/FieldValidation"; //Обработчик для input export const inputHandler = input => { //присвоить необходимые для валидации общие свойства и методы для input - input.validation = new InputValidation(); + input.validation = new FieldValidation(); input.touched = false; //В зависимости от функциональной принадлежности input - добавить дополнительные проверки diff --git a/js/textarea/textareaHandler.js b/js/textarea/textareaHandler.js new file mode 100644 index 0000000..16f38d4 --- /dev/null +++ b/js/textarea/textareaHandler.js @@ -0,0 +1,20 @@ +import { FieldValidation } from "../common/FieldValidation"; + +//обработчик для textarea +export const textareaHandler = textarea => { + textarea.validation = new FieldValidation(); + textarea.touched = false; + + //Назначить обработчик нажатия на клавиатуру внутри поля input + textarea.addEventListener("keyup", e => { + //Если переключение при помощи Tab, то не обрабатывать + if (e.code === "Tab") return; + + //отметить, что с текущим textarea уже работали + if (!textarea.touched) { + textarea.touched = true; + } + //Провести проверку вводимого пользователем значения + textarea.validation.checkValidities(textarea); + }); +}; From 402903e8ade8a69245088cf8996a73bacf5adf80 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Sun, 5 Jan 2020 13:03:35 +0300 Subject: [PATCH 15/29] Did MVP-project --- css/common/input/input.less | 6 ++- js/common/fieldValidation.js | 3 ++ js/orderForm/prepareToSubmit.js | 65 +++++++++++++++++++++++++++++++ js/orderForm/showOrderForm.js | 14 +++++-- js/templates/orderFormTemplate.js | 10 ++--- 5 files changed, 88 insertions(+), 10 deletions(-) create mode 100644 js/orderForm/prepareToSubmit.js diff --git a/css/common/input/input.less b/css/common/input/input.less index eea6b2a..3a78ba0 100644 --- a/css/common/input/input.less +++ b/css/common/input/input.less @@ -59,6 +59,8 @@ } } -.input_invalid { - border: 1px solid #c52929; +.input { + &_invalid { + border: 1px solid #c52929; + } } diff --git a/js/common/fieldValidation.js b/js/common/fieldValidation.js index 0be41d7..12307aa 100644 --- a/js/common/fieldValidation.js +++ b/js/common/fieldValidation.js @@ -6,6 +6,7 @@ export class FieldValidation { constructor() { this.validities = [this.isEmptyField, this.isBigString]; this.errors = []; + this.isInvalid = true; } //Провести необходимые валидации @@ -30,6 +31,7 @@ export class FieldValidation { if (!field.classList.contains(`${className}_invalid`)) { field.classList.add(`${className}_invalid`); } + this.isInvalid = true; } //Убрать класс _invalid для input @@ -38,6 +40,7 @@ export class FieldValidation { if (field.classList.contains(`${className}_invalid`)) { field.classList.remove(`${className}_invalid`); } + this.isInvalid = false; } //Общая для всех field проверка на пустой ввод diff --git a/js/orderForm/prepareToSubmit.js b/js/orderForm/prepareToSubmit.js new file mode 100644 index 0000000..ba35756 --- /dev/null +++ b/js/orderForm/prepareToSubmit.js @@ -0,0 +1,65 @@ +export const prepareToSubmit = optData => { + const { productData, inputs, textarea } = optData; + + //Контакная информация и расширенный адрес - обязательные поля. + //проверить, все ли требуемые элементы прошли валидацию + for (let i = 0; i < inputs.length; i++) { + if (inputs[i].validation.isInvalid) { + console.log("Заполните требуемые поля формы"); + return; + } + } + if (textarea.validation.isInvalid) { + console.log("Заполните требуемые поля формы"); + return; + } + + //Если всё ОК, то подготовить данные для отправки + //Способ получения + const deliveryMethod = document.querySelector( + "input[name=deliveryMethod]:checked" + ).value; + + //Город + const cityLocataion = document.querySelector(".select-field__option") + .innerHTML; + + //Способ оплаты + const paymentMethod = document.querySelector( + "input[name=paymentMethod]:checked" + ).value; + + //СМС уведомления + let smsNotification = false; + if (document.querySelector("input[name=smsNotification]:checked")) { + smsNotification = true; + } + + //Пользователь может изменить размер в форме. + //На случай изменений, сохранить последний выбор + const checkedSize = document.querySelector(".radio-button-size-item:checked") + .value; + productData.checkedSize = checkedSize; + + //Данные формы + let formData = {}; + formData.contactInfo = {}; + for (let i = 0; i < inputs.length; i++) { + formData.contactInfo[inputs[i].name] = inputs[i].value; + } + formData.contactInfo[textarea.name] = textarea.value; + formData.deliveryMethod = deliveryMethod; + formData.cityLocataion = cityLocataion; + formData.paymentMethod = paymentMethod; + formData.smsNotification = smsNotification; + formData.productData = productData; + + console.log(formData); + console.log("Спасибо!"); + + const currentForm = document.querySelector(".orderForm_active"); + currentForm.classList.remove("orderForm_active"); + setTimeout(() => { + currentForm.remove(); + }, 300); +}; diff --git a/js/orderForm/showOrderForm.js b/js/orderForm/showOrderForm.js index ab60b4b..b4b508b 100644 --- a/js/orderForm/showOrderForm.js +++ b/js/orderForm/showOrderForm.js @@ -2,6 +2,7 @@ import { renderOrderForm } from "./renderOrderForm"; import { hideOrderForm } from "./hideOrderForm"; +import { prepareToSubmit } from "./prepareToSubmit"; import { orderFormTemplate } from "../templates/orderFormTemplate"; import { inputHandler } from "../input/inputHandler"; import { textareaHandler } from "../textarea/textareaHandler"; @@ -23,7 +24,8 @@ export const showOrderForm = productData => { document.querySelector(".orderForm").addEventListener("click", hideOrderForm); //После рендеринга формы - обработать все input - document.querySelectorAll("input").forEach(input => { + const inputs = document.querySelectorAll(".js-input-required"); + inputs.forEach(input => { inputHandler(input); }); @@ -32,7 +34,13 @@ export const showOrderForm = productData => { select.addEventListener("click", selectHandler); //Обработать textarea для ввода адреса - document.querySelectorAll("textarea").forEach(textarea => { - textareaHandler(textarea); + const textarea = document.querySelector("textarea"); + textareaHandler(textarea); + + //Назначать клик на кнопку "оформить заказ" + const submitButton = document.querySelector(".form__button-submit"); + submitButton.addEventListener("click", e => { + e.preventDefault(); + prepareToSubmit({ inputs, textarea, productData }); }); }; diff --git a/js/templates/orderFormTemplate.js b/js/templates/orderFormTemplate.js index f851005..9edee8f 100644 --- a/js/templates/orderFormTemplate.js +++ b/js/templates/orderFormTemplate.js @@ -17,16 +17,16 @@ export const orderFormTemplate = productData => {

Оформление заказа

Контактное лицо

- - + +
- - +
@@ -70,7 +70,7 @@ export const orderFormTemplate = productData => {
+ id="paymentOnline" checked>
From 9275aef9f4cbc19bd11508ee5bf9587a76df67fa Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Sun, 5 Jan 2020 23:37:09 +0300 Subject: [PATCH 16/29] Improved options-container for select and fixed bugs Did position for options-container = absolute. Fixed bug with checked size in prepareToSubmit. --- css/common/select/select.less | 4 +++- js/orderForm/prepareToSubmit.js | 16 +++++++++++----- js/select/selectHandler.js | 11 +++++++++++ 3 files changed, 25 insertions(+), 6 deletions(-) diff --git a/css/common/select/select.less b/css/common/select/select.less index c469ab8..71cc383 100644 --- a/css/common/select/select.less +++ b/css/common/select/select.less @@ -51,7 +51,6 @@ .select_active { &:after { transform: matrix(1, 0, 0, -1, 0, 0); - top: 5%; } } @@ -64,8 +63,11 @@ } .options-container { + position: absolute; padding: 23px 0px; height: 290px; + background-color: @color-light; + z-index: 1000; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); overflow: hidden; box-sizing: border-box; diff --git a/js/orderForm/prepareToSubmit.js b/js/orderForm/prepareToSubmit.js index ba35756..9cf65cb 100644 --- a/js/orderForm/prepareToSubmit.js +++ b/js/orderForm/prepareToSubmit.js @@ -5,12 +5,16 @@ export const prepareToSubmit = optData => { //проверить, все ли требуемые элементы прошли валидацию for (let i = 0; i < inputs.length; i++) { if (inputs[i].validation.isInvalid) { - console.log("Заполните требуемые поля формы"); + //Указать на первое поле, которое не валидно + inputs[i].touched = true; + inputs[i].validation.checkValidities(inputs[i]); return; } } if (textarea.validation.isInvalid) { - console.log("Заполните требуемые поля формы"); + //Указать, что расширенный адрес не прошёл валидацию + textarea.touched = true; + textarea.validation.checkValidities(textarea); return; } @@ -37,9 +41,10 @@ export const prepareToSubmit = optData => { //Пользователь может изменить размер в форме. //На случай изменений, сохранить последний выбор - const checkedSize = document.querySelector(".radio-button-size-item:checked") - .value; - productData.checkedSize = checkedSize; + const checkedSize = document.querySelector(".radio-button-size-item:checked"); + if (checkedSize) { + productData.checkedSize = checkedSize.value; + } //Данные формы let formData = {}; @@ -57,6 +62,7 @@ export const prepareToSubmit = optData => { console.log(formData); console.log("Спасибо!"); + //Скрыть форму const currentForm = document.querySelector(".orderForm_active"); currentForm.classList.remove("orderForm_active"); setTimeout(() => { diff --git a/js/select/selectHandler.js b/js/select/selectHandler.js index 5e52d22..a673b01 100644 --- a/js/select/selectHandler.js +++ b/js/select/selectHandler.js @@ -1,5 +1,6 @@ import { getDataAsync } from "../common/getDataAsync"; import { renderSelectOptions } from "./renderSelectOptions"; +import { getCoords } from "../common/getCoords"; export const selectHandler = e => { let target = e.target; @@ -14,6 +15,12 @@ export const selectHandler = e => { target = target.parentNode; } + //Получить координаты select-field для позиционирования контейнера option + let pivotCoords = getCoords(target); + + //Сместить координату top на высоту select-field + pivotCoords.top += target.offsetHeight; + target.classList.add("select_active"); //Получить данные адресов для селектора @@ -23,6 +30,10 @@ export const selectHandler = e => { //Начать рендеринг опций селектора const optionsContainer = renderSelectOptions(areas); + optionsContainer.top = pivotCoords.top + "px"; + optionsContainer.left = pivotCoords.left + "px"; + optionsContainer.style.width = target.offsetWidth + "px"; + target.append(optionsContainer); //Назначить обработчик клика по опции в селекторе From 3c3e4d55d3879c3dd45cfbe73e6f38829677ac14 Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Mon, 6 Jan 2020 12:15:49 +0300 Subject: [PATCH 17/29] Prepared to deploy GP --- css/blocks/form/form.less | 4 ++-- js/common/getDocumentHeight.js | 12 ++++++++++++ js/models/productCardModel.js | 12 ++++++------ js/orderForm/renderOrderForm.js | 10 ++++++++++ js/templates/productCardTemplate.js | 2 +- 5 files changed, 31 insertions(+), 9 deletions(-) create mode 100644 js/common/getDocumentHeight.js diff --git a/css/blocks/form/form.less b/css/blocks/form/form.less index 78aa32c..f9bc88c 100644 --- a/css/blocks/form/form.less +++ b/css/blocks/form/form.less @@ -2,6 +2,7 @@ background-color: @color-light; margin: 5px auto; max-width: 320px; + position: relative; @media @screen-gt-s { max-width: 768px; @@ -70,14 +71,13 @@ } .orderForm { - position: fixed; + position: absolute; top: 0; z-index: 100; overflow: hidden; opacity: 0; transition: all 300ms linear; width: 100%; - height: 100%; background-color: rgba(0, 0, 0, 0.5); &_active { diff --git a/js/common/getDocumentHeight.js b/js/common/getDocumentHeight.js new file mode 100644 index 0000000..01e79fb --- /dev/null +++ b/js/common/getDocumentHeight.js @@ -0,0 +1,12 @@ +export const getDocumentHeight = () => { + const documentHeight = Math.max( + document.body.scrollHeight, + document.documentElement.scrollHeight, + document.body.offsetHeight, + document.documentElement.offsetHeight, + document.body.clientHeight, + document.documentElement.clientHeight + ); + + return documentHeight; +}; diff --git a/js/models/productCardModel.js b/js/models/productCardModel.js index e8bc393..aa7facf 100644 --- a/js/models/productCardModel.js +++ b/js/models/productCardModel.js @@ -3,21 +3,21 @@ export let productsData = [ id: "1", name: "Зонт", description: "Красный зонт с логотипом HH", - image: "product-1.e0fb58ad.jpg", + image: "product-1.jpg", price: "1 990" }, { id: "2", name: "Сумка", description: "Красная сумка с логотипом HH", - image: "product-2.59eda275.jpg", + image: "product-2.jpg", price: "290" }, { id: "3", name: "Шлепанцы", description: "Красные шлепанцы с логотипом HH", - image: "product-3.83c9f311.jpg", + image: "product-3.jpg", price: "790", sizes: { xs: true, @@ -32,7 +32,7 @@ export let productsData = [ id: "4", name: "Футболка", description: "Красная футболка с логотипом HH", - image: "product-4.9853c0ec.jpg", + image: "product-4.jpg", price: "690", salePrice: "390", sizes: { @@ -48,7 +48,7 @@ export let productsData = [ id: "5", name: "Толстовка", description: "Красная толстовка с логотипом HH", - image: "product-5.593f3620.jpg", + image: "product-5.jpg", price: "3 990", sizes: { xs: true, @@ -63,7 +63,7 @@ export let productsData = [ id: "6", name: "Подушка", description: "Красная подушка с логотипом HH", - image: "product-6.5aa0fac8.jpg", + image: "product-6.jpg", price: "990" } ]; diff --git a/js/orderForm/renderOrderForm.js b/js/orderForm/renderOrderForm.js index 8222e5c..bd33b40 100644 --- a/js/orderForm/renderOrderForm.js +++ b/js/orderForm/renderOrderForm.js @@ -1,3 +1,5 @@ +import { getDocumentHeight } from "../common/getDocumentHeight"; + //Рендер формы заказа export const renderOrderForm = orderFormHTML => { @@ -7,7 +9,15 @@ export const renderOrderForm = orderFormHTML => { orderForm.classList.add("orderForm"); orderForm.innerHTML = orderFormHTML; + //Получить и присвоить высоту документа + const documentHeight = getDocumentHeight(); + orderForm.style.height = documentHeight + "px"; document.body.append(orderForm); + + //Показать форму по центру документа + const form = document.querySelector(".form"); + form.style.top = (documentHeight - form.offsetHeight) / 2 + "px"; + setTimeout(() => { orderForm.classList.add("orderForm_active"); }, 0); diff --git a/js/templates/productCardTemplate.js b/js/templates/productCardTemplate.js index d25ea0a..e432040 100644 --- a/js/templates/productCardTemplate.js +++ b/js/templates/productCardTemplate.js @@ -11,7 +11,7 @@ export const productCardTemplate = (productData, formStyle = false) => { ${productData.name} ${ From 8023186202385e087411f224f9058afcc5d0669d Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Thu, 9 Jan 2020 16:23:09 +0300 Subject: [PATCH 18/29] Improved popup.js and related popup files -improved click from active popup (if click on others products, then show them). Also if click on document -> hide active popup. -improved code structure and files structure --- .../{getPopupShifts.js => getPopupCoords.js} | 22 +++- js/popup/{renderPopup.js => getPopupElem.js} | 9 +- js/popup/hidePopup.js | 20 +--- js/popup/popup.js | 11 +- js/popup/showPopup.js | 111 +++++++++--------- 5 files changed, 89 insertions(+), 84 deletions(-) rename js/popup/{getPopupShifts.js => getPopupCoords.js} (50%) rename js/popup/{renderPopup.js => getPopupElem.js} (72%) diff --git a/js/popup/getPopupShifts.js b/js/popup/getPopupCoords.js similarity index 50% rename from js/popup/getPopupShifts.js rename to js/popup/getPopupCoords.js index 847e049..93a694d 100644 --- a/js/popup/getPopupShifts.js +++ b/js/popup/getPopupCoords.js @@ -1,4 +1,7 @@ -export const getPopupShifts = () => { +import { getCoords } from "../common/getCoords"; + +//Получает на вход опорный элемент, относительно которого нужно считать координаты попапа +export const getPopupCoords = pivotElement => { //Common const popupBorderWidth = 1; const screenGreaterS = 768; @@ -18,19 +21,30 @@ export const getPopupShifts = () => { //получить текущее разрешение экрана const screenWidth = window.innerWidth; - //Рассчитать смещение + //Если попап для Mobile, то вычислять координты не нужно + if (screenWidth < screenGreaterS) { + return null; + } + //Иначе рассчитать + + //Получить опорные координаты опорного элемента для размещения попапа {left, top} + let pivotCoords = getCoords(pivotElement); //Tablet if (screenWidth >= screenGreaterS && screenWidth < screenGreaterM) { shiftLeft = popupBorderWidth + popupPaddingLeftTablet; shiftTop = popupBorderWidth + popupPaddingTopTablet; - return { shiftLeft, shiftTop }; } //Desktop if (screenWidth >= screenGreaterM) { shiftLeft = popupBorderWidth + popupPaddingLeftDesktop; shiftTop = popupBorderWidth + popupPaddingTopDesktop; - return { shiftLeft, shiftTop }; } + + let popupCoords = {}; + popupCoords.left = pivotCoords.left - shiftLeft; + popupCoords.top = pivotCoords.top - shiftTop; + + return popupCoords; }; diff --git a/js/popup/renderPopup.js b/js/popup/getPopupElem.js similarity index 72% rename from js/popup/renderPopup.js rename to js/popup/getPopupElem.js index e4a884d..1b32144 100644 --- a/js/popup/renderPopup.js +++ b/js/popup/getPopupElem.js @@ -1,6 +1,6 @@ -//Рендер попапа карточки продукта +//Возвращает элемент попапа согласно данным о продукте -export const renderPopup = (popupHTML, coords) => { +export const getPopupElem = (popupHTML, coords) => { const popup = document.createElement("div"); popup.classList.add("js-popup"); @@ -19,8 +19,5 @@ export const renderPopup = (popupHTML, coords) => { popup.style.transform = "translate(-50%, -50%)"; } - document.body.append(popup); - setTimeout(() => { - popup.classList.add("popup_active"); - }, 15); + return popup; }; diff --git a/js/popup/hidePopup.js b/js/popup/hidePopup.js index 1931b4d..d21eb14 100644 --- a/js/popup/hidePopup.js +++ b/js/popup/hidePopup.js @@ -1,20 +1,4 @@ -export const hidePopup = e => { - let target = e.target; - - while (!target.classList.contains("body")) { - target = target.parentNode; - - //если клик по активному попапу, то ничего не делать - if (target.classList.contains("popup_active")) { - return; - } - - //если клик на кнопку "Закрыть", то скрыть попап - if (target.classList.contains("popup-container__button-close")) { - break; - } - } - +export const hidePopup = () => { const currentPopup = document.querySelector(".popup_active"); if (currentPopup) { @@ -22,5 +6,5 @@ export const hidePopup = e => { setTimeout(() => { currentPopup.remove(); }, 300); - } + } else return; }; diff --git a/js/popup/popup.js b/js/popup/popup.js index 22e8e5a..1ec6da2 100644 --- a/js/popup/popup.js +++ b/js/popup/popup.js @@ -7,5 +7,12 @@ document.querySelectorAll(".product-card").forEach(productCard => { }); //Назначить обработчик клика по документу -//(закрытие попапа при клике не по нему) -document.addEventListener("click", hidePopup); +//(закрытие попапа при клике не по нему и не по другой карточке товара) +document.addEventListener("click", e => { + let target = e.target; + if (target.closest(".popup_active")) { + return; + } else { + hidePopup(); + } +}); diff --git a/js/popup/showPopup.js b/js/popup/showPopup.js index 63f5a24..d7bf2d2 100644 --- a/js/popup/showPopup.js +++ b/js/popup/showPopup.js @@ -1,25 +1,37 @@ import { productsData } from "../models/productCardModel"; import { productCardPopupTemplate } from "../templates/productCardPopupTemplate"; import { hidePopup } from "./hidePopup"; -import { renderPopup } from "./renderPopup"; -import { getPopupShifts } from "./getPopupShifts"; -import { getCoords } from "../common/getCoords"; +import { getPopupElem } from "./getPopupElem"; +import { getPopupCoords } from "./getPopupCoords"; import { showOrderForm } from "../orderForm/showOrderForm"; -const screenGreaterS = 768; export const showPopup = e => { - //если попап уже отображается, то выйти - const currentPopup = document.querySelector(".popup_active"); - if (currentPopup) { + let target = e.target; + + //Если клик активному попапу, то ничего не делать + if (target.closest(".popup_active")) { return; } - let target = e.target; + + //Если клик кнопке закрыть, то скрыть попап + if (target.closest(".popup-container__button-close")) { + hidePopup(); + return; + } + + //если клик по другой карточке продукта, то скрыть текущий попап и отрисовать другой + if ( + target.closest(".product-card") && + document.querySelector(".popup_active") + ) { + hidePopup(); + } while (!target.classList.contains("product-card")) { target = target.parentNode; } - //Если клик был по карточке, то получить информацию по продукту из модели + //Получить информацию по продукту из модели const productData = productsData.find( product => product.id === target.dataset.productId ); @@ -27,57 +39,48 @@ export const showPopup = e => { //Получить HTML из шаблона попапа для данного продукта const popupHTML = productCardPopupTemplate(productData); - //получить текущие размеры окна - const screenWidth = window.innerWidth; - //Если попап не для Mobile, то вычислить координты размещения - if (screenWidth >= screenGreaterS) { - //Получить опорные координаты (img) для размещения попапа {left, top} - var pivotCoords = getCoords(target); - - //Получить смещение координат в зависимости от размера попапа (tablet, desktop) - var popupShifts = getPopupShifts(); - - pivotCoords.left -= popupShifts.shiftLeft; - pivotCoords.top -= popupShifts.shiftTop; - } + const popupCoords = getPopupCoords(target); //Рендер попапа на странице - renderPopup(popupHTML, pivotCoords); + const popup = getPopupElem(popupHTML, popupCoords); + document.body.append(popup); + setTimeout(() => { + popup.classList.add("popup_active"); - //Назначить обработчик клика по кнопке "Закрыть", чтобы скрывать попап - document - .querySelector(".popup-container__button-close") - .addEventListener("click", hidePopup); - - //Назначить обработчик клика по размеру (если товар не безразмерный) - if (productData.sizes) { + //Назначить обработчик клика по кнопке "Закрыть", чтобы скрывать попап document - .querySelectorAll(".radio-button-size-item__label") - .forEach(size => { - size.addEventListener("click", () => { - //если выбрнан размер, то разблокировать кнопку заказа - const submitButton = document.querySelector( - ".product-card__button-submit" - ); - submitButton.classList.remove("button-submit_disabled"); - submitButton.disabled = false; + .querySelector(".popup-container__button-close") + .addEventListener("click", hidePopup); + + //Назначить обработчик клика по размеру (если товар не безразмерный) + if (productData.sizes) { + document + .querySelectorAll(".radio-button-size-item__label") + .forEach(size => { + size.addEventListener("click", () => { + //если выбрнан размер, то разблокировать кнопку заказа + const submitButton = document.querySelector( + ".product-card__button-submit" + ); + submitButton.classList.remove("button-submit_disabled"); + submitButton.disabled = false; - //сохранить выбранный пользователем размер - //для последующего отображения в форме - productData.checkedSize = size.htmlFor; + //сохранить выбранный пользователем размер + //для последующего отображения в форме + productData.checkedSize = size.htmlFor; + }); }); - }); - } + } - //Назначить обработчик клика по кнопке "Заказать" - document - .querySelector(".product-card__button-submit") - .addEventListener("click", () => { - //Убрать ранее показанный попап продукта - const currentPopup = document.querySelector(".popup_active"); - currentPopup.remove(); + //Назначить обработчик клика по кнопке "Заказать" + document + .querySelector(".product-card__button-submit") + .addEventListener("click", () => { + //Убрать ранее показанный попап продукта + hidePopup(); - //Показать форму - showOrderForm(productData); - }); + //Показать форму + showOrderForm(productData); + }); + }, 300); }; From ec7dc57ced0f5c7a7f1cdd49d15087eebef5adaf Mon Sep 17 00:00:00 2001 From: Evgeny Dudarev Date: Thu, 9 Jan 2020 22:34:18 +0300 Subject: [PATCH 19/29] Improved select-element -reimplement select elem based on input (now availiable with Tab and IOS) -improved code and file structure --- css/common/input/input.less | 24 +++++++++++++ css/common/select/select.less | 27 ++------------ js/orderForm/showOrderForm.js | 5 ++- js/select/openUpSelect.js | 32 +++++++++++++++++ js/select/renderSelectOptions.js | 2 +- js/select/selectHandler.js | 59 +++++++------------------------ js/select/shutDownSelect.js | 6 ++++ js/templates/orderFormTemplate.js | 5 ++- 8 files changed, 84 insertions(+), 76 deletions(-) create mode 100644 js/select/openUpSelect.js create mode 100644 js/select/shutDownSelect.js diff --git a/css/common/input/input.less b/css/common/input/input.less index 3a78ba0..8fb7689 100644 --- a/css/common/input/input.less +++ b/css/common/input/input.less @@ -64,3 +64,27 @@ border: 1px solid #c52929; } } + +.input-select { + .default-input(); + padding: 9px 30px 9px 10px; + background-color: @color-light-1; + caret-color: transparent; + + &:hover { + cursor: pointer; + } + + -webkit-text-fill-color: @color-dark-1; + opacity: 1; /* required on iOS */ +} + +::-webkit-input-placeholder { + color: @color-dark-1; /* Chrome, Safari, Opera */ +} +::-moz-placeholder { + color: @color-dark-1; /* Firefox */ +} +:-ms-input-placeholder { + color: @color-dark-1; /* IE */ +} diff --git a/css/common/select/select.less b/css/common/select/select.less index 71cc383..288b3dd 100644 --- a/css/common/select/select.less +++ b/css/common/select/select.less @@ -1,25 +1,6 @@ .select { position: relative; - &__select-field { - width: 100%; - height: @control-height; - display: inline-block; - box-sizing: border-box; - background-color: @color-light-1; - padding: 9px 30px 9px 10px; - border: 1px solid #c5c9ca; - font: 14px/ (@control-height - 18px) Arial, sans-serif; - color: @color-dark-1; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } - - &:hover { - cursor: pointer; - } - &:before { content: ""; position: absolute; @@ -54,18 +35,15 @@ } } -.select_active > select { +.select_active > .input-select { background-color: @color-grey; } -.select-field__option { - display: none; -} - .options-container { position: absolute; padding: 23px 0px; height: 290px; + width: 100%; background-color: @color-light; z-index: 1000; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); @@ -83,6 +61,7 @@ &:hover { background-color: @color-primary; color: white; + cursor: pointer; } } } diff --git a/js/orderForm/showOrderForm.js b/js/orderForm/showOrderForm.js index b4b508b..5a4f8df 100644 --- a/js/orderForm/showOrderForm.js +++ b/js/orderForm/showOrderForm.js @@ -30,8 +30,11 @@ export const showOrderForm = productData => { }); //Обработать селектор города - const select = document.querySelector(".select__select-field"); + const select = document.querySelector(".select"); select.addEventListener("click", selectHandler); + select.addEventListener("input", e => { + e.target.value = ""; + }); //Обработать textarea для ввода адреса const textarea = document.querySelector("textarea"); diff --git a/js/select/openUpSelect.js b/js/select/openUpSelect.js new file mode 100644 index 0000000..b226f83 --- /dev/null +++ b/js/select/openUpSelect.js @@ -0,0 +1,32 @@ +import { shutDownSelect } from "./shutDownSelect"; +import { getDataAsync } from "../common/getDataAsync"; +import { renderSelectOptions } from "./renderSelectOptions"; + +//открывает options-container закрытого селектора +export const openUpSelect = selectBlock => { + selectBlock.classList.add("select_active"); + document.querySelector(".input-select").disabled = "disabled"; + + //Получить данные адресов для селектора + getDataAsync("https://api.hh.ru/areas/113").then(parsedData => { + //Для примера берем Московскую область, 7 городов + const areas = parsedData.areas[21].areas.slice(0, 7); + + //Начать рендеринг опций селектора + const optionsContainer = renderSelectOptions(areas); + + selectBlock.append(optionsContainer); + + //Назначить обработчик клика по опции в селекторе + document.querySelectorAll(".options-container__item").forEach(option => { + option.addEventListener("click", e => { + e.stopPropagation(); + const checkedArea = e.target.innerHTML; + document.querySelector(".input-select").placeholder = checkedArea; + + //Скрыть выбор опций селектора + shutDownSelect(); + }); + }); + }); +}; diff --git a/js/select/renderSelectOptions.js b/js/select/renderSelectOptions.js index dd9f0fd..88c13d5 100644 --- a/js/select/renderSelectOptions.js +++ b/js/select/renderSelectOptions.js @@ -3,7 +3,7 @@ export const renderSelectOptions = dataList => { optionsContainer.classList.add("options-container"); dataList.forEach(dataItem => { - optionsContainer.innerHTML += `\n`; + optionsContainer.innerHTML += `
${dataItem.name}
\n`; }); return optionsContainer; diff --git a/js/select/selectHandler.js b/js/select/selectHandler.js index a673b01..bbf61c0 100644 --- a/js/select/selectHandler.js +++ b/js/select/selectHandler.js @@ -1,53 +1,18 @@ -import { getDataAsync } from "../common/getDataAsync"; -import { renderSelectOptions } from "./renderSelectOptions"; -import { getCoords } from "../common/getCoords"; +import { shutDownSelect } from "./shutDownSelect"; +import { openUpSelect } from "./openUpSelect"; export const selectHandler = e => { let target = e.target; - while (!target.classList.contains("form")) { - if (target.classList.contains("select_active")) { - target.classList.remove("select_active"); - document.querySelector(".options-container").remove(); - return; - } - if (target.classList.contains("select")) break; - target = target.parentNode; + //Если клик по активному селекту, то cкрыть options-container + if (target.closest(".select_active")) { + shutDownSelect(); + document.querySelector(".input-select").disabled = ""; + } else { + //иначе открыть + while (!target.classList.contains("select")) { + target = target.parentNode; + } + openUpSelect(target); } - - //Получить координаты select-field для позиционирования контейнера option - let pivotCoords = getCoords(target); - - //Сместить координату top на высоту select-field - pivotCoords.top += target.offsetHeight; - - target.classList.add("select_active"); - - //Получить данные адресов для селектора - getDataAsync("https://api.hh.ru/areas/113").then(parsedData => { - //Для примера берем Московскую область, 7 городов - const areas = parsedData.areas[21].areas.slice(0, 7); - - //Начать рендеринг опций селектора - const optionsContainer = renderSelectOptions(areas); - optionsContainer.top = pivotCoords.top + "px"; - optionsContainer.left = pivotCoords.left + "px"; - optionsContainer.style.width = target.offsetWidth + "px"; - - target.append(optionsContainer); - - //Назначить обработчик клика по опции в селекторе - document.querySelectorAll(".options-container__item").forEach(option => { - option.addEventListener("click", e => { - const checkedArea = e.target.innerHTML; - document.querySelector(".select-field__option").innerHTML = checkedArea; - - //Скрыть выбор опций селектора - setTimeout(() => { - document.querySelector(".select").classList.remove("select_active"); - document.querySelector(".options-container").remove(); - }, 0); - }); - }); - }); }; diff --git a/js/select/shutDownSelect.js b/js/select/shutDownSelect.js new file mode 100644 index 0000000..c33c262 --- /dev/null +++ b/js/select/shutDownSelect.js @@ -0,0 +1,6 @@ +//скрывает options-container открытого селектора +export const shutDownSelect = () => { + document.querySelector(".select").classList.remove("select_active"); + document.querySelector(".input-select").disabled = ""; + document.querySelector(".options-container").remove(); +}; diff --git a/js/templates/orderFormTemplate.js b/js/templates/orderFormTemplate.js index 9edee8f..1e53b1f 100644 --- a/js/templates/orderFormTemplate.js +++ b/js/templates/orderFormTemplate.js @@ -53,9 +53,8 @@ export const orderFormTemplate = productData => {

Адрес

- + +