/* ===================================================================
* Abstract - Main JS
*
* ------------------------------------------------------------------- */
(function($) {
"use strict";
var cfg = {
defAnimation : "fadeInUp", // default css animation
scrollDuration : 800, // smoothscroll duration
statsDuration : 4000, // stats animation duration
mailChimpURL : 'http://facebook.us8.list-manage.com/subscribe/post?u=cdb7b577e41181934ed6a6a44&id=e65110b38d'
},
$WIN = $(window);
/* Preloader
* -------------------------------------------------- */
var ssPreloader = function() {
$WIN.on('load', function() {
// will first fade out the loading animation
$("#loader").fadeOut("slow", function(){
// will fade out the whole DIV that covers the website.
$("#preloader").delay(300).fadeOut("slow");
});
});
};
/* audio controls
* -------------------------------------------------- */
var ssMediaElementPlayer = function() {
$("audio").mediaelementplayer({
features: ['playpause','progress', 'tracks','volume']
});
};
/* FitVids
------------------------------------------------------ */
var ssFitVids = function() {
$(".fluid-video-wrapper").fitVids();
};
/* pretty print
* -------------------------------------------------- */
var ssPrettyPrint = function() {
$('pre').addClass('prettyprint');
$( document ).ready(function() {
prettyPrint();
});
};
/* Alert Boxes
------------------------------------------------------- */
var ssAlertBoxes = function() {
$('.alert-box').on('click', '.close', function() {
$(this).parent().fadeOut(500);
});
};
/* superfish
* -------------------------------------------------- */
var ssSuperFish = function() {
$('ul.sf-menu').superfish({
animation: { height:'show' }, // slide-down effect without fade-in
animationOut: { height:'hide'}, // slide-up effect without fade-in
cssArrows: false, // disable css arrows
delay: 600 // .6 second delay on mouseout
});
};
/* Mobile Menu
------------------------------------------------------ */
var ssMobileNav = function() {
var toggleButton = $('.menu-toggle'),
nav = $('.main-navigation');
toggleButton.on('click', function(event){
event.preventDefault();
toggleButton.toggleClass('is-clicked');
nav.slideToggle();
});
if (toggleButton.is(':visible')) nav.addClass('mobile');
$WIN.resize(function() {
if (toggleButton.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('#main-nav-wrap li a').on("click", function() {
if (nav.hasClass('mobile')) {
toggleButton.toggleClass('is-clicked');
nav.fadeOut();
}
});
};
/* search
------------------------------------------------------ */
var ssSearch = function() {
var searchWrap = $('.search-wrap');
var searchField = searchWrap.find('.search-field');
var closeSearch = $('#close-search');
var searchTrigger = $('.search-trigger');
var body = $('body');
searchTrigger.on('click', function(e){
e.preventDefault();
e.stopPropagation();
var $this = $(this);
body.addClass('search-visible');
setTimeout(function(){
$('.search-wrap').find('.search-field').focus();
}, 100);
});
closeSearch.on('click', function(){
var $this = $(this);
if(body.hasClass('search-visible')){
body.removeClass('search-visible');
setTimeout(function(){
$('.search-wrap').find('.search-field').blur();
}, 100);
}
});
searchWrap.on('click', function(e){
if( !$(e.target).is('.search-field') ) {
closeSearch.trigger('click');
}
});
searchField.on('click', function(e){
e.stopPropagation();
});
searchField.attr({placeholder: 'Type Your Keywords', autocomplete: 'off'});
};
/* Masonry
------------------------------------------------------ */
var ssMasonryFolio = function() {
var containerBricks = $('.bricks-wrapper');
containerBricks.imagesLoaded( function() {
containerBricks.masonry( {
itemSelector: '.entry',
columnWidth: '.grid-sizer',
percentPosition: true,
resize: true
});
});
};
/* animate bricks
* ------------------------------------------------------ */
var ssBricksAnimate = function() {
var animateEl = $('.animate-this');
$WIN.on('load', function() {
setTimeout(function() {
animateEl.each(function(ctr) {
var el = $(this);
setTimeout(function() {
el.addClass('animated fadeInUp');
}, ctr * 200);
});
}, 200);
});
$WIN.on('resize', function() {
// remove animation classes
animateEl.removeClass('animate-this animated fadeInUp');
});
};
/* Flex Slider
* ------------------------------------------------------ */
var ssFlexSlider = function() {
$WIN.on('load', function() {
$('#featured-post-slider').flexslider({
namespace: "flex-",
controlsContainer: "", // ".flex-content",
animation: 'fade',
controlNav: false,
directionNav: true,
smoothHeight: false,
slideshowSpeed: 7000,
animationSpeed: 600,
randomize: false,
touch: true,
});
$('.post-slider').flexslider({
namespace: "flex-",
controlsContainer: "",
animation: 'fade',
controlNav: true,
directionNav: false,
smoothHeight: false,
slideshowSpeed: 7000,
animationSpeed: 600,
randomize: false,
touch: true,
start: function (slider) {
if (typeof slider.container === 'object') {
slider.container.on("click", function (e) {
if (!slider.animating) {
slider.flexAnimate(slider.getTarget('next'));
}
});
}
$('.bricks-wrapper').masonry('layout');
}
});
});
};
/* Smooth Scrolling
* ------------------------------------------------------ */
var ssSmoothScroll = function() {
$('.smoothscroll').on('click', function (e) {
var target = this.hash,
$target = $(target);
e.preventDefault();
e.stopPropagation();
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, cfg.scrollDuration, 'swing').promise().done(function () {
// check if menu is open
if ($('body').hasClass('menu-is-open')) {
$('#header-menu-trigger').trigger('click');
}
window.location.hash = target;
});
});
};
/* Placeholder Plugin Settings
* ------------------------------------------------------ */
var ssPlaceholder = function() {
$('input, textarea, select').placeholder();
};
/* AjaxChimp
* ------------------------------------------------------ */
var ssAjaxChimp = function() {
$('#mc-form').ajaxChimp({
language: 'es',
url: cfg.mailChimpURL
});
// Mailchimp translation
//
// Defaults:
// 'submit': 'Submitting...',
// 0: 'We have sent you a confirmation email',
// 1: 'Please enter a value',
// 2: 'An email address must contain a single @',
// 3: 'The domain portion of the email address is invalid (the portion after the @: )',
// 4: 'The username portion of the email address is invalid (the portion before the @: )',
// 5: 'This email address looks fake or invalid. Please enter a real email address'
$.ajaxChimp.translations.es = {
'submit': 'Submitting...',
0: ' We have sent you a confirmation email',
1: ' You must enter a valid e-mail address.',
2: ' E-mail address is not valid.',
3: ' E-mail address is not valid.',
4: ' E-mail address is not valid.',
5: ' E-mail address is not valid.'
}
};
/* Back to Top
* ------------------------------------------------------ */
var ssBackToTop = function() {
var pxShow = 500, // height on which the button will show
fadeInTime = 400, // how slow/fast you want the button to show
fadeOutTime = 400, // how slow/fast you want the button to hide
scrollSpeed = 300, // how slow/fast you want the button to scroll to top. can be a value, 'slow', 'normal' or 'fast'
goTopButton = $("#go-top")
// Show or hide the sticky footer button
$(window).on('scroll', function() {
if ($(window).scrollTop() >= pxShow) {
goTopButton.fadeIn(fadeInTime);
} else {
goTopButton.fadeOut(fadeOutTime);
}
});
};
/* Map
* ------------------------------------------------------ */
var ssGoogleMap = function() {
if (typeof google === 'object' && typeof google.maps === 'object') {
var latitude = 14.549072,
longitude = 121.046958,
map_zoom = 15,
main_color = '#d8ac00',
saturation_value = -30,
brightness_value = 5,
marker_url = null,
winWidth = $(window).width();
// show controls
$("#map-zoom-in, #map-zoom-out").show();
// marker url
if ( winWidth > 480 ) {
marker_url = 'images/icon-location@2x.png';
} else {
marker_url = 'images/icon-location.png';
}
// map style
var style = [
{
// set saturation for the labels on the map
elementType: "labels",
stylers: [
{ saturation: saturation_value }
]
},
{ // poi stands for point of interest - don't show these lables on the map
featureType: "poi",
elementType: "labels",
stylers: [
{visibility: "off"}
]
},
{
// don't show highways lables on the map
featureType: 'road.highway',
elementType: 'labels',
stylers: [
{ visibility: "off" }
]
},
{
// don't show local road lables on the map
featureType: "road.local",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
},
{
// don't show arterial road lables on the map
featureType: "road.arterial",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
},
{
// don't show road lables on the map
featureType: "road",
elementType: "geometry.stroke",
stylers: [
{ visibility: "off" }
]
},
// style different elements on the map
{
featureType: "transit",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.government",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.sport_complex",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.attraction",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "poi.business",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "transit",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "transit.station",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "landscape",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "road",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{ hue: main_color },
{ visibility: "on" },
{ lightness: brightness_value },
{ saturation: saturation_value }
]
}
];
// map options
var map_options = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 15,
panControl: false,
zoomControl: false,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
styles: style
};
// inizialize the map
var map = new google.maps.Map(document.getElementById('map-container'), map_options);
// add a custom marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
visible: true,
icon: marker_url
});
// add custom buttons for the zoom-in/zoom-out on the map
function CustomZoomControl(controlDiv, map) {
// grap the zoom elements from the DOM and insert them in the map
var controlUIzoomIn= document.getElementById('map-zoom-in'),
controlUIzoomOut= document.getElementById('map-zoom-out');
controlDiv.appendChild(controlUIzoomIn);
controlDiv.appendChild(controlUIzoomOut);
// Setup the click event listeners and zoom-in or out according to the clicked element
google.maps.event.addDomListener(controlUIzoomIn, 'click', function() {
map.setZoom(map.getZoom()+1)
});
google.maps.event.addDomListener(controlUIzoomOut, 'click', function() {
map.setZoom(map.getZoom()-1)
});
}
var zoomControlDiv = document.createElement('div');
var zoomControl = new CustomZoomControl(zoomControlDiv, map);
// insert the zoom div on the top right of the map
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(zoomControlDiv);
}
};
/* Initialize
* ------------------------------------------------------ */
(function ssInit() {
ssPreloader();
ssMediaElementPlayer();
ssFitVids();
ssPrettyPrint();
ssAlertBoxes();
ssSuperFish();
ssMobileNav();
ssSearch();
ssMasonryFolio();
ssBricksAnimate();
ssFlexSlider();
ssSmoothScroll();
ssPlaceholder();
ssAjaxChimp();
ssBackToTop();
ssGoogleMap();
})();
})(jQuery);