https://hohoban.com.hk/wp-content/themes/shop-isle/assets/js/custom.js

1(function($){
2
3	/* ---------------------------------------------- /*
4	 * Preloader
5	/* ---------------------------------------------- */
6
7	$(window).load(function() {
8		$('.loader').fadeOut();
9		$('.page-loader').delay(350).fadeOut('slow');
10	});
11
12	$(document).ready(function() {
13
14		/* ---------------------------------------------- /*
15		 * Initialization General Scripts for all pages
16		/* ---------------------------------------------- */
17
18		var homeSection = $('.home-section'),
19			navbar      = $('.navbar-custom'),
20			navHeight   = navbar.height(),
21			width       = Math.max($(window).width(), window.innerWidth),
22			mobileTest;
23
24		if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
25			mobileTest = true;
26		}
27
28		buildHomeSection(homeSection);
29		navbarAnimation(navbar, homeSection, navHeight);
30		navbarSubmenu(width);
31		hoverDropdown(width, mobileTest);
32
33		$(window).resize(function() {
34			var width = Math.max($(window).width(), window.innerWidth);
35			buildHomeSection(homeSection);
36			hoverDropdown(width, mobileTest);
37		});
38
39		$(window).scroll(function() {
40			effectsHomeSection(homeSection, this);
41			navbarAnimation(navbar, homeSection, navHeight);
42		});
43
44		/* ---------------------------------------------- /*
45		 * Home section height
46		/* ---------------------------------------------- */
47
48		function buildHomeSection(homeSection) {
49			if (homeSection.length > 0) {
50				if (homeSection.hasClass('home-full-height')) {
51					homeSection.height($(window).height());
52				} else {
53					if ( !homeSection.hasClass('home-slider-plugin') ) {
54						homeSection.height($(window).height() * 0.85);
55					}
56				}
57			} else {
58				if( $('body.home' ).length>0 && homeSection.length<1 ) {
59					//$('.main').css('margin-top', $('.navbar-custom').outerHeight() );
60				}
61			}
62		}
63
64		/* ---------------------------------------------- /*
65		 * Home section effects
66		/* ---------------------------------------------- */
67
68		function effectsHomeSection(homeSection, scrollTopp) {
69			if (homeSection.length > 0) {
70				var homeSHeight = homeSection.height();
71				var topScroll = $(document).scrollTop();
72				if ( ( homeSection.hasClass( 'home-parallax' ) ) && ( $( scrollTopp ).scrollTop() <= homeSHeight ) ) {
73					$( '.home-slider-overlay' ).css( 'opacity', ( 0.3 + 0.7 * topScroll / $(window).height() ) );
74				}
75				if (homeSection.hasClass('home-fade') && ($(scrollTopp).scrollTop() <= homeSHeight)) {
76					var caption = $('.caption-content');
77					caption.css('opacity', (1 - topScroll/homeSection.height() * 1));
78				}
79			}
80		}
81
82		/* ---------------------------------------------- /*
83		 * Intro slider setup
84		/* ---------------------------------------------- */
85
86		if( $('.hero-slider').length > 0 ) {
87			$('.hero-slider').flexslider( {
88				animation: 'fade',
89				animationSpeed: 1000,
90				animationLoop: true,
91				prevText: '',
92				nextText: '',
93				before: function(slider) {
94					$('.hs-caption').fadeOut().animate({top:'-80px'},{queue:false, easing: 'swing', duration: 700});
95					slider.slides.eq(slider.currentSlide).delay(500);
96					slider.slides.eq(slider.animatingTo).delay(500);
97				},
98				after: function() {
99					$('.hs-caption').fadeIn().animate({top:'0'},{queue:false, easing: 'swing', duration: 700});
100				},
101				useCSS: true
102			});
103		}
104
105		/* ---------------------------------------------- /*
106		 * Youtube video background
107		/* ---------------------------------------------- */
108
109		$(function(){
110			$('.video-player').mb_YTPlayer();
111		});
112
113		$('#video-play').click(function(event) {
114			event.preventDefault();
115			if ($(this).hasClass('fa-play')) {
116				$('.video-player').playYTP();
117			} else {
118				$('.video-player').pauseYTP();
119			}
120			$(this).toggleClass('fa-play fa-pause');
121			return false;
122		});
123
124		$('#video-volume').click(function(event) {
125			event.preventDefault();
126			$('.video-player').toggleVolume();
127			$(this).toggleClass('fa-volume-off fa-volume-up');
128			return false;
129		});
130
131		/* ---------------------------------------------- /*
132		 * Transparent navbar animation
133		/* ---------------------------------------------- */
134
135		function navbarAnimation(navbar, homeSection, navHeight) {
136
137			var topScroll = $(window).scrollTop();
138			if (navbar.length > 0 && homeSection.length > 0) {
139				if(topScroll >= navHeight) {
140					navbar.removeClass('navbar-transparent');
141				} else {
142					navbar.addClass('navbar-transparent');
143				}
144			} else {
145				navbar.removeClass('navbar-transparent');
146			}
147		}
148
149		/* ---------------------------------------------- /*
150		 * Navbar submenu
151		/* ---------------------------------------------- */
152
153		function navbarSubmenu(width) {
154			if (width > 767) {
155				$('.navbar-custom .navbar-nav > li.menu-item-has-children').hover(function() {
156					var MenuLeftOffset  = $('.sub-menu', $(this)).offset().left;
157					var Menu1LevelWidth = $('.sub-menu', $(this)).width();

158					if (width - MenuLeftOffset < Menu1LevelWidth * 2) {
159						$(this).children('.sub-menu').addClass('leftauto');
160					} else {
161						$(this).children('.sub-menu').removeClass('leftauto');
162					}
163					if ($('.menu-item-has-children', $(this)).length > 0) {
164						var Menu2LevelWidth = $('.sub-menu', $(this)).width();
165						if (width - MenuLeftOffset - Menu1LevelWidth < Menu2LevelWidth) {
166							$(this).children('.sub-menu').addClass('left-side');
167						} else {
168							$(this).children('.sub-menu').removeClass('left-side');
169						}
170					}
171				});
172			}
173		}
174
175		/* ---------------------------------------------- /*
176		 * Navbar hover dropdown on desctop
177		/* ---------------------------------------------- */
178
179		function hoverDropdown(width, mobileTest) {
180			if ((width > 767) && (mobileTest !== true)) {
181				$('.navbar-custom .navbar-nav > li, .navbar-custom li.dropdown > ul > li').removeClass('open');
182				var delay = 0;
183				var setTimeoutConst;
184				$('.navbar-custom .navbar-nav > li, .navbar-custom li > ul > li').hover(function() {
185					var $this = $(this);
186					setTimeoutConst = setTimeout(function() {
187						$this.addClass('open');
188						$this.find('.dropdown-toggle').addClass('disabled');
189					}, delay);
190				},
191				function() {
192					clearTimeout(setTimeoutConst);
193					$(this).removeClass('open');
194					$(this).find('.dropdown-toggle').removeClass('disabled');
195				});
196			} else {
197				$('.navbar-custom .navbar-nav > li, .navbar-custom li > ul > li').unbind('mouseenter mouseleave');
198				$('.navbar-custom [data-toggle=dropdown]').not('.binded').addClass('binded').on('click', function(event) {
199					event.preventDefault();
200					event.stopPropagation();
201					$(this).parent().siblings().removeClass('open');
202					$(this).parent().siblings().find('[data-toggle=dropdown]').parent().removeClass('open');
203					$(this).parent().toggleClass('open');
204				});
205			}
206		}
207
208		/* ---------------------------------------------- /*
209		 * Navbar collapse on click
210		/* ---------------------------------------------- */
211
212		$(document).on('click','.navbar-collapse.in',function(e) {
213			if( $(e.target).is('a') && $(e.target).attr('class') !== 'dropdown-toggle' ) {
214				$(this).collapse('hide');
215			}
216		});
217
218		/* ---------------------------------------------- /*
219		 * Set sections backgrounds
220		/* ---------------------------------------------- */
221
222		var module = $('.home-section, .module, .module-small, .side-image');
223		module.each(function() {
224			if ($(this).attr('data-background')) {
225				$(this).css('background-image', 'url(' + $(this).attr('data-background') + ')');
226			}
227		});
228
229		/* ---------------------------------------------- /*
230		 * Testimonials, Post sliders
231		/* ---------------------------------------------- */
232
233		if ($('.testimonials-slider').length > 0 ) {
234			$('.testimonials-slider').flexslider( {
235				animation: 'slide',
236				smoothHeight: true,
237			});
238		}
239
240		$('.post-images-slider').flexslider( {
241			animation: 'slide',
242			smoothHeight: true,
243		});
244
245		/* ---------------------------------------------- /*
246		 * Owl slider
247		/* ---------------------------------------------- */
248
249		$('.owl-carousel').each(function() {
250
251			// Check items number
252			var items;
253			if ($(this).data('items') > 0) {
254				items = $(this).data('items');
255			} else {
256				items = 4;
257			}
258
259			// Check pagination true/false
260			var pagination;
261			if (($(this).data('pagination') > 0) && ($(this).data('pagination') === true)) {
262				pagination = true;
263			} else {
264				pagination = false;
265			}
266
267			// Check navigation true/false
268			var navigation;
269			if (($(this).data('navigation') > 0) && ($(this).data('navigation') === true)) {
270				navigation = true;
271			} else {
272				navigation = false;
273			}
274
275			// Build carousel
276			$(this).owlCarousel( {
277				navigationText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
278				navigation: navigation,
279				pagination: pagination,
280				paginationSpeed: 400,
281				singleItem: false,
282				items: items,
283				slideSpeed: 300,
284				autoPlay: 5000
285			});
286
287		});
288
289		/* ---------------------------------------------- /*
290		 * Video popup, Gallery
291		/* ---------------------------------------------- */
292
293		$('.video-pop-up').magnificPopup({
294			type: 'iframe',
295		});
296
297		$('a.gallery').magnificPopup({
298			type: 'image',
299			gallery: {
300				enabled: true,
301				navigateByImgClick: true,
302				preload: [0,1]
303			},
304			image: {
305				titleSrc: 'title',
306				tError: 'The image could not be loaded.',
307			}
308		});
309
310		/* ---------------------------------------------- /*
311		 * A jQuery plugin for fluid width video embeds
312		/* ---------------------------------------------- */
313
314		$('body').fitVids();
315
316		/* ---------------------------------------------- /*
317		 * Open tabs by external link
318		/* ---------------------------------------------- */
319
320		$('.open-tab').click(function (e) {
321			var pattern = /#.+/gi;
322			var contentID = e.target.toString().match(pattern)[0];
323			$('.nav-tabs a[href="' + contentID + '"]').tab('show');
324		});
325
326		/* ---------------------------------------------- /*
327		 * Scroll Animation
328		/* ---------------------------------------------- */
329
330		$('.section-scroll').bind('click', function(e) {
331			var anchor = $(this);
332			$('html, body').stop().animate({
333				scrollTop: $(anchor.attr('href')).offset().top - 50
334			}, 1000);
335			e.preventDefault();
336		});
337
338		/* ---------------------------------------------- /*
339		 * Scroll top
340		/* ---------------------------------------------- */
341
342		$(window).scroll(function() {
343			if ($(this).scrollTop() > 100) {
344				$('.scroll-up').fadeIn();
345			} else {
346				$('.scroll-up').fadeOut();
347			}
348		});
349
350		$('a[href="#totop"]').click(function() {
351			$('html, body').animate({ scrollTop: 0 }, 'slow');
352			return false;

353		});
354		
355		/* ---------------------------------------------- /*
356		 * Dropdown mennu on tablet
357		 /* ---------------------------------------------- */
358
359		var $menuBtnChildren = $('.menu-item-has-children'),
360			submenuOpenClass = 'open',
361			$thisParent,
362			$menuWrap = $('.header-menu-wrap');
363		$menuBtnChildren.click(function(event){
364			if( mobileTest && !$(this).hasClass(submenuOpenClass) && window.innerWidth > 767 ) {
365				$thisParent = $(this).parent('ul').parent('li');
366				if( $thisParent.hasClass(submenuOpenClass) ){
367					$thisParent.find('.'+submenuOpenClass).removeClass(submenuOpenClass);
368				} else {
369					$menuWrap.find('.'+submenuOpenClass).removeClass(submenuOpenClass);
370				}
371				$(this).addClass(submenuOpenClass);
372				event.stopPropagation();
373				return false;
374			}
375		});
376
377		$('html,body,.main,.navbar-custom,.bottom-page-wrap').click(function(){
378			$menuWrap.find('.'+submenuOpenClass).removeClass(submenuOpenClass);
379		});
380
381        /* Visible arrow on mobile */
382		if( mobileTest === true && $( '.flex-direction-nav' ).length>0 && $( 'ul.slides > li' ).length>1 ) {
383            $('.flex-direction-nav').addClass('visible-arrow');
384        }
385
386	});
387
388	$('#review_form form :input').each(function(index, elem) {
389		var eId = $(elem).attr('id');
390		var label = null;
391		if (eId && (label = $(elem).parents('form').find('label[for='+eId+']')).length === 1) {
392			$(elem).attr('placeholder', $(label).text());
393			$(label).remove();
394		}
395	});
396
397	$('#map').click(function(event){
398        $('.shop_isle_pro_map_overlay').css('display','none');
399        event.stopPropagation();
400    });
401    
402    $('html').click(function(){
403        $('.shop_isle_pro_map_overlay').css('display','block');
404    });
405
406	if(typeof $('.wr-megamenu-container') !== 'undefined') {
407		$('.wr-megamenu-container').addClass('bg-tr');
408	}
409
410    var isMobile = {
411        Android: function() {
412            return navigator.userAgent.match(/Android/i);
413        },
414        BlackBerry: function() {
415            return navigator.userAgent.match(/BlackBerry/i);
416        },
417        iOS: function() {
418            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
419        },
420        Opera: function() {
421            return navigator.userAgent.match(/Opera Mini/i);
422        },
423        Windows: function() {
424            return navigator.userAgent.match(/IEMobile/i);
425        },
426        any: function() {
427            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
428        }
429    };
430    if( isMobile.iOS() ) {
431        $( '#ribbon' ).addClass( 'ribbon-ios' );
432    }
433
434	if( isMobile.Windows() && $( '.navbar-cart' ).length > 0 ) {
435		$( '.navbar-header' ).css({
436			'float': 'left',
437			'padding-left': '100px',
438			'margin-left': '-100px',
439		});
440	}
441
442})(jQuery);