https://iic.lv/wp-content/themes/lincoln/assets/js/vendor/ripple.js

1(function(){
2	"use strict";
3
4	var colour = "#4285f4";
5	var opacity = 0.3;
6	var ripple_within_elements = ['input', 'button', 'a'];
7	var ripple_without_diameter = 50;
8
9	var overlays = {
10		items: [],
11		get: function(){
12			var $element;
13			for(var i = 0; i < overlays.items.length; i++){
14				$element = overlays.items[i];
15				if($element.transition_phase === false) {
16					$element.transition_phase = 0;
17					return $element;
18				}
19			}
20			$element = document.createElement("div");
21			$element.style.position = "absolute";
22			$element.style.opacity = opacity;
23			//$element.style.outline = "10px solid red";
24			$element.style.pointerEvents = "none";
25			$element.style.background = "-webkit-radial-gradient(" + colour + " 64%, rgba(0,0,0,0) 65%) no-repeat";
26			$element.style.background = "radial-gradient(" + colour + " 64%, rgba(0,0,0,0) 65%) no-repeat";
27			$element.style.transform = "translateZ(0)";
28			$element.transition_phase = 0;
29			$element.rid = overlays.items.length;
30			$element.next_transition = overlays.next_transition_generator($element);
31			document.body.appendChild($element);
32			overlays.items.push($element);
33			return $element;
34		},
35		next_transition_generator: function($element){
36			return function(){
37				$element.transition_phase++;
38				switch($element.transition_phase){
39					case 1:
40						$element.style[transition] = "all 0.2s ease-in-out";
41						$element.style.backgroundSize = $element.ripple_backgroundSize;
42						$element.style.backgroundPosition = $element.ripple_backgroundPosition;
43						setTimeout($element.next_transition, 0.2 * 1000); //now I know transitionend is better but it fires multiple times when multiple properties are animated, so this is simpler code and (imo) worth tiny delays
44						break;
45					case 2:
46						$element.style[transition] = "opacity 0.15s ease-in-out";
47						$element.style.opacity = 0;
48						setTimeout($element.next_transition, 0.15 * 1000);
49						break;
50					case 3:
51						overlays.recycle($element);
52						break;
53				}
54			};
55		},
56		recycle: function($element){
57			$element.style.display = "none";
58			$element.style[transition] = "none";
59			if($element.timer) clearTimeout($element.timer);
60			$element.transition_phase = false;
61		}
62	};
63
64	var transition = function(){
65		var i,
66			el = document.createElement('div'),
67			transitions = {
68				'WebkitTransition':'webkitTransition',
69				'transition':'transition',
70				'OTransition':'otransition',
71				'MozTransition':'transition'
72			};
73		for (i in transitions) {
74			if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
75				return transitions[i];
76			}
77		}
78	}();
79
80	var click = function(event){
81		var $element = overlays.get(),
82			touch,
83			x,
84			y;
85
86		touch = event.touches ? event.touches[0] : event;
87
88		$element.style[transition] = "none";
89		$element.style.backgroundSize = "3px 3px";
90		$element.style.opacity = opacity;
91		if(ripple_within_elements.indexOf(touch.target.nodeName.toLowerCase()) > -1) {
92			x = touch.offsetX;
93			y = touch.offsetY;
94			
95			var dimensions = touch.target.getBoundingClientRect();
96			if(!x || !y){
97				x = (touch.clientX || touch.x) - dimensions.left;
98				y = (touch.clientY || touch.y) - dimensions.top;
99			}
100			$element.style.backgroundPosition = x + "px " + y + "px";
101			$element.style.width = dimensions.width + "px";
102			$element.style.height = dimensions.height + "px";
103			$element.style.left = (dimensions.left) + "px";
104			$element.style.top = (dimensions.top + document.body.scrollTop + document.documentElement.scrollTop) + "px";
105			var computed_style = window.getComputedStyle(event.target);
106			for (var key in computed_style) {
107				if (key.toString().indexOf("adius") > -1) {
108					if(computed_style[key]) {
109						$element.style[key] = computed_style[key];
110					}
111				} else if(parseInt(key, 10).toString() === key && computed_style[key].indexOf("adius") > -1){
112					$element.style[computed_style[key]] = computed_style[computed_style[key]];
113				}
114			}
115			$element.style.backgroundPosition = x + "px " + y + "px";
116			$element.ripple_backgroundPosition = (x - dimensions.width)  + "px " + (y - dimensions.width) + "px";
117			$element.ripple_backgroundSize = (dimensions.width * 2) + "px " + (dimensions.width * 2) + "px";
118		} else { //click was outside of ripple element
119			x = touch.clientX || touch.x || touch.pageX;
120			y = touch.clientY || touch.y || touch.pageY;
121			
122			$element.style.borderRadius = "0px";
123			$element.style.left = (x - ripple_without_diameter / 2) + "px";
124			$element.style.top = (document.body.scrollTop + document.documentElement.scrollTop + y - ripple_without_diameter / 2) + "px";
125			$element.ripple_backgroundSize = ripple_without_diameter + "px " + ripple_without_diameter + "px";
126			$element.style.width = ripple_without_diameter + "px";
127			$element.style.height = ripple_without_diameter + "px";
128			$element.style.backgroundPosition = "center center";
129			$element.ripple_backgroundPosition = "center center";
130			$element.ripple_backgroundSize = ripple_without_diameter + "px " + ripple_without_diameter + "px";
131		}
132		$element.ripple_x = x;
133		$element.ripple_y = y;
134		$element.style.display = "block";
135		setTimeout($element.next_transition, 20);
136	};
137
138	// if('ontouchstart' in window || 'onmsgesturechange' in window){
139	// 	document.addEventListener("touchstart", click, false);
140	// } else {
141	// 	document.addEventListener("click", click, false);
142	// }
143}());