https://clockify.me/help/wp-content/plugins/custom-components/assets/js/front.js?ver=1771855824

1document.addEventListener("DOMContentLoaded", function() {
2
3    // Copy to Clipboard
4    document.addEventListener('click', function(e) {
5        if (e.target.closest('.copy-btn')) {
6            handleCopyClick(e.target.closest('.copy-btn'));
7        }
8    });
9
10    function handleCopyClick(button) {
11        const wrapper = button.closest('.auto-code-wrapper');
12        const codeElement = wrapper ? wrapper.querySelector('code') : null;
13        
14        if (!codeElement) return;
15
16        const codeText = codeElement.innerText;
17        
18        const textNode = Array.from(button.childNodes).find(node => 
19            node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== ""
20        );
21
22        navigator.clipboard.writeText(codeText).then(() => {
23            if (textNode) {
24                const originalText = textNode.textContent;
25                textNode.textContent = ' Copied!';
26                button.style.color = 'var(--token-function)'; 
27
28                setTimeout(() => {
29                    textNode.textContent = originalText;
30                    button.style.color = '';
31                }, 2000);
32            }
33        }).catch(err => {
34            console.error('Failed to copy:', err);
35        });
36    }
37
38
39    // Accordion Animation
40    const accordions = document.querySelectorAll('.step-accordion');
41    
42    accordions.forEach(el => {
43        const summary = el.querySelector('.accordion-header');
44        const content = el.querySelector('.accordion-body');
45
46        if (!summary || !content) return;
47
48        summary.addEventListener('click', (e) => {
49            e.preventDefault(); 
50
51            if (el.hasAttribute('open')) {
52                const startHeight = content.scrollHeight;
53                
54                content.style.height = startHeight + 'px';
55                
56                void content.offsetHeight; 
57
58                content.style.height = '0px';
59                content.style.opacity = '0';
60                
61                content.addEventListener('transitionend', function() {
62                    el.removeAttribute('open');
63                    content.style.height = ''; 
64                    content.style.opacity = '';
65                }, { once: true });
66
67            } else {
68                el.setAttribute('open', '');
69                
70                content.style.height = '0px';
71                content.style.opacity = '0';
72                
73                const targetHeight = content.scrollHeight;
74
75                requestAnimationFrame(() => {
76                    content.style.height = targetHeight + 'px';
77                    content.style.opacity = '1';
78                });
79
80                content.addEventListener('transitionend', function() {
81                    content.style.height = 'auto'; 
82                }, { once: true });
83            }
84        });
85    });
86
87    // --- Feature 3: Glossary Links ---
88    // Turn spans with data-url into clickable items
89    document.querySelectorAll('.glossary-simple-link').forEach(span => {
90        const url = span.getAttribute('data-url');
91        if (url) {
92            span.addEventListener('click', function() {
93                window.location.href = url;
94            });
95        }
96    });
97
98});