Dev js by evgdudareff · Pull Request #1 · evgdudareff/hh-school-html

evgdudareff · 2020-01-05T20:55:49Z

ПР на проверку

-added popup-js logic (show, hide) -added getCoords common js function -added template for popup-product card

-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

Did position for options-container = absolute. Fixed bug with checked size in prepareToSubmit.

xnimorz · 2020-01-06T15:05:10Z

@@ -0,0 +1,10 @@
+{


Заметки по недоработкам визуальным:

Сейчас, если выбрать один товар, потом кликнуть на другой — на другом выпадашка не появится, пока не исчезнет предыдущая. поэтому приходится кликать дважды.

У тебя не убрано базовое поведение селекта (выбора города) — за счет чего на айфоне выбрать город практически нельзя.

Было бы хорошо для формы иметь поддержку клавиатуры (например в том же селекте выбор сделать возможным с помощью клавиатуры)

При ресайзе выпадашка "едет"

При скролле также элемент не остается на выбранном месте, а бегает за тобой, что не очень вписывается в макет

Сейчас не очень понятна какая ошибка — лучше сообщать это пользователю хоть как-то

По пунктам:

Исправлено. Также упростил код, доработал структуру кода и файлов js.

Теперь доступно и по Tab (с ios тоже доступно переключение, но каретку там не победил). Также упростил код, доработал структуру кода и файлов js.

Смотри пункт 2.

При ресайзе выпадашка "едет" - исправил. Для Tablet/Desktop использую только css position. При пересечении границы для Mobile один раз перерисовываются.
При resize в границе Mobile - динамически меняется положение.

При скролле также элемент не остается на выбранном месте, а бегает за тобой, что не очень вписывается в макет -исправил.

Сейчас не очень понятна какая ошибка — лучше сообщать это пользователю хоть как-то - добавил. Теперь если пользователь не верно ввел данные в поле и ушел с него, то показывается попап с ошибками.

попап лучше держать с описанием ошибки до момента, пока пользователь не поставит фокус на поле или уйдет с него. Иначе получается как на скриншоте.

Если вызвать селект и убрать с поля фокус, лучше, чтобы выпадашка пропадала. Иначе она загораживает пространство и мешает работать с сайтом

А зачем при самовывозе адрес? :)

Пока ситуация с resize еще не решилась

Теперь предупреждение показывается только тогда, когда пользователь работает с полем.

Сделал, чтобы пропадал select при клике не на него.

А зачем при самовывозе адрес? :) - теперь при самовывозе секция адреса скрывается.

с resize решили, что по это по макету

xnimorz · 2020-01-06T15:08:46Z

-  justify-content: center;
-  align-items: center;
-  display: none;
+.orderForm {


где-то стили в-таком-стиле-описаны, где-то вСовершенноДругом. Лучше держать единый стиль, так как это структурирует код прививает его единое восприятие

У меня часть блоков "осталась" от Леонида Феськова. Посыл понял.

xnimorz · 2020-01-06T15:09:45Z

+
+.input {
+  &_invalid {
+    border: 1px solid #c52929;


не достаточно ли только border-color менять?

Исправил

xnimorz · 2020-01-06T15:10:12Z

+}
+
+.select-field__option {
+  display: none;


не работает в мобилках

именно на option теге

Переделал select, уже не актуально.Но сделал выбор доставки доступным через клавиатуру(заменил display:none на clip: rect (0 0 0 0) ).

xnimorz · 2020-01-06T15:11:27Z

+    <form class="form" action="/" method="post">
+        <div class="columns-wrapper">
+          <div class="form__button-close">
+            <button class="button-close-icon button-close">


А зачем на кнопку два разных блока навешивать? это вполне можно соорудить через кнопку + блок-иконка в ней

Согласен, исправил.

xnimorz · 2020-01-06T15:22:21Z

+export const hideOrderForm = e => {
+  let target = e.target;
+
+  while (!target.classList.contains("orderForm")) {


closest можно использовать https://developer.mozilla.org/ru/docs/Web/API/Element/closest

xnimorz · 2020-01-06T15:22:33Z

+
+  if (currentForm) {
+    currentForm.classList.remove("orderForm_active");
+    setTimeout(() => {


лучше подписка на событие

сделал через событие

xnimorz · 2020-01-06T15:23:20Z

+
+  //Контакная информация и расширенный адрес - обязательные поля.
+  //проверить, все ли требуемые элементы прошли валидацию
+  for (let i = 0; i < inputs.length; i++) {


if (inputs.some())

some возвращает true/false, мне же нужно не только понять, какое поле не прошло валидацию, но и получить само поле, чтобы сделать input.validation.checkValidities(input).
В целом идея понятна, но не слишком подходит сейчас...

xnimorz · 2020-01-06T15:24:30Z

+  //СМС уведомления
+  let smsNotification = false;
+  if (document.querySelector("input[name=smsNotification]:checked")) {
+    smsNotification = true;


сейчас тебе нужно частично дособирать данные руками. можно ли это свести к минимуму?

свёл к минимуму. Собираю необходимые поля и сразу же сохраняю теперь в объект с данными формы

xnimorz · 2020-01-06T15:25:40Z

+  });
+
+  //Обработать селектор города
+  const select = document.querySelector(".select__select-field");


в этом файле собралась вся логика, которую не получилось отнести к чему-то конкретному. Это и логика самой формы (скрыть форму) и выборы города и так далее.
Лучше разделить на разные файлы, а в orderForm.js вызывать нужные методы

разбил на файлы и функции

-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

-reimplement select elem based on input (now availiable with Tab and IOS) -improved code and file structure

-improved code structure and did all logic

xnimorz · 2020-01-13T09:48:24Z

+  }
+}
+
+.select_active > .input-select {


В БЭМ не рекомендуется модифицировать один блок через другой

xnimorz · 2020-01-13T09:49:57Z

+  }
+}
+
+function getClassName(elem) {


Кажется, что этой функции не место в fieldValidation
И главная проблема ее в текущем виде — тебе придется постоянно ее дорабатывать — больно :(

xnimorz · 2020-01-13T09:55:01Z

+      break;
+    }
+    //если клик на кнопку "Закрыть", то скрыть форму
+    if (target.classList.contains("form__button-close")) {


мы обсуждали на занятии, почему на css классы не стоит завязываться, и лучше использовать js классы

здесь и везде

evgdudareff added 17 commits December 22, 2019 21:10

Updated .gitignore. Started js

a3d21b1

Removed _popup modifier from product-card

1a83e88

Started with popup for product-card

e7f4f6a

Added disabled style for labels and style fot popup

0d629f5

Designed js-model scheme for products

adb1a35

Designed js-function for rendering product-card-tempalte

507716f

Added styles for popup and button

84d5a12

Reorganized structure of js-folders and did following:

8f8286b

-added popup-js logic (show, hide) -added getCoords common js function -added template for popup-product card

Added order form template and did improvments:

5f0e896

-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

Improved hideOrderForm and configured .babelrc file

472bc5d

Did orderForm inputs validation

4cfd73c

Added select logic and async function for getting data from server

aee6a5a

Added textarea validation

08e14d6

Added common class for field validation

4ccb95b

Did MVP-project

402903e

Improved options-container for select and fixed bugs

9275aef

Did position for options-container = absolute. Fixed bug with checked size in prepareToSubmit.

Prepared to deploy GP

3c3e4d5

xnimorz reviewed Jan 6, 2020

View reviewed changes

evgdudareff added 12 commits January 9, 2020 16:23

Improved popup.js and related popup files

8023186

-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

Improved select-element

ec7dc57

-reimplement select elem based on input (now availiable with Tab and IOS) -improved code and file structure

Did dynamic position calculation for popup for all platforms

26e22b9

-improved code structure and did all logic

Added error validation popup to show actual error messages for user

57fa41b

Improved orderForm code and files structure

284c364

Improved form preparations

08f3676

Merge branch 'dev-js-fixes' into dev-js

c0cda05

Fixed bug with popup

ad10bab

Added background blur for mobile popup

67e4f10

Improved select

14f2c78

Did hiding of address section if self pickup is checked

59482cf

Improved thing with scroll-bar

41fdb4b

did all corrections and ready for deploy

75d08ee

xnimorz reviewed Jan 14, 2020

View reviewed changes

Conversation

evgdudareff commented Jan 5, 2020

ПР на проверку

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

evgdudareff Jan 14, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

evgdudareff Jan 14, 2020 •

edited

Loading