https://drdeitrickg.com/wp-content/themes/webcore/assets/js/jquery.viewportchecker.js?ver=1791446163

1/*
2    The MIT License (MIT)
3
4    Copyright (c) 2014 Dirk Groenen
5
6    Permission is hereby granted, free of charge, to any person obtaining a copy of
7    this software and associated documentation files (the "Software"), to deal in
8    the Software without restriction, including without limitation the rights to
9    use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
10    the Software, and to permit persons to whom the Software is furnished to do so,
11    subject to the following conditions:
12
13    The above copyright notice and this permission notice shall be included in all
14    copies or substantial portions of the Software.
15*/
16
17(function($){
18    $.fn.viewportChecker = function(useroptions){
19        // Define options and extend with user
20        var options = {
21            classToAdd: 'visible',
22            classToRemove : 'invisible',
23            classToAddForFullView : 'full-visible',
24            removeClassAfterAnimation: false,
25            offset: 100,
26            repeat: false,
27            invertBottomOffset: true,
28            callbackFunction: function(elem, action){},
29            scrollHorizontal: false,
30            scrollBox: window
31        };
32        $.extend(options, useroptions);
33
34        // Cache the given element and height of the browser
35        var $elem = this,
36            boxSize = {height: $(options.scrollBox).height(), width: $(options.scrollBox).width()},
37            scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1 || navigator.userAgent.toLowerCase().indexOf('windows phone') != -1) ? 'body' : 'html');
38
39        /*
40         * Main method that checks the elements and adds or removes the class(es)
41         */
42        this.checkElements = function(){
43            var viewportStart, viewportEnd;
44
45            // Set some vars to check with
46            if (!options.scrollHorizontal){
47                viewportStart = $(scrollElem).scrollTop();
48                viewportEnd = (viewportStart + boxSize.height);
49            }
50            else{
51                viewportStart = $(scrollElem).scrollLeft();
52                viewportEnd = (viewportStart + boxSize.width);
53            }
54
55            // Loop through all given dom elements
56            $elem.each(function(){
57                var $obj = $(this),
58                    objOptions = {},
59                    attrOptions = {};
60
61                //  Get any individual attribution data
62                if ($obj.data('vp-add-class'))
63                    attrOptions.classToAdd = $obj.data('vp-add-class');
64                if ($obj.data('vp-remove-class'))
65                    attrOptions.classToRemove = $obj.data('vp-remove-class');
66                if ($obj.data('vp-add-class-full-view'))
67                    attrOptions.classToAddForFullView = $obj.data('vp-add-class-full-view');
68                if ($obj.data('vp-keep-add-class'))
69                    attrOptions.removeClassAfterAnimation = $obj.data('vp-remove-after-animation');
70                if ($obj.data('vp-offset'))
71                    attrOptions.offset = $obj.data('vp-offset');
72                if ($obj.data('vp-repeat'))
73                    attrOptions.repeat = $obj.data('vp-repeat');
74                if ($obj.data('vp-scrollHorizontal'))
75                    attrOptions.scrollHorizontal = $obj.data('vp-scrollHorizontal');
76                if ($obj.data('vp-invertBottomOffset'))
77                    attrOptions.scrollHorizontal = $obj.data('vp-invertBottomOffset');
78
79                // Extend objOptions with data attributes and default options
80                $.extend(objOptions, options);
81                $.extend(objOptions, attrOptions);
82
83                // If class already exists; quit
84                if ($obj.data('vp-animated') && !objOptions.repeat){
85                    return;
86                }
87
88                // Check if the offset is percentage based
89                if (String(objOptions.offset).indexOf("%") > 0)
90                    objOptions.offset = (parseInt(objOptions.offset) / 100) * boxSize.height;
91
92                // Get the raw start and end positions
93                var rawStart = (!objOptions.scrollHorizontal) ? $obj.offset().top : $obj.offset().left,
94                    rawEnd = (!objOptions.scrollHorizontal) ? rawStart + $obj.height() : rawStart + $obj.width();
95
96                // Add the defined offset
97                var elemStart = Math.round( rawStart ) + objOptions.offset,
98                    elemEnd = (!objOptions.scrollHorizontal) ? elemStart + $obj.height() : elemStart + $obj.width();
99
100                if (objOptions.invertBottomOffset)
101                    elemEnd -= (objOptions.offset * 2);
102
103                // Add class if in viewport
104                if ((elemStart < viewportEnd) && (elemEnd > viewportStart)){
105
106                    // Remove class
107                    $obj.removeClass(objOptions.classToRemove);
108                    $obj.addClass(objOptions.classToAdd);
109
110                    // Do the callback function. Callback wil send the jQuery object as parameter
111                    objOptions.callbackFunction($obj, "add");
112
113                    // Check if full element is in view
114                    if (rawEnd <= viewportEnd && rawStart >= viewportStart)
115                        $obj.addClass(objOptions.classToAddForFullView);
116                    else
117                        $obj.removeClass(objOptions.classToAddForFullView);
118
119                    // Set element as already animated
120                    $obj.data('vp-animated', true);
121
122                    if (objOptions.removeClassAfterAnimation) {
123                        $obj.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
124                            $obj.removeClass(objOptions.classToAdd);
125                        });
126                    }
127
128                // Remove class if not in viewport and repeat is true
129                } else if ($obj.hasClass(objOptions.classToAdd) && (objOptions.repeat)){
130                    $obj.removeClass(objOptions.classToAdd + " " + objOptions.classToAddForFullView);
131
132                    // Do the callback function.
133                    objOptions.callbackFunction($obj, "remove");
134
135                    // Remove already-animated-flag
136                    $obj.data('vp-animated', false);
137                }
138            });
139
140        };
141
142        /**
143         * Binding the correct event listener is still a tricky thing.
144         * People have expierenced sloppy scrolling when both scroll and touch
145         * events are added, but to make sure devices with both scroll and touch
146         * are handles too we always have to add the window.scroll event
147         *

148         * @see  https://github.com/dirkgroenen/jQuery-viewport-checker/issues/25
149         * @see  https://github.com/dirkgroenen/jQuery-viewport-checker/issues/27
150         */
151
152        // Select the correct events
153        if( 'ontouchstart' in window || 'onmsgesturechange' in window ){
154            // Device with touchscreen
155            $(document).bind("touchmove MSPointerMove pointermove", this.checkElements);
156        }
157
158        // Always load on window load
159        $(options.scrollBox).bind("load scroll", this.checkElements);
160
161        // On resize change the height var
162        $(window).resize(function(e){
163            boxSize = {height: $(options.scrollBox).height(), width: $(options.scrollBox).width()};
164            $elem.checkElements();
165        });
166
167        // trigger inital check if elements already visible
168        this.checkElements();
169
170        // Default jquery plugin behaviour
171        return this;
172    };
173})(jQuery);