/**
* @package Escapium HTML
* @version 1.2.2
* Template Scripts
* Created by Dan Fisher
*/
;(function ($){
'use strict';
// Preloader
$(window).on('load', function () {
$('#js-preloader').delay(0).fadeOut();
$('#js-preloader-overlay').delay(200).fadeOut('slow');
});
$.fn.exists = function () {
return this.length > 0;
};
/* ----------------------------------------------------------- */
/* Predefined Variables
/* ----------------------------------------------------------- */
var mainNav = $('.main-nav');
var roomsGrid = $('.js-rooms--grid');
var mainSlider = $('.js-main-slider');
var roomSlick = $('.js-room-single-slick');
var roomsRelated = $('.js-rooms-related');
var InstaFeed = $('#instagram-feed');
var InstaFeedTagged = $('#instagram-feed-tagged');
var mpSingle = $('.mp_single-img');
var mpGallery = $('.mp_gallery');
var mpIframe = $('.mp_iframe');
var gmap = $('.gm-map');
var testiSlick = $('.js-testimonials-slick');
var Core = {
initialize: function () {
this.stickyHeader();
this.headerNav();
this.isotope();
this.slickSlider();
this.instagramFeed();
this.googleMap();
this.magnificPopupInit();
this.animateOnScroll();
this.miscScripts();
},
stickyHeader: function () {
var $headerHeight = $('#header').innerHeight();
$('.page-heading').css('padding-top', $headerHeight);
$('#header').jPinning({
// offset for header to hide or show in pixels
offset: 100,
});
},
headerNav: function () {
if (mainNav.exists()) {
var wrapper = $('.site-wrapper');
var navList = $('.main-nav__list');
var navListLi = $('.main-nav__list > li');
var toggleBtn = $('#header-mobile__toggle');
// Clone Log In Link
var navLogin = $('.nav-secondary__login').clone();
navLogin.appendTo(navList);
// Mobile Menu Toggle
toggleBtn.on('click', function (){
wrapper.toggleClass('site-wrapper--has-overlay');
$(this).toggleClass('burger-menu-icon--active');
});
$('.site-overlay, .main-nav__back').on('click', function (){
wrapper.toggleClass('site-wrapper--has-overlay');
toggleBtn.toggleClass('burger-menu-icon--active');
});
$('.site-overlay').on('click', function (e){
e.preventDefault();
wrapper.removeClass('site-wrapper--has-overlay-pushy site-wrapper--has-overlay');
});
// Add toggle button and class if menu has submenu
navListLi.has('.main-nav__sub').addClass('has-children').prepend('');
navListLi.has('.main-nav__megamenu').addClass('has-children').prepend('');
$('.main-nav__toggle').on('click', function (){
$(this).toggleClass('main-nav__toggle--rotate').parent().siblings().children().removeClass('main-nav__toggle--rotate');
$('.main-nav__sub, .main-nav__megamenu').not($(this).siblings('.main-nav__sub, .main-nav__megamenu')).slideUp('normal');
$(this).siblings('.main-nav__sub').slideToggle('normal');
$(this).siblings('.main-nav__megamenu').slideToggle('normal');
});
// Add toggle button and class if submenu has sub-submenu
$('.main-nav__list > li > ul > li').has('.main-nav__sub-2').addClass('has-children').prepend('');
$('.main-nav__list > li > ul > li > ul > li').has('.main-nav__sub-3').addClass('has-children').prepend('');
$('.main-nav__toggle-2').on('click', function (){
$(this).toggleClass('main-nav__toggle--rotate');
$(this).siblings('.main-nav__sub-2').slideToggle('normal');
$(this).siblings('.main-nav__sub-3').slideToggle('normal');
});
// Search Form
$('.js-search-form-control').on('click', function (e){
$('html, body').addClass('search-active');
$('.input-search').focus();
e.preventDefault();
});
$('.js-search-form-close').on('click', function (e){
$('html, body').removeClass('search-active');
e.preventDefault();
});
}
},
isotope: function () {
if (roomsGrid.exists() ) {
var isotopeGrid = roomsGrid.imagesLoaded(function () {
var $filter = $('.js-filter');
// init Isotope after all images have loaded
isotopeGrid.isotope({
filter: '*',
itemSelector: '.room',
layoutMode: 'fitRows',
masonry: {
columnWidth: '.room'
}
});
// filter items on button click
$filter.on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$filter.find('button').removeClass('btn-primary').addClass('btn-outline-secondary');
$(this).removeClass('btn-outline-secondary').addClass('btn-primary');
isotopeGrid.isotope({
filter: filterValue
});
});
});
}
},
slickSlider: function () {
// Single Room Slider
if (mainSlider.exists()) {
mainSlider.on('init', function (e, slick) {
var firstAnimatingElements = $('.main-slider__item:first-child').find('[data-animation]');
doAnimations(firstAnimatingElements);
});
mainSlider.on('beforeChange', function (e, slick, currentSlide, nextSlide) {
var $animatingElements = $('.main-slider__item[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
doAnimations($animatingElements);
});
mainSlider.slick({
autoplay: true,
autoplaySpeed: 7000,
arrows: false,
dots: true,
infinite: true,
speed: 600,
fade: true,
rows: 0,
cssEase: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
});
}
// Single Room Slider
if (roomSlick.exists()) {
roomSlick.slick({
autoplay: true,
autoplaySpeed: 7000,
arrows: false,
dots: true,
infinite: true,
speed: 600,
fade: true,
rows: 0,
cssEase: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)'
});
}
// Related Rooms
if (roomsRelated.exists()) {
roomsRelated.slick({
arrows: true,
dots: false,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
rows: 0,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
arrows: true
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
arrows: true
}
}
]
});
}
// Testimonials
if (testiSlick.exists()) {
testiSlick.slick({
autoplay: true,
autoplaySpeed: 7000,
arrows: true,
dots: false,
infinite: true,
speed: 600,
cssEase: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
slidesToShow: 2,
slidesToScroll: 1,
prevArrow: '',
nextArrow: '',
rows: 0,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
arrows: false
}
}
]
});
}
},
instagramFeed: function (){
if (InstaFeed.exists()) {
var instaFeed = new Instafeed({
get: 'user',
target: 'instagram-feed',
userId: '6679748018',
accessToken: '',
limit: 6,
template: '
'
});
instaFeed.run();
}
if (InstaFeedTagged.exists()) {
var instaFeedTagged = new Instafeed({
get: 'user',
target: 'instagram-feed-tagged',
userId: '6679748018',
accessToken: '',
limit: 8,
template: ' {{likes}}',
resolution: 'low_resolution'
});
instaFeedTagged.run();
}
},
googleMap: function () {
// Google Map
if (gmap.exists()) {
gmap.each(function () {
var $elem = $(this);
var mapAddress = $elem.attr('data-map-address') ? $elem.attr('data-map-address') : 'New York, USA';
var mapZoom = $elem.attr('data-map-zoom') ? $elem.attr('data-map-zoom') : '15';
var mapIcon = $elem.attr('data-map-icon') ? $elem.attr('data-map-icon') : '';
var mapStyle = $elem.attr('data-map-style');
var stylesOutput = '';
// Skins
if (mapStyle === 'default') {
// Skin: Default
stylesOutput = [{'featureType': 'administrative.country','elementType': 'geometry','stylers': [{'visibility': 'simplified'},{'hue': '#ff0000'}]}];
} else if (mapStyle === 'light-dream') {
// Skin: Light Dream
stylesOutput = [{'featureType': 'landscape', 'stylers': [{'hue': '#FFBB00'}, {'saturation': 43.400000000000006}, {'lightness': 37.599999999999994}, {'gamma': 1}]}, {'featureType': 'road.highway', 'stylers': [{'hue': '#FFC200'}, {'saturation': -61.8}, {'lightness': 45.599999999999994}, {'gamma': 1}]}, {'featureType': 'road.arterial', 'stylers': [{'hue': '#FF0300'}, {'saturation': -100}, {'lightness': 51.19999999999999}, {'gamma': 1}]}, {'featureType': 'road.local', 'stylers': [{'hue': '#FF0300'}, {'saturation': -100}, {'lightness': 52}, {'gamma': 1}]}, {'featureType': 'water', 'stylers': [{'hue': '#0078FF'}, {'saturation': -13.200000000000003}, {'lightness': 2.4000000000000057}, {'gamma': 1}]}, {'featureType': 'poi', 'stylers':[{'hue': '#00FF6A'}, {'saturation': -1.0989010989011234}, {'lightness': 11.200000000000017}, {'gamma': 1}]}];
} else if (mapStyle === 'shades-of-grey') {
// Skin: Shades of Grey
stylesOutput = [{'featureType': 'all', 'elementType': 'labels.text.fill', 'stylers': [{'saturation': 36}, {'color': '#000000'}, {'lightness': 40}]}, {'featureType': 'all', 'elementType': 'labels.text.stroke', 'stylers': [{'visibility': 'on'}, {'color': '#000000'}, {'lightness': 16}]}, {'featureType': 'all', 'elementType': 'labels.icon', 'stylers': [{'visibility': 'off'}]}, {'featureType': 'administrative', 'elementType': 'geometry.fill', 'stylers': [{'color': '#000000'}, {'lightness': 20}]}, {'featureType': 'administrative', 'elementType': 'geometry.stroke', 'stylers': [{'color': '#000000'}, {'lightness': 17}, {'weight': 1.2}]}, {'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{'color': '#000000'}, {'lightness': 20}]}, {'featureType': 'poi', 'elementType': 'geometry', 'stylers': [{'color': '#000000'}, {'lightness': 21}]}, {'featureType': 'road.highway', 'elementType': 'geometry.fill', 'stylers': [{'color': '#000000'}, {'lightness': 17}]}, {'featureType': 'road.highway', 'elementType': 'geometry.stroke', 'stylers': [{'color': '#000000'}, {'lightness': 29}, {'weight': 0.2}]}, {'featureType': 'road.arterial', 'elementType': 'geometry', 'stylers': [{'color': '#000000'}, {'lightness': 18}]}, {'featureType': 'road.local', 'elementType': 'geometry', 'stylers': [{'color': '#000000'}, {'lightness': 16}]}, {'featureType': 'transit', 'elementType': 'geometry', 'stylers': [{'color': '#000000'}, {'lightness': 19}]}, {'featureType': 'water', 'elementType': 'geometry', 'stylers': [{'color': '#000000'}, {'lightness': 17}]}];
} else if (mapStyle === 'blue-water') {
// Skin: Blue Water
stylesOutput = [{'featureType': 'administrative', 'elementType': 'labels.text.fill', 'stylers': [{'color': '#444444'}]},{'featureType': 'landscape', 'elementType': 'all', 'stylers': [{'color': '#f2f2f2'}]}, {'featureType': 'poi', 'elementType': 'all', 'stylers': [{'visibility': 'off'}]}, {'featureType': 'road', 'elementType': 'all', 'stylers': [{'saturation': -100}, {'lightness': 45}]}, {'featureType': 'road.highway', 'elementType': 'all', 'stylers': [{'visibility': 'simplified'}]}, {'featureType': 'road.arterial', 'elementType': 'labels.icon', 'stylers': [{'visibility': 'off'}]}, {'featureType': 'transit', 'elementType': 'all', 'stylers': [{'visibility': 'off'}]}, {'featureType': 'water', 'elementType': 'all', 'stylers': [{'color': '#46bcec'}, {'visibility': 'on'}]}];
} else {
// Skin: Ultra Light
stylesOutput = [{'featureType': 'water', 'elementType': 'geometry', 'stylers': [{'color': '#e9e9e9'}, {'lightness': 17}]}, {'featureType': 'landscape', 'elementType': 'geometry', 'stylers': [{'color': '#f5f5f5'}, {'lightness': 20}]}, {'featureType': 'road.highway', 'elementType': 'geometry.fill', 'stylers': [{'color': '#ffffff'}, {'lightness': 17}]}, {'featureType': 'road.highway', 'elementType': 'geometry.stroke', 'stylers': [{'color': '#ffffff'}, {'lightness': 29}, {'weight': 0.2}]}, {'featureType': 'road.arterial', 'elementType': 'geometry', 'stylers': [{'color': '#ffffff'}, {'lightness': 18}]}, {'featureType': 'road.local', 'elementType': 'geometry', 'stylers': [{'color': '#ffffff'}, {'lightness': 16}]}, {'featureType': 'poi', 'elementType': 'geometry', 'stylers': [{'color': '#f5f5f5'}, {'lightness': 21}]}, {'featureType': 'poi.park', 'elementType': 'geometry', 'stylers': [{'color': '#dedede'}, {'lightness': 21}]}, {'elementType': 'labels.text.stroke', 'stylers': [{'visibility': 'on'}, {'color': '#ffffff'}, {'lightness': 16}]}, {'elementType': 'labels.text.fill', 'stylers': [{'saturation': 36}, {'color': '#333333'}, {'lightness': 40}]}, {'elementType': 'labels.icon', 'stylers': [{'visibility': 'off'}]}, {'featureType': 'transit', 'elementType': 'geometry', 'stylers': [{'color': '#f2f2f2'}, {'lightness': 19}]}, {'featureType': 'administrative', 'elementType': 'geometry.fill', 'stylers': [{'color': '#fefefe'}, {'lightness': 20}]}, {'featureType': 'administrative', 'elementType': 'geometry.stroke', 'stylers': [{'color': '#fefefe'}, {'lightness': 17}, {'weight': 1.2}]}];
}
$elem.gmap3({
zoom: Number(mapZoom),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
address: mapAddress,
styles: stylesOutput,
}).marker({
address: mapAddress,
icon: mapIcon,
});
});
}
},
magnificPopupInit: function (){
if (mpSingle.exists()) {
// Single Image
$('.mp_single-img').magnificPopup({
type: 'image',
removalDelay: 300,
gallery: {
enabled: false
},
mainClass: 'mfp-fade',
autoFocusLast: false,
});
}
if (mpGallery.exists() ) {
// Multiple Images (gallery)
$('.mp_gallery').magnificPopup({
type: 'image',
removalDelay: 300,
gallery: {
enabled: true
},
mainClass: 'mfp-fade',
autoFocusLast: false,
});
}
if (mpIframe.exists() ) {
// Iframe (video, maps)
$('.mp_iframe').magnificPopup({
type: 'iframe',
removalDelay: 300,
mainClass: 'mfp-fade',
autoFocusLast: false,
patterns: {
youtube: {
index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
id: 'v=', // String that splits URL in a two parts, second part should be %id%
// Or null - full URL will be returned
// Or a function that should return %id%, for example:
// id: function(url) { return 'parsed id'; }
src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
},
vimeo: {
index: 'vimeo.com/',
id: '/',
src: '//player.vimeo.com/video/%id%?autoplay=1'
},
gmaps: {
index: '//maps.google.',
src: '%id%&output=embed'
}
},
srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
});
}
},
animateOnScroll: function () {
AOS.init();
},
miscScripts: function () {
},
};
function doAnimations(elements) {
var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
elements.each(function () {
var $this = $(this);
var $animationDelay = $this.data('delay');
var $animationType = 'animated ' + $this.data('animation');
$this.css({
'animation-delay': $animationDelay,
'-webkit-animation-delay': $animationDelay
});
$this.addClass($animationType).one(animationEndEvents, function() {
$this.removeClass($animationType);
});
});
}
$(document).on('ready', function () {
Core.initialize();
});
})(jQuery);