admin.js
344 lines
| 1 | ;(function ($) { |
| 2 | |
| 3 | "use strict"; |
| 4 | |
| 5 | // Remove svg.radial-progress .complete inline styling |
| 6 | $("svg.radial-progress").each(function (index, value) { |
| 7 | $(this).find($("circle.complete")).removeAttr("style"); |
| 8 | }); |
| 9 | |
| 10 | $(window).scroll(function () { |
| 11 | $("svg.radial-progress").each(function (index, value) { |
| 12 | // If svg.radial-progress is approximately 25% vertically into the window when scrolling from the top or the bottom |
| 13 | if ( |
| 14 | $(window).scrollTop() > |
| 15 | $(this).offset().top - $(window).height() * 0.75 && |
| 16 | $(window).scrollTop() < |
| 17 | $(this).offset().top + $(this).height() - $(window).height() * 0.25 |
| 18 | ) { |
| 19 | // Get percentage of progress |
| 20 | let percent = $(value).data("percentage"); |
| 21 | |
| 22 | // Get radius of the svg's circle.complete |
| 23 | let radius = $(this).find($("circle.complete")).attr("r"); |
| 24 | |
| 25 | // Get circumference (2πr) |
| 26 | let circumference = 2 * Math.PI * radius; |
| 27 | |
| 28 | // Get stroke-dashoffset value based on the percentage of the circumference |
| 29 | let strokeDashOffset = |
| 30 | circumference - (percent * circumference) / 100; |
| 31 | |
| 32 | // Transition progress for 1.25 seconds |
| 33 | $(this).find($("circle.complete")).animate({"stroke-dashoffset": strokeDashOffset}, 1250); |
| 34 | } |
| 35 | }); |
| 36 | }) |
| 37 | .trigger("scroll"); |
| 38 | |
| 39 | // switcher js |
| 40 | document.addEventListener("DOMContentLoaded", function () { |
| 41 | |
| 42 | // Handling for element_switcher |
| 43 | let elementDisable = document.getElementById("element_disabled"), |
| 44 | elementEnable = document.getElementById("element_enabled"), |
| 45 | elementSwitcher = document.getElementById("element_switcher"); |
| 46 | |
| 47 | if (elementDisable && elementEnable && elementSwitcher) { |
| 48 | elementDisable.addEventListener("click", function () { |
| 49 | elementSwitcher.checked = false; |
| 50 | elementDisable.classList.add("toggler--is-active"); |
| 51 | elementEnable.classList.remove("toggler--is-active"); |
| 52 | }); |
| 53 | |
| 54 | elementEnable.addEventListener("click", function () { |
| 55 | elementSwitcher.checked = true; |
| 56 | elementEnable.classList.add("toggler--is-active"); |
| 57 | elementDisable.classList.remove("toggler--is-active"); |
| 58 | }); |
| 59 | |
| 60 | elementSwitcher.addEventListener("click", function () { |
| 61 | elementEnable.classList.toggle("toggler--is-active"); |
| 62 | elementDisable.classList.toggle("toggler--is-active"); |
| 63 | }); |
| 64 | } |
| 65 | |
| 66 | // Handling for feature_switcher |
| 67 | let featureDisable = document.getElementById("features_disabled"), |
| 68 | featureEnable = document.getElementById("features_enabled"), |
| 69 | featureSwitcher = document.getElementById("features_switcher"); |
| 70 | |
| 71 | if (featureDisable && featureEnable && featureSwitcher) { |
| 72 | console.log('Feature switcher found.'); |
| 73 | featureDisable.addEventListener("click", function () { |
| 74 | featureSwitcher.checked = false; |
| 75 | featureDisable.classList.add("toggler--is-active"); |
| 76 | featureEnable.classList.remove("toggler--is-active"); |
| 77 | }); |
| 78 | |
| 79 | featureEnable.addEventListener("click", function () { |
| 80 | featureSwitcher.checked = true; |
| 81 | featureEnable.classList.add("toggler--is-active"); |
| 82 | featureDisable.classList.remove("toggler--is-active"); |
| 83 | }); |
| 84 | |
| 85 | featureSwitcher.addEventListener("click", function () { |
| 86 | featureEnable.classList.toggle("toggler--is-active"); |
| 87 | featureDisable.classList.toggle("toggler--is-active"); |
| 88 | }); |
| 89 | } else { |
| 90 | console.log('Feature switcher not found.'); |
| 91 | } |
| 92 | |
| 93 | |
| 94 | }); // end switcher js |
| 95 | |
| 96 | |
| 97 | $(document).ready(function () { |
| 98 | |
| 99 | // Set up event listener for tab click |
| 100 | $(".tab-menu li a").on("click", function () { |
| 101 | $(this).closest(".tab-menu").find("li a").removeClass("active"); |
| 102 | |
| 103 | // Add active class to the clicked tab |
| 104 | $(this).addClass("active"); |
| 105 | |
| 106 | let target = $(this).attr("href"); |
| 107 | |
| 108 | $(".tab-box") |
| 109 | .removeClass("active") |
| 110 | .fadeOut(0, function () { |
| 111 | $(target).addClass("active").fadeIn(0); |
| 112 | }); |
| 113 | |
| 114 | // Trigger Isotope filtering after the tab is clicked |
| 115 | filterMasonry(); |
| 116 | filterMasonryTwo(); |
| 117 | filterMasonryThree(); |
| 118 | |
| 119 | // Set a cookie to remember the active button |
| 120 | setCookie('spe_settings_current_tab', $(this).data('content'), 1); |
| 121 | |
| 122 | return false; |
| 123 | }); |
| 124 | |
| 125 | // Function to set a cookie |
| 126 | function setCookie(name, value, days) { |
| 127 | let expires = ""; |
| 128 | if (days) { |
| 129 | let date = new Date(); |
| 130 | date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); |
| 131 | expires = "; expires=" + date.toUTCString(); |
| 132 | } |
| 133 | document.cookie = name + "=" + value + expires + "; path=/"; |
| 134 | } |
| 135 | |
| 136 | // Function to get a cookie |
| 137 | function getCookie(name) { |
| 138 | let nameEQ = name + "="; |
| 139 | let ca = document.cookie.split(';'); |
| 140 | for (let i = 0; i < ca.length; i++) { |
| 141 | let c = ca[i]; |
| 142 | while (c.charAt(0) === ' ') c = c.substring(1, c.length); |
| 143 | if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); |
| 144 | } |
| 145 | return null; |
| 146 | } |
| 147 | |
| 148 | // Remain the last active settings tab |
| 149 | function spel_keep_settings_current_tab() { |
| 150 | |
| 151 | let activeButton = getCookie('spe_settings_current_tab'); |
| 152 | if (activeButton) { |
| 153 | // Tab active |
| 154 | $('.tab-menu .tab-menu-link[data-content="' + activeButton + '"]').addClass('active'); |
| 155 | $('.tab-menu .tab-menu-link:not([data-content="' + activeButton + '"])').removeClass('active'); |
| 156 | |
| 157 | // Tab content active |
| 158 | $('.tab_contents .tab-box#' + activeButton).addClass('active'); |
| 159 | $('.tab_contents .tab-box:not(#' + activeButton + ')').removeClass('active'); |
| 160 | } |
| 161 | } |
| 162 | |
| 163 | spel_keep_settings_current_tab(); |
| 164 | |
| 165 | }); |
| 166 | |
| 167 | // filter js |
| 168 | /*===========elements isotope js===========*/ |
| 169 | function filterMasonry() { |
| 170 | var filter = $("#elements_list"); |
| 171 | if (filter.length) { |
| 172 | filter.imagesLoaded(function () { |
| 173 | // images have loaded |
| 174 | // Activate isotope in container |
| 175 | filter.isotope({ |
| 176 | itemSelector: ".ezd-colum-space-4", |
| 177 | filter: "*", |
| 178 | }); |
| 179 | }); |
| 180 | } |
| 181 | } |
| 182 | |
| 183 | $(document).ready(function () { |
| 184 | // Initialize Isotope on page load |
| 185 | filterMasonry(); |
| 186 | let filter = $("#elements_list, #features_gallery"); |
| 187 | |
| 188 | // Add isotope click function |
| 189 | $("#elements_filter div").on("click", function () { |
| 190 | $("#elements_filter div").removeClass("active"); |
| 191 | $(this).addClass("active"); |
| 192 | |
| 193 | let selector = $(this).attr("data-filter"); |
| 194 | filter.isotope({ |
| 195 | filter: selector, |
| 196 | }); |
| 197 | return false; |
| 198 | }); |
| 199 | }); |
| 200 | |
| 201 | /*===========elements isotope js===========*/ |
| 202 | |
| 203 | /*===========api isotope js===========*/ |
| 204 | function filterMasonryTwo() { |
| 205 | var filters = $("#api_setting"); |
| 206 | if (filters.length) { |
| 207 | filters.imagesLoaded(function () { |
| 208 | // images have loaded |
| 209 | // Activate isotope in container |
| 210 | filters.isotope({ |
| 211 | itemSelector: ".ezd-colum-space-4", |
| 212 | filter: "*", |
| 213 | }); |
| 214 | }); |
| 215 | } |
| 216 | } |
| 217 | |
| 218 | $(document).ready(function () { |
| 219 | // Initialize Isotope on page load |
| 220 | filterMasonryTwo(); |
| 221 | var filter = $("#api_setting"); |
| 222 | // Add isotope click function |
| 223 | $("#api_filter div").on("click", function () { |
| 224 | $("#api_filter div").removeClass("active"); |
| 225 | $(this).addClass("active"); |
| 226 | |
| 227 | var selector = $(this).attr("data-filter"); |
| 228 | filter.isotope({ |
| 229 | filter: selector, |
| 230 | }); |
| 231 | return false; |
| 232 | }); |
| 233 | }); |
| 234 | |
| 235 | /*===========api isotope js===========*/ |
| 236 | |
| 237 | /* ============features isotope js ============*/ |
| 238 | function filterMasonryThree() { |
| 239 | var filter = $("#features_gallery"); |
| 240 | if (filter.length) { |
| 241 | filter.imagesLoaded(function () { |
| 242 | // images have loaded |
| 243 | // Activate isotope in container |
| 244 | filter.isotope({ |
| 245 | itemSelector: ".ezd-colum-space-4", |
| 246 | filter: "*", |
| 247 | }); |
| 248 | }); |
| 249 | } |
| 250 | } |
| 251 | |
| 252 | $(document).ready(function () { |
| 253 | // Initialize Isotope on page load |
| 254 | filterMasonryThree(); |
| 255 | var filter = $("#features_gallery"); |
| 256 | // Add isotope click function |
| 257 | $("#features_filter div").on("click", function () { |
| 258 | $("#features_filter div").removeClass("active"); |
| 259 | $(this).addClass("active"); |
| 260 | |
| 261 | var selector = $(this).attr("data-filter"); |
| 262 | filter.isotope({ |
| 263 | filter: selector, |
| 264 | }); |
| 265 | return false; |
| 266 | }); |
| 267 | }); |
| 268 | |
| 269 | $(".pro_popup").on("click", function (e) { |
| 270 | $("#elements_popup1").addClass("popup-visible"); |
| 271 | }); |
| 272 | $(".pro-close").on("click", function (e) { |
| 273 | $("#elements_popup1").removeClass("popup-visible"); |
| 274 | }); |
| 275 | |
| 276 | if ($(".popup_youtube").length) { |
| 277 | $(".popup_youtube").fancybox({ |
| 278 | type: "iframe", //<--added |
| 279 | maxWidth: 800, |
| 280 | maxHeight: 600, |
| 281 | fitToView: false, |
| 282 | width: "70%", |
| 283 | height: "70%", |
| 284 | autoSize: false, |
| 285 | closeClick: false, |
| 286 | openEffect: "elastic", |
| 287 | closeEffect: "elastic", |
| 288 | }); |
| 289 | } |
| 290 | |
| 291 | // Elements list Save Now Button |
| 292 | function elementsSaveNowButton() { |
| 293 | let elementsList = $(".element_right .widget-list"); |
| 294 | elementsList.on("click", function () { |
| 295 | // Check if the checkbox is checked |
| 296 | if ($(this).is(":checked")) { |
| 297 | $(".dashboard_btn").addClass("save-now"); |
| 298 | } else { |
| 299 | $(".dashboard_btn") |
| 300 | .removeClass("save-now") |
| 301 | .removeAttr("disabled") |
| 302 | .css("cursor", "pointer" |
| 303 | ); |
| 304 | } |
| 305 | }); |
| 306 | |
| 307 | // Global Switcher for all widgets |
| 308 | let globalSwitcher = $('.menu_right_content .element_global_switcher, .menu_right_content .features_global_switcher'); |
| 309 | globalSwitcher.on("click", function () { |
| 310 | let status = $(this).prop("checked"); |
| 311 | let dataId = $(this).data("id"); |
| 312 | let alignClass = ".widget_checkbox." + dataId + ":enabled"; |
| 313 | |
| 314 | $(alignClass).each(function () { |
| 315 | $(this).prop("checked", status).change(); |
| 316 | }); |
| 317 | |
| 318 | $(".dashboard_btn") |
| 319 | .addClass("save-now") |
| 320 | .removeAttr("disabled") |
| 321 | .css("cursor", "pointer"); |
| 322 | }); |
| 323 | |
| 324 | // Individual Switcher for each widget |
| 325 | let widgetSwitcher = $(".element_right .widget-list:checked"); |
| 326 | widgetSwitcher.on("click", function () { |
| 327 | $(".dashboard_btn") |
| 328 | .addClass("save-now") |
| 329 | .removeAttr("disabled") |
| 330 | .css("cursor", "pointer"); |
| 331 | }); |
| 332 | |
| 333 | // Button Setting Switcher Enable/Disable |
| 334 | let elementsSettingBtn = $(".elements_tab_menu .menu_right_content .save_btn"); |
| 335 | elementsSettingBtn.on("click", function (event) { |
| 336 | //event.preventDefault(); |
| 337 | //alert('Saved Successfully'); |
| 338 | }); |
| 339 | } |
| 340 | |
| 341 | elementsSaveNowButton(); |
| 342 | |
| 343 | })(jQuery); |
| 344 |