https://kareconnect.com.au/assets/front-end/assets/js/soft-design-system.js

1/*!
2
3=========================================================
4* Soft UI Design System - v1.0.8
5=========================================================
6
7* Product Page: https://www.creative-tim.com/product/soft-ui-design-system
8* Copyright 2021 Creative Tim (https://www.creative-tim.com)
9
10* Coded by Creative Tim
11
12=========================================================
13
14* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
15
16*/
17
18// initialization of Popovers
19var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
20var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
21    return new bootstrap.Popover(popoverTriggerEl)
22})
23
24// initialization of Tooltips
25var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
26var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
27    return new bootstrap.Tooltip(tooltipTriggerEl)
28})
29
30// helper for adding on all elements multiple attributes
31function setAttributes(el, options) {
32    Object.keys(options).forEach(function (attr) {
33        el.setAttribute(attr, options[attr]);
34    })
35}
36
37// activate popovers
38var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
39var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
40    return new bootstrap.Popover(popoverTriggerEl)
41})
42
43// activate tooltips
44var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
45var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
46    return new bootstrap.Tooltip(tooltipTriggerEl)
47})
48
49// Tabs navigation
50
51var total = document.querySelectorAll('.nav-pills');
52
53total.forEach(function (item, i) {
54    var moving_div = document.createElement('div');
55    var first_li = item.querySelector('li:first-child .nav-link');
56    var tab = first_li.cloneNode();
57    tab.innerHTML = "-";
58
59    moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
60    moving_div.appendChild(tab);
61    item.appendChild(moving_div);
62
63    var list_length = item.getElementsByTagName("li").length;
64
65    moving_div.style.padding = '0px';
66    moving_div.style.width = item.querySelector('li:nth-child(1)').offsetWidth + 'px';
67    moving_div.style.transform = 'translate3d(0px, 0px, 0px)';
68    moving_div.style.transition = '.5s ease';
69
70    item.onmouseover = function (event) {
71        let target = getEventTarget(event);
72        let li = target.closest('li'); // get reference
73        if (li) {
74            let nodes = Array.from(li.closest('ul').children); // get array
75            let index = nodes.indexOf(li) + 1;
76            item.querySelector('li:nth-child(' + index + ') .nav-link').onclick = function () {
77                moving_div = item.querySelector('.moving-tab');
78                let sum = 0;
79                if (item.classList.contains('flex-column')) {
80                    for (var j = 1; j <= nodes.indexOf(li); j++) {
81                        sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
82                    }
83                    moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
84                    moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
85                } else {
86                    for (var j = 1; j <= nodes.indexOf(li); j++) {
87                        sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
88                    }
89                    moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
90                    moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
91                }
92            }
93        }
94    }
95});
96
97
98// Tabs navigation resize
99
100window.addEventListener('resize', function (event) {
101    total.forEach(function (item, i) {
102        item.querySelector('.moving-tab').remove();
103        var moving_div = document.createElement('div');
104        var tab = item.querySelector(".nav-link.active").cloneNode();

105        tab.innerHTML = "-";
106
107        moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link');
108        moving_div.appendChild(tab);
109
110        item.appendChild(moving_div);
111
112        moving_div.style.padding = '0px';
113        moving_div.style.transition = '.5s ease';
114
115        let li = item.querySelector(".nav-link.active").parentElement;
116
117        if (li) {
118            let nodes = Array.from(li.closest('ul').children); // get array
119            let index = nodes.indexOf(li) + 1;
120
121            let sum = 0;
122            if (item.classList.contains('flex-column')) {
123                for (var j = 1; j <= nodes.indexOf(li); j++) {
124                    sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight;
125                }
126                moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
127                moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
128                moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
129            } else {
130                for (var j = 1; j <= nodes.indexOf(li); j++) {
131                    sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
132                }
133                moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
134                moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
135
136            }
137        }
138    });
139
140    if (window.innerWidth < 991) {
141        total.forEach(function (item, i) {
142            if (!item.classList.contains('flex-column')) {
143                item.classList.add('flex-column', 'on-resize');
144            }
145        });
146    } else {
147        total.forEach(function (item, i) {
148            if (item.classList.contains('on-resize')) {
149                item.classList.remove('flex-column', 'on-resize');
150            }
151        })
152    }
153});
154
155
156function getEventTarget(e) {
157    e = e || window.event;
158    return e.target || e.srcElement;
159}
160
161// End tabs navigation
162
163// Copy code function
164
165function copyCode(el) {
166    const selection = window.getSelection();
167    const range = document.createRange();
168    const textToCopy = el.nextElementSibling;
169    range.selectNodeContents(textToCopy);
170    selection.removeAllRanges();
171    selection.addRange(range);
172    const successful = document.execCommand('copy');
173    window.getSelection().removeAllRanges()
174    if (!el.parentElement.querySelector('.alert')) {
175        var alert = document.createElement('div');
176        alert.classList.add('alert', 'alert-success', 'position-absolute', 'top-0', 'border-0', 'text-white', 'w-25', 'end-0', 'start-0', 'mt-2', 'mx-auto', 'py-2');
177        alert.style.transform = 'translate3d(0px, 0px, 0px)'
178        alert.style.opacity = '0';
179        alert.style.transition = '.35s ease';
180        setTimeout(function () {
181            alert.style.transform = 'translate3d(0px, 20px, 0px)';
182            alert.style.setProperty("opacity", "1", "important");
183        }, 100);
184        alert.innerHTML = "Code successfully copied!";
185        el.parentElement.appendChild(alert);
186        setTimeout(function () {
187            alert.style.transform = 'translate3d(0px, 0px, 0px)'
188            alert.style.setProperty("opacity", "0", "important");
189        }, 2000);
190        setTimeout(function () {
191            el.parentElement.querySelector('.alert').remove();
192        }, 2500);
193    }
194}
195
196// End copy code function
197
198// Input focus function
199var getParent = function (elem, selector) {
200    for (; elem && elem !== document; elem = elem.parentNode) {
201        if (elem.matches(selector)) return elem;
202    }
203    return null;
204};
205document.addEventListener('click', function (event) {
206    var parent = getParent(event.target, '.input-group');
207    if (event.target.classList.contains('form-control')) {
208        var focus = document.querySelectorAll('.input-group.focused');
209        for (var i = 0; i < focus.length; i++) {
210            focus[i].classList.remove('focused');
211        }
212        if(parent){
213            parent.classList.add('focused');
214        }
215    }
216    var focus = document.querySelectorAll('.input-group.focused');
217    if (focus && event.target != parent && event.target.parentNode != parent) {
218        for (var i = 0; i < focus.length; i++) {
219            focus[i].classList.remove('focused');
220        }
221
222    }
223}, false);
224
225
226// Returns a function, that, as long as it continues to be invoked, will not
227// be triggered. The function will be called after it stops being called for
228// N milliseconds. If `immediate` is passed, trigger the function on the
229// leading edge, instead of the trailing.
230
231function debounce(func, wait, immediate) {
232    var timeout;
233    return function () {
234        var context = this,
235            args = arguments;
236        clearTimeout(timeout);
237        timeout = setTimeout(function () {
238            timeout = null;

239            if (!immediate) func.apply(context, args);
240        }, wait);
241        if (immediate && !timeout) func.apply(context, args);
242    };
243};