From e3494a84adaa7418785e50496ef3baf7750489cc Mon Sep 17 00:00:00 2001 From: Leskovets Maksym Date: Mon, 26 Feb 2024 14:26:27 +0100 Subject: [PATCH 1/4] added stars-rating --- src/css/rating-popup.css | 10 ++++++++++ src/js/rating-popup.js | 16 ++++++++++++++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/css/rating-popup.css b/src/css/rating-popup.css index f5585f4..65599cd 100644 --- a/src/css/rating-popup.css +++ b/src/css/rating-popup.css @@ -62,6 +62,16 @@ fill: var(--rating-color); } +.modal-rating__rating polygon:hover { + cursor: pointer; + fill: var(--accent-color); + transition: all var(--tran-icon); +} + +.modal-rating__rating polygon.active { + fill: var(--accent-color); +} + .modal-rating__form { display: flex; flex-direction: column; diff --git a/src/js/rating-popup.js b/src/js/rating-popup.js index 8932692..515eb2b 100644 --- a/src/js/rating-popup.js +++ b/src/js/rating-popup.js @@ -9,8 +9,10 @@ export function openModalRating() { modalRating.innerHTML = markUp(); showModalRating(); - const closeModalRatingButton = document.querySelector('.js-modal-rating__btn-close'); + const closeModalRatingButton = document.querySelector('.js-modal-rating__btn-close'); + const starsIcons = document.querySelector('.js-stars-svg'); closeModalRatingButton.addEventListener('click', closeModalRating); + starsIcons.addEventListener('click', changeStarsRating) }; function showModalRating() { @@ -23,6 +25,16 @@ function closeModalRating() { modalRating.classList.add('hidden'); }; +function changeStarsRating(e) { + const starsIcons = document.querySelector('.js-stars-svg'); + let value = e.target.dataset.value; + value && (starsIcons.parentNode.dataset.value = value); + starsIcons.querySelectorAll('polygon').forEach(star => { + let on = starsIcons.parentNode.dataset.value >= star.dataset.value; + star.classList.toggle('active', on); + }); +}; + function markUp() { return `
@@ -34,7 +46,7 @@ function markUp() {
0.0 - + From 7dd20233b44249e62d7987087cf47cbba822cb4e Mon Sep 17 00:00:00 2001 From: Leskovets Maksym Date: Mon, 26 Feb 2024 17:27:36 +0100 Subject: [PATCH 2/4] fixsd overflow on body --- src/js/exercise-popup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/exercise-popup.js b/src/js/exercise-popup.js index 3dc75bd..38639bd 100644 --- a/src/js/exercise-popup.js +++ b/src/js/exercise-popup.js @@ -214,7 +214,7 @@ function showModalExercise() { function closeModalExercise() { overlay.classList.add('hidden'); modalExercise.classList.add('hidden'); - document.body.style.overflow = 'scroll'; + document.body.style.overflow = 'auto'; overlay.removeEventListener('click', clickOnOverlay); document.removeEventListener('keydown', clickOnEscape); }; \ No newline at end of file From b6407271c90a0e4db16c43d4f10ba6f464a5f265 Mon Sep 17 00:00:00 2001 From: Olek Myron Date: Mon, 26 Feb 2024 18:27:47 +0200 Subject: [PATCH 3/4] Update exercise-popup.js --- src/js/exercise-popup.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/exercise-popup.js b/src/js/exercise-popup.js index 3dc75bd..38639bd 100644 --- a/src/js/exercise-popup.js +++ b/src/js/exercise-popup.js @@ -214,7 +214,7 @@ function showModalExercise() { function closeModalExercise() { overlay.classList.add('hidden'); modalExercise.classList.add('hidden'); - document.body.style.overflow = 'scroll'; + document.body.style.overflow = 'auto'; overlay.removeEventListener('click', clickOnOverlay); document.removeEventListener('keydown', clickOnEscape); }; \ No newline at end of file From b235ebf2c6dd1aa55ca326ef137de6faa2cf5a74 Mon Sep 17 00:00:00 2001 From: Olek Myron Date: Mon, 26 Feb 2024 19:05:31 +0200 Subject: [PATCH 4/4] Update rating-popup.js --- src/js/rating-popup.js | 36 +++++++++++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/src/js/rating-popup.js b/src/js/rating-popup.js index 515eb2b..5753c07 100644 --- a/src/js/rating-popup.js +++ b/src/js/rating-popup.js @@ -2,6 +2,7 @@ import icons from '/img/icons.svg'; const modalExercise = document.querySelector('.js-modal-exercise'); const modalRating = document.querySelector('.js-modal-rating'); +const starsIcons = document.querySelector('.js-stars-svg'); export function openModalRating() { const buttonRating = document.querySelector('.js-rating__btn'); @@ -12,9 +13,36 @@ export function openModalRating() { const closeModalRatingButton = document.querySelector('.js-modal-rating__btn-close'); const starsIcons = document.querySelector('.js-stars-svg'); closeModalRatingButton.addEventListener('click', closeModalRating); - starsIcons.addEventListener('click', changeStarsRating) + starsIcons.addEventListener('click', changeStarsRating); + // starsIcons.addEventListener('mouseover', handleHoverEvent); + listenPolygons(); }; +function submitRating() { + document.querySelector('.js-rating-form').addEventListener('submit', e => { + e.preventDefault(); + }) +} + +function listenPolygons () { + const polygons = document.querySelectorAll('.js-stars-svg polygon'); + + polygons.forEach(polygon => { + polygon.addEventListener('mouseenter', function() { + const value = parseInt(this.getAttribute('data-value')); + + polygons.forEach((p, index) => { + if (index < value) { + p.classList.add('active'); + document.querySelector('.js-rating-value').textContent = value; + } else { + p.classList.remove('active'); + } + }); + }); + }); +} + function showModalRating() { modalExercise.classList.add('hidden'); modalRating.classList.remove('hidden'); @@ -33,6 +61,8 @@ function changeStarsRating(e) { let on = starsIcons.parentNode.dataset.value >= star.dataset.value; star.classList.toggle('active', on); }); + document.querySelector('.js-rating-value').textContent = value; + submitRating() }; function markUp() { @@ -45,7 +75,7 @@ function markUp() {
- 0.0 + 0 @@ -55,7 +85,7 @@ function markUp() {
-
+