angular-scroll-watch/scrollwatch.su.js at master · wowissu/angular-scroll-watch · 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/**
    Version: 1.0.1
    Author: wowissu
    Angular: 1.4.*
    github: https://github.com/wowissu/angular-scroll-watch
 */
/*global arguments, window, $, angular */
/*jslint this:true */
/*property
    $$point, $$scrollBottom, $$scrollTop, $applyAsync, $watch, ScrollWatch,
    addPoint, bottomPointer, clientHeight, clientTop, directive,
    documentElement, factory, funcPointer, innerHeight, module, offsetHeight,
    on, pageYOffset, prototype, scope, scrollTop, target, topPinter,
    updatePoint, watchPoint, forEach, restrict, link, scrollPoint, error,
    hasOwnProperty, offsetLeft, offsetTop, offsetParent, left, top, bottom
*/

(function () {
    "use strict";

    var app = angular.module('scrollWatch', []);

    app.factory('ScrollWatch', ['$rootScope', function ($rootScope) {

        var doc = document.documentElement;

        var ScrollWatch = function (target, $useScope) {

            var self = this;

            self.funcPointer = {};
            self.topPinter = {};
            self.bottomPointer = {};
            self.target = $(target);

            self.scope = $useScope || $rootScope;
            self.scope.ScrollWatch = self;
            self.scope.$$point = {};

            var scope = self.scope;


            if (self.target[0] === window) {
                self.target.on('scroll', function () {
                    self.updatePoint(
                        (this.pageYOffset || doc.scrollTop) - (doc.clientTop || 0),
                        scope.$$scrollTop + this.innerHeight
                    );
                });
            } else {
                self.target.on('scroll', function () {
                    self.updatePoint(
                        this.scrollTop || self.target.scrollTop(),
                        scope.$$scrollTop + (this.offsetHeight || this.clientHeight)
                    );
                });
            }
        };

        ScrollWatch.prototype.watchPoint = function (point, callback) {
            this.scope.$watch('$$point.' + point, callback);
            return this;
        };

        ScrollWatch.prototype.updatePoint = function (scrollTop, scrollBottom) {

            var scope = this.scope;

            scope.$$scrollDown = scrollTop > scope.$$scrollTop;
            scope.$$scrollUp = !scope.$$scrollDown;
            scope.$$scrollTop = scrollTop;
            scope.$$scrollBottom = scrollBottom;

            angular.forEach(this.topPinter, function (point, name) {
                scope.$$point[name] = scrollTop > point;
            });
            angular.forEach(this.bottomPointer, function (point, name) {
                scope.$$point[name] = scrollBottom >= point;
            });
            angular.forEach(this.funcPointer, function (point, name) {
                scope.$$point[name] = !!point({
                    top: scrollTop,
                    bottom: scrollBottom
                });
            });
            scope.$applyAsync();
            return this;
        };

        ScrollWatch.prototype.addPoint = function (name, point, bottom) {
            if (typeof point === 'function') {
                this.funcPointer[name] = point;
            } else if (bottom) {
                this.bottomPointer[name] = point;
            } else {
                this.topPinter[name] = point;
            }
            this.scope.$$point[name] = false;
            return this;
        };

        return ScrollWatch;
    }]);

    app.directive('scrollPoint', ['$timeout', function ($timeout) {
        var getPos = function (el) {
            var lx = 0;
            var ly = 0;
            while (el !== null) {
                lx += el.offsetLeft;
                ly += el.offsetTop;
                el = el.offsetParent;
            }
            return {left: lx, top: ly};
        };
        return {
            restrict: 'A',
            link: function ($scope, $element, $attrs) {
                $timeout(function () {
                    if (!$attrs.scrollPoint) {
                        console.error('require point name.');
                        return;
                    }
                    if (!$scope.ScrollWatch) {
                        console.error('undefined ScrollWatch object.');
                        return;
                    }
                    if ($attrs.hasOwnProperty('bottom')) {
                        $scope.ScrollWatch.addPoint($attrs.scrollPoint, function (scroll) {
                            return scroll.bottom > getPos($element[0]).top;
                        });
                    } else {
                        $scope.ScrollWatch.addPoint($attrs.scrollPoint, function (scroll) {
                            return scroll.top > getPos($element[0]).top;
                        });
                    }
                });
            }
        };
    }]);

}());