1/******/ 2 3(function($) { 4 5 /** 6 * Plugin 7 */ 8 9 $.fn.imagesGrid = function(options) { 10 11 var args = arguments; 12 13 return this.each(function() { 14 15 // If options is plain object - destroy previous instance and create new 16 if ($.isPlainObject(options)) { 17 18 if (this._imgGrid instanceof ImagesGrid) { 19 this._imgGrid.destroy(); 20 delete this._imgGrid; 21 } 22 23 var opts = $.extend({}, $.fn.imagesGrid.defaults, options); 24 opts.element = $(this); 25 this._imgGrid = new ImagesGrid(opts); 26 27 return; 28 } 29 30 // If options is string - execute method 31 if (typeof options === 'string' && this._imgGrid instanceof ImagesGrid) { 32 switch (options) { 33 case 'modal.open': 34 this._imgGrid.modal.open(args[1]); 35 break; 36 case 'modal.close': 37 this._imgGrid.modal.close(); 38 break; 39 case 'destroy': 40 this._imgGrid.destroy(); 41 delete this._imgGrid; 42 break; 43 } 44 } 45 46 }); 47 48 }; 49 50 /** 51 * Plugin default options 52 */ 53 54 $.fn.imagesGrid.defaults = { 55 images: [], 56 cells: 5, 57 align: false, 58 nextOnClick: true, 59 showViewAll: 'more', 60 viewAllStartIndex: 'auto', 61 loading: 'loading...', 62 getViewAllText: function(imagesCount) { 63 return 'View all ' + imagesCount + ' images'; 64 }, 65 onGridRendered: $.noop, 66 onGridItemRendered: $.noop, 67 onGridLoaded: $.noop, 68 onGridImageLoaded: $.noop, 69 onModalOpen: $.noop, 70 onModalClose: $.noop, 71 onModalImageClick: $.noop, 72 onModalImageUpdate: $.noop 73 }; 74 75 /** 76 * ImagesGrid 77 * opts - Grid options 78 * opts.element - Element where to render images grid 79 * opts.images - Array of images. Array item can be string or object { src, alt, title, caption, thumbnail } 80 * opts.align - Align images with different height 81 * opts.cells - Maximum number of cells (from 1 to 6) 82 * opts.showViewAll - Show view all text: 83 * 'more' - show if number of images greater than number of cells 84 * 'always' - always show 85 * false - never show 86 * opts.viewAllStartIndex - Start image index when view all link clicked 87 * opts.getViewAllText - Callback function returns text for "view all images" link 88 * opts.onGridRendered - Callback function fired when grid items added to the DOM 89 * opts.onGridItemRendered - Callback function fired when grid item added to the DOM 90 * opts.onGridLoaded - Callback function fired when grid images loaded 91 * opts.onGridImageLoaded - Callback function fired when grid image loaded 92 */ 93 94 function ImagesGrid(opts) { 95 96 this.opts = opts || {}; 97 98 this.$window = $(window); 99 this.$element = this.opts.element; 100 this.$gridItems = []; 101 102 this.modal = null; 103 this.imageLoadCount = 0; 104 105 var cells = this.opts.cells; 106 this.opts.cells = (cells < 1)? 1: (cells > 6)? 6: cells; 107 108 this.onWindowResize = this.onWindowResize.bind(this); 109 this.onImageClick = this.onImageClick.bind(this); 110 111 this.init(); 112 } 113 114 ImagesGrid.prototype.init = function() { 115 116 this.setGridClass(); 117 this.renderGridItems(); 118 this.createModal(); 119 120 this.$window.on('resize', this.onWindowResize); 121 } 122 123 ImagesGrid.prototype.createModal = function() { 124 125 var opts = this.opts; 126
127 this.modal = new ImagesGridModal({ 128 loading: opts.loading, 129 images: opts.images, 130 nextOnClick: opts.nextOnClick, 131 onModalOpen: opts.onModalOpen, 132 onModalClose: opts.onModalClose, 133 onModalImageClick: opts.onModalImageClick, 134 onModalImageUpdate: opts.onModalImageUpdate 135 }); 136 } 137 138 ImagesGrid.prototype.setGridClass = function() { 139 140 var opts = this.opts, 141 imgsLen = opts.images.length, 142 cellsCount = (imgsLen < opts.cells)? imgsLen: opts.cells; 143 144 this.$element.addClass('imgs-grid imgs-grid-' + cellsCount); 145 } 146 147 ImagesGrid.prototype.renderGridItems = function() { 148 149 var opts = this.opts, 150 imgs = opts.images, 151 imgsLen = imgs.length; 152 153 if (!imgs) { 154 return; 155 } 156 157 this.$element.empty(); 158 this.$gridItems = []; 159 160 for (var i = 0; i < imgsLen; ++i) { 161 if (i === opts.cells) { 162 break; 163 } 164 this.renderGridItem(imgs[i], i); 165 } 166 167 if (opts.showViewAll === 'always' || 168 (opts.showViewAll === 'more' && imgsLen > opts.cells) 169 ) { 170 this.renderViewAll(); 171 } 172 173 opts.onGridRendered(this.$element); 174 } 175 176 ImagesGrid.prototype.renderGridItem = function(image, index) { 177 178 var src = image, 179 alt = '', 180 title = '', 181 opts = this.opts, 182 _this = this; 183 184 if ($.isPlainObject(image)) { 185 src = image.thumbnail || image.src; 186 alt = image.alt || ''; 187 title = image.title || ''; 188 } 189 190 var item = $('<div>', { 191 class: 'imgs-grid-image', 192 click: this.onImageClick, 193 data: { index: index } 194 }); 195 196 item.append( 197 $('<div>', { 198 class: 'image-wrap' 199 }).append( 200 $('<img>', { 201 src: src, 202 alt: alt, 203 title: title, 204 on: { 205 load: function(event) { 206 _this.onImageLoaded(event, $(this), image); 207 } 208 } 209 }) 210 ) 211 ); 212 213 this.$gridItems.push(item); 214 this.$element.append(item); 215 216 opts.onGridItemRendered(item, image); 217 } 218 219 ImagesGrid.prototype.renderViewAll = function() { 220 221 var opts = this.opts; 222 223 this.$element.find('.imgs-grid-image:last .image-wrap').append( 224 $('<div>', { 225 class: 'view-all' 226 }).append( 227 $('<span>', { 228 class: 'view-all-cover', 229 }), 230 $('<span>', { 231 class: 'view-all-text', 232 text: opts.getViewAllText(opts.images.length) 233 }) 234 ) 235 ); 236 } 237 238 ImagesGrid.prototype.onWindowResize = function(event) { 239 if (this.opts.align) { 240 this.align(); 241 } 242 } 243 244 ImagesGrid.prototype.onImageClick = function(event) { 245 246 var opts = this.opts, 247 img = $(event.currentTarget), 248 imageIndex; 249 250 if (img.find('.view-all').length > 0 && 251 typeof opts.viewAllStartIndex === 'number' ) { 252 imageIndex = opts.viewAllStartIndex; 253 } else { 254 imageIndex = img.data('index'); 255 } 256 257 this.modal.open(imageIndex); 258 } 259 260 ImagesGrid.prototype.onImageLoaded = function(event, imageEl, image) { 261 262 var opts = this.opts; 263 264 ++this.imageLoadCount; 265 266 opts.onGridImageLoaded(event, imageEl, image); 267 268 if (this.imageLoadCount === this.$gridItems.length) { 269 this.imageLoadCount = 0; 270 this.onAllImagesLoaded() 271 } 272 } 273 274 ImagesGrid.prototype.onAllImagesLoaded = function() { 275 276 var opts = this.opts; 277 278 if (opts.align) { 279 this.align(); 280 } 281 282 opts.onGridLoaded(this.$element); 283 } 284
285 ImagesGrid.prototype.align = function() { 286 287 var itemsLen = this.$gridItems.length; 288 289 switch (itemsLen) { 290 case 2: 291 case 3: 292 this.alignItems(this.$gridItems); 293 break; 294 case 4: 295 this.alignItems(this.$gridItems.slice(0, 2)); 296 this.alignItems(this.$gridItems.slice(2)); 297 break; 298 case 5: 299 case 6: 300 this.alignItems(this.$gridItems.slice(0, 3)); 301 this.alignItems(this.$gridItems.slice(3)); 302 break; 303 } 304 } 305 306 ImagesGrid.prototype.alignItems = function(items) { 307 308 var itemsHeight = items.map(function(item) { 309 return item.find('img').height(); 310 }); 311 312 var normalizedHeight = Math.min.apply(null, itemsHeight); 313 314 $(items).each(function() { 315 316 var item = $(this), 317 imgWrap = item.find('.image-wrap'), 318 img = item.find('img'), 319 imgHeight = img.height(); 320 321 imgWrap.height(normalizedHeight); 322 323 if (imgHeight > normalizedHeight) { 324 var top = Math.floor((imgHeight - normalizedHeight) / 2); 325 img.css({ top: -top }); 326 } 327 }); 328 } 329 330 ImagesGrid.prototype.destroy = function() { 331 332 this.$window.off('resize',this.onWindowResize); 333 334 this.$element.empty() 335 .removeClass('imgs-grid imgs-grid-' + this.$gridItems.length); 336 337 this.modal.destroy(); 338 } 339 340 /** 341 * ImagesGridModal 342 * opts - Modal options 343 * opts.images - Array of images 344 * opts.nextOnClick - Show next image when click on modal image 345 * opts.loading - Image loading text 346 * opts.onModalOpen - Callback function called when modal opened 347 * opts.onModalClose - Callback function called when modal closed 348 * opts.onModalImageClick - Callback function called on modal image click 349 */ 350 351 function ImagesGridModal(opts) { 352 353 this.opts = opts || {}; 354 355 this.imageIndex = null; 356 357 this.$document = $(document); 358 this.$modal = null; 359 this.$indicator = null; 360 361 this.close = this.close.bind(this); 362 this.prev = this.prev.bind(this); 363 this.next = this.next.bind(this); 364 this.onIndicatorClick = this.onIndicatorClick.bind(this); 365 this.onImageLoaded = this.onImageLoaded.bind(this); 366 this.onKeyUp = this.onKeyUp.bind(this); 367 368 this.$document.on('keyup', this.onKeyUp); 369 } 370 371 ImagesGridModal.prototype.open = function(imageIndex) { 372 373 if (this.isOpened()) { 374 return; 375 } 376 377 this.imageIndex = parseInt(imageIndex) || 0; 378 this.render(); 379 } 380 381 ImagesGridModal.prototype.close = function(event) { 382 383 if (!this.$modal) { 384 return; 385 } 386 387 var opts = this.opts; 388 389 this.$modal.animate({ 390 opacity: 0 391 }, { 392 duration: 100, 393 complete: function() { 394 this.$modal.remove(); 395 this.$modal = null; 396 this.$indicator = null; 397 this.imageIndex = null; 398 opts.onModalClose(); 399 }.bind(this) 400 }); 401 } 402 403 ImagesGridModal.prototype.isOpened = function() { 404 return (this.$modal && this.$modal.is(':visible')); 405 } 406 407 ImagesGridModal.prototype.render = function() { 408 409 var opts = this.opts; 410 411 this.renderModal(); 412 this.renderCaption(); 413 this.renderCloseButton(); 414 this.renderInnerContainer(); 415 this.renderIndicatorContainer(); 416 417 this.$modal.animate({ 418 opacity: 1 419 }, { 420 duration: 100, 421 complete: function() { 422 opts.onModalOpen(this.$modal, opts.images[this.imageIndex]); 423 }.bind(this) 424 }); 425 } 426 427 ImagesGridModal.prototype.renderModal = function() {
428 this.$modal = $('<div>', { 429 class: 'imgs-grid-modal' 430 }).appendTo('body'); 431 } 432 433 ImagesGridModal.prototype.renderCaption = function() { 434 this.$caption = $('<div>', { 435 class: 'modal-caption', 436 text: this.getImageCaption(this.imageIndex) 437 }).appendTo(this.$modal); 438 } 439 440 ImagesGridModal.prototype.renderCloseButton = function() { 441 this.$modal.append($('<div>', { 442 class: 'modal-close', 443 click: this.close 444 })); 445 } 446 447 ImagesGridModal.prototype.renderInnerContainer = function() { 448 449 var opts = this.opts, 450 image = this.getImage(this.imageIndex); 451 452 this.$modal.append( 453 $('<div>', { 454 class: 'modal-inner' 455 }).append( 456 $('<div>', { 457 class: 'modal-image' 458 }).append( 459 $('<img>', { 460 src: image.src, 461 alt: image.alt, 462 title: image.title, 463 on: { 464 load: this.onImageLoaded, 465 click: function(event) { 466 this.onImageClick(event, $(this), image); 467 }.bind(this) 468 } 469 }), 470 $('<div>', { 471 class: 'modal-loader', 472 html: opts.loading 473 }) 474 ), 475 $('<div>', { 476 class: 'modal-control left', 477 click: this.prev 478 }).append( 479 $('<div>', { 480 class: 'arrow left' 481 }) 482 ), 483 $('<div>', { 484 class: 'modal-control right', 485 click: this.next 486 }).append( 487 $('<div>', { 488 class: 'arrow right' 489 }) 490 ) 491 ) 492 ); 493 494 if (opts.images.length <= 1) { 495 this.$modal.find('.modal-control').hide(); 496 } 497 } 498 499 ImagesGridModal.prototype.renderIndicatorContainer = function() { 500 501 var opts = this.opts, 502 imgsLen = opts.images.length; 503 504 if (imgsLen == 1) { 505 return; 506 } 507 508 this.$indicator = $('<div>', { 509 class: 'modal-indicator' 510 }); 511 512 var list = $('<ul>'), i; 513 for (i = 0; i < imgsLen; ++i) { 514 list.append($('<li>', { 515 class: this.imageIndex == i? 'selected': '', 516 click: this.onIndicatorClick, 517 data: { index: i } 518 })); 519 } 520 521 this.$indicator.append(list); 522 this.$modal.append(this.$indicator); 523 } 524 525 ImagesGridModal.prototype.prev = function() { 526 527 var imgsLen = this.opts.images.length; 528 529 if (this.imageIndex > 0) { 530 --this.imageIndex; 531 } else { 532 this.imageIndex = imgsLen - 1; 533 } 534 535 this.updateImage(); 536 } 537 538 ImagesGridModal.prototype.next = function() { 539 540 var imgsLen = this.opts.images.length; 541 542 if (this.imageIndex < imgsLen - 1) { 543 ++this.imageIndex; 544 } else { 545 this.imageIndex = 0; 546 } 547 548 this.updateImage(); 549 } 550 551 ImagesGridModal.prototype.updateImage = function() { 552 553 var opts = this.opts, 554 image = this.getImage(this.imageIndex), 555 imageEl = this.$modal.find('.modal-image img'); 556 557 imageEl.attr({ 558 src: image.src, 559 alt: image.alt, 560 title: image.title 561 }); 562 563 this.$modal.find('.modal-caption').text( 564 this.getImageCaption(this.imageIndex) ); 565 566 if (this.$indicator) { 567 var indicatorList = this.$indicator.find('ul'); 568 indicatorList.children().removeClass('selected'); 569 indicatorList.children().eq(this.imageIndex).addClass('selected'); 570 } 571 572 this.showLoader(); 573 574 opts.onModalImageUpdate(imageEl, image); 575 } 576
577 ImagesGridModal.prototype.onImageClick = function(event, imageEl, image) { 578 579 var opts = this.opts; 580 581 if (opts.nextOnClick) { 582 this.next(); 583 } 584 585 opts.onModalImageClick(event, imageEl, image); 586 } 587 588 ImagesGridModal.prototype.onImageLoaded = function() { 589 this.hideLoader(); 590 } 591 592 ImagesGridModal.prototype.onIndicatorClick = function(event) { 593 var index = $(event.target).data('index'); 594 this.imageIndex = index; 595 this.updateImage(); 596 } 597 598 ImagesGridModal.prototype.onKeyUp = function(event) { 599 600 if (!this.$modal) { 601 return; 602 } 603 604 switch (event.keyCode) { 605 case 27: // Esc 606 this.close(); 607 break; 608 case 37: // Left arrow 609 this.prev(); 610 break; 611 case 39: // Right arrow 612 this.next(); 613 break; 614 } 615 } 616 617 ImagesGridModal.prototype.getImage = function(index) { 618 619 var opts = this.opts, 620 image = opts.images[index]; 621 622 if ($.isPlainObject(image)) { 623 return image; 624 } else { 625 return { src: image, alt: '', title: '' } 626 } 627 } 628 629 ImagesGridModal.prototype.getImageCaption = function(imgIndex) { 630 var img = this.getImage(imgIndex); 631 return img.caption || ''; 632 } 633 634 ImagesGridModal.prototype.showLoader = function() { 635 if (this.$modal) { 636 this.$modal.find('.modal-image img').hide(); 637 this.$modal.find('.modal-loader').show(); 638 } 639 } 640 641 ImagesGridModal.prototype.hideLoader = function() { 642 if (this.$modal) { 643 this.$modal.find('.modal-image img').show(); 644 this.$modal.find('.modal-loader').hide(); 645 } 646 } 647 648 ImagesGridModal.prototype.destroy = function() { 649 this.$document.off('keyup', this.onKeyUp); 650 this.close(); 651 } 652 653 window.imagesGrid = $.fn.imagesGrid; 654 655 // facebook Gallery code 656 $('.sumo-gallery').each(function(){ 657 658 const set = $(this).data('set'); 659 660 const dataset = window[set][0]; 661 662 663 const images = dataset['images']; 664 const cwp_num_visible = dataset['cwp_num_visible']; 665 666 667 668 $(this).imagesGrid({ 669 images, 670 cells: ~~cwp_num_visible, 671 onModalOpen: () => { 672 $('.imgs-grid-modal .modal-close').append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 492"><path d="M300.188 246L484.14 62.04c5.06-5.064 7.852-11.82 7.86-19.024 0-7.208-2.792-13.972-7.86-19.028L468.02 7.872C462.952 2.796 456.196.016 448.984.016c-7.2 0-13.956 2.78-19.024 7.856L246.008 191.82 62.048 7.872C56.988 2.796 50.228.016 43.02.016c-7.2 0-13.96 2.78-19.02 7.856L7.872 23.988c-10.496 10.496-10.496 27.568 0 38.052L191.828 246 7.872 429.952C2.808 435.024.02 441.78.02 448.984c0 7.204 2.788 13.96 7.852 19.028l16.124 16.116c5.06 5.072 11.824 7.856 19.02 7.856 7.208 0 13.968-2.784 19.028-7.856l183.96-183.952 183.952 183.952c5.068 5.072 11.824 7.856 19.024 7.856h.008c7.204 0 13.96-2.784 19.028-7.856l16.12-16.116c5.06-5.064 7.852-11.824 7.852-19.028 0-7.204-2.792-13.96-7.852-19.028L300.188 246z"/></svg>'); 673 $('.modal-control .arrow.left').append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 443.52 443.52"><path d="M143.492 221.863L336.226 29.129c6.663-6.664 6.663-17.468 0-24.132-6.665-6.662-17.468-6.662-24.132 0l-204.8 204.8c-6.662 6.664-6.662 17.468 0 24.132l204.8 204.8c6.78 6.548 17.584 6.36 24.132-.42 6.387-6.614 6.387-17.099 0-23.712L143.492 221.863z"/></svg>'); 674 $('.modal-control .arrow.right').append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 443.52 443.52"><path d="M336.226 209.591l-204.8-204.8c-6.78-6.548-17.584-6.36-24.132.42-6.388 6.614-6.388 17.099 0 23.712l192.734 192.734-192.734 192.734c-6.663 6.664-6.663 17.468 0 24.132 6.665 6.663 17.468 6.663 24.132 0l204.8-204.8c6.663-6.665 6.663-17.468 0-24.132z"/></svg>'); 675 } 676 }); 677 678 });
679 680})(jQuery); 681 682 683//tilt image code 684'use strict'; 685(function ($) { 686 $.fn.tilt = function (options) { 687 var requestTick = function requestTick() { 688 if (this.ticking) return; 689 requestAnimationFrame(updateTransforms.bind(this)); 690 this.ticking = true; 691 }; 692 693 var bindEvents = function bindEvents() { 694 var _this = this; 695 $(this).on('mousemove', mouseMove); 696 $(this).on('mouseenter', mouseEnter); 697 if (this.settings.reset) $(this).on('mouseleave', mouseLeave); 698 if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this)); 699 }; 700 701 var setTransition = function setTransition() { 702 var _this2 = this; 703 704 if (this.timeout !== undefined) clearTimeout(this.timeout); 705 $(this).css({ 'transition': this.settings.speed + 'ms ' + this.settings.easing }); 706 if (this.settings.glare) this.glareElement.css({ 'transition': 'opacity ' + this.settings.speed + 'ms ' + this.settings.easing }); 707 this.timeout = setTimeout(function () { 708 $(_this2).css({ 'transition': '' }); 709 if (_this2.settings.glare) _this2.glareElement.css({ 'transition': '' }); 710 }, this.settings.speed); 711 }; 712 713 var mouseEnter = function mouseEnter(event) { 714 this.ticking = false; 715 $(this).css({ 'will-change': 'transform' }); 716 setTransition.call(this); 717 $(this).trigger("tilt.mouseEnter"); 718 }; 719 720 /** 721 * Return the x,y position of the mouse on the tilt element 722 * @returns {{x: *, y: *}} 723 */ 724 var getMousePositions = function getMousePositions(event) { 725 if (typeof event === "undefined") { 726 event = { 727 pageX: $(this).offset().left + $(this).outerWidth() / 2, 728 pageY: $(this).offset().top + $(this).outerHeight() / 2 729 }; 730 } 731 return { x: event.pageX, y: event.pageY }; 732 }; 733 734 var mouseMove = function mouseMove(event) { 735 this.mousePositions = getMousePositions(event); 736 requestTick.call(this); 737 }; 738 739 var mouseLeave = function mouseLeave() { 740 setTransition.call(this); 741 this.reset = true; 742 requestTick.call(this); 743 744 // Trigger change event 745 $(this).trigger("tilt.mouseLeave"); 746 }; 747 748 /** 749 * Get tilt values 750 * 751 * @returns {{x: tilt value, y: tilt value}} 752 */ 753 var getValues = function getValues() { 754 var width = $(this).outerWidth(); 755 var height = $(this).outerHeight(); 756 var left = $(this).offset().left; 757 var top = $(this).offset().top; 758 var percentageX = (this.mousePositions.x - left) / width; 759 var percentageY = (this.mousePositions.y - top) / height; 760 // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value 761 var tiltX = (this.settings.maxTilt / 2 - percentageX * this.settings.maxTilt).toFixed(2); 762 var tiltY = (percentageY * this.settings.maxTilt - this.settings.maxTilt / 2).toFixed(2); 763 // angle 764 var angle = Math.atan2(this.mousePositions.x - (left + width / 2), -(this.mousePositions.y - (top + height / 2))) * (180 / Math.PI); 765 // Return x & y tilt values 766 return { tiltX: tiltX, tiltY: tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle: angle }; 767 }; 768 769 /** 770 * Update tilt transforms on mousemove 771 */ 772 var updateTransforms = function updateTransforms() { 773 this.transforms = getValues.call(this); 774 775 if (this.reset) { 776 this.reset = false; 777 $(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(0deg) rotateY(0deg)'); 778 779 // Rotate glare if enabled 780 if (this.settings.glare) { 781 this.glareElement.css('transform', 'rotate(180deg) translate(-50%, -50%)'); 782 this.glareElement.css('opacity', '0'); 783 } 784 785 return; 786 } else { 787 $(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(' + (this.settings.axis === 'x' ? 0 : this.transforms.tiltY) + 'deg) rotateY(' + (this.settings.axis === 'y' ? 0 : this.transforms.tiltX) + 'deg)
787scale3d(' + this.settings.scale + ',' + this.settings.scale + ',' + this.settings.scale + ')'); 788 789 // Rotate glare if enabled 790 if (this.settings.glare) { 791 this.glareElement.css('transform', 'rotate(' + this.transforms.angle + 'deg) translate(-50%, -50%)'); 792 this.glareElement.css('opacity', '' + this.transforms.percentageY * this.settings.maxGlare / 100); 793 } 794 } 795 796 // Trigger change event 797 $(this).trigger("change", [this.transforms]); 798 799 this.ticking = false; 800 }; 801 802 /** 803 * Prepare elements 804 */ 805 var prepareGlare = function prepareGlare() { 806 var glarePrerender = this.settings.glarePrerender; 807 808 // If option pre-render is enabled we assume all html/css is present for an optimal glare effect. 809 if (!glarePrerender) 810 // Create glare element 811 $(this).append('<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>'); 812 813 // Store glare selector if glare is enabled 814 this.glareElementWrapper = $(this).find(".js-tilt-glare"); 815 this.glareElement = $(this).find(".js-tilt-glare-inner"); 816 817 // Remember? We assume all css is already set, so just return 818 if (glarePrerender) return; 819 820 // Abstracted re-usable glare styles 821 var stretch = { 822 'position': 'absolute', 823 'top': '0', 824 'left': '0', 825 'width': '100%', 826 'height': '100%' 827 }; 828 829 // Style glare wrapper 830 this.glareElementWrapper.css(stretch).css({ 831 'overflow': 'hidden' 832 }); 833 834 // Style glare element 835 this.glareElement.css({ 836 'position': 'absolute', 837 'top': '50%', 838 'left': '50%', 839 'pointer-events': 'none', 840 'background-image': 'linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)', 841 'width': '' + $(this).outerWidth() * 2, 842 'height': '' + $(this).outerWidth() * 2, 843 'transform': 'rotate(180deg) translate(-50%, -50%)', 844 'transform-origin': '0% 0%', 845 'opacity': '0' 846 }); 847 }; 848 849 /** 850 * Update glare on resize 851 */ 852 var updateGlareSize = function updateGlareSize() { 853 this.glareElement.css({ 854 'width': '' + $(this).outerWidth() * 2, 855 'height': '' + $(this).outerWidth() * 2 856 }); 857 }; 858 859 /** 860 * Public methods 861 */ 862 $.fn.tilt.destroy = function () { 863 $(this).each(function () { 864 $(this).find('.js-tilt-glare').remove(); 865 $(this).css({ 'will-change': '', 'transform': '' }); 866 $(this).off('mousemove mouseenter mouseleave'); 867 }); 868 }; 869 870 $.fn.tilt.getValues = function () { 871 var results = []; 872 $(this).each(function () { 873 this.mousePositions = getMousePositions.call(this); 874 results.push(getValues.call(this)); 875 }); 876 return results; 877 }; 878 879 $.fn.tilt.reset = function () { 880 $(this).each(function () { 881 var _this3 = this; 882 883 this.mousePositions = getMousePositions.call(this); 884 this.settings = $(this).data('settings'); 885 mouseLeave.call(this); 886 setTimeout(function () { 887 _this3.reset = false; 888 }, this.settings.transition); 889 }); 890 }; 891 892 /** 893 * Loop every instance 894 */ 895 return this.each(function () { 896 var _this4 = this; 897 898 /** 899 * Default settings merged with user settings 900 * Can be set trough data attributes or as parameter. 901 * @type {*} 902 */ 903 this.settings = $.extend({ 904 maxTilt: $(this).is('[data-tilt-max]') ? $(this).data('tilt-max') : 20, 905 perspective: $(this).is('[data-tilt-perspective]') ? $(this).data('tilt-perspective') : 300, 906 easing: $(this).is('[data-tilt-easing]') ? $(this).data('tilt-easing') : 'cubic-bezier(.03,.98,.52,.99)', 907 scale: $(this).is('[data-tilt-scale]') ? $(this).data('tilt-scale') : '1', 908 speed: $(this).is('[data-tilt-speed]') ? $(this).data('tilt-speed') : '400', 909 transition: $(this).is('[data-tilt-transition]') ? $(this).data('tilt-transition') : true, 910 axis: $(this).is('[data-tilt-axis]') ? $(this).data('tilt-axis') : null, 911 reset: $(this).is('[data-tilt-reset]') ? $(this).data('tilt-reset') : true, 912 glare: $(this).is('[data-tilt-glare]') ? $(this).data('tilt-glare') : false, 913 maxGlare: $(this).is('[data-tilt-maxglare]') ? $(this).data('tilt-maxglare') : 1 914 }, options); 915 916 this.init = function () { 917 // Store settings 918 $(_this4).data('settings', _this4.settings); 919 920 // Prepare element 921 if (_this4.settings.glare) prepareGlare.call(_this4); 922 923 // Bind events 924 bindEvents.call(_this4); 925 }; 926 927 // Init 928 this.init(); 929 }); 930 }; 931 932 /** 933 * Auto load 934 */ 935 $('[data-tilt]').tilt(); 936 937 938 $('.tilt_image_container').each(function() { 939 const tiltMAx = $(this).data('max'); 940 const tiltPerspective = $(this).data('perspective'); 941 const tiltSpeed = $(this).data('speed'); 942 const tiltScale = $(this).data('scale'); 943 const tiltGalre = $(this).data('tilt_glare'); 944 const uniqueClass = $(this).data('class_unique'); 945 946 $(`.${uniqueClass}.tilt_image_container`).tilt({ 947 maxTilt: tiltMAx, 948 perspective: tiltPerspective, 949 easing: "cubic-bezier(.03,.98,.52,.99)", 950 speed: tiltSpeed, 951 glare: tiltGalre, 952 scale: tiltScale 953 }); 954 });
955 window.tilt = $.fn.tilt; 956})(jQuery); 957 958 959 960 961 962 963
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.