contact-modal

alex-grsm · Nov 20, 2022 · c2a8c21 · c2a8c21
1 parent 576aae2
commit c2a8c21
Show file tree

Hide file tree

Showing 13 changed files with 144 additions and 39 deletions.
diff --git a/src/img/icon-close.svg b/src/img/icon-close.svg
diff --git a/src/js/_components.js b/src/js/_components.js
@@ -3,11 +3,12 @@ import langDropDown from './components/langdropdown';
 import superMenu from './components/superMenu';
 import search from './components/search';
 import heroSwiper from './components/heroswiper';
-import productЫwiper from './components/productswiper';
+import productSwiper from './components/productswiper';
 import brandSwiper from './components/brandswiper';
 import scrolling from './components/scrolling';
 import showMoreBtn from './components/show-more';
 import './components/validation';
+import './components/modals';
 
 window.addEventListener('DOMContentLoaded', () => {
   'use strict';
@@ -17,7 +18,7 @@ window.addEventListener('DOMContentLoaded', () => {
   superMenu();
   search();
   heroSwiper();
-  productЫwiper();
+  productSwiper();
   brandSwiper();
   scrolling('.pageup');
   showMoreBtn();

diff --git a/src/js/_functions.js b/src/js/_functions.js
@@ -13,9 +13,11 @@
 
 // Троттлинг функции (для ресайза, ввода в инпут, скролла и т.д.)
 // import { throttle } from './functions/throttle';
-// let yourFunc = () => { console.log('throttle') };
+// let yourFunc = () => {
+//   console.log('throttle');
+// };
 // let func = throttle(yourFunc);
-// window.addEventListener('resize', func);
+// window.addEventListener('input', func);
 
 // Фикс фулскрин-блоков
 // import './functions/fix-fullheight';

diff --git a/src/js/components/modals.js b/src/js/components/modals.js
@@ -0,0 +1,10 @@
+import GraphModal from 'graph-modal';
+
+const modal = new GraphModal({
+  // isOpen: modal => {
+  //   console.log('opened');
+  // },
+  // isClose: () => {
+  //   console.log('closed');
+  // },
+});
diff --git a/src/js/components/scrolling.js b/src/js/components/scrolling.js
@@ -12,7 +12,7 @@ const scrolling = upSelector => {
   // });
 
   // Scrolling with requestAnimationFrame
-  let links = document.querySelectorAll('[href^="#"]'),
+  let links = document.querySelectorAll('.scrolling'),
       speed = 0.25;
 
   links.forEach(link => {

diff --git a/src/js/components/validation.js b/src/js/components/validation.js
@@ -57,18 +57,17 @@ const rules = [
       }
     ]
   },
-  // {
-  //   ruleSelector: '.input-tel',
-  //   tel: true,
-  //   telError: 'Введіть правильний телефон',
-  //   rules: [
-  //     {
-  //       rule: 'required',
-  //       value: true,
-  //       errorMessage: 'Заповніть телефон'
-  //     }
-  //   ]
-  // },
+  {
+    ruleSelector: '.input-tel',
+    tel: true,
+    telError: 'Введіть правильний телефон',
+    rules: [
+      {
+        rule: 'required',
+        errorMessage: 'Заповніть телефон'
+      }
+    ]
+  },
 ];
 
 // const rules2 = [

diff --git a/src/js/functions/validate-forms.js b/src/js/functions/validate-forms.js
@@ -16,7 +16,7 @@ export const validateForms = (selector, rules, afterSend) => {
   }
 
   if (telSelector) {
-    const inputMask = new Inputmask('+7 (999) 999-99-99');
+    const inputMask = new Inputmask('+38 (999) 999-99-99');
     inputMask.mask(telSelector);
 
     for (let item of rules) {

diff --git a/src/partials/card.html b/src/partials/card.html
@@ -125,28 +125,80 @@ <h2 class="h2">(2HC - 4060) - Multi-wedge belt 0227353</h2>
           </li>
         </ul>
         <div class="btns">
-          <a href="#" class="btn-reset btn wiggle-anime">
+          <button id="btnQuestion" class="btn-reset btn wiggle-anime" data-graph-path="contactModal" data-graph-animation="fadeInUp">
             <img loading="lazy" src="/img/icon-mail.svg" class="image mr-8" width="21" height="16" alt="Cametet">
             <span>Задати питання</span>
-          </a>
-          <a href="#" class="btn-reset btn snake-anime">
+          </button>
+          <button id="btnCallback" class="btn-reset btn snake-anime" data-graph-path="contactModal" data-graph-animation="fadeInUp">
             <img loading="lazy" src="/img/icon-phone.svg" class="image mr-8" width="25" height="24" alt="Cametet">
             <span>Замовити дзвінок</span>
+          </button>
           </a>
-          </a>
-          <a href="#" class="btn-reset btn blue-bg pulse-anime">
+          <button class="btn-reset btn blue-bg pulse-anime">
             <img loading="lazy" src="/img/icon-cart.svg" class="image mr-8" width="25" height="24" alt="Cametet">
             <span>Buy</span>
-          </a>
+          </button>
         </div>
         <div class="descr">
           <strong>Будова:</strong>
-          <p>2 ремені(ів) класичного профілю HC об'єднані за допомогою тонкої гумово-тканинної пластини у єдиний багатоклиновий ремінь методом спільної вулканізації.</p>
+          <p>2 ремені(ів) класичного профілю HC об'єднані за допомогою тонкої гумово-тканинної пластини у єдиний
+            багатоклиновий ремінь методом спільної вулканізації.</p>
         </div>
         <div class="descr">
           <strong>Особливості:</strong>
-          <p>Виконання GATES AGRI.Високоякісні брендові ремені розроблені з урахуванням специфічних вимог аграрного сектору економіки.</p>
+          <p>Виконання GATES AGRI.Високоякісні брендові ремені розроблені з урахуванням специфічних вимог аграрного
+            сектору економіки.</p>
         </div>
       </div>
 
 </section>
+
+
+<!-- modal -->
+<div id="contact-modal" class="graph-modal contact-modal">
+  <div class="graph-modal__container" role="dialog" aria-modal="true" data-graph-target="contactModal">
+    <button class="btn-reset js-modal-close graph-modal__close" aria-label="Закрыть модальное окно"></button>
+    <div class="graph-modal__content">
+      <div class="contact__head">
+        <h2 class="h2">
+          <img loading="lazy" src="/img/logo-solo.svg" class="image" width="56" height="56" alt="Cemetet">
+          <span>ЗАДАЙТЕ ПИТАННЯ</span>
+        </h2>
+        <div class="h-sub">Ми&nbsp;постараємося відповісти максимально швидко</div>
+      </div>
+      <div class="contact__content">
+        <form action="" method="POST" class="contact__form" id="contact__form">
+
+          <label class="form-label">
+            <span>ім’я+прізвище</span>
+            <input class="input-reset input input-name" type="text" name="name" placeholder="...">
+          </label>
+          <label class="form-label">
+            <span>Введите phone</span>
+            <input class="input-reset input input-tel" type="tel" name="phone" placeholder="...">
+          </label>
+          <label class="form-label">
+            <span>Введите email</span>
+            <input class="input-reset input input-email" type="email" name="email" placeholder="...">
+          </label>
+          <label class="form-label">
+            <span>компанія</span>
+            <input class="input-reset input input-company" type="text" name="company" placeholder="...">
+          </label>
+          <label class="form-label">
+            <span>ваше питання</span>
+            <textarea class="input-reset input input-message" type="text" name="message" placeholder="..."></textarea>
+          </label>
+
+          <div class="form-btn">
+            <button class="btn-reset btn white-bg wiggle-anime" type="submit">
+              <span>Надіслати</span>
+              <img loading="lazy" src="/img/ico-send.svg" class="image ml-8" width="24" height="24" alt="Cametet">
+            </button>
+          </div>
+
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/partials/footer.html b/src/partials/footer.html
@@ -7,7 +7,7 @@
     </div>
 
     <div class="footer__scrollup">
-      <a href="#header" class="pageup">
+      <a href="#header" class="pageup scrolling">
         <img loading="lazy" src="/img/icon-up.svg" class="image" width="24" height="25" alt="UP">
         <span>ВГОРУ</span>
       </a>

diff --git a/src/scss/components/_contact.scss b/src/scss/components/_contact.scss
@@ -95,16 +95,6 @@
       margin-left: auto;
     }
   }
-
-  .just-validate-error-label {
-    color: var(--red-color) !important;
-    position: absolute;
-    bottom: -20px;
-    width: 50%;
-    right: 0;
-    font-size: 14px;
-    font-weight: 600;
-  }
 }
 
 .input {
@@ -117,8 +107,17 @@
   width: 50%;
   // transition: all .25s ease-in-out;
   &.just-validate-error-field {
-    border-bottom: 2px solid var(--red-color);
+    border-bottom: 1px solid var(--red-color);
   }
 }
 
+.just-validate-error-label {
+  color: var(--red-color) !important;
+  position: absolute;
+  bottom: -20px;
+  width: 50%;
+  right: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
 
diff --git a/src/scss/components/_modals.scss b/src/scss/components/_modals.scss
@@ -0,0 +1,38 @@
+.contact-modal {
+  background-color: rgba(70, 88, 122, 0.7);
+  .graph-modal__container {
+    padding: 32px;
+  }
+
+  .graph-modal__close {
+    right: 32px;
+    top: 32px;
+    background-image: url('../img/icon-close.svg');
+    background-repeat: no-repeat;
+    width: 14px;
+    height: 14px;
+  }
+
+  .contact__head {
+    .h2, .h-sub {
+      color: var(--blue-color);
+    }
+  }
+
+  .contact__form .form-label span {
+    color: var(--blue-color);
+  }
+
+  .input {
+    border-color: var(--blue-color);
+    color: var(--blue-color);;
+    &::placeholder {
+      color: var(--blue-color);
+    }
+  }
+
+  .btn {
+    border: 1px solid var(--blue-color);
+    padding: 15px;
+  }
+}
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -21,5 +21,6 @@
 @import "./components/benefits";
 @import "./components/contact";
 @import "./components/footer";
+@import "./components/modals";
 
 
diff --git a/src/scss/vendor.scss b/src/scss/vendor.scss
@@ -6,7 +6,7 @@
 @import "../../node_modules/superfish/dist/css/superfish";
 @import "../../node_modules/swiper/swiper-bundle.min";
 
-// @import "../../node_modules/graph-modal/dist/graph-modal.min"
+@import "../../node_modules/graph-modal/dist/graph-modal.min"
 
 // стили для табов
 // @import "../../node_modules/graph-tabs/dist/graph-tabs.min"