https://noalko-kaliningrad.ru/assets/js/rating.js

1document.addEventListener('DOMContentLoaded', () => {
2    const ratings = document.querySelectorAll('.rating');
3
4    if (ratings.length > 0) {
5        initRatings();
6    }
7
8    function initRatings() {
9        let ratingActive, ratingValue;
10
11        for (let i = 0; i < ratings.length; i += 1) {
12            const rating = ratings[i];
13            initRating(rating);
14        }
15    }
16
17    function initRating(rating) {
18        initRatingVars(rating);
19
20        setRatingActiveWidth();
21
22        if (rating.classList.contains('rating__set')) {
23            setRating(rating);
24        }
25    }
26
27    function initRatingVars(rating) {
28        ratingActive = rating.querySelector('.rating__active');
29        ratingValue = rating.querySelector('.rating__value');
30    }
31
32    function setRatingActiveWidth(index = ratingValue.innerHTML) {
33        const ratingActiveWidth = index / 0.05;
34        ratingActive.style.width = `${ratingActiveWidth}%`;
35    }
36
37    function setRating(rating) {
38        const ratingItems = rating.querySelectorAll('.rating__item');
39
40        for (let i = 0; i < ratingItems.length; i += 1) {
41            const ratingItem = ratingItems[i];
42
43            ratingItem.addEventListener('mouseenter', (e) => {
44                initRatingVars(rating);
45
46                setRatingActiveWidth(ratingItem.value);
47            });
48
49            ratingItem.addEventListener('mouseleave', (e) => {
50                setRatingActiveWidth();
51            });
52
53            ratingItem.addEventListener('click', (e) => {
54                initRatingVars(rating);
55
56                ratingValue.innerHTML = i + 1;
57                setRatingActiveWidth();
58            });
59        }
60    }
61    
62    const addCommentForm = $(".add-comment__form");
63    
64    addCommentForm.submit(function() {
65      $.ajax({
66        type: "POST",
67        url: "/netcat/add.php",
68        dataType: "html",
69        nameFunction: "request",
70        data: $(this).serialize(),
71        cache: false, 
72        success: function(response) {
73          addCommentForm[0].reset();
74          addCommentForm.find('.rating__value')[0].innerHTML = '0';
75          addCommentForm.find('.rating__active')[0].style.width = '0%';
76          const popupResponce = document.querySelector('.popup-send-comment');
77          popupResponce.classList.add('open');
78          document.querySelector('body').classList.add('lock');
79          document.querySelector('.popup-send-comment__text').innerHTML = response;
80        },    
81        error: function(response) {
82          console.log(response);
83        }
84      });
85      return false;
86    });
87    
88    let countVisibleComments = 0;
89    const commentsList = document.querySelectorAll('.comment');
90    const commentsMoreBtn = document.querySelector('.comments__more');
91    
92    function moreComments() {
93        let oldCountVisibleComments = countVisibleComments;
94        for (let i = oldCountVisibleComments; i < commentsList.length; i += 1) {
95            console.log(i);
96            if (i === commentsList.length - 1) {
97                commentsMoreBtn.style.display = 'none';
98            }
99            if (i % 3 === 0 && i !== oldCountVisibleComments) {
100                countVisibleComments += 3;
101                break;
102            }
103            
104            commentsList[i].style.display = 'flex';
105        }
106    }
107    
108    moreComments();
109    if (commentsMoreBtn) {
110        commentsMoreBtn.addEventListener('click', () => {
111            moreComments();
112        });
113    }
114  
115});