https://www.pv-magazine-india.com/wp-content/themes/pvmagazine/blocks/comments-block/script.js?ver=1743584606

1
2
3class CommentForm {
4    /**
5     * Init the class
6     *
7     */
8    constructor() {
9        const cancelReply = document.getElementById('cancel-reply');
10        const commentReplyToContainer = document.getElementById('comment-replyto-container');
11        const commentReplyTo = document.getElementById('comment-replyto');
12        const commentForms = document.querySelectorAll('.comment-form');
13        const commentItems = document.querySelectorAll('.comment-item');
14        const commentToggles = document.querySelectorAll('.comment-item__children-toggle');
15        const errorClass = 'has-errors';
16        const errorEmailClass = 'invalid-email';
17
18        commentForms.forEach(form => {
19            let commentText = form.querySelector('.comment-form-text textarea'),
20                commentName = form.querySelector('.comment-form-author input'),
21                commentEmail = form.querySelector('.comment-form-email input')
22
23            let fields = [commentText, commentName, commentEmail]
24            
25            form.addEventListener('submit', function(event) {
26                let error = 0
27                fields.forEach(field => {
28                    if(field) {
29                        let parentEl = field.parentElement;
30                        if(field.value === '') {
31                            error++
32                            parentEl.classList.add(errorClass)
33                        } else {
34                            parentEl.classList.remove(errorClass)
35                        }
36
37                        if(field.type === 'email') {
38                            if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(field.value)) {
39                                parentEl.classList.remove(errorEmailClass)
40                            } else {
41                                error++
42                                parentEl.classList.add(errorEmailClass)
43                            }
44                        }
45                    }
46                });
47                
48                if(error > 0) {
49                    event.preventDefault();
50                }
51            })
52        });
53
54        commentItems.forEach(item => {
55            const replyLink = item.querySelector('.comment-item__reply a');
56            if(replyLink) {
57                replyLink.addEventListener('click', function(event) {
58                    event.preventDefault();
59                    let commentId = this.dataset.commentid
60                    
61                    let commentParentInput = document.querySelector('form.comment-form input[name="comment_parent"]')
62                    if(commentParentInput) {
63                        commentParentInput.value = commentId
64                    } 
65                    
66                    if(commentReplyTo) {
67                        commentReplyTo.innerHTML = this.dataset.replyto
68                    }
69                    if(commentReplyToContainer) {
70                        commentReplyToContainer.classList.add('active')
71                    }
72            
73                    let target = document.querySelector('#respond')
74                    target.scrollIntoView({
75                        behavior: 'smooth',
76                        block: 'start'
77                    })
78                })
79            }
80        });
81    
82        commentToggles.forEach(item => {
83            const showClass = 'show-children'
84            item.addEventListener('click', function(event) {
85                let parentEl = this.parentElement;
86                if(parentEl) {
87                    if(parentEl.classList.contains(showClass)) {
88                        parentEl.classList.remove(showClass)
89                    } else {
90                        parentEl.classList.add(showClass)
91                    }
92                }
93            })
94        })
95
96        if(cancelReply) {
97            cancelReply.addEventListener('click', function() {
98                if(commentReplyToContainer) {
99                    commentReplyToContainer.classList.remove('active')
100                }
101                let commentParentInput = document.querySelector('form.comment-form input[name="comment_parent"]')
102                if(commentParentInput) {
103                    commentParentInput.value = ''
104                }
105            })
106        }
107    }
108}
109
110(() => {

111	new CommentForm();
112})();