https://www.cloudmate.in/assets/js/templates.js

1(function ($) {
2
3  // FOR: Navbar
4
5  // Close notices bar.
6  $('#close-notices-bar-btn').on('click', function () {
7    $('#notices-bar').slideUp();
8  });
9
10  // Languages Menu.
11  $('#lang .current').on('click', function () {
12    $(this).parent().toggleClass('open');
13  });
14
15  // Hide (#lang) when click outside it.
16  $(document).mouseup(function (e) {
17    const langMenu = $("#lang");
18    // if the target of the click isn't the langMenu nor a descendant of the langMenu
19    if (!langMenu.is(e.target) && langMenu.has(e.target).length === 0) {
20      langMenu.removeClass('open');
21    }
22  });
23
24  // Open (.links).
25  $('#open-links-btn').on('click', function () {
26    $('#theme-navbar-links').addClass('open-links');
27  });
28
29  // Close (.links).
30  $('#close-links-btn').on('click', function () {
31    $('#theme-navbar-links').removeClass('open-links');
32  });
33
34// Indicator setup
35const link = $("#theme-navbar .nav-bottom .links .link");
36const ind = $("#theme-navbar .nav-bottom .links .indicator");
37const indicator = $("#id-indi");
38const path = window.location.pathname;
39
40// Onclick
41link.each(function () {
42  $(this).on("click", function (e) {
43    $(this).addClass('active').siblings().removeClass('active');
44  });
45});
46
47$(document).ready(function () {
48  if (path == "/"){
49    indicator.css("width", 40.3);
50  }
51  else if (path == "/shared-hosting/" || path == "/Managed-vps/") {
52    indicator.css("width", 66.6);
53    indicator.css("left", 61);
54  }
55  else if (path == "/reseller-hosting/" || path == "/master-reseller/" || path == "/alpha-reseller/"){
56    indicator.css("width", 75.93);
57    indicator.css("left", 147);
58  }
59  else if (path == "/vps/" || path == "/vps-india/" || path == "/cloud/" || path == "/dedi-servers/"){
60    indicator.css("width", 64.91);
61    indicator.css("left", 243);
62  }
63  else if (path == "/ssl/") {
64    indicator.css("width", 107.74);
65    indicator.css("left", 328);
66  }
67  else if (path == "/domains/") {
68    indicator.css("width", 59.43);
69    indicator.css("left", 455);
70  }
71  else if (path == "/about/") {
72    indicator.css("width", 61.55);
73    indicator.css("left", 534);
74  }
75  else if (path == "blog" || path == "/contact/" || path == "/abuse/") {
76    indicator.css("width", 67.45);
77    indicator.css("left", 617);
78  }
79});
80
81
82  // Navbar f-nav.
83  $('#theme-navbar .f-nav .f-nav-tab').on('click', function(e) {
84    const filter = $(this).data('filter');
85    $('#theme-navbar .mega-menu .f-area.'+filter).siblings().hide();
86    $('#theme-navbar .mega-menu .f-area.'+filter).show();
87  });
88
89  // Open (#side-box).
90  $('#side-box-btn').on('click', function() {
91    $('#side-box').addClass('open-side-box');
92  });
93
94  // Close (#side-box).
95  $('#close-side-box-btn').on('click', function() {
96    $('#side-box').removeClass('open-side-box');
97  });
98
99  // 
100  // Indicator.
101  const sb_link = $("#theme-navbar .side-box .f-nav .f-nav-tab");
102  const sb_ind = $("#theme-navbar .side-box .f-nav .indicator");
103  const sb_linkWidth = $("#theme-navbar .side-box .f-nav .f-nav-tab:nth-child(1)").width();
104  sb_ind.css('width', sb_linkWidth);
105
106  function handleIndicator(ele) {
107    sb_ind.css('width', ele.offsetWidth + 'px');
108    sb_ind.css('left', ele.offsetLeft + 'px');
109  }
110
111  sb_link.each(function (item, index) {
112    $(this).on("click", function (e) {
113      handleIndicator(e.target);
114      $(this).addClass('active').siblings().removeClass('active');
115    });
116  });
117
118  // Check if class (open-side-box) exist.
119  $("#theme-navbar .nav-bottom .links .link:not(#side-box-btn)").on('click', function() {
120    if ($('.open-side-box')[0]) {
121      $('#side-box').removeClass('open-side-box');
122    }
123  });
124
125  // Hide (#side-box) when click outside it.
126  $(document).mouseup(function (e) {
127    const sideBox = $("#side-box");
128    // if the target of the click isn't the sideBox nor a descendant of the sideBox
129    if (!sideBox.is(e.target) && sideBox.has(e.target).length === 0) {
130      sideBox.removeClass('open-side-box');
131    }
132  });
133
134  // Dropdown menu.
135  $('#theme-navbar .link.has-dropdown-menu > a').on('click', function (e) {
136    e.preventDefault();
137  });
138
139  // Show and hide (.dropdown-menu).
140  $('#theme-navbar .link.has-dropdown-menu > a').on('click', function () {
141	$(this).parent().siblings().removeClass('open-dropdown-menu');
142    $(this).parent().toggleClass('open-dropdown-menu');
143  });
144
145  // Hide (.dropdown-menu) when click outside it.
146  $(document).mouseup(function (e) {
147    const dropdownMenu = $("#theme-navbar .link.has-dropdown-menu");
148    // if the target of the click isn't the dropdownMenu nor a descendant of the dropdownMenu
149    if (!dropdownMenu.is(e.target) && dropdownMenu.has(e.target).length === 0) {
150      dropdownMenu.removeClass('open-dropdown-menu');
151    }
152  });
153
154  // Open (#user-dropdown-menu).
155  $('#user-menu-btn > img').on('click', function () {
156    $('#user-menu-btn').toggleClass('open')
157  });
158
159  // Hide (#user-dropdown-menu) when click outside it.
160  $(document).mouseup(function (e) {
161    const userDropMenu = $("#user-menu-btn");
162    // if the target of the click isn't the userDropMenu nor a descendant of the userDropMenu
163    if (!userDropMenu.is(e.target) && userDropMenu.has(e.target).length === 0) {
164      userDropMenu.removeClass('open');
165    }
166  });
167  // ------------------------------------------------------
168
169  // FOR: Footer
170
171  // Footer List
172  $('.theme-footer .list-title').on('click', function () {
173    $(this).parent().toggleClass('open-list');
174  });
175  // Cookies Dialog
176  $('#cookies-dialog-btn').on('click', function () {
177    $('#cookies-dialog').fadeOut();
178  });
179  // ------------------------------------------------------
180
181  // FOR: Theme Settings
182  $('#theme-settings-btn').on('click', function () {
183    $('#theme-settings').addClass('open');
184  });
185  // Close Theme Settings
186  $('#theme-settings-close-btn').on('click', function () {
187    $('#theme-settings').removeClass('open');
188  });
189
190  // FOR: Themes
191  function applyTheme(theme) {
192    if (theme === 'light') {
193        $('body').addClass('light-theme');
194        $('#light-theme-btn').addClass('active-theme');
195        $('#dark-theme-btn').removeClass('active-theme');
196    } else {
197        $('body').removeClass('light-theme');
198        $('#light-theme-btn').removeClass('active-theme');
199        $('#dark-theme-btn').addClass('active-theme');
200    }
201  }
202
203  // On document ready, apply the stored theme
204  $(document).ready(function() {
205    const savedTheme = localStorage.getItem('theme');
206    if (savedTheme) {
207        applyTheme(savedTheme);
208    } else {
209        applyTheme('light'); // Default theme
210    }
211  });
212
213  // Theme selection click event
214  $('#theme-settings .theme-btn').on('click', function () {
215    // Add class (active-theme).
216    $(this).addClass('active-theme').siblings().removeClass('active-theme');
217
218    // Check if button for light theme
219    if ($(this).attr('id') === 'light-theme-btn') {
220        $('body').addClass('light-theme');
221        localStorage.setItem('theme', 'light');
222    }
223
224    // Else if button for dark theme
225    else if ($(this).attr('id') === 'dark-theme-btn') {
226        $('body').removeClass('light-theme');
227        localStorage.setItem('theme', 'dark');
228    }
229  });
230
231  // FOR: Feature Option
232  $('#theme-settings .feature-option .switch-btn').on('click', function () {
233    // Toggle class (option-active).
234    $(this).parent().toggleClass('option-active');
235  });
236  // ------------------------------------------------------
237
238  // FOR: FAQs
239
240  // (#faqs-category)
241  $('#faqs-category .item').on('click', function() {
242
243    $(this).addClass('active').siblings().removeClass('active');
244
245    const data = $(this).data('category');
246
247    // hide all boxes then show one that clicked
248    $('#faqs .box').hide();
249    $('#faqs .box.category-' + data).show();
250
251  });
252
253  // (#faqs .q)
254  $('#faqs .q .q-h').on('click', function() {
255    $(this).parent().toggleClass('open').siblings().removeClass('open');
256    if ($(this).parent().hasClass('open')) {
257      $(this).parent().find('.q-b').slideDown();
258      $(this).parent().siblings().find('.q-b').slideUp();
259    } else {
260      $(this).parent().find('.q-b').slideUp();
261    }
262  });
263  // ------------------------------------------------------
264
265}(jQuery));