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

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

@ -487,20 +487,7 @@
position: relative;
}
.product-item-overlay__tags li:nth-child(n+2)::before{
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{
.product-item-overlay__tags li:nth-child(n+1)::after{
content: '';
position: absolute;

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

@ -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');
}
}
}

26
index.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save