https://www.avilatinoamerica.com/templates/tx_eventia/js/fancySearch.js

1/**
2 * Event theme: fancySearch
3 * main source of script : UpSolution Widget: search
4 */
5!function ($) {
6	"use strict";
7
8	$.fn.fancySearch = function () {
9
10		return this.each(function(){
11			var $container = $(this),
12				$form = $container.find('.form-search'),
13				$btnOpen = $container.find('.search-icon'),
14				$btnClose = $container.find('.search-close'),
15				$input = $form.find('[name="searchword"]'),
16				$overlay = $container.find('.search-background'),
17				$window = $(window),
18				searchOverlayInitRadius = 25,
19				showHideTimer = null,
20				isFullScreen = $container.hasClass('layout_fullscreen'),
21				searchHide = function(){
22					$container.removeClass('active');
23					$input.blur();
24					if (isFullScreen) {
25						$form.css({
26							'-webkit-transition': 'opacity 0.4s',
27							transition: 'opacity 0.4s'
28						});
29						window.setTimeout(function(){
30							$overlay
31								.removeClass('overlay-on')
32								.addClass('overlay-out')
33								.css({
34									'-webkit-transform': 'scale(0.1)',
35									'transform': 'scale(0.1)'
36								});
37							$form.css('opacity', 0);
38							clearTimeout(showHideTimer);
39							showHideTimer = window.setTimeout(function(){
40								$form.css('display', 'none');
41								$overlay.css('display', 'none');
42							}, 700);
43						}, 25);
44					}
45				};
46
47			// Handling virtual keyboards at touch devices
48			if (isFullScreen && jQuery.isMobile){
49				$input
50					.on('focus', function(){
51						// Transforming hex to rgba
52						var originalColor = $overlay.css('background-color'),
53							overlayOpacity = $overlay.css('opacity'),
54							matches;
55						// RGB Format
56						if (matches = /^rgb\((\d+), (\d+), (\d+)\)$/.exec(originalColor)){
57							$form.css('background-color', "rgba("+parseInt(matches[1])+","+parseInt(matches[2])+","+parseInt(matches[3])+", "+overlayOpacity+")");
58						}
59						// Hex format
60						else if (matches = /^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/.exec(originalColor)){
61							$form.css('background-color', "rgba("+parseInt(matches[1], 16)+","+parseInt(matches[2], 16)+","+parseInt(matches[3], 16)+", "+overlayOpacity+")");
62						}
63						// Fault tolerance
64						else {
65							$form.css('background-color', originalColor);
66						}
67						$overlay.addClass('mobilefocus');
68					})
69					.on('blur', function(){
70						$overlay.removeClass('mobilefocus');
71						$form.css('background-color', 'transparent');
72					});
73			}
74
75			$btnOpen.click(function(){
76
77				$container.addClass('active');
78
79				if (isFullScreen) {
80					var searchPos = $btnOpen.offset(),
81						searchWidth = $btnOpen.width(),
82						searchHeight = $btnOpen.height();
83					// Preserving scroll position
84					searchPos.top -= $window.scrollTop();
85					searchPos.left -= $window.scrollLeft();
86					var overlayX = searchPos.left+searchWidth/2,
87						overlayY = searchPos.top+searchHeight/2,
88						winWidth = $window.width(),
89						winHeight = $window.height(),
90					// Counting distance to the nearest screen corner
91						overlayRadius = Math.sqrt(Math.pow(Math.max(winWidth - overlayX, overlayX), 2) + Math.pow(Math.max(winHeight - overlayY, overlayY), 2)),
92						overlayScale = (overlayRadius+15)/searchOverlayInitRadius;
93
94					$overlay.css({
95						width: searchOverlayInitRadius*2,
96						height: searchOverlayInitRadius*2,
97						left: overlayX,
98						top: overlayY,
99						"margin-left": -searchOverlayInitRadius,
100						"margin-top": -searchOverlayInitRadius
101					});
102					$overlay
103						.removeClass('overlay-out')
104						.show();
105					$form.css({
106						opacity: 0,
107						display: 'block',
108						'-webkit-transition': 'opacity 0.4s 0.3s',
109						transition: 'opacity 0.4s 0.3s'
110					});
111					window.setTimeout(function(){
112						$overlay
113							.addClass('overlay-on')
114							.css({
115								"-webkit-transform": "scale(" + overlayScale + ")",
116								"transform": "scale(" + overlayScale + ")"
117							});
118						$form.css('opacity', 1);
119						clearInterval(showHideTimer);
120						showHideTimer = window.setTimeout(function() {
121							$input.focus();
122						}, 700);
123					}, 25);
124				} else {
125					showHideTimer = window.setTimeout(function() {
126						$input.focus();
127					}, 700);
128				}
129
130			});
131

132			$input.keyup(function(e) {
133				if (e.keyCode == 27) searchHide();
134			});
135
136			$btnClose.on('click touchstart', searchHide);
137		});
138	};
139
140	$(function(){
141		jQuery('.head-search').fancySearch();
142	});
143}(jQuery);