1'use strict'; 2 3var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 4 5(function (factory) { 6 if (typeof define === 'function' && define.amd) { 7 // AMD. Register as an anonymous module. 8 define(['jquery'], factory); 9 } else if ((typeof module === 'undefined' ? 'undefined' : _typeof(module)) === 'object' && module.exports) { 10 // Node/CommonJS 11 module.exports = function (root, jQuery) { 12 if (jQuery === undefined) { 13 // require('jQuery') returns a factory that requires window to 14 // build a jQuery instance, we normalize how we use modules 15 // that require this pattern but the window provided is a noop 16 // if it's defined (how jquery works) 17 if (typeof window !== 'undefined') { 18 jQuery = require('jquery'); 19 } else { 20 jQuery = require('jquery')(root); 21 } 22 } 23 factory(jQuery); 24 return jQuery; 25 }; 26 } else { 27 // Browser globals 28 factory(jQuery); 29 } 30})(function ($) { 31 $.fn.tilt = function (options) { 32 33 /** 34 * RequestAnimationFrame 35 */ 36 var requestTick = function requestTick() { 37 if (this.ticking) return; 38 requestAnimationFrame(updateTransforms.bind(this)); 39 this.ticking = true; 40 }; 41 42 /** 43 * Bind mouse movement evens on instance 44 */ 45 var bindEvents = function bindEvents() { 46 var _this = this; 47 $(this).on('mousemove', mouseMove); 48 $(this).on('mouseenter', mouseEnter); 49 if (this.settings.reset) $(this).on('mouseleave', mouseLeave); 50 if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this)); 51 }; 52 53 /** 54 * Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms 55 */ 56 var setTransition = function setTransition() { 57 var _this2 = this; 58 59 if (this.timeout !== undefined) clearTimeout(this.timeout); 60 $(this).css({ 'transition': this.settings.speed + 'ms ' + this.settings.easing }); 61 if (this.settings.glare) this.glareElement.css({ 'transition': 'opacity ' + this.settings.speed + 'ms ' + this.settings.easing }); 62 this.timeout = setTimeout(function () { 63 $(_this2).css({ 'transition': '' }); 64 if (_this2.settings.glare) _this2.glareElement.css({ 'transition': '' }); 65 }, this.settings.speed); 66 }; 67 68 /** 69 * When user mouse enters tilt element 70 */ 71 var mouseEnter = function mouseEnter(event) { 72 this.ticking = false; 73 $(this).css({ 'will-change': 'transform' }); 74 setTransition.call(this); 75 76 // Trigger change event 77 $(this).trigger("tilt.mouseEnter"); 78 }; 79 80 /** 81 * Return the x,y position of the mouse on the tilt element 82 * @returns {{x: *, y: *}} 83 */ 84 var getMousePositions = function getMousePositions(event) { 85 if (typeof event === "undefined") { 86 event = { 87 pageX: $(this).offset().left + $(this).outerWidth() / 2, 88 pageY: $(this).offset().top + $(this).outerHeight() / 2 89 }; 90 } 91 return { x: event.pageX, y: event.pageY }; 92 }; 93 94 /** 95 * When user mouse moves over the tilt element 96 */ 97 var mouseMove = function mouseMove(event) { 98 this.mousePositions = getMousePositions(event); 99 requestTick.call(this); 100 }; 101 102 /** 103 * When user mouse leaves tilt element 104 */ 105 var mouseLeave = function mouseLeave() { 106 setTransition.call(this); 107 this.reset = true; 108 requestTick.call(this); 109 110 // Trigger change event 111 $(this).trigger("tilt.mouseLeave"); 112 }; 113 114 /** 115 * Get tilt values 116 *
117 * @returns {{x: tilt value, y: tilt value}} 118 */ 119 var getValues = function getValues() { 120 var width = $(this).outerWidth(); 121 var height = $(this).outerHeight(); 122 var left = $(this).offset().left; 123 var top = $(this).offset().top; 124 var percentageX = (this.mousePositions.x - left) / width; 125 var percentageY = (this.mousePositions.y - top) / height; 126 // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value 127 var tiltX = (this.settings.maxTilt / 2 - percentageX * this.settings.maxTilt).toFixed(2); 128 var tiltY = (percentageY * this.settings.maxTilt - this.settings.maxTilt / 2).toFixed(2); 129 // angle 130 var angle = Math.atan2(this.mousePositions.x - (left + width / 2), -(this.mousePositions.y - (top + height / 2))) * (180 / Math.PI); 131 // Return x & y tilt values 132 return { tiltX: tiltX, tiltY: tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle: angle }; 133 }; 134 135 /** 136 * Update tilt transforms on mousemove 137 */ 138 var updateTransforms = function updateTransforms() { 139 this.transforms = getValues.call(this); 140 141 if (this.reset) { 142 this.reset = false; 143 $(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(0deg) rotateY(0deg)'); 144 145 // Rotate glare if enabled 146 if (this.settings.glare) { 147 this.glareElement.css('transform', 'rotate(180deg) translate(-50%, -50%)'); 148 this.glareElement.css('opacity', '0'); 149 } 150 151 return; 152 } else { 153 $(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) scale3d(' + this.settings.scale + ',' + this.settings.scale + ',' + this.settings.scale + ')'); 154 155 // Rotate glare if enabled 156 if (this.settings.glare) { 157 this.glareElement.css('transform', 'rotate(' + this.transforms.angle + 'deg) translate(-50%, -50%)'); 158 this.glareElement.css('opacity', '' + this.transforms.percentageY * this.settings.maxGlare / 100); 159 } 160 } 161 162 // Trigger change event 163 $(this).trigger("change", [this.transforms]); 164 165 this.ticking = false; 166 }; 167 168 /** 169 * Prepare elements 170 */ 171 var prepareGlare = function prepareGlare() { 172 var glarePrerender = this.settings.glarePrerender; 173 174 // If option pre-render is enabled we assume all html/css is present for an optimal glare effect. 175 if (!glarePrerender) 176 // Create glare element 177 $(this).append('<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>'); 178 179 // Store glare selector if glare is enabled 180 this.glareElementWrapper = $(this).find(".js-tilt-glare"); 181 this.glareElement = $(this).find(".js-tilt-glare-inner"); 182 183 // Remember? We assume all css is already set, so just return 184 if (glarePrerender) return; 185 186 // Abstracted re-usable glare styles 187 var stretch = { 188 'position': 'absolute', 189 'top': '0', 190 'left': '0', 191 'width': '100%', 192 'height': '100%' 193 }; 194 195 // Style glare wrapper 196 this.glareElementWrapper.css(stretch).css({ 197 'overflow': 'hidden' 198 }); 199 200 // Style glare element 201 this.glareElement.css({ 202 'position': 'absolute', 203 'top': '50%', 204 'left': '50%', 205 'pointer-events': 'none', 206 'background-image': 'linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)', 207 'width': '' + $(this).outerWidth() * 2, 208 'height': '' + $(this).outerWidth() * 2, 209 'transform': 'rotate(180deg) translate(-50%, -50%)', 210 'transform-origin': '0% 0%', 211 'opacity': '0' 212 }); 213 }; 214 215 /** 216 * Update glare on resize 217 */ 218 var updateGlareSize = function updateGlareSize() { 219 this.glareElement.css({ 220 'width': '' + $(this).outerWidth() * 2, 221 'height': '' + $(this).outerWidth() * 2 222 }); 223 }; 224 225 /** 226 * Public methods 227 */ 228 $.fn.tilt.destroy = function () { 229 $(this).each(function () { 230 $(this).find('.js-tilt-glare').remove(); 231 $(this).css({ 'will-change': '', 'transform': '' }); 232 $(this).off('mousemove mouseenter mouseleave'); 233 }); 234 }; 235 236 $.fn.tilt.getValues = function () { 237 var results = []; 238 $(this).each(function () { 239 this.mousePositions = getMousePositions.call(this); 240 results.push(getValues.call(this)); 241 }); 242 return results; 243 }; 244 245 $.fn.tilt.reset = function () { 246 $(this).each(function () { 247 var _this3 = this; 248 249 this.mousePositions = getMousePositions.call(this); 250 this.settings = $(this).data('settings'); 251 mouseLeave.call(this); 252 setTimeout(function () { 253 _this3.reset = false;
254 }, this.settings.transition); 255 }); 256 }; 257 258 /** 259 * Loop every instance 260 */ 261 return this.each(function () { 262 var _this4 = this; 263 264 /** 265 * Default settings merged with user settings 266 * Can be set trough data attributes or as parameter. 267 * @type {*} 268 */ 269 this.settings = $.extend({ 270 maxTilt: $(this).is('[data-tilt-max]') ? $(this).data('tilt-max') : 20, 271 perspective: $(this).is('[data-tilt-perspective]') ? $(this).data('tilt-perspective') : 300, 272 easing: $(this).is('[data-tilt-easing]') ? $(this).data('tilt-easing') : 'cubic-bezier(.03,.98,.52,.99)', 273 scale: $(this).is('[data-tilt-scale]') ? $(this).data('tilt-scale') : '1', 274 speed: $(this).is('[data-tilt-speed]') ? $(this).data('tilt-speed') : '400', 275 transition: $(this).is('[data-tilt-transition]') ? $(this).data('tilt-transition') : true, 276 axis: $(this).is('[data-tilt-axis]') ? $(this).data('tilt-axis') : null, 277 reset: $(this).is('[data-tilt-reset]') ? $(this).data('tilt-reset') : true, 278 glare: $(this).is('[data-tilt-glare]') ? $(this).data('tilt-glare') : false, 279 maxGlare: $(this).is('[data-tilt-maxglare]') ? $(this).data('tilt-maxglare') : 1 280 }, options); 281 282 this.init = function () { 283 // Store settings 284 $(_this4).data('settings', _this4.settings); 285 286 // Prepare element 287 if (_this4.settings.glare) prepareGlare.call(_this4); 288 289 // Bind events 290 bindEvents.call(_this4); 291 }; 292 293 // Init 294 this.init(); 295 }); 296 }; 297 298 /** 299 * Auto load 300 */ 301 $('[data-tilt]').tilt(); 302 303 return true; 304});
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.