https://atlanttumen.ru/bitrix/templates/aspro-allcorp3medc/vendor/js/ripple.js

1;(function($, document, Math){
2    $.ripple = function(selector, options) {
3
4        var self = this;
5
6        var _log = self.log = function() {
7            if(self.defaults.debug && console && console.log) {
8                console.log.apply(console, arguments);
9            }
10        };
11
12        self.selector = selector;
13        self.defaults = {
14            debug: false,
15            on: 'mousedown',
16
17            opacity: 0.4,
18            color: "auto",
19            multi: false,
20
21            duration: 0.7,
22            rate: function(pxPerSecond) {
23                return pxPerSecond;
24            },
25
26            easing: 'linear'
27        };
28
29        self.defaults = $.extend({}, self.defaults, options);
30
31        var Trigger = function(e) {
32
33            var $this = $(this);
34            var $ripple;
35            var settings;
36
37            $this.addClass('has-ripple');
38
39            // This instances settings
40            settings = $.extend({}, self.defaults, $this.data());
41
42            // Create the ripple element
43            if ( settings.multi || (!settings.multi && $this.find(".ripple").length === 0) ) {
44                $ripple = $("<span></span>").addClass("ripple");
45                $ripple.appendTo($this);
46
47                _log('Create: Ripple');
48
49                // Set ripple size
50                if (!$ripple.height() && !$ripple.width()) {
51                    var size = Math.max($this.outerWidth(), $this.outerHeight());
52                    $ripple.css({
53                        height: size,
54                        width: size
55                    });
56                    _log('Set: Ripple size');
57                }
58
59                // Give the user the ability to change the rate of the animation
60                // based on element width
61                if(settings.rate && typeof settings.rate == "function") {
62
63                    // rate = pixels per second
64                    var rate = Math.round( $ripple.width() / settings.duration );
65
66                    // new amount of pixels per second
67                    var filteredRate = settings.rate(rate);
68
69                    // Determine the new duration for the animation
70                    var newDuration = ( $ripple.width() / filteredRate);
71
72                    // Set the new duration if it has not changed
73                    if(settings.duration.toFixed(2) !== newDuration.toFixed(2)) {
74                        _log('Update: Ripple Duration', {
75                            from: settings.duration,
76                            to: newDuration
77                        });
78                        settings.duration = newDuration;
79                    }
80                }
81
82                // Set the color and opacity
83                var color = (settings.color == "auto") ? $this.css('color') : settings.color;
84                var css = {
85                    animationDuration: (settings.duration).toString() + 's',
86                    animationTimingFunction: settings.easing,
87                    background: color,
88                    opacity: settings.opacity
89                };
90
91                _log('Set: Ripple CSS', css);
92                $ripple.css(css);
93            }
94
95            // Ensure we always have the ripple element
96            if(!settings.multi) {
97                _log('Set: Ripple Element');
98                $ripple = $this.find(".ripple");
99            }
100
101            // Kill animation
102            _log('Destroy: Ripple Animation');
103            $ripple.removeClass("ripple-animate");
104
105
106            // Retrieve coordinates
107            var x = e.pageX - $this.offset().left - $ripple.width() / 2;
108            var y = e.pageY - $this.offset().top - $ripple.height() / 2;
109
110            /**
111             * We want to delete the ripple elements if we allow multiple so we dont sacrifice any page
112             * performance. We don't do this on single ripples because once it has rendered, we only
113             * need to trigger paints thereafter.
114             */
115            if(settings.multi) {
116                _log('Set: Ripple animationend event');
117                $ripple.one('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
118                    _log('Note: Ripple animation ended');
119                    _log('Destroy: Ripple');
120                    $(this).remove();
121                });
122            }
123
124            // Set position and animate
125            _log('Set: Ripple location');
126            _log('Set: Ripple animation');
127            $ripple.css({
128                top: y + 'px',
129                left: x + 'px'
130            }).addClass("ripple-animate");
131        };
132
133        $(document).on(self.defaults.on, self.selector, Trigger);
134    };
135})(jQuery, document, Math);