jquery-observeEnterWindow/jquery.observeEnterWindow.js at master · esukei/jquery-observeEnterWindow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/**
 * jQuery observeEnterWindow v0.1.0
 * https://github.com/esukei/jquery-observeEnterWindow
 * Copyright 2013 Satoru Kawahara
 * Licensed under MIT(http://www.opensource.org/licenses/MIT)
 */
(function(window, $, undefined) {
	var
		observeTargets = $(),//empty jQuery object
		$win = $(window),
		windowLeft,
		windowTop,
		windowWidth,
		windowHeight,
		windowOX,
		windowOY,
		getWindowProperties = function() {
			windowLeft = $win.scrollLeft();
			windowTop = $win.scrollTop();
			windowWidth = $win.innerWidth();
			windowHeight = $win.innerHeight();
			windowOX = windowLeft + windowWidth / 2;
			windowOY = windowTop + windowHeight / 2;
		},
		checkEnterWindow = function(i) {
			var
				$this = $(this),
				isEnterWindow = $this.data('isEnterWindow'),
				isMovingWindowFrame = $this.data('isMovingWindowFrame'),
				offset = $this.offset(),
				targetLeft = offset.left,
				targetTop = offset.top,
				targetWidth = $this.outerWidth(),
				targetHeight = $this.outerHeight(),
				targetOX = targetLeft + targetWidth / 2,
				targetOY = targetTop + targetHeight / 2,
				distanceX = Math.abs(windowOX - targetOX),
				distanceY = Math.abs(windowOY - targetOY),
				halfWidth = (windowWidth + targetWidth) / 2,
				halfHeight = (windowHeight + targetHeight) / 2,
				deltaWidth = Math.abs(windowWidth - targetWidth) / 2,
				deltaHeight = Math.abs(windowHeight - targetHeight) / 2,
				eventString;

			if(distanceX > halfWidth || distanceY > halfHeight) {
				//completely leave
				if(isEnterWindow === true || isMovingWindowFrame === true) {
					eventString = 'leavewindowend';
					$this.data({
						isEnterWindow: false,
						isMovingWindowFrame: false
					});
				}
			} else {
				if(distanceX <= deltaWidth && distanceY <= deltaHeight) {
					//completely enter
					if(isEnterWindow === false || isMovingWindowFrame === true) {
						eventString = 'enterwindowend';
						$this.data({
							isEnterWindow: true,
							isMovingWindowFrame: false
						});
					}
				} else {
					//target on some window frame
					if(isMovingWindowFrame === true) {
						eventString = 'movewindowframe';
					} else {
						if(isEnterWindow === true) {
							eventString = 'leavewindowstart';
						} else {
							eventString = 'enterwindowstart';
						}
						$this.data({
							isMovingWindowFrame: true
						});
					}
				}
			}
			if(eventString === undefined) return;
			$this.trigger(eventString);

			if(isEnterWindow === false && isMovingWindowFrame === false)
			{
				if($this.data('isEnterWindow') === true || $this.data('isMovingWindowFrame') === true) $this.trigger('enterwindow');
			} else {
				if($this.data('isEnterWindow') === false && $this.data('isMovingWindowFrame') === false) $this.trigger('leavewindow');
			}

		},
		checkEnterWindowHandler = function(event) {
			getWindowProperties();
			observeTargets.each(checkEnterWindow);
		};

	$.fn.extend({
		observeEnterWindow: function() {

			this
				.data({
					isEnterWindow: false,
					isMovingWindowFrame: false
				});

			getWindowProperties();
			this.each(checkEnterWindow);

			//add
			observeTargets = observeTargets.add(this);
			return this;
		}
	});

	$(function() {
		$win
			.on('scroll.observeenterwindow', checkEnterWindowHandler);
	});

})(this, jQuery);