1"use strict"; 2 3/* @->zoom */ 4//zoom(); 5 6/* @-<zoom ********************************************************************/ 7/******************************************************************************/ 8function zoom(classNames, settings) { 9 /* Settings */ 10 classNames = (typeof(classNames) !== 'undefined' && Object.keys(classNames).length ? classNames : {}); 11 settings = (typeof(settings) !== 'undefined' && Object.keys(settings).length ? settings : {}); 12 13 var C_scaleDefault = settings["scaleDefault"] || 2; // Used on doubleclick, doubletap and resize 14 var C_scaleDifference = settings["scaleDifference"] || 0.5; // Used on wheel zoom 15 var C_scaleMax = settings["scaleMax"] || 2; 16 var C_scaleMin = settings["scaleMin"] || 1; 17 18 /* Selectors */ 19 var _active = classNames["active"] || "active"; 20 var _dataScale = "data-scale"; 21 var _dataTranslateX = "data-translate-x"; 22 var _dataTranslateY = "data-translate-y"; 23 var _transition = classNames["transition-zoom"] || "transition-zoom"; 24 var _visible = classNames["visible"] || "visible"; 25 var $slider; 26 var $container; 27 var $element; 28 var $zoom = document.getElementsByClassName(classNames["zoomer"] || "zoomer"); 29 /* Helpers */ 30 var capture = false; 31 var doubleClickMonitor = [null]; 32 var containerHeight; 33 var containerWidth; 34 var containerOffsetX; 35 var containerOffsetY; 36 var initialScale; 37 var elementHeight; 38 var elementWidth; 39 var heightDifference; 40 var initialOffsetX; 41 var initialOffsetY; 42 var initialPinchDistance; 43 var initialPointerOffsetX; 44 var initialPointerOffsetX2; 45 var initialPointerOffsetY; 46 var initialPointerOffsetY2; 47 var limitOffsetX; 48 var limitOffsetY; 49 var mousemoveCount = 0; 50 var offset; 51 var pinchOffsetX; 52 var pinchOffsetY; 53 var pointerOffsetX; 54 var pointerOffsetX2; 55 var pointerOffsetY; 56 var pointerOffsetY2; 57 var scaleDirection; 58 var scaleDifference; 59 var targetOffsetX; 60 var targetOffsetY; 61 var targetPinchDistance; 62 var targetScale; 63 var touchable = false; 64 var touchCount; 65 var touchmoveCount = 0; 66 var doubleTapMonitor = [null]; 67 var widthDifference; 68 69 70 71 /* EVENT - DOM ready ********************************************************/ 72 /****************************************************************************/ 73 for (var i = 0; i < $zoom.length; i++) { 74 /* Initialize selectors */ 75 $container = $zoom[i]; 76 $element = $container.children[0]; 77 78 /* Set attributes */ 79 $element.setAttribute(_dataScale, 1); 80 $element.setAttribute(_dataTranslateX, 0); 81 $element.setAttribute(_dataTranslateY, 0); 82 } 83 84 if(window.innerWidth>768) { 85 86 /* EVENT - mouseenter - $zoom ***********************************************/ 87 /* **************************************************************************/ 88 massAddEventListener($zoom, "mouseover", mouseEnter); 89 90 /* EVENT - mouseleave - $zoom ***********************************************/ 91 /* **************************************************************************/ 92 massAddEventListener($zoom, "mouseout", mouseLeave); 93 94 /* EVENT - mousemove - document *********************************************/ 95 /****************************************************************************/ 96 document.addEventListener("mousemove", mouseMove); 97 98 99 } else { 100 101 /* EVENT - touchstart - document ********************************************/ 102 /****************************************************************************/ 103 document.addEventListener("touchstart", function() { 104 touchable = true; 105 }); 106 107 /* EVENT - touchstart - $zoom ***********************************************/ 108 /* **************************************************************************/ 109 massAddEventListener($zoom, "touchstart", touchStart); 110 111 /* EVENT - touchmove - document *********************************************/ 112 /****************************************************************************/ 113 document.addEventListener("touchmove", touchMove); 114 115 /* EVENT - touchend - document **********************************************/ 116 /****************************************************************************/ 117 document.addEventListener("touchend", touchEnd); 118 } 119 120 /* EVENT - load - window ****************************************************/ 121 /****************************************************************************/ 122 window.addEventListener("load", function() { 123 /* Wait for images to be loaded */ 124 for (var i = 0; i < $zoom.length; i++) { 125 /* Initialize selectors */ 126 $container = $zoom[i]; 127 $element = $container.children[0]; 128 129 addClass($element, _visible); 130 } 131 }); 132 133 /* @-<mouseEnter ************************************************************/ 134 /****************************************************************************/ 135 function mouseEnter(e) { 136 /* Initialize selectors */ 137 $container = this; 138 $element = this.children[0]; 139 140 addClass($element, _transition); 141 /* Initialize helpers */ 142 initialPointerOffsetX = e.clientX; 143 initialPointerOffsetY = e.clientY; 144 145 $element.setAttribute(_dataScale, C_scaleDefault); 146 $element.setAttribute(_dataTranslateX, e.clientX); 147 $element.setAttribute(_dataTranslateY, e.clientY); 148 149 addClass($container, _active); 150 151 /* @->moveScaleElement */ 152 //moveScaleElement($element, -1*e.clientX+'px', -1*e.clientY+'px', C_scaleDefault); 153 154 setTimeout(function() 155 { 156 removeClass($element, _transition); 157 }, 200); 158 159 // Initialize helpers 160 offset = $container.getBoundingClientRect(); 161 containerOffsetX = offset.left; 162 containerOffsetY = offset.top; 163 containerHeight = $container.clientHeight; 164 containerWidth = $container.clientWidth 165 elementHeight = $element.clientHeight; 166 elementWidth = $element.clientWidth; 167 initialOffsetX = parseFloat($element.getAttribute(_dataTranslateX)); 168 initialOffsetY = parseFloat($element.getAttribute(_dataTranslateY)); 169 initialScale = minMax(parseFloat($element.getAttribute(_dataScale)), C_scaleMin, C_scaleMax); 170 171 /* Set capture */ 172 capture = true; 173 } 174 175 /* @-<mouseLeave ************************************************************/ 176 /****************************************************************************/ 177 function mouseLeave() { 178 //enableScroll(); 179 capture = false;
180 181 182 /* Set attributes */ 183 $element.setAttribute(_dataScale, 1); 184 $element.setAttribute(_dataTranslateX, 0); 185 $element.setAttribute(_dataTranslateY, 0); 186 187 /* @->moveScaleElement */ 188 moveScaleElement($element, 0, 0, 1); 189 removeClass($container, _active); 190 } 191 192 193 194 /* @-<mouseMove *************************************************************/ 195 /****************************************************************************/ 196 function mouseMove(e) { 197 if (touchable === true || capture === false) { 198 return false; 199 } 200 201 // Initialize helpers 202 203 pointerOffsetX = e.clientX; 204 pointerOffsetY = e.clientY; 205 206 targetScale = initialScale; 207 limitOffsetX = ((elementWidth * targetScale) - containerWidth) / 2; 208 limitOffsetY = ((elementHeight * targetScale) - containerHeight) / 2; 209 210 if(elementWidth * targetScale <= containerWidth) { 211 targetOffsetX=0; 212 } else { 213 targetOffsetX = minMax(-1*(pointerOffsetX - containerOffsetX - containerWidth/2), limitOffsetX * (-1), limitOffsetX); 214 } 215 216 217 218 if(elementHeight * targetScale <= containerHeight){ 219 targetOffsetY = 0; 220 } else { 221 targetOffsetY = minMax(-1*(pointerOffsetY - containerOffsetY - containerHeight/2), limitOffsetY * (-1), limitOffsetY); 222 } 223 224 // Set attributes 225 226 $element.setAttribute(_dataScale, targetScale); 227 $element.setAttribute(_dataTranslateX, targetOffsetX); 228 $element.setAttribute(_dataTranslateY, targetOffsetY); 229 230 // @->moveScaleElement 231 moveScaleElement($element, targetOffsetX + "px", targetOffsetY + "px", targetScale); 232 //----------------------------------------------------------------------------------------------------------------------- 233 } 234 235 236 /* @-<touchStart ************************************************************/ 237 /****************************************************************************/ 238 function touchStart(e) { 239 if (e.touches.length > 2) { 240 return false; 241 } 242 243 /* Initialize selectors */ 244 $slider = this.parentElement; 245 $container = this; 246 $element = this.children[0]; 247 248 /* Initialize helpers */ 249 offset = $container.getBoundingClientRect(); 250 containerOffsetX = offset.left; 251 containerOffsetY = offset.top; 252 containerHeight = $container.clientHeight; 253 containerWidth = $container.clientWidth; 254 elementHeight = $element.clientHeight; 255 elementWidth = $element.clientWidth; 256 initialPointerOffsetX = e.touches[0].clientX; 257 initialPointerOffsetY = e.touches[0].clientY; 258 initialScale = minMax(parseFloat($element.getAttribute(_dataScale)), C_scaleMin, C_scaleMax); 259 touchCount = e.touches.length; 260 261 // Single touch 262 263 if (touchCount === 1) { 264 // Doubletap 265 if (doubleTapMonitor[0] === null) { 266 doubleTapMonitor[0] = e.target; 267 doubleTapMonitor[1] = initialPointerOffsetX; 268 doubleTapMonitor[2] = initialPointerOffsetY; 269 270 setTimeout(function() { 271 doubleTapMonitor = [null]; 272 }, 300); 273 } else if (doubleTapMonitor[0] === e.target && touchmoveCount <= 1 && isWithinRange(initialPointerOffsetX, doubleTapMonitor[1] - 10, doubleTapMonitor[1] + 10) === true && isWithinRange(initialPointerOffsetY, doubleTapMonitor[2] - 10, doubleTapMonitor[2] + 10) === true) { 274 addClass($element, _transition); 275 276 if (hasClass($container, _active) === true) { 277 // Set attributes 278 $element.setAttribute(_dataScale, 1); 279 $element.setAttribute(_dataTranslateX, 0); 280 $element.setAttribute(_dataTranslateY, 0); 281 282 removeClass($container, _active); 283 284 // @->moveScaleElement 285 //moveScaleElement($element, 0, 0, 1); 286 } else { 287 // Set attributes 288 $element.setAttribute(_dataScale, C_scaleDefault); 289 $element.setAttribute(_dataTranslateX, 0); 290 $element.setAttribute(_dataTranslateY, 0); 291 292 addClass($container, _active); 293 294 // @->moveScaleElement 295 //moveScaleElement($element, 0, 0, C_scaleDefault); 296 } 297 298 setTimeout(function() 299 { 300 removeClass($element, _transition); 301 }, 200); 302 303 doubleTapMonitor = [null]; 304 return false;
305 } 306 307 // Initialize helpers 308 initialOffsetX = parseFloat($element.getAttribute(_dataTranslateX)); 309 initialOffsetY = parseFloat($element.getAttribute(_dataTranslateY)); 310 } else 311 if (touchCount === 2) /* Pinch */ { 312 e.preventDefault(); 313 /* Initialize helpers */ 314 initialOffsetX = parseFloat($element.getAttribute(_dataTranslateX)); 315 initialOffsetY = parseFloat($element.getAttribute(_dataTranslateY)); 316 initialPointerOffsetX2 = e.touches[1].clientX; 317 initialPointerOffsetY2 = e.touches[1].clientY; 318 pinchOffsetX = (initialPointerOffsetX + initialPointerOffsetX2) / 2; 319 pinchOffsetY = (initialPointerOffsetY + initialPointerOffsetY2) / 2; 320 initialPinchDistance = Math.sqrt(((initialPointerOffsetX - initialPointerOffsetX2) * (initialPointerOffsetX - initialPointerOffsetX2)) + ((initialPointerOffsetY - initialPointerOffsetY2) * (initialPointerOffsetY - initialPointerOffsetY2))); 321 } 322 323 touchmoveCount = 0; 324 325 /* Set capture */ 326 capture = true; 327 } 328 329 /* @-<touchMove *************************************************************/ 330 /****************************************************************************/ 331 function touchMove(e) { 332 //e.preventDefault(); 333 334 if (capture === false) { 335 return false; 336 } 337 338 /* Initialize helpers */ 339 pointerOffsetX = e.touches[0].clientX; 340 pointerOffsetY = e.touches[0].clientY; 341 touchCount = e.touches.length; 342 touchmoveCount++; 343 344 if (touchCount > 1) /* Pinch */ { 345 pointerOffsetX2 = e.touches[1].clientX; 346 pointerOffsetY2 = e.touches[1].clientY; 347 targetPinchDistance = Math.sqrt(((pointerOffsetX - pointerOffsetX2) * (pointerOffsetX - pointerOffsetX2)) + ((pointerOffsetY - pointerOffsetY2) * (pointerOffsetY - pointerOffsetY2))); 348 349 if (initialPinchDistance === null) { 350 initialPinchDistance = targetPinchDistance; 351 } 352 353 if (Math.abs(initialPinchDistance - targetPinchDistance) >= 1) { 354 /* Initialize helpers */ 355 targetScale = minMax(targetPinchDistance / initialPinchDistance * initialScale, C_scaleMin, C_scaleMax); 356 limitOffsetX = ((elementWidth * targetScale) - containerWidth) / 2; 357 limitOffsetY = ((elementHeight * targetScale) - containerHeight) / 2; 358 scaleDifference = targetScale - initialScale; 359 targetOffsetX = (elementWidth * targetScale) <= containerWidth ? 0 : minMax(initialOffsetX - ((((((pinchOffsetX - containerOffsetX) - (containerWidth / 2)) - initialOffsetX) / (targetScale - scaleDifference))) * scaleDifference), limitOffsetX * (-1), limitOffsetX); 360 targetOffsetY = (elementHeight * targetScale) <= containerHeight ? 0 : minMax(initialOffsetY - ((((((pinchOffsetY - containerOffsetY) - (containerHeight / 2)) - initialOffsetY) / (targetScale - scaleDifference))) * scaleDifference), limitOffsetY * (-1), limitOffsetY); 361 362 if (targetScale > 1) { 363 addClass($container, _active); 364 } else { 365 removeClass($container, _active); 366 } 367 368 /* @->moveScaleElement */ 369 moveScaleElement($element, targetOffsetX + "px", targetOffsetY + "px", targetScale); 370 371 /* Initialize helpers */ 372 initialPinchDistance = targetPinchDistance; 373 initialScale = targetScale; 374 initialOffsetX = targetOffsetX; 375 initialOffsetY = targetOffsetY; 376 } 377 } 378 } 379 380 /* @-<touchEnd **************************************************************/ 381 /****************************************************************************/ 382 function touchEnd(e) { 383 touchCount = e.touches.length; 384 if(hasClass($slider, 'slick-active') === false) { 385 $element.setAttribute(_dataScale, 1); 386 $element.setAttribute(_dataTranslateX, 0); 387 $element.setAttribute(_dataTranslateY, 0);
388 if(targetScale>1) { 389 setTimeout(function() 390 { 391 moveScaleElement($element, 0, 0, 1); 392 }, 500); 393 } 394 touchCount=0; 395 initialPinchDistance = null; 396 capture=false; 397 } 398 399 if (capture === false) { 400 return false; 401 } 402 403 if (touchCount === 0) /* No touch */ { 404 /* Set attributes */ 405 $element.setAttribute(_dataScale, initialScale); 406 $element.setAttribute(_dataTranslateX, targetOffsetX); 407 $element.setAttribute(_dataTranslateY, targetOffsetY); 408 initialPinchDistance = null; 409 capture = false; 410 } else if (touchCount === 1) /* Single touch */ { 411 initialPointerOffsetX = e.touches[0].clientX; 412 initialPointerOffsetY = e.touches[0].clientY; 413 414 } else if (touchCount > 1) /* Pinch */ { 415 initialPinchDistance = null; 416 } 417 } 418 419 /* @-<wheel *****************************************************************/ 420 /****************************************************************************/ 421 function wheel(e) { 422 /* Initialize selectors */ 423 $container = this; 424 $element = this.children[0]; 425 426 /* Initialize helpers */ 427 offset = $container.getBoundingClientRect(); 428 containerHeight = $container.clientHeight; 429 containerWidth = $container.clientWidth; 430 elementHeight = $element.clientHeight; 431 elementWidth = $element.clientWidth; 432 containerOffsetX = offset.left; 433 containerOffsetY = offset.top; 434 initialScale = minMax(parseFloat($element.getAttribute(_dataScale), C_scaleMin, C_scaleMax)); 435 initialOffsetX = parseFloat($element.getAttribute(_dataTranslateX)); 436 initialOffsetY = parseFloat($element.getAttribute(_dataTranslateY)); 437 pointerOffsetX = e.clientX; 438 pointerOffsetY = e.clientY; 439 scaleDirection = e.deltaY < 0 ? 1 : -1; 440 scaleDifference = C_scaleDifference * scaleDirection; 441 targetScale = initialScale + scaleDifference; 442 443 /* Prevent scale overflow */ 444 if (targetScale < C_scaleMin || targetScale > C_scaleMax) { 445 return false; 446 } 447 448 /* Set offset limits */ 449 limitOffsetX = ((elementWidth * targetScale) - containerWidth) / 2; 450 limitOffsetY = ((elementHeight * targetScale) - containerHeight) / 2; 451 452 if (targetScale <= 1) { 453 targetOffsetX = 0; 454 targetOffsetY = 0; 455 } else { 456 /* Set target offsets */ 457 targetOffsetX = (elementWidth * targetScale) <= containerWidth ? 0 : minMax(initialOffsetX - ((((((pointerOffsetX - containerOffsetX) - (containerWidth / 2)) - initialOffsetX) / (targetScale - scaleDifference))) * scaleDifference), limitOffsetX * (-1), limitOffsetX); 458 targetOffsetY = (elementHeight * targetScale) <= containerHeight ? 0 : minMax(initialOffsetY - ((((((pointerOffsetY - containerOffsetY) - (containerHeight / 2)) - initialOffsetY) / (targetScale - scaleDifference))) * scaleDifference), limitOffsetY * (-1), limitOffsetY); 459 } 460 461 if (targetScale > 1) { 462 addClass($container, _active); 463 } else { 464 removeClass($container, _active); 465 } 466 467 /* Set attributes */ 468 $element.setAttribute(_dataScale, targetScale); 469 $element.setAttribute(_dataTranslateX, targetOffsetX); 470 $element.setAttribute(_dataTranslateY, targetOffsetY); 471 472 /* @->moveScaleElement */ 473 //moveScaleElement($element, targetOffsetX + "px", targetOffsetY + "px", targetScale); 474 } 475} 476 477/* Library ********************************************************************/ 478/******************************************************************************/ 479 480/* @-<addClass ****************************************************************/ 481/******************************************************************************/ 482function addClass($element, targetClass) { 483 if (hasClass($element, targetClass) === false) { 484 $element.className += " " + targetClass; 485 } 486} 487 488/* @-<disableScroll ***********************************************************/ 489/******************************************************************************/ 490function disableScroll() { 491 if (window.addEventListener) // older FF 492 { 493 window.addEventListener('DOMMouseScroll', preventDefault, false); 494 } 495 496 window.onwheel = preventDefault; // modern standard 497 window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE 498 window.ontouchmove = preventDefault; // mobile 499 document.onkeydown = preventDefaultForScrollKeys; 500} 501 502/* @-<enableScroll ************************************************************/ 503/******************************************************************************/ 504function enableScroll() { 505 if (window.removeEventListener) { 506 window.removeEventListener('DOMMouseScroll', preventDefault, false); 507 } 508 509 window.onmousewheel = document.onmousewheel = null; 510 window.onwheel = null; 511 window.ontouchmove = null; 512 document.onkeydown = null; 513} 514 515/* @isWithinRange *************************************************************/ 516/******************************************************************************/ 517function isWithinRange(value, min, max) { 518 if (value >= min && value <= max) { 519 return true; 520 } else { 521 return false;
522 } 523} 524 525/* @hasClass ******************************************************************/ 526/******************************************************************************/ 527function hasClass($element, targetClass) { 528 var rgx = new RegExp("(?:^|\\s)" + targetClass + "(?!\\S)", "g"); 529 530 if ($element != undefined && $element.className.match(rgx)) { 531 return true; 532 } else { 533 return false; 534 } 535} 536 537/* @-<massAddEventListener ****************************************************/ 538/******************************************************************************/ 539function massAddEventListener($elements, event, customFunction, useCapture) { 540 var useCapture = useCapture || false; 541 542 for (var i = 0; i < $elements.length; i++) { 543 $elements[i].addEventListener(event, customFunction, useCapture); 544 } 545} 546 547/* @-<minMax ******************************************************************/ 548/******************************************************************************/ 549function minMax(value, min, max) { 550 if (value < min) { 551 value = min; 552 } else if (value > max) { 553 value = max; 554 } 555 556 return value; 557} 558 559/* @-<moveScaleElement ********************************************************/ 560/******************************************************************************/ 561function moveScaleElement($element, targetOffsetX, targetOffsetY, targetScale) { 562 $element.style.cssText = "-moz-transform : translate(" + targetOffsetX + ", " + targetOffsetY + ") scale(" + targetScale + "); -ms-transform : translate(" + targetOffsetX + ", " + targetOffsetY + ") scale(" + targetScale + "); -o-transform : translate(" + targetOffsetX + ", " + targetOffsetY + ") scale(" + targetScale + "); -webkit-transform : translate(" + targetOffsetX + ", " + targetOffsetY + ") scale(" + targetScale + "); transform : translate3d(" + targetOffsetX + ", " + targetOffsetY + ", 0) scale3d(" + targetScale + ", " + targetScale + ", 1);"; 563} 564 565/* @-<preventDefault **********************************************************/ 566/******************************************************************************/ 567function preventDefault(e) { 568 e = e || window.event; 569 570 if (e.preventDefault) { 571 e.preventDefault(); 572 } 573 574 e.returnValue = false; 575} 576 577/* @preventDefaultForScrollKeys ***********************************************/ 578/******************************************************************************/ 579function preventDefaultForScrollKeys(e) { 580 var keys = { 581 37: 1, 582 38: 1, 583 39: 1, 584 40: 1 585 }; 586 587 if (keys[e.keyCode]) { 588 preventDefault(e); 589 return false; 590 } 591} 592 593/* @removeClass ***************************************************************/ 594/******************************************************************************/ 595function removeClass($element, targetClass) { 596 var rgx = new RegExp("(?:^|\\s)" + targetClass + "(?!\\S)", "g"); 597 598 $element.className = $element.className.replace(rgx, ""); 599}
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.