Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

selects js

Browse Source
cosmopet--Memento-mori-dev
Kirill Pet 10 months ago
parent 284a32c6c9
commit 7beff60d00
4 changed files with 112 additions and 41 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      assets/css/gp-style-core.css
  2. 15
      assets/css/gp-style-desktop.css
  3. 102
      assets/js/gp-main.js
  4. 26
      index.html

8
assets/css/gp-style-core.css
Unescape View File

@ -640,7 +640,7 @@ button{
padding: 11px 47px 11px 13px; padding: 11px 47px 11px 13px;
pointer-events:none; /* pointer-events:none; */
border: 1px solid var(--background-black); border: 1px solid var(--background-black);
border-radius: 20px; border-radius: 20px;
@ -651,6 +651,8 @@ button{
line-height: 120%; line-height: 120%;
color: var(--text-black); color: var(--text-black);
cursor: pointer;
position: relative; position: relative;
transition: opacity .2s ease-out; transition: opacity .2s ease-out;
@ -671,6 +673,8 @@ button{
background-image: url(../img/svg/main/arrow-black.svg); background-image: url(../img/svg/main/arrow-black.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
pointer-events: none;
} }
.state__block{ .state__block{
position: absolute; position: absolute;
@ -681,6 +685,8 @@ button{
height: 0; height: 0;
overflow: hidden; overflow: hidden;
transition: height .2s ease-out;
} }
.state__content{ .state__content{
padding: 8px; padding: 8px;

15
assets/css/gp-style-desktop.css
Unescape View File

@ -487,20 +487,7 @@
position: relative; position: relative;
} }
.product-item-overlay__tags li:nth-child(n+2)::before{ .product-item-overlay__tags li:nth-child(n+1)::after{
content: '';
position: absolute;
top: 6px;
left: -8px;
width: 4px;
aspect-ratio: 1;
background-color: var(--text-3);
border-radius: 50%;
}
.product-item-overlay__tags li:nth-child(n+2)::after{
content: ''; content: '';
position: absolute; position: absolute;

102
assets/js/gp-main.js
Unescape View File

@ -1,9 +1,80 @@
'use strict'; 'use strict';
// header // 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 // checkbox
let checkbox = document.querySelectorAll('.checkbox'); let checkbox = document.querySelectorAll('.checkbox');
@ -22,17 +93,6 @@ checkbox.forEach(e => {
}) })
// checkbox // 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){ function modalOpen(buttonElement, contentElement){
let modal = document.querySelector('.modal'), let modal = document.querySelector('.modal'),
aside = document.querySelector('.modal__aside'), aside = document.querySelector('.modal__aside'),
@ -124,3 +184,21 @@ 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');
}
}
}

26
index.html
Unescape View File

@ -297,7 +297,7 @@
<p class="product-item-overlay-field__title">Объем</p> <p class="product-item-overlay-field__title">Объем</p>
<div class="select"> <div class="select">
<input type="text" class="select__state" value="2 кг"> <input type="text" class="select__state" value="2 кг" readonly>
<div class="state__block"> <div class="state__block">
<ul class="state__content"> <ul class="state__content">
<li> <li>
@ -323,11 +323,11 @@
<p class="product-item-overlay-field__title">Количество</p> <p class="product-item-overlay-field__title">Количество</p>
<div class="counter"> <div class="counter">
<button class="counter__button"> <button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt=""> <img src="assets/img/svg/main/minus.svg" alt="">
</button> </button>
<input type="text" class="counter__input" value="1"> <input type="text" class="counter__input" value="1">
<button class="counter__button"> <button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt=""> <img src="assets/img/svg/main/plus.svg" alt="">
</button> </button>
</div> </div>
@ -630,11 +630,11 @@
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p> <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control"> <div class="modal-basket-item__control">
<div class="counter counter--small"> <div class="counter counter--small">
<button class="counter__button"> <button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt=""> <img src="assets/img/svg/main/minus.svg" alt="">
</button> </button>
<input type="text" class="counter__input" value="1"> <input type="text" class="counter__input" value="1">
<button class="counter__button"> <button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt=""> <img src="assets/img/svg/main/plus.svg" alt="">
</button> </button>
</div> </div>
@ -653,11 +653,11 @@
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p> <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control"> <div class="modal-basket-item__control">
<div class="counter counter--small"> <div class="counter counter--small">
<button class="counter__button"> <button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt=""> <img src="assets/img/svg/main/minus.svg" alt="">
</button> </button>
<input type="text" class="counter__input" value="1"> <input type="text" class="counter__input" value="1">
<button class="counter__button"> <button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt=""> <img src="assets/img/svg/main/plus.svg" alt="">
</button> </button>
</div> </div>
@ -676,11 +676,11 @@
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p> <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control"> <div class="modal-basket-item__control">
<div class="counter counter--small"> <div class="counter counter--small">
<button class="counter__button"> <button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt=""> <img src="assets/img/svg/main/minus.svg" alt="">
</button> </button>
<input type="text" class="counter__input" value="1"> <input type="text" class="counter__input" value="1">
<button class="counter__button"> <button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt=""> <img src="assets/img/svg/main/plus.svg" alt="">
</button> </button>
</div> </div>
@ -699,11 +699,11 @@
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p> <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control"> <div class="modal-basket-item__control">
<div class="counter counter--small"> <div class="counter counter--small">
<button class="counter__button"> <button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt=""> <img src="assets/img/svg/main/minus.svg" alt="">
</button> </button>
<input type="text" class="counter__input" value="1"> <input type="text" class="counter__input" value="1">
<button class="counter__button"> <button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt=""> <img src="assets/img/svg/main/plus.svg" alt="">
</button> </button>
</div> </div>
@ -722,11 +722,11 @@
<p class="modal-basket-item__sub-title">Индейка, 2 кг</p> <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
<div class="modal-basket-item__control"> <div class="modal-basket-item__control">
<div class="counter counter--small"> <div class="counter counter--small">
<button class="counter__button"> <button class="counter__button minus">
<img src="assets/img/svg/main/minus.svg" alt=""> <img src="assets/img/svg/main/minus.svg" alt="">
</button> </button>
<input type="text" class="counter__input" value="1"> <input type="text" class="counter__input" value="1">
<button class="counter__button"> <button class="counter__button plus">
<img src="assets/img/svg/main/plus.svg" alt=""> <img src="assets/img/svg/main/plus.svg" alt="">
</button> </button>
</div> </div>

Write Preview
Loading…
Cancel
Save