1/** 2 * Varkala - Bootstrap 5 E-commerce Theme v. 2.1.0 3 * Homepage: https://themes.getbootstrap.com/product/varkala-e-commerce-theme/ 4 * Copyright 2022, Bootstrapious - https://bootstrapious.com 5 */ 6 7"use strict"; 8 9$(function () { 10 AOS.init({ 11 disable: detectIE(), // dont' run in IEs as it's really slow 12 startEvent: "DOMContentLoaded", // name of the event dispatched on the document, that AOS should initialize on 13 offset: 120, // offset (in px) from the original trigger point 14 delay: 150, // values from 0 to 3000, with step 50ms 15 duration: 400, // values from 0 to 3000, with step 50ms 16 easing: "ease", // default easing for AOS animations 17 once: true, // whether animation should happen only once - while scrolling down 18 }); 19 20 // ------------------------------------------------------- // 21 // Increase/Decrease product amount 22 // ------------------------------------------------------ // 23 24 $(".btn-items-decrease").on("click", function () { 25 var input = $(this).siblings(".input-items"); 26 if (parseInt(input.val(), 10) >= 1) { 27 input.val(parseInt(input.val(), 10) - 1); 28 } 29 }); 30 31 $(".btn-items-increase").on("click", function () { 32 var input = $(this).siblings(".input-items"); 33 input.val(parseInt(input.val(), 10) + 1); 34 }); 35 36 // ------------------------------------------------------- // 37 // Vh hack for sidebars on mobiles 38 // ------------------------------------------------------ // 39 40 function setVhVar() { 41 var vh = window.innerHeight * 0.01; 42 // Then we set the value in the --vh custom property to the root of the document 43 document.documentElement.style.setProperty("--vh", vh + "px"); 44 } 45 46 setVhVar(); 47 48 // We listen to the resize event 49 window.addEventListener("resize", setVhVar); 50 51 // ------------------------------------------------------- // 52 // Transparent navbar dropdowns 53 // 54 // = do not make navbar 55 // transparent if dropdown's still open 56 // / make transparent again when dropdown's closed 57 // ------------------------------------------------------ // 58 59 var navbar = $(".navbar"), 60 navbarCollapse = $(".navbar-collapse"); 61 62 $(".navbar.bg-transparent .navbar-collapse").on( 63 "show.bs.collapse", 64 function () { 65 makeNavbarWhite(); 66 } 67 ); 68 69 $(".navbar.bg-transparent .navbar-collapse").on( 70 "hidden.bs.collapse", 71 function () { 72 makeNavbarTransparent(); 73 } 74 ); 75 76 function makeNavbarWhite() { 77 navbar.addClass("was-transparent"); 78 if (navbar.hasClass("navbar-dark")) { 79 navbar.addClass("was-navbar-dark"); 80 navbar.removeClass("navbar-dark"); 81 } else { 82 navbar.addClass("was-navbar-light"); 83 } 84 85 navbar.removeClass("bg-transparent"); 86 87 navbar.addClass("bg-white"); 88 navbar.addClass("navbar-light"); 89 } 90 91 function makeNavbarTransparent() { 92 navbar.removeClass("bg-white"); 93 navbar.removeClass("navbar-light"); 94 navbar.removeClass("was-transparent"); 95 96 navbar.addClass("bg-transparent"); 97 if (navbar.hasClass("was-navbar-dark")) { 98 navbar.addClass("navbar-dark"); 99 } else { 100 navbar.addClass("navbar-light"); 101 } 102 } 103 104 // ------------------------------------------------------- // 105 // Bootstrap tooltips 106 // ------------------------------------------------------- // 107 108 $('[data-bs-toggle="tooltip"]').tooltip(); 109 110 // ------------------------------------------------------- // 111 // Colour form control 112 // ------------------------------------------------------ // 113 114 $(".btn-colour").on("click", function (e) { 115 var button = $(this); 116 117 if (button.attr("data-allow-multiple") === undefined) { 118 button 119 .parents(".colours-wrapper") 120 .find(".btn-colour") 121 .removeClass("active"); 122 } 123 124 button.toggleClass("active"); 125 }); 126 127 // ------------------------------------------------------- // 128 // Button-style form labels used in product details 129 // ------------------------------------------------------ // 130 131 $(".detail-option-btn-label").on("click", function () { 132 var button = $(this); 133 134 button 135 .parents(".detail-option") 136 .find(".detail-option-btn-label") 137 .removeClass("active"); 138 139 button.toggleClass("active"); 140 }); 141 142 // ------------------------------------------------------- // 143 // Image zoom 144 // ------------------------------------------------------ // 145 146 $('[data-toggle="zoom"]').each(function () { 147 $(this).zoom({ 148 url: $(this).attr("data-image"), 149 duration: 0, 150 }); 151 }); 152 153 /* ================================================= 154 Change product image according to product color 155 ================================================= */ 156
157 let productColors = document.querySelectorAll(".product-color-input"); 158 let altProductImageLabels = document.querySelectorAll(".alt-img"); 159 let imgHolder = document.querySelectorAll(".product-img-holder"); 160 161 if (altProductImageLabels.length && imgHolder.length) { 162 altProductImageLabels.forEach((el) => { 163 el.closest(".product") 164 .querySelector(".product-img-holder") 165 .insertAdjacentHTML( 166 "beforeend", 167 `<img class="img-fluid alt-product-img" src=${el.dataset.img} data-id=${el.dataset.id}>` 168 ); 169 }); 170 } 171 172 if (productColors.length && imgHolder.length) { 173 productColors.forEach((color) => { 174 color.addEventListener("input", function () { 175 if (color.nextElementSibling.classList.contains("alt-img")) { 176 color 177 .closest(".product") 178 .querySelector( 179 `.alt-product-img[data-id=${color.nextElementSibling.dataset.id}]` 180 ).style.opacity = "1"; 181 color 182 .closest(".product") 183 .querySelectorAll( 184 `.alt-product-img:not([data-id=${color.nextElementSibling.dataset.id}])` 185 ) 186 .forEach((el) => { 187 el.style.opacity = "0"; 188 }); 189 } else { 190 color 191 .closest(".product") 192 .querySelectorAll(".alt-product-img") 193 .forEach((el) => { 194 el.style.opacity = "0"; 195 }); 196 } 197 }); 198 }); 199 } 200 201 /* ===================================================== 202 Product Slider 203 ===================================================== */ 204 var productsSlider = new Swiper(".product-slider", { 205 slidesPerView: 1, 206 spaceBetween: 0, 207 loop: true, 208 209 // Navigation arrows 210 navigation: { 211 nextEl: ".swiper-button-next", 212 prevEl: ".swiper-button-prev", 213 }, 214 }); 215 216 // ------------------------------------------------------- // 217 // Object Fit Images 218 // ------------------------------------------------------- // 219 220 objectFitImages(); 221}); 222 223function detectIE() { 224 var ua = window.navigator.userAgent; 225 var msie = ua.indexOf("MSIE "); 226 var version = false; 227 228 if (msie > 0) { 229 // IE 10 or older => return version number 230 version = parseInt(ua.substring(msie + 5, ua.indexOf(".", msie)), 10); 231 } 232 233 var trident = ua.indexOf("Trident/"); 234 if (trident > 0) { 235 // IE 11 => return version number 236 var rv = ua.indexOf("rv:"); 237 version = parseInt(ua.substring(rv + 3, ua.indexOf(".", rv)), 10); 238 } 239 240 var edge = ua.indexOf("Edge/"); 241 if (edge > 0) { 242 // Edge (IE 12+) => return version number 243 version = parseInt(ua.substring(edge + 5, ua.indexOf(".", edge)), 10); 244 } 245 246 if (version !== false && version <= 11) { 247 return true; 248 } else { 249 return false; 250 } 251}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.