theexplay
2/5/2016 - 8:31 AM
apus.js
apus.js
(function ($, window, document, undefined) {
var Apus = {
meta: {
$doc: $(document),
$win: $(window),
url: window.location.pathname,
wHeight: 0,
wWidth: 0,
isMobile: false
},
ui: {
$html: $('html'),
$body: $('body'),
$headerWrapper: $('header'),
$hamburger: $('.hamburger'),
$menu: $('.section_menu'),
$menuCover: $('.section_menu-cover'),
$menuCols: $('.menu__cols'),
$scheduleSection: $('.section_schedule_fullpage'),
$schedule: $('.schedule'),
$scheduleItem: $('.schedule__item'),
$scheduleInfo: $('.product_schedule'),
$filter: $('.filter'),
$filterItem: $('.filter__item'),
$filterIcon: $('.filter__item-icon'),
$logoLoader: $('.logo-loader'),
$product: $('.product')
},
init: function () {
Apus.meta.$win.resize(function () {
Apus.setWindowDimensions();
}).trigger('resize');
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
Apus.ui.$html.addClass('is-mobile');
Apus.meta.isMobile = true;
}
Apus.initCommon();
switch (Apus.meta.url) {
case "/":
Apus.initHomePage();
break;
case "/news.html":
Apus.initNews();
break;
case "/about.html":
break;
case "/about-lector.html":
break;
case "/lectors.html":
case "/study.html":
Apus.initStudy();
break;
default:
console.log('page 404')
}
},
// Иниты страниц
initCommon: function () {
Apus.ui.$hamburger.on('click', function () {
var $this = $(this);
$this.toggleClass('hamburger_open');
Apus.ui.$menu.toggleClass('section_menu_open');
Apus.initNav($this);
});
},
initNav: function (e) {
// Анимируем элементы при открытии/закрытии меню
if (e.hasClass('hamburger_open')) {
TweenMax.fromTo(Apus.ui.$menu, .5, {height: 0}, {height: '100%'});
if (!Apus.meta.isMobile) {
TweenMax.staggerFromTo(Apus.ui.$menuCover, .2, {height: 0}, {height: '100%'}, 0.1);
TweenMax.staggerFromTo(Apus.ui.$menuCols, .3, {opacity: 0, y: 15}, {opacity: 1, y: 0, delay: 0.1}, 0.2);
} else {
TweenMax.staggerFromTo(Apus.ui.$menuCover, .2, {width: 0}, {width: '100%'}, 0.1);
TweenMax.staggerFromTo(Apus.ui.$menuCols, .4, {opacity: 0, y: 15}, {opacity: 1, y: 0, delay: 0.2}, 0.2);
}
} else {
TweenMax.to(Apus.ui.$menu, .3, {height: 0});
// Если открыт общий календарь, закрываем его.
if (Apus.ui.$scheduleSection.hasClass('section_schedule_fullpage_open')) {
Apus.ui.$scheduleSection.removeClass('section_schedule_fullpage_open');
}
}
},
initHomePage: function () {
$('.js-product-wrapper').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
variableWidth: true,
responsive: [
{
breakpoint: 1024,
settings: {
arrows: false,
slidesToShow: 2,
slidesToScroll: 2,
dots: false,
infinite: false
}
},
{
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
infinite: false
}
}
]
});
Apus.ui.$product.on('mousedown', function () {
var tw = TweenMax.to(this, .15, {
scale: '.9', onComplete: function () {
this.reverse()
}
});
});
},
initNews: function () {
$('.js-gallery').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
$('.share__icon').on('click', function(){
$(this).closest('.share').toggleClass('share_active');
});
},
initStudy: function() {
$('#logo-loader').show();
var $loader = new Vivus('logo-loader', {
duration: 150
}, function() {
TweenMax.to('.logo-loader .st0', .3, {fill: '#00DCEC', stroke: 'none'});
TweenMax.to('.logo-loader .st1', .3, {fill: '#190178', stroke: 'none'});
TweenMax.to('.logo-loader .st2', .3, {fill: '#25FFCF', stroke: 'none'});
TweenMax.to('.logo-loader', .6, {opacity: 0, y: '-35', delay: .5, onComplete: function(){
Apus.loadTemplate({
page: '../templates/components/products.html',
selector: '.product-wrapper-inline'
}, function(){
TweenMax.staggerFrom('.product', .4, {opacity: 0, y: 15, delay: 0.3}, 0.2);
console.log('loaded')
});
}});
});
Apus.componentFilter();
},
// Компоненты
setWindowDimensions: function () {
Apus.meta.wHeight = Apus.meta.$win.outerHeight(true);
Apus.meta.wWidth = Apus.meta.$win.outerWidth(true);
},
loadTemplate: function(data, callback) {
$.ajax({
url: data.page,
success: function(html) {
$(data.selector).html(html);
if(callback)callback();
}
});
},
componentFilter: function() {
Apus.ui.$filterIcon.on('click', function () {
$(this).closest('.filter').toggleClass('filter_close');
});
Apus.ui.$filterItem.on('click', function (e) {
var $this = $(this);
if (!$this.hasClass('filter__item_active')) {
Apus.ui.$filterItem.removeClass('filter__item_active');
}
$this.toggleClass('filter__item_active');
Apus.refreshFilteredItems();
if ($('.filter__item_active').length) {
Apus.getFilteredItems($this.attr('data-filter'));
}
});
},
refreshFilteredItems: function () {
TweenMax.to(('.product_hidden'), .2, {opacity: 1, y: 0, display: 'inline-block'})
},
getFilteredItems: function (attr) {
$('.product').each(function() {
if ($(this).attr('data-filter') == attr) {
console.log($(this))
} else {
$(this).addClass('product_hidden');
TweenMax.to($(this),.2, {opacity: 0, y: 20, display: 'none'})
}
});
},
componentSchedule: function () {
Apus.ui.$schedule.on('click, scroll', function () {
Apus.ui.$scheduleInfo.remove();
});
// Клик по элементам календаря
Apus.ui.$scheduleItem.on('click', function () {
if (Apus.ui.$scheduleInfo.length > 0) {
Apus.ui.$scheduleInfo.remove();
}
var _left = $(this).offset().left + 144,
_top = $(this).offset().top - 254,
$image = $(this).find('img')[0].src.split('img/')[1],
$product = '<div class="product product_schedule" style="left:' + _left + 'px; top:' + _top + 'px;"><div class="product__img"><img src="img/' + $image + '"></div><div class="product__content"><a href="#" class="product__title">Обучение продуктам Autodesc</a><div class="product__description"><div class="product__description-item"><span>P</span><span>50 000</span></div><div class="product__description-item"><span>D</span><span>10.15</span></div><div class="product__description-item"><span>L</span><span>2</span></div></div></div></div>';
Apus.ui.$body.append($product);
});
}
};
//window
window._META = Apus.meta;
$(function () {
Apus.init();
});
})(jQuery, window, document);