https://georgeskate.com/wp-content/plugins/facebook-messenger/frontend/js/index.js?ver=5.2.21

1// enable vibration support
2navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
3
4// requestAnimationFrame polyfill
5(function() {
6    jQuery("body").click(function(event){
7         if ( !jQuery(event.target).hasClass('facebook-messenger-avatar') && jQuery(".drag-wrapper .thing .content:visible").length) {
8            jQuery(".drag-wrapper .thing .content").hide(400);						x = xold;			y = yold;
9         }
10    });
11    var lastTime = 0;
12    var vendors = ['ms', 'moz', 'webkit', 'o'];
13    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
14        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
15        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
16                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
17    }
18
19    if (!window.requestAnimationFrame)
20        window.requestAnimationFrame = function(callback, element) {
21            var currTime = new Date().getTime();
22            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
23            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
24              timeToCall);
25            lastTime = currTime + timeToCall;
26            return id;
27        };
28
29    if (!window.cancelAnimationFrame)
30        window.cancelAnimationFrame = function(id) {
31            clearTimeout(id);
32		};
33}());
34
35var draggableEl = document.querySelector('[data-drag]'),
36    magnet = document.querySelector('.magnet-zone');
37
38// create a SpringSystem and a Spring with a bouncy config.
39var springSystem = new rebound.SpringSystem(),
40    spring = springSystem.createSpring(100, 7.5),
41    magnetSpring = springSystem.createSpring(450, 13),
42    x = jQuery('body').width()  - 60,
43    //alert( jQuery( window ).height() );
44    y = jQuery(window).height()/2  + 10,		xold = 0, yold = 0,
45    springDestX,
46    springDestY,
47    magnetX,
48    magnetY,
49    events = [];
50
51spring.setCurrentValue(1).setAtRest();
52magnetSpring.setCurrentValue(1).setAtRest();
53
54function getCenteredCoordinates(el1, el2) {
55  var rect1 = el1.getBoundingClientRect(),
56      rect2 = el2.getBoundingClientRect(),
57      x1 = (rect1.width / 2) + rect1.left,
58      y1 = (rect1.height / 2) + rect1.top;
59
60  return {
61    x: x1 - (rect2.width / 2),
62    y: y1 - (rect2.height / 2)
63  };
64}
65
66// Add a listener to the spring. Every time the physics
67// solver updates the Spring's value onSpringUpdate will
68// be called.
69function onSpringUpdate(spring) {
70  // drop the spring when the user has let go
71  // otherwise update x/y with springy values
72  if (!jQuery(draggableEl).hasClass('edge')) {
73    var val = spring.getCurrentValue(),
74        coords = getCenteredCoordinates(magnet, draggableEl),
75        elRect = draggableEl.getBoundingClientRect();
76
77    x = rebound.MathUtil.mapValueInRange(val, 0, 1, coords.x, springDestX || elRect.left);
78    y = rebound.MathUtil.mapValueInRange(val, 0, 1, coords.y, springDestY || elRect.top);
79    moveToPos(x, y);
80  }
81}
82
83spring.addListener({ onSpringUpdate: onSpringUpdate });
84magnetSpring.addListener({ onSpringUpdate: onSpringUpdate });
85
86function vibrate(ms) {
87    if (navigator.vibrate) {
88        // vibration API supported
89        navigator.vibrate(ms || 50);
90    }
91}
92
93// the draw function
94function moveToPos(newX, newY) {
95  var el = draggableEl;
96
97  newX = newX || x;
98  newY = newY || y;
99
100  // finally apply the x, y to the top, left of the circle
101  el.style.transform =
102  el.style.webkitTransform =
103  el.style.MozTransform = 'translate(' + Math.round(newX, 10) + 'px, ' + Math.round(newY, 10) + 'px)';
104}
105
106function animate() {
107  window.requestAnimationFrame( animate );
108  moveToPos();
109}
110
111// kick off animate
112animate();
113
114function isOverlapping(el1, el2) {
115  var rect1 = el1.getBoundingClientRect(),
116    rect2 = el2.getBoundingClientRect();
117
118  return !(
119      rect1.top > rect2.bottom ||
120      rect1.right < rect2.left ||
121      rect1.bottom < rect2.top ||
122      rect1.left > rect2.right
123  );
124}
125
126function moveMagnet(x, y) {
127  var dist = 12,
128      width = jQuery('body').width() / 2,
129      height = jQuery('body').height(),
130      direction = x > width ? 1 : -1,
131      percX = x > width ? (x - width) / width : -(width - x) / width,
132      percY = Math.min(1, (height - y) / (height / 2));
133
134  magnet.style.marginLeft = Math.round(dist * percX) + 'px';
135  magnet.style.marginBottom = Math.round(dist * percY) + 'px';
136}
137
138function trackEvent(event) {
139
140  if (events.length > 5) {
141    events.pop();
142  }
143
144  events.push(event);
145
146}
147
148function move(event) {
149	var selector = jQuery(event.target), check = true;
150	if (jQuery(".drag-wrapper .thing").hasClass("showContent")){
151		if (selector.hasClass("circle") || selector.parents(".circle").length){
152			jQuery(".drag-wrapper .thing").removeClass("showContent");
153			jQuery(".drag-wrapper .thing .content").hide(400);						x = xold;			y = yold;
154		}else{
155			check = false;

156		}
157	}
158
159	if (check){
160  var el = draggableEl,
161      magnetRect = magnet.getBoundingClientRect(),
162      elRect = el.getBoundingClientRect();
163
164  newX = this._posOrigin.x + event.pageX - this._touchOrigin.x;
165  newY = this._posOrigin.y + event.pageY - this._touchOrigin.y;
166
167  moveMagnet(newX + (elRect.width / 2), newY + (elRect.height / 2));
168
169  startMoving();
170
171  var touchPos = {
172    top: newY,
173    right: newX + elRect.width,
174    bottom: newY + elRect.height,
175    left: newX
176  };
177
178  overlapping = !(
179    touchPos.top > magnetRect.bottom ||
180    touchPos.right < magnetRect.left ||
181    touchPos.bottom < magnetRect.top ||
182    touchPos.left > magnetRect.right
183  );
184
185  springDestX = newX;
186  springDestY = newY;
187
188  if (overlapping) {
189    // center the circle in the magnetic zone
190    var mx = (magnetRect.width / 2) + magnetRect.left;
191    var my = (magnetRect.height / 2) + magnetRect.top;
192    newX = mx - (elRect.width / 2);
193    newY = my - (elRect.height / 2);
194
195    if (!jQuery(el).hasClass('overlap')) {
196      // set magnetSpring
197      magnetSpring.setVelocity(5).setEndValue(0);
198      spring.setCurrentValue(0).setAtRest();
199
200      vibrate(25);
201    }
202
203    jQuery(magnet).toggleClass('overlap', true);
204    jQuery(el).toggleClass('overlap', true);
205
206    // if the spring is still moving then dont set x/y
207    if (!springSystem.getIsIdle()) return;
208  } else {
209
210    if (jQuery(el).hasClass('overlap')) {
211      spring.setEndValue(1);
212      magnetSpring.setCurrentValue(1).setAtRest();
213    }
214
215    jQuery(magnet).removeClass('overlap');
216    jQuery(el).removeClass('overlap');
217  }
218
219  // update x/y values
220  x = newX;
221  y = newY;
222	}
223};
224
225jQuery(draggableEl)
226	.on('movestart', onTouchStart)
227	.on('move', trackEvent)
228	.on('move', move)
229	.on('moveend', onTouchEnd)
230	.on('click', onClick);
231
232function onTouchStart(event) {
233	var selector = jQuery(event.target), check = true;
234	if (jQuery(".drag-wrapper .thing").hasClass("showContent")){
235		if (selector.hasClass("circle") || selector.parents(".circle").length){
236			jQuery(".drag-wrapper .thing").removeClass("showContent");
237			jQuery(".drag-wrapper .thing .content").hide(400);						x = xold;			y = yold;
238		}else{
239			check = false;
240		}
241	}
242	if (check){
243		var rect = this.getBoundingClientRect();
244		startTouching();
245
246		this._touchOrigin = {
247			x: event.pageX,
248			y: event.pageY
249		};
250		this._posOrigin = {
251			x: rect.left,
252			y: rect.top
253		};
254	}
255}
256
257function onClick(event){
258	var selector = jQuery(event.target);
259	if (selector.hasClass("content") || selector.parents(".content").length){
260	}else{
261		var window_width = jQuery(window).width();				if (jQuery(".drag-wrapper .thing .content:visible").length){						x = xold;						y = yold;				}else{					xold = x;						yold = y;						x = window_width - 74;						y = 20;		}
262		jQuery(".drag-wrapper .thing .content").toggle(400);
263		jQuery(this).toggleClass("showContent");
264		jQuery(".drag-wrapper .thing .content").css({
265			"max-height" : jQuery(window).height() - 116
266		});
267	}
268}
269
270function getVelocity() {
271	if (jQuery(".drag-wrapper .thing").hasClass("showContent")){
272		return false
273	}else{
274  var event = events[events.length - 1];
275  return {
276    x: event.velocityX,
277    y: event.velocityY
278  };
279
280  }
281}
282
283function stopTouching() {
284  jQuery('body').removeClass('touching');
285}
286
287function startTouching() {
288  jQuery('body').addClass('touching');
289}
290
291function startMoving() {
292  jQuery('body').addClass('moving');
293}
294
295function stopMoving() {
296  jQuery('body').removeClass('moving');
297  magnet.style.marginBottom = magnet.style.marginLeft = '0px';
298}
299
300function onTouchEnd(event) {
301	if (jQuery(".drag-wrapper .thing").hasClass("showContent")){
302
303	}else{
304		var el = jQuery(draggableEl),
305			velocity = getVelocity();
306
307		if (!el.hasClass('overlap')) {
308			flingWithVelocity(velocity);
309			stopTouching();
310			stopMoving();
311		}else{
312			stopTouching();
313			stopMoving();
314			jQuery(".drag-wrapper").remove();
315		}
316	}
317}
318
319function distanceOverTime(velocity, ms) {
320  return velocity * ms;
321}
322
323function decelerate(speed) {
324  return speed > 0.01 || speed < -0.01  ? (speed - (speed * .05)) : 0;
325}
326
327// simulate gravitational pull
328function addGravity(deltaTimeInMs) {

329  var gravity = -9.5 / 2000;
330  return gravity * deltaTimeInMs;
331}
332
333var timer;
334
335function flingWithVelocity(velocity) {
336	var center_width = jQuery(window).width() / 2;
337	if (x < center_width){
338		x = 5;
339	}else{
340		x = center_width * 2 - 60;
341	}
342
343	if (y < 0){
344		y = 20;
345	}
346}