selects js

assets/js/gp-main.js

@@ -1,9 +1,80 @@
 'use strict';
 
+// header
+toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false);
+singleToggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
+singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
 // header 
 
-// header 
+// media
+modalOpen('.button--filter', '.modal__filter');
+modalOpen('.basket-open', '.modal__basket');
+modalClose('.modal__close');
+// media
 
+// toggle
+toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
+// toggle
+
+// select
+toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
+
+let selects = document.querySelectorAll('.select');
+
+selects.forEach(e => {
+    let state = e.querySelector('.select__state'),
+        buttons = e.querySelectorAll('.state__button');
+        
+    buttons.forEach(e => {
+        let button = e;
+
+        e.onclick = function (event) {
+            event.preventDefault();
+
+            buttons.forEach(element => {
+                if (element.classList.contains('active')) {
+                    element.classList.remove('active');
+                }
+            })          
+            
+            let text = e.textContent.trim();
+            state.value = text;
+
+            button.classList.add('active');
+        }        
+    })
+})
+// select
+
+// counter
+let counters = document.querySelectorAll('.counter');
+
+counters.forEach(e => {
+    let minus = e.querySelector('.minus'),
+        plus  = e.querySelector('.plus'),
+        input = e.querySelector('.counter__input');
+
+        minus.onclick = function (e) {
+            e.preventDefault();
+            
+            let number = input.value;
+            
+            if (number >= 2){
+                input.value = Number(number) - 1;
+            }
+        }
+
+        plus.onclick = function (e) {
+            e.preventDefault();
+            
+            let number = input.value;
+            
+            if (number <= 99) {
+                input.value = Number(number) + 1;
+            }
+        }
+})
+// counter
 
 // checkbox 
 let checkbox = document.querySelectorAll('.checkbox');
@@ -22,17 +93,6 @@ checkbox.forEach(e => {
 })
 // checkbox 
 
-// media
-modalOpen('.button--filter', '.modal__filter');
-modalOpen('.basket-open', '.modal__basket');
-modalClose('.modal__close');
-// media
-
-// toggle
-toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
-// toggle
-
-
 function modalOpen(buttonElement, contentElement){
     let modal = document.querySelector('.modal'),
         aside = document.querySelector('.modal__aside'),
@@ -99,7 +159,7 @@ function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement,
         let thisMainElement = e,
             thisButtonElement = e.querySelector(buttonElement),
             thisHeightElement = e.querySelector(heightElement),
-            thisContentElement = e.querySelector(contentElement);
+            thisContentElement = e.querySelector(contentElement);        
 
         thisButtonElement.onclick = function (e) {
             let height = thisHeightElement.clientHeight;
@@ -123,4 +183,22 @@ function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement,
         }
         
     });
+}
+
+function singleToggleOpenX(button, content, blockheight) {
+    let thisButton = document.querySelector(button), 
+        thisContent = document.querySelector(content),
+        thisBlockheight = document.querySelector(blockheight);
+
+    thisButton.onclick = function () {
+        let height = thisBlockheight.clientHeight;
+
+        if (!thisContent.classList .contains('open')) {
+            thisContent.style.height = `${height}px`;
+            thisContent.classList .add('open');
+        }else{
+            thisContent.style.height = null;
+            thisContent.classList .remove('open');
+        }
+    }
 }