https://www.uberflip.com/wp-content/themes/uberflip/parts/components/header-v2/index.js

1jQuery(document).ready(function($){
2	function morphDropdown( element ) {
3		this.element = element;
4		this.mainNavigation = this.element.find('.main-nav');
5		this.mainNavigationItems = this.mainNavigation.find('.has-dropdown');
6		this.dropdownList = this.element.find('.dropdown-list');
7		this.dropdownWrappers = this.dropdownList.find('.dropdown');
8		this.dropdownItems = this.dropdownList.find('.content');
9		this.dropdownBg = this.dropdownList.find('.bg-layer');
10		this.mq = this.checkMq();
11		this.bindEvents();
12	}
13
14	morphDropdown.prototype.checkMq = function() {
15		//check screen size
16		var self = this;
17		return window.getComputedStyle(self.element.get(0), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "").split(', ');
18	};
19
20	morphDropdown.prototype.bindEvents = function() {
21		var self = this;
22		//hover over an item in the main navigation
23		this.mainNavigationItems.mouseenter(function(event){
24			//hover over one of the nav items -> show dropdown
25			self.showDropdown($(this));
26		}).mouseleave(function(){
27			setTimeout(function(){
28				//if not hovering over a nav item or a dropdown -> hide dropdown
29				if( self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown();
30			}, 50);
31		});
32		
33		//hover over the dropdown
34		this.dropdownList.mouseleave(function(){
35			setTimeout(function(){
36				//if not hovering over a dropdown or a nav item -> hide dropdown
37				(self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) && self.hideDropdown();
38			}, 50);
39		});
40
41		//click on an item in the main navigation -> open a dropdown on a touch device
42		this.mainNavigationItems.on('touchstart', function(event){
43			var selectedDropdown = self.dropdownList.find('#'+$(this).data('content'));
44			if( !self.element.hasClass('is-dropdown-visible') || !selectedDropdown.hasClass('active') ) {
45				event.preventDefault();
46				self.showDropdown($(this));
47			}
48		});
49
50		//on small screens, open navigation clicking on the menu icon
51		this.element.on('click', '.nav-trigger', function(event){
52			event.preventDefault();
53			self.element.toggleClass('nav-open');
54		});
55	};
56
57	morphDropdown.prototype.showDropdown = function(item) {
58		this.mq = this.checkMq();
59		if( this.mq == 'desktop') {
60			var self = this;
61			var selectedDropdown = this.dropdownList.find('#'+item.data('content')),
62				selectedDropdownHeight = selectedDropdown.innerHeight(),
63				selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(),
64				selectedDropdownLeft = (item.offset().left + 50) + ((item.innerWidth() - 18) / 2) - selectedDropdownWidth/2;
65
66
67			//update dropdown position and size
68			this.updateDropdown(selectedDropdown, parseInt(selectedDropdownHeight), selectedDropdownWidth, parseInt(selectedDropdownLeft));
69			//add active class to the proper dropdown item
70			this.element.find('.active').removeClass('active');
71			selectedDropdown.addClass('active').removeClass('move-left move-right').prevAll().addClass('move-left').end().nextAll().addClass('move-right');
72			item.addClass('active');
73			//show the dropdown wrapper if not visible yet
74			if( !this.element.hasClass('is-dropdown-visible') ) {
75				setTimeout(function(){
76					self.element.addClass('is-dropdown-visible');
77				}, 10);
78			}
79		}
80	};
81
82	morphDropdown.prototype.updateDropdown = function(dropdownItem, height, width, left) {
83		this.dropdownList.css({
84		    '-moz-transform': 'translateX(' + left + 'px)',
85		    '-webkit-transform': 'translateX(' + left + 'px)',
86			'-ms-transform': 'translateX(' + left + 'px)',
87			'-o-transform': 'translateX(' + left + 'px)',
88			'transform': 'translateX(' + left + 'px)',
89			'width': width+'px',
90			'height': height+'px'
91		});
92
93		this.dropdownBg.css({
94			'-moz-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
95		    '-webkit-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
96			'-ms-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
97			'-o-transform': 'scaleX(' + width + ') scaleY(' + height + ')',
98			'transform': 'scaleX(' + width + ') scaleY(' + height + ')'
99		});
100	};
101
102	morphDropdown.prototype.hideDropdown = function() {
103		this.mq = this.checkMq();
104		if( this.mq == 'desktop') {
105			this.element.removeClass('is-dropdown-visible').find('.active').removeClass('active').end().find('.move-left').removeClass('move-left').end().find('.move-right').removeClass('move-right');
106		}
107	};
108
109	morphDropdown.prototype.resetDropdown = function() {
110		this.mq = this.checkMq();
111		if( this.mq == 'mobile') {
112			this.dropdownList.removeAttr('style');
113		}
114	};
115
116	var morphDropdowns = [];
117	if( $('.cd-morph-dropdown').length > 0 ) {
118		$('.cd-morph-dropdown').each(function(){
119			//create a morphDropdown object for each .cd-morph-dropdown
120			morphDropdowns.push(new morphDropdown($(this)));
121		});
122
123		var resizing = false;

124
125		//on resize, reset dropdown style property
126		updateDropdownPosition();
127		$(window).on('resize', function(){
128			if( !resizing ) {
129				resizing =  true;
130				(!window.requestAnimationFrame) ? setTimeout(updateDropdownPosition, 300) : window.requestAnimationFrame(updateDropdownPosition);
131			}
132		});
133
134		function updateDropdownPosition() {
135			morphDropdowns.forEach(function(element){
136				element.resetDropdown();
137			});
138
139			resizing = false;
140		};
141	}
142	// Centering logo on click
143	jQuery('.menu-item button, .mobile-menu__back').click(function(){
144		jQuery('.main-header__logo').toggleClass("center");
145	});
146
147	// Adding active class to link
148	var currentURL = window.location.pathname;
149	$('.cd-morph-dropdown .links .content ul li a').each(function() {
150		var linkURL = $(this).attr('href');
151		if (currentURL === linkURL) {
152		  $(this).parent('li').addClass('currentURL');
153		}
154	  });
155	
156});
157