160 lines
5.1 KiB
JavaScript
160 lines
5.1 KiB
JavaScript
/*-----------------------------------------------------------------------------------
|
|
Template Name: DBlog
|
|
File Name: scripts.js
|
|
Author: Damian Komoński (komon.ski)
|
|
Version: 1.0
|
|
-----------------------------------------------------------------------------------*/
|
|
/*-----------------------------------------------------------------------------------
|
|
|
|
[CONTENT]
|
|
|
|
1. Webfont
|
|
2. Google Contact Map
|
|
3. Retina.js
|
|
4. Mobile Navigation
|
|
5. Animation Nav Menu Icon
|
|
6. Counters Number
|
|
7. Owl Carousel
|
|
8. Comments Margin in Blog Post
|
|
9. Responsive Navigation
|
|
10. Search Top Header Navigation
|
|
11. Portfolio Filter
|
|
|
|
|
|
-----------------------------------------------------------------------------------*/
|
|
/*-------------------------------------- 1. Webfont --------------------------------------*/
|
|
WebFont.load({
|
|
google: {
|
|
families: [
|
|
'Lato:400,400italic,900,900italic',
|
|
'Merriweather:400,400italic,700,700italic'],
|
|
},
|
|
});
|
|
|
|
/*-------------------------------------- 2. Google Contact Map --------------------------------------*/
|
|
function initMap () {
|
|
var mapDiv = document.getElementById('contact-map-inside');
|
|
var map = new google.maps.Map(mapDiv, {
|
|
center: { lat: 40.7058254, lng: -74.1180847 },
|
|
zoom: 12,
|
|
});
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
|
|
/*-------------------------------------- 3. Retina.js --------------------------------------*/
|
|
retinajs();
|
|
|
|
/*-------------------------------------- 4. Mobile Navigation --------------------------------------*/
|
|
$('.header-top-nav-menu-icon').on('click', function () {
|
|
$('.mobile-nav').toggleClass('mobile-nav-open');
|
|
$('body').toggleClass('noscroll');
|
|
});
|
|
|
|
//Submenu
|
|
$(document).on('click', '.dropdown-toggle', function (event) {
|
|
$(this).parent().toggleClass('open');
|
|
});
|
|
|
|
/*-------------------------------------- 5. Animation Nav Menu Icon --------------------------------------*/
|
|
$(document).on('click', '#menu-animate-icon', function () {
|
|
$(this).toggleClass('open');
|
|
});
|
|
|
|
/*-------------------------------------- 6. Counters Number --------------------------------------*/
|
|
$('.counters-one h2').each(function () {
|
|
$(this).prop('Counter', 0).animate({
|
|
Counter: $(this).text(),
|
|
}, {
|
|
duration: 4000,
|
|
easing: 'swing',
|
|
step: function (now) {
|
|
$(this).text(Math.ceil(now));
|
|
},
|
|
});
|
|
});
|
|
|
|
/*-------------------------------------- 7. Owl Carousel --------------------------------------*/
|
|
$('#articles-preview-img').owlCarousel({
|
|
loop: true,
|
|
nav: true,
|
|
navText: [
|
|
'<i class="pe-7s-angle-left"></i>',
|
|
'<i class="pe-7s-angle-right"></i>',
|
|
],
|
|
responsive: {
|
|
0: {
|
|
items: 1,
|
|
},
|
|
},
|
|
});
|
|
|
|
/*-------------------------------------- 8. Comments Margin in Blog Post --------------------------------------*/
|
|
$('.comments ol li:has(.comment-response) > .comment').
|
|
addClass('comment-small-margin');
|
|
});
|
|
|
|
/*-------------------------------------- 9. Responsive Navigation --------------------------------------*/
|
|
function adjustStyle (width) {
|
|
var width = parseInt(width);
|
|
var menuContents = $('.header-nav').html();
|
|
|
|
if (width < 992) {
|
|
$('.mobile-nav > div > div > div').html(menuContents);
|
|
}
|
|
}
|
|
|
|
adjustStyle($(window).width());
|
|
$(window).on('resize', function () {
|
|
adjustStyle($(this).width());
|
|
});
|
|
|
|
/*-------------------------------------- 10. Search Top Header Navigation --------------------------------------*/
|
|
var searchIcon = $('.header-top-nav-search > a'),
|
|
searchForm = $('.header-top-nav-search > form');
|
|
|
|
$(document).on('click', '.header-top-nav-search > a', function () {
|
|
searchIcon.fadeOut(200);
|
|
searchForm.delay(240).fadeIn(200);
|
|
});
|
|
|
|
/*-------------------------------------- 11. Portfolio Filter --------------------------------------*/
|
|
var amountItems = $('.portfolio .portfolio-item').length,
|
|
portfolioMenuLink = $('.portfolio-menu a'),
|
|
emptyPortfolio = $('.portfolio .portfolio-empty'),
|
|
portfolioItem = $('.portfolio .portfolio-item');
|
|
|
|
function portfolioUpdate (category, link) {
|
|
var amountActiveItems = $(
|
|
'.portfolio .portfolio-item[data-portfolio="' + category + '"]').length;
|
|
|
|
$('.portfolio-menu li').removeClass('active');
|
|
$(link).parent().addClass('active');
|
|
|
|
//if selected category is ALL, show all portfolio items and end function
|
|
if (category == 'all') {
|
|
emptyPortfolio.fadeOut(500);
|
|
portfolioItem.delay(400).fadeIn(500);
|
|
return;
|
|
}
|
|
|
|
portfolioItem.fadeOut(500);
|
|
emptyPortfolio.fadeOut(500);
|
|
$('.portfolio .portfolio-item[data-portfolio="' + category + '"]').
|
|
delay(400).
|
|
fadeIn(500);
|
|
|
|
if (amountActiveItems === 0) {
|
|
emptyPortfolio.delay(400).fadeIn(500);
|
|
}
|
|
}
|
|
|
|
if (amountItems === 0) {
|
|
emptyPortfolio.fadeIn(500);
|
|
}
|
|
|
|
$(document).on('click', '.portfolio-menu a', function () {
|
|
var category = $(this).attr('data-portfolio');
|
|
portfolioUpdate(category, this);
|
|
});
|