var $fotoramaDiv;
var fotorama;
var $fotoramaDivInsta;
var fotoramaInsta;
var myMap;
var fotoramainscreen;
var stickyNavTop;
var stickyNav;
var galleries;
var galleriesPath;
var controller;
// var imapgePathInstructors;
$('body').imagesLoaded().progress( function() {
$('body').removeClass('loading');
});
$(document).ready(function(){
if (localStorage.getItem ('acceptcooks') == null) $(".policy-info").css({ 'display': 'block' } );
$(".policy-info_cross, .policy-info_but").on("click",function(event){
event.preventDefault();
localStorage.setItem ('acceptcooks', 1);
$(".policy-info").css({ 'display': 'none' } );
});
moment().locale('ru');
updateWorkHours();
var $fotoramainscreenDiv = $('.fotoramainscreen').fotorama({
ratio: calcMainRatio(),
});
fotoramainscreen = $fotoramainscreenDiv.data('fotorama');
dateSelected = moment().format('YYYY-MM-DD');
getWeekFromDate();
// updateCalendarRaspisanie(true);
updateCalendarRaspisanieAndPersonal(true);
// imagesLoaded(document.body, () => document.body.classList.remove('loading'));
// document.body.classList.remove('noscroll');
$('body, html').removeClass('noscroll');
//console.log('ready');
// instagramInit();
initTextFields();
var htmlMenuMobile = '';
$('#hideMenuMobile .menuformaShapeWOW li').each(function(){
htmlMenuMobile += '';
});
$('#leftMenuMobile').html(htmlMenuMobile);
// console.log('openFirstLoadedContent = '+openFirstLoadedContent);
if(openFirstLoadedContent == 'content_'){
openFirstLoadedContent = 'content_main';
}
$('#leftMenuMobileFilterBtn').addClass('hiddenmenu');
selectormenu(openFirstLoadedContent,false);
$('.mainMenu .menuformaShapeWOW li a[data-content="'+openFirstLoadedContent+'"]').addClass('yh_mouseClicked');
$('.mainMenu .menuformaShapeWOW li a.menuAbout').click(function(event) {
event.preventDefault();
event.stopPropagation();
// console.log(' '+$(this).data("title"));
if(!$(this).hasClass('yh_mouseClicked')){
selectormenu($(this).data("content"),false);
pushStateDocument($(this).data("content"), $(this).data("title"), $(this).attr('href'));
controller.close();
}
return false;
});
window.onpopstate = function(event) {
var openID;
if(event.state == null){
// console.log("event.state == null");
openID = openFirstLoadedContent;
} else {
openID = event.state.contentid;
// console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
}
// var elem = $('.mainMenu .menuformaShapeWOW li a[data-content="'+openFirstLoadedContent+'"]');
selectormenu(openID,false);
// pushStateDocument(elem.data("content"), elem.data("tilte"), elem.attr('href'));`
// var datatitle = elem.data("title");
// if(datatitle){
// document.title = datatitle.replace( /([\s\S]+)/, '' ).replace(/<\/title>([\s\S]+)/, '' );
// }
};
});
$(window).on('resize', function(){
resizeFotorama();
});
function calcMainRatio(){
var width = $(window).width();
if(width < 560){
return 1;
} else if(width < 768){
return (3/2);
} else {
return (2/1);
}
return 1;
}
stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
//console.log('addClass scrollTop = '+scrollTop + ' stickyNavTop = '+stickyNavTop);
$('.timeLineHeader').addClass('sticky');
$('.dummy-menu-handler').addClass('hiddenByScroll');
} else {
//console.log('removeClass scrollTop = '+scrollTop + ' stickyNavTop = '+stickyNavTop);
$('.timeLineHeader').removeClass('sticky');
$('.dummy-menu-handler').removeClass('hiddenByScroll');
}
}
function pushStateDocument(contentValue, datatitle,url) {
if(datatitle){
document.title = datatitle.replace( /([\s\S]+)<title>/, '' ).replace(/<\/title>([\s\S]+)/, '' );
}
if(url != window.location.href){
// console.log('datatitle = '+datatitle);
window.history.pushState({"contentid": contentValue}, null, url);//datatitle
}
}
function initTextFields(){
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
}
function stickyTimeLineHeader(){
stickyNavTop = $('.timeLineHeader').offset().top;
stickyNav();
$(window).scroll(function() {
stickyNav();
});
}
function wowLeftApear(ids, initialDelay){
//console.log('wowLeftApear');
// document.querySelector('#personalCategory');
var elements = document.querySelector(ids).querySelectorAll('.wowApearHandle');
for (var i = 0; i < elements.length; i++) {
elements[i].style.opacity = 0;
}
anime({
targets: elements,//[this.DOMMY.bgDown,this.DOMMY.img, this.DOMMY.eventdEGRline]
duration: 300,
easing: 'easeOutSine',
delay: (target, index) => {
return index*100 + initialDelay;
},
translateX: ['-100%', 0],
opacity:1,
complete: () => {
// this.isAnimating = false;
// this.DOMMY.eventdetails.classList.add('animateW');
}
});
}
function resizeFotorama(){
if(fotoramainscreen === undefined){
} else {
fotoramainscreen.resize({
ratio: calcMainRatio()
});
}
if(fotorama === undefined || fotorama == ''){
} else {
fotorama.resize({
height: (getHeight() -70 - 68)
});
}
if(fotoramaInsta === undefined || fotoramaInsta == ''){
} else {
fotoramaInsta.resize({
height: (getHeight() -70 - 68)
});
}
}
function selectormenu(what,returnback){
// console.log('selectormenu("'+what+'",'+returnback+');');
$('.mainMenu .menuformaShapeWOW li a').removeClass('yh_mouseClicked');
$('.mainMenu .menuformaShapeWOW li a[data-content="'+what+'"]').addClass('yh_mouseClicked');
$('body').addClass('mobileFriendly');
//console.log('selectormenu '+what);
$('#content_main, #content_personal, #content_photogallery,#content_raspisanie, #content_insta, #content_contacts, #content_spa, #content_404_page, #content_feedback').hide();
if(what == 'content_photogallery'){
// console.log('AnimOnScroll content_photogallery');
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
});
} else if(what == 'content_feedback'){
// $('#content_feedback').show();
// new AnimOnScroll( document.getElementById( 'grid_feedback' ), {
// minDuration : 0.4,
// maxDuration : 0.7,
// viewportFactor : 0.2
// });
} else if(what == 'content_insta'){
// console.log('AnimOnScroll content_insta')
new AnimOnScroll( document.getElementById( 'grid_insta' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
});
} else if(what == 'content_main') {
$('body').removeClass('mobileFriendly');
// fotoramainscreen.destroy();
} else if(what == 'content_contacts') {
$('#map').html('');
}
$('#'+what).show();
if(returnback){
if($('.returnback').length >= 1){
$('.returnback').removeClass('returnback');
} else {
$('#'+what).addClass('returnback');
}
} else {
$('.returnback').removeClass('returnback');
}
$(window).unbind('scroll');
$('.dummy-menu-handler').removeClass('hiddenByScroll');
if(what == 'content_contacts') {
$('#leftMenuMobileFilterBtn').addClass('hiddenmenu');
initMap();
} else if(what == 'content_main') {
$('#leftMenuMobileFilterBtn').addClass('hiddenmenu');
var $fotoramainscreenDiv = $('.fotoramainscreen').fotorama();
fotoramainscreen = $fotoramainscreenDiv.data('fotorama');
} else if(what == 'content_raspisanie') {
$('#leftMenuMobileFilterBtn').removeClass('hiddenmenu');
$('#leftMenuMobileFilter').html($('#calendarFilter').html());
stickyTimeLineHeader();
wowLeftApear('#calendarFilter',0);
} else if(what == 'content_personal') {
// console.log('content_personal');
$('#leftMenuMobileFilterBtn').removeClass('hiddenmenu');
$('#leftMenuMobileFilter').html($('#personalCategory').html());
wowLeftApear('#personalCategory',0);
} else {
$('#leftMenuMobileFilterBtn').addClass('hiddenmenu');
}
return false;
}
function wrapInHTMLPersonalEventsDayly(idtrener){
var trenerEvents = {};
$.each(raspisanie, function(index,event){
if(event.trenerid == idtrener){
//console.log('event.id = '+event);
if(trenerEvents[event.title] === undefined){
trenerEvents[event.title] = {};
}
if(trenerEvents[event.title]['count'] === undefined){
trenerEvents[event.title]['count'] = 0;
trenerEvents[event.title]['name'] = event.title;
trenerEvents[event.title]['id'] = index;
// trenerEvents[event.title]['egrBeafore'] = event.title;
if(event.ageTo <= 15 && event.ageTo > 0){//Детские
if(event.whereid == 5){//БАССЕЙН
trenerEvents[event.title]['egrBeafore'] = 'poolEGRbeforefill';
} else {
trenerEvents[event.title]['egrBeafore'] = 'childEGRbeforefill';
}
} else if(event.whereid == 5){//БАССЕЙН
trenerEvents[event.title]['egrBeafore'] = 'poolEGRbeforefill';
} else {
trenerEvents[event.title]['egrBeafore'] = 'adaultEGRbeforefill';
}
}
trenerEvents[event.title]['count'] += 1;
}
});
var temp = [];
$.each(trenerEvents, function(key, value) {
temp.push({v:value, k: key});
});
temp.sort(function(a, b){return b.v.count - a.v.count});
var newArray = [];
$.each(temp, function(key, value) {
//console.log(value.v);
newArray.push(value.v);
});
return wrapPersonalEventsDayly(newArray);
}
// function wrapInHTMLEventsWeekly(title){
// var eventsWeekly = {};
// $.each(raspisanie, function(index,event){
// if(event.title == title){
// // dateStart
// // numberOfWeek
// //console.log('event.id = '+event);
// if(trenerEvents[event.title] === undefined){
// trenerEvents[event.title] = {};
// }
// if(trenerEvents[event.title]['count'] === undefined){
// trenerEvents[event.title]['count'] = 0;
// trenerEvents[event.title]['name'] = event.title;
// // trenerEvents[event.title]['egrBeafore'] = event.title;
// if(event.ageTo <= 15 && event.ageTo > 0){//Детские
// if(event.whereid == 5){//БАССЕЙН
// trenerEvents[event.title]['egrBeafore'] = 'poolEGRbeforefill';
// } else {
// trenerEvents[event.title]['egrBeafore'] = 'childEGRbeforefill';
// }
// } else if(event.whereid == 5){//БАССЕЙН
// trenerEvents[event.title]['egrBeafore'] = 'poolEGRbeforefill';
// } else {
// trenerEvents[event.title]['egrBeafore'] = 'adaultEGRbeforefill';
// }
// }
// trenerEvents[event.title]['count'] += 1;
// }
// });
// var temp = [];
// $.each(trenerEvents, function(key, value) {
// temp.push({v:value, k: key});
// });
// temp.sort(function(a, b){return b.v.count - a.v.count});
// var newArray = [];
// $.each(temp, function(key, value) {
// //console.log(value.v);
// newArray.push(value.v);
// });
// return wrapEventsWeekly(newArray);
// }
function wrap_content_personal(){
//console.log('wrap_content_personal');
var htmlPersonals = '';
var htmlCategory = '';
var category = [];
// var lastCategory = '';
$.each(personals, function(index, personal){
htmlPersonals += '<div class="grid__item" data-category="'+personal.category+'">\
<div class="product" data-id="'+personal.id+'">\
<div class="product__bg"></div>\
<img class="product__img" src="'+personal.img+'" alt="'+personal.fullname+'"/>\
<h2 class="product__title">'+personal.fullname+'</h2>\
<h3 class="product__subtitle">'+returnSubTitleTrener(personal.info)+'</h3>\
<p class="product__description">'+returnDescriptionWithoutSubTitleTrener(personal.info)+'</p>\
</div>\
</div>';
category.push(personal.category);
});
// //console.log('wrap_content_personal'+ html);
$('#grid_personal').html(htmlPersonals);
var uniqueCategory = category.filter(onlyUnique);
$.each(uniqueCategory, function(index,category){
htmlCategory += wrap_content_personalHtml(category);
});
htmlCategory += wrap_content_personalHtml('Показать всех');
$('#personalCategory').html(htmlCategory);
personalInit();
personalCategoryBtn();
}
// function calendarFilterBtn(){
// $('.calendarFilterBtn').click(function() {
// $('.calendarFilterBtn').removeClass('active');
// //console.log(' '+$(this).data("calendar"));
// $(this).addClass('active');
// $('#grid_personal .grid__item').hide();
// $('#grid_personal .grid__item[data-category="'+$(this).data("calendar")+'"]').show();
// });
// return false;
// }
function wrap_content_personalHtml(category){
return '<div class="menuformaShapeWOWFilterHandle wowApearHandle"><ul class="menuformaShapeWOW lightShape"><li><a href="javascript:void(0);" class="personalCategoryBtn" data-category="'+category+'"><svg>\
<rect x="1" y="1" width="calc(100% - 2px)" height="calc(100% - 2px)" rx="4" ry="4"></rect>\
</svg><span>'+category+'</span></a></li></ul></div>';
}
function personalCategoryBtn(){
$('.personalCategoryBtn[data-category="Показать всех"]').addClass('active');
$(document).on("click",".personalCategoryBtn", function(){
$('.personalCategoryBtn').removeClass('active');
//console.log(' '+$(this).data("category"));
$(this).addClass('active');
if($(this).data("category") == 'Показать всех'){
// $('#leftMenuMobileFilterBtn').removeClass('colored');
$('#grid_personal .grid__item').removeClass('grid__item_hide');
} else {
$('#grid_personal .grid__item').addClass('grid__item_hide');
$('#grid_personal .grid__item[data-category="'+$(this).data("category")+'"]').removeClass('grid__item_hide');
}
});
return false;
}
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
function returnSubTitleTrener(str){
if(str.indexOf('. ')>0){
return str.substr(0, str.indexOf('. '));
}
return str;
}
function returnDescriptionWithoutSubTitleTrener(str){
if(str.indexOf('. ')>0){
return str.replace(str.substr(0, (str.indexOf('. ')+2)),'');
}
return str;
}
function defineTrenerDescription(trenerId){
// //console.log('defineTrenerDescription = '+trenerId);
var defineTrenerDescription = {};
defineTrenerDescription.fullname = "Тренер";
defineTrenerDescription.info = "Описание тренера отсутствует";
if(personals[0].no == 'no' || personals === undefined){
} else {
$.each(personals, function(index, personal){
if(personal.id == trenerId){
defineTrenerDescription.fullname = personal.fullname;
defineTrenerDescription.info = personal.info;
return false;
}
});
}
return defineTrenerDescription;
}
function returnWowBtn(spantext,title,subtitle,button, buttonClass, yatarget, gatarget){
var add_style = '';
if (spantext === "") add_style="style='display:none;'";
return `<div `+add_style+ ` class="buttonHolder `+buttonClass+`">
<div class="menuformaShapeWOWhandle">
<ul class="menuformaShapeWOW inline formButton">
<li>
<a href="javascript:void(0);" class="md-trigger" data-modal="modal-12" data-title="`+title+`" data-subtitle="`+subtitle+`" data-button="`+button+`" data-yatarget="`+yatarget+`" data-gatarget="`+gatarget+`">
<svg>
<rect x="1" y="1" width="calc(100% - 2px)" height="calc(100% - 2px)" rx="4" ry="4"></rect>
</svg>
<span>`+spantext+`</span>
</a>
</li>
</ul>
</div>
</div>`;
}
function wrapHTMLInstagram(){
var html = '';
$('#content_insta ul li a').each(function(index, elem){
html += wrapInstagram($(this).children('img').attr('src'),$(this).children('.textinsta').html(), $(this).attr('data-thumb'));
});
return html;
}
function wrapInstagram(src,textinsta, thumb){
return '<div class="imagesInstagramHolder" data-thumb="'+thumb+'">\
<div class="row">\
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 imagesInstagramHolderimg">\
<img src="'+src+'" />\
</div>\
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 imagesInstagramHoldertext">\
<div class="textinsta_full">\
<span>'+textinsta+'</span>\
</div>\
</div>\
</div>\
</div>';
}
// function replaceJPGtoPNG(path){
// return path.replace('.jpg', '.png');//.replace('../app.fitness-forma.ru/images/instructors/default.htm', 'images/personal/default.htm')
// }
function wrapHTMLPhotoGallery(){
var html = '';
$('#content_photogallery ul li a').each(function(index, elem){
html += wrapPhotoGallery($(this).children('img').attr('src'),$(this).attr('data-caption'));
});
return html;
}
function wrapPhotoGallery(path,caption){
return '<a href="'+path+'" data-caption="'+caption+'"><img width="144" height="96" src="'+replaceImagePathToMin(path)+'" /></a>';
}
function replaceImagePathToMin(path){
// return path.replace('.jpg', 'min.jpg');
return path;
}
// function returnBackToPersonal(){
// if(!$('.menuEvents[data-content="content_raspisanie"]').hasClass('yh_mouseClicked')){
// selectormenu('#content_personal',false);
// }
// }
function triggerForEvents(id){
//console.log('triggerForEvents = '+id);
if($('.returnback').length >= 1){
$('.details.details--open .eventdetails__close').trigger("click");//this.close(true);
}
selectormenu('content_raspisanie',true);
$('#event'+id).trigger("click");
}
function wrap_content_galleries(){
// console.log('wrap_content_galleries');
var html = '';
$.each(galleries, function(index, photo){
html += `<li>
<a href="#" onclick="return false;" data-caption="`+photo.title+`" data-category="`+photo.category+`">
<img src="`+galleriesPath+photo.fileimg+`" alt="`+photo.title+`">
</a>
</li>`;
});
$('#grid').html(html);
photogalleryInit();
}
function wrapPersonalEventsDayly(events){
// trenerEvents = newArray;
var html = '';
$.each(events, function(index, event){
html += `<div class="menuformaShapeWOWhandle">
<ul class="menuformaShapeWOW inline lightShape `+event.egrBeafore+`">
<li>
<a href="javascript:void(0);" onclick="triggerForEvents(`+event.id+`)">
<svg>
<rect x="1" y="1" width="calc(100% - 2px)" height="calc(100% - 2px)" rx="4" ry="4"></rect>
</svg>
<span>`+event.name+`</span>
</a>
</li>
</ul>
</div>`;
if(index >5) {
return false;
}
});
return html;
}
// function wrapEventsWeekly(){
// `<div class="eventWeekHolder">
// <div class="eventWHDay"><div>10:00</div><div></div><div></div></div>
// <div class="eventWHDay"><div></div><div></div><div></div></div>
// <div class="eventWHDay"><div></div><div></div><div></div></div>
// <div class="eventWHDay"><div></div><div>12:00</div><div></div></div>
// <div class="eventWHDay"><div></div><div></div><div>17:00</div></div>
// <div class="eventWHDay"><div></div><div>12:00</div><div></div></div>
// <div class="eventWHDay"><div>10:20</div><div></div><div></div></div>
// </div>`;
// }
function updateCalendarRaspisanieAndPersonal(wrap){
$.ajax({
timeout: 5000,
type: "GET",
url: '/php/update.php?action=trenerEventsAndGalleries&filter=all&'+
'date1='+encodeURIComponent(jsDate1),
beforeSend: function(){
},
complete: function(){
},
success: function(data){
var dataJson = $.parseJSON(data);
raspisanie = dataJson.raspisanie;
timeLineHeightFlag = false;
timeLineHeightArray = [];
if(raspisanie[0].no == 'no'){
noRaspisanie = true;
} else {
noRaspisanie = false;
}
if(wrap){
updateevents(wrap);
}
personals = dataJson.trener;
// imapgePathInstructors = dataJson.imapgePathInstructors;
galleries = dataJson.galleries;
galleriesPath = dataJson.galleriesPath;
if(galleries.length > 0){
wrap_content_galleries();
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
});
}
timeLineHeightFlag = false;
timeLineHeightArray = [];
if(personals[0].no == 'no'){
personals = undefined;
} else if(personals === undefined) {
} else {
if(wrap){
wrap_content_personal();
}
}
ModalEffects();
},
error: function (data) {
},
global: false
});
}
// function updatePersonaljson(wrap){
// $.ajax({
// timeout: 35000,
// type: "GET",
// url: '/php/update.php?action=trenerM&filter=all',
// beforeSend: function(){
// },
// complete: function(){
// },
// success: function(data){
// personals = $.parseJSON(data);
// personals = personals.trener;
// timeLineHeightFlag = false;
// timeLineHeightArray = [];
// if(personals[0].no == 'no'){
// personals = undefined;
// } else if(personals === undefined) {
// } else {
// if(wrap){
// wrap_content_personal();
// }
// }
// },
// error: function (data) {
// },
// global: false
// });
// }
function updateCalendarRaspisanie(updateeventsBool){
$.ajax({
timeout: 35000,
type: "GET",
url: '/php/update.php?action=getweekM&'+
'date1='+encodeURIComponent(jsDate1),
beforeSend: function(){
},
complete: function(){
},
success: function(data){
raspisanie = $.parseJSON(data);
raspisanie = raspisanie.raspisanie;
timeLineHeightFlag = false;
timeLineHeightArray = [];
if(raspisanie[0].no == 'no'){
noRaspisanie = true;
} else {
noRaspisanie = false;
}
if(updateeventsBool){
updateevents(updateeventsBool);
}
},
error: function (data) {
},
global: false
});
}
function instagramInit(){
class FullScreenPhotoInsta {
constructor() {
this.DOMGSInsta = {};
const detailsTmpl = `
<div class="details__bg details__bg--up"></div>
<div class="details__bg details__bg--down"></div>
<div class="zoomed__img_div row">
<div class="zoomed__img_divWide col-lg-6 col-md-6 col-sm-6 col-xs-12">
<span class="zoomed__img_div_helper"></span>
<img class="zoomed__img" src="" alt="img 01">
</div>
</div>
<div class="fotoramaInstaDiv">
<div id="grid_insta2" data-width="100%" data-height="`+(getHeight() -70 - 68)+`px" data-fit="contain" data-nav="thumbs">
</div>
</div>
<div class="button-close-handler">
<button class="details__close"><svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg></button>
</div>
`;//<div class="details__price"></div>
this.DOMGSInsta.details = document.createElement('div');
this.DOMGSInsta.details.className = 'details';
this.DOMGSInsta.details.innerHTML = detailsTmpl;
DOMGSInsta.content.appendChild(this.DOMGSInsta.details);
this.init();
}
init() {
this.DOMGSInsta.bgUp = this.DOMGSInsta.details.querySelector('.details__bg--up');
this.DOMGSInsta.bgDown = this.DOMGSInsta.details.querySelector('.details__bg--down');
this.DOMGSInsta.imgDiv = this.DOMGSInsta.details.querySelector('.zoomed__img_div');
this.DOMGSInsta.img = this.DOMGSInsta.imgDiv.querySelector('.zoomed__img');
this.DOMGSInsta.grid_insta2 = this.DOMGSInsta.details.querySelector('#grid_insta2');
this.DOMGSInsta.buttonCloseHandler = this.DOMGSInsta.details.querySelector('.button-close-handler');
// this.DOMGS.fotoramaDiv = this.DOMGS.details.querySelector('.fotoramaDiv');
// this.DOMGS.title = this.DOMGS.details.querySelector('.details__title');
// this.DOMGS.subtitle = this.DOMGS.details.querySelector('.details__subtitle');
// // this.DOMGS.price = this.DOMGS.details.querySelector('.details__price');
// this.DOMGS.description = this.DOMGS.details.querySelector('.details__description');
// this.DOMGS.cart = this.DOMGS.details.querySelector('.details__addtocart');
this.DOMGSInsta.close = this.DOMGSInsta.details.querySelector('.details__close');
// this.DOMGS.dialogform = this.DOMGS.details.querySelector('.dialogform');
this.initEvents();
}
initEvents() {
this.DOMGSInsta.close.addEventListener('click', () => this.close());
}
fill(info) {
// let $fotoramaDivInsta = $('.fotoramaDiv').fotorama();
// //console.log($fotoramaDivInsta);
// //console.log($fotoramaDivInsta.data('fotorama'));
// // 2. Get the API object.
// let fotorama = $fotoramaDivInsta.data('fotorama');
// // 3. Inspect it in console.
// //console.log(fotorama);
// // });
// fotorama.show({
// index: 0, // The second frame.
// time: 0 // Half-second transition.
// });
this.DOMGSInsta.grid_insta2.innerHTML = wrapHTMLInstagram();
this.DOMGSInsta.img.src = info.img;
// let imageSize = imageSizeWrapInsta(this.DOMGSInsta.img);
// this.DOMGSInsta.img.style.width = imageSize.width;//maxWidth
// this.DOMGSInsta.img.style.height = imageSize.height;//maxHeight
//.style.backgroundImage = 'url('+info.img+')';
// this.DOMGS.title.innerHTML = info.title;
// this.DOMGS.subtitle.innerHTML = info.subtitle;
// this.DOMGS.price.innerHTML = info.price;
// this.DOMGS.description.innerHTML = info.description;
}
getFullScreenPhotoRect() {
return {
// productBgRect: this.DOMGS.productBg.getBoundingClientRect(),
// detailsBgRect: this.DOMGS.bgDown.getBoundingClientRect(),
photoImgRect: this.DOMGSInsta.photoImg.getBoundingClientRect(),
detailsImgRect: this.DOMGSInsta.img.getBoundingClientRect()
};
}
open(data) {
//console.log('open');
if ( this.isAnimating ) return false;
this.isAnimating = true;
this.DOMGSInsta.details.classList.add('details--open');
// document.body.classList.add('noscroll');
// this.DOMGS.productBg = data.productBg;
this.DOMGSInsta.photoImg = data.photoImg;
// this.DOMGS.productBg.style.opacity = 0;
this.DOMGSInsta.buttonCloseHandler.style.opacity = 1;
this.DOMGSInsta.photoImg.style.opacity = 0;
const rect = this.getFullScreenPhotoRect();
// this.DOMGS.bgDown.style.transform = `translateX(${rect.productBgRect.left-rect.detailsBgRect.left}px) translateY(${rect.productBgRect.top-rect.detailsBgRect.top}px) scaleX(${rect.productBgRect.width/rect.detailsBgRect.width}) scaleY(${rect.productBgRect.height/rect.detailsBgRect.height})`;
// this.DOMGS.bgDown.style.opacity = 1;
this.DOMGSInsta.img.style.transform = `translateX(${rect.photoImgRect.left-rect.detailsImgRect.left}px) translateY(${rect.photoImgRect.top-rect.detailsImgRect.top}px) scaleX(${rect.photoImgRect.width/rect.detailsImgRect.width}) scaleY(${rect.photoImgRect.height/rect.detailsImgRect.height})`;
this.DOMGSInsta.img.style.opacity = 1;
this.DOMGSInsta.imgDiv.style.opacity = 1;
this.DOMGSInsta.imgDiv.querySelector('.zoomed__img_divWide').style.opacity = 1;
// this.DOMGS.imgplace.style.opacity = 1;
anime({
targets: this.DOMGSInsta.img,
duration: 400,
easing: 'easeOutSine',
elasticity: 250,
translateX: 0,
translateY: 0,
scaleX: 1,
scaleY: 1,
complete: () => {
this.isAnimating = false;
$('.content_insta').addClass('content_insta--open');
$('body, html').addClass('noscroll');
$fotoramaDivInsta = $('#grid_insta2').fotorama();
fotoramaInsta = $fotoramaDivInsta.data('fotorama');
resizeFotorama();
// 3. Inspect it in console.
//console.log(fotorama);
// });
//console.log('data.index = '+data.index);
fotoramaInsta.show({
index: data.index, // The second frame.
time: 0 // Half-second transition.
});
anime({
targets: this.DOMGSInsta.img,
duration: 500,
easing: 'linear',
opacity: 0
});
// this.DOMGS.img.style.opacity = 0;
anime({
targets: this.DOMGSInsta.bgDown,
duration: 400,
delay: 0,
easing: 'linear',
opacity: 1
});
}
});
// anime({
// targets: [this.DOMGS.title, this.DOMGS.subtitle, this.DOMGS.description, this.DOMGS.cart],// this.DOMGS.price, this.DOMGS.deco, this.DOMGS.magnifier],
// duration: 600,
// easing: 'easeOutExpo',
// delay: (target, index) => {
// return index*60;
// },
// translateY: (target, index, total) => {
// return index !== total - 1 ? [50,0] : 0;
// },
// scale: (target, index, total) => {
// return index === total - 1 ? [0,1] : 1;
// },
// opacity: 1
// });
anime({
targets: this.DOMGSInsta.bgUp,
duration: 100,
easing: 'linear',
opacity: 1
});
anime({
targets: this.DOMGSInsta.close,
duration: 250,
easing: 'easeOutSine',
translateY: ['100%',0],
opacity: 1
});
anime({
targets: DOMGSInsta.hamburger,
duration: 250,
easing: 'easeOutSine',
translateY: [0,'-100%']
});
}
close() {
fotoramaInsta.destroy();
fotoramaInsta = '';
//console.log('close');
if ( this.isAnimating ) return false;
this.isAnimating = true;
this.DOMGSInsta.img.style.opacity = 1;
this.DOMGSInsta.details.classList.remove('details--open');
// this.DOMGS.details.classList.remove('content_photogallery--open');
$('.content_insta').removeClass('content_insta--open');
anime({
targets: DOMGSInsta.hamburger,
duration: 250,
easing: 'easeOutSine',
translateY: 0
});
anime({
targets: this.DOMGSInsta.close,
duration: 250,
easing: 'easeOutSine',
translateY: '100%',
opacity: 0
});
anime({
targets: [this.DOMGSInsta.bgUp, this.DOMGSInsta.bgDown],
duration: 100,
easing: 'linear',
opacity: 0
});
// anime({
// targets: [this.DOMGS.title, this.DOMGS.subtitle, this.DOMGS.description, this.DOMGS.cart],// this.DOMGS.price, this.DOMGS.deco, this.DOMGS.magnifier],
// duration: 20,
// easing: 'linear',
// opacity: 0
// });
const rect = this.getFullScreenPhotoRect();
anime({
targets: this.DOMGSInsta.img,
duration: 250,
easing: 'easeOutSine',
translateX: rect.photoImgRect.left-rect.detailsImgRect.left,
translateY: rect.photoImgRect.top-rect.detailsImgRect.top,
scaleX: rect.photoImgRect.width/rect.detailsImgRect.width,
scaleY: rect.photoImgRect.height/rect.detailsImgRect.height,
complete: () => {
// this.DOMGS.bgDown.style.opacity = 0;
this.DOMGSInsta.img.style.opacity = 0;
this.DOMGSInsta.imgDiv.style.opacity = 0;
this.DOMGSInsta.buttonCloseHandler.style.opacity = 0;
// this.DOMGS.bgDown.style.transform = 'none';
this.DOMGSInsta.img.style.transform = 'none';
// this.DOMGS.productBg.style.opacity = 1;
this.DOMGSInsta.photoImg.style.opacity = 1;
this.isAnimating = false;
// document.body.classList.remove('noscroll');
$('body, html').removeClass('noscroll');
this.DOMGSInsta.img.src = "";
}
});
}
};
class ItemPhotoInsta {
constructor(el,index) {
this.DOMGSInsta = {};
this.DOMGSInsta.el = el;
this.DOMGSInsta.elementClick = this.DOMGSInsta.el.querySelector('a');
this.DOMGSInsta.photoImg = this.DOMGSInsta.elementClick.querySelector('img');
// this.DOMGS.productBg = this.DOMGS.product.querySelector('.product__bg');
// this.DOMGS.photoImg = this.DOMGS.product.querySelector('.product__img');
// //console.log('src = '+this.DOMGS.photoImg.src+' index = '+index);
this.info = {
img: this.DOMGSInsta.photoImg.src,
imgIndex: index
// title: this.DOMGS.product.querySelector('.product__title').innerHTML,
// subtitle: this.DOMGS.product.querySelector('.product__subtitle').innerHTML,
// description: this.DOMGS.product.querySelector('.product__description').innerHTML//, price: this.DOMGS.product.querySelector('.product__price').innerHTML
};
this.initEvents(index);
}
initEvents(index) {
this.DOMGSInsta.elementClick.addEventListener('click', () => this.open(index));
}
open(index) {
DOMGSInsta.details.fill(this.info);
DOMGSInsta.details.open({
productBg: this.DOMGSInsta.productBg,
photoImg: this.DOMGSInsta.photoImg,
index: index
});
}
};
const DOMGSInsta = {};
DOMGSInsta.grid = document.querySelector('#grid_insta');
DOMGSInsta.content = DOMGSInsta.grid.parentNode;
DOMGSInsta.gridItemPhotos = Array.from(DOMGSInsta.grid.querySelectorAll('li'));
DOMGSInsta.hamburger = document.querySelector('.dummy-menu');
var items = [];
// DOMGS.gridItemPhotos.forEach(item => items.push(new ItemPhoto(item)));
DOMGSInsta.gridItemPhotos.forEach(function(item, index) {
items.push(new ItemPhotoInsta(item,index));
// //console.log(arrr_item.value);
});
// //console.log('DOMGS = items = '+items[0][0]);
DOMGSInsta.details = new FullScreenPhotoInsta();
// imagesLoaded(document.body, () => document.body.classList.remove('loading'));
// document.body.classList.remove('noscroll');
};
function photogalleryInit(){
// console.log('photogalleryInit');
class FullScreenPhoto {
constructor() {
this.DOMGS = {};
const detailsTmpl = `
<div class="details__bg details__bg--up"></div>
<div class="details__bg details__bg--down"></div>
<div class="zoomed__img_div">
<span class="zoomed__img_div_helper"></span>
<img class="zoomed__img" src="" alt="img 01">
</div>
<div class="fotoramaDiv">
<div id="grid2" data-width="100%" data-height="`+(getHeight() -70 - 68)+`px" data-fit="contain" data-nav="thumbs">
</div>
</div>
<div class="button-close-handler">
<button class="details__close"><svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg></button>
</div>
`;//<div class="details__price"></div>
this.DOMGS.details = document.createElement('div');
this.DOMGS.details.className = 'details';
this.DOMGS.details.innerHTML = detailsTmpl;
DOMGS.content.appendChild(this.DOMGS.details);
this.init();
}
init() {
this.DOMGS.bgUp = this.DOMGS.details.querySelector('.details__bg--up');
this.DOMGS.bgDown = this.DOMGS.details.querySelector('.details__bg--down');
this.DOMGS.imgDiv = this.DOMGS.details.querySelector('.zoomed__img_div');
this.DOMGS.img = this.DOMGS.imgDiv.querySelector('.zoomed__img');
this.DOMGS.grid2 = this.DOMGS.details.querySelector('#grid2');
this.DOMGS.buttonCloseHandler = this.DOMGS.details.querySelector('.button-close-handler');
// this.DOMGS.fotoramaDiv = this.DOMGS.details.querySelector('.fotoramaDiv');
// this.DOMGS.title = this.DOMGS.details.querySelector('.details__title');
// this.DOMGS.subtitle = this.DOMGS.details.querySelector('.details__subtitle');
// // this.DOMGS.price = this.DOMGS.details.querySelector('.details__price');
// this.DOMGS.description = this.DOMGS.details.querySelector('.details__description');
// this.DOMGS.cart = this.DOMGS.details.querySelector('.details__addtocart');
this.DOMGS.close = this.DOMGS.details.querySelector('.details__close');
// this.DOMGS.dialogform = this.DOMGS.details.querySelector('.dialogform');
this.initEvents();
}
initEvents() {
this.DOMGS.close.addEventListener('click', () => this.close());
}
fill(info) {
// let $fotoramaDiv = $('.fotoramaDiv').fotorama();
// //console.log($fotoramaDiv);
// //console.log($fotoramaDiv.data('fotorama'));
// // 2. Get the API object.
// let fotorama = $fotoramaDiv.data('fotorama');
// // 3. Inspect it in console.
// //console.log(fotorama);
// // });
// fotorama.show({
// index: 0, // The second frame.
// time: 0 // Half-second transition.
// });
this.DOMGS.img.src = info.img;
let imageSize = imageSizeWrap(this.DOMGS.img);
this.DOMGS.img.style.width = imageSize.width;
this.DOMGS.img.style.height = imageSize.height;
this.DOMGS.grid2.innerHTML = wrapHTMLPhotoGallery();
//.style.backgroundImage = 'url('+info.img+')';
// this.DOMGS.title.innerHTML = info.title;
// this.DOMGS.subtitle.innerHTML = info.subtitle;
// this.DOMGS.price.innerHTML = info.price;
// this.DOMGS.description.innerHTML = info.description;
}
getFullScreenPhotoRect() {
return {
// productBgRect: this.DOMGS.productBg.getBoundingClientRect(),
// detailsBgRect: this.DOMGS.bgDown.getBoundingClientRect(),
photoImgRect: this.DOMGS.photoImg.getBoundingClientRect(),
detailsImgRect: this.DOMGS.img.getBoundingClientRect()
};
}
open(data) {
//console.log('open');
if ( this.isAnimating ) return false;
this.isAnimating = true;
this.DOMGS.details.classList.add('details--open');
// document.body.classList.add('noscroll');
// this.DOMGS.productBg = data.productBg;
this.DOMGS.photoImg = data.photoImg;
// this.DOMGS.productBg.style.opacity = 0;
this.DOMGS.photoImg.style.opacity = 0;
this.DOMGS.buttonCloseHandler.style.opacity = 1;
const rect = this.getFullScreenPhotoRect();
// this.DOMGS.bgDown.style.transform = `translateX(${rect.productBgRect.left-rect.detailsBgRect.left}px) translateY(${rect.productBgRect.top-rect.detailsBgRect.top}px) scaleX(${rect.productBgRect.width/rect.detailsBgRect.width}) scaleY(${rect.productBgRect.height/rect.detailsBgRect.height})`;
// this.DOMGS.bgDown.style.opacity = 1;
this.DOMGS.img.style.transform = `translateX(${rect.photoImgRect.left-rect.detailsImgRect.left}px) translateY(${rect.photoImgRect.top-rect.detailsImgRect.top}px) scaleX(${rect.photoImgRect.width/rect.detailsImgRect.width}) scaleY(${rect.photoImgRect.height/rect.detailsImgRect.height})`;
this.DOMGS.img.style.opacity = 1;
this.DOMGS.imgDiv.style.opacity = 1;
// this.DOMGS.imgplace.style.opacity = 1;
anime({
targets: this.DOMGS.img,
duration: 400,
easing: 'easeOutSine',
elasticity: 250,
translateX: 0,
translateY: 0,
scaleX: 1,
scaleY: 1,
complete: () => {
this.isAnimating = false;
$('.content_photogallery').addClass('content_photogallery--open');
$('body, html').addClass('noscroll');
$fotoramaDiv = $('#grid2').fotorama();
fotorama = $fotoramaDiv.data('fotorama');
resizeFotorama();
fotorama.show({
index: data.index, // The second frame.
time: 0 // Half-second transition.
});
anime({
targets: this.DOMGS.img,
duration: 500,
easing: 'linear',
opacity: 0
});
// this.DOMGS.img.style.opacity = 0;
anime({
targets: this.DOMGS.bgDown,
duration: 400,
delay: 0,
easing: 'linear',
opacity: 1
});
}
});
// anime({
// targets: [this.DOMGS.title, this.DOMGS.subtitle, this.DOMGS.description, this.DOMGS.cart],// this.DOMGS.price, this.DOMGS.deco, this.DOMGS.magnifier],
// duration: 600,
// easing: 'easeOutExpo',
// delay: (target, index) => {
// return index*60;
// },
// translateY: (target, index, total) => {
// return index !== total - 1 ? [50,0] : 0;
// },
// scale: (target, index, total) => {
// return index === total - 1 ? [0,1] : 1;
// },
// opacity: 1
// });
anime({
targets: this.DOMGS.bgUp,
duration: 100,
easing: 'linear',
opacity: 1
});
anime({
targets: this.DOMGS.close,
duration: 250,
easing: 'easeOutSine',
translateY: ['100%',0],
opacity: 1
});
anime({
targets: DOMGS.hamburger,
duration: 250,
easing: 'easeOutSine',
translateY: [0,'-100%']
});
}
close() {
fotorama.destroy();
fotorama = '';
//console.log('close');
if ( this.isAnimating ) return false;
this.isAnimating = true;
this.DOMGS.img.style.opacity = 1;
this.DOMGS.details.classList.remove('details--open');
// this.DOMGS.details.classList.remove('content_photogallery--open');
$('.content_photogallery').removeClass('content_photogallery--open');
anime({
targets: DOMGS.hamburger,
duration: 250,
easing: 'easeOutSine',
translateY: 0
});
anime({
targets: this.DOMGS.close,
duration: 250,
easing: 'easeOutSine',
translateY: '100%',
opacity: 0
});
anime({
targets: [this.DOMGS.bgUp, this.DOMGS.bgDown],
duration: 100,
easing: 'linear',
opacity: 0
});
// anime({
// targets: [this.DOMGS.title, this.DOMGS.subtitle, this.DOMGS.description, this.DOMGS.cart],// this.DOMGS.price, this.DOMGS.deco, this.DOMGS.magnifier],
// duration: 20,
// easing: 'linear',
// opacity: 0
// });
const rect = this.getFullScreenPhotoRect();
anime({
targets: this.DOMGS.img,
duration: 250,
easing: 'easeOutSine',
translateX: rect.photoImgRect.left-rect.detailsImgRect.left,
translateY: rect.photoImgRect.top-rect.detailsImgRect.top,
scaleX: rect.photoImgRect.width/rect.detailsImgRect.width,
scaleY: rect.photoImgRect.height/rect.detailsImgRect.height,
complete: () => {
this.DOMGS.buttonCloseHandler.style.opacity = 0;
// this.DOMGS.bgDown.style.opacity = 0;
this.DOMGS.img.style.opacity = 0;
this.DOMGS.imgDiv.style.opacity = 0;
// this.DOMGS.bgDown.style.transform = 'none';
this.DOMGS.img.style.transform = 'none';
// this.DOMGS.productBg.style.opacity = 1;
this.DOMGS.photoImg.style.opacity = 1;
this.isAnimating = false;
// document.body.classList.remove('noscroll');
$('body, html').removeClass('noscroll');
this.DOMGS.img.src = "";
}
});
}
};
class ItemPhoto {
constructor(el,index) {
this.DOMGS = {};
this.DOMGS.el = el;
this.DOMGS.elementClick = this.DOMGS.el.querySelector('a');
this.DOMGS.photoImg = this.DOMGS.elementClick.querySelector('img');
// this.DOMGS.productBg = this.DOMGS.product.querySelector('.product__bg');
// this.DOMGS.photoImg = this.DOMGS.product.querySelector('.product__img');
// //console.log('src = '+this.DOMGS.photoImg.src+' index = '+index);
this.info = {
img: this.DOMGS.photoImg.src,
imgIndex: index
// title: this.DOMGS.product.querySelector('.product__title').innerHTML,
// subtitle: this.DOMGS.product.querySelector('.product__subtitle').innerHTML,
// description: this.DOMGS.product.querySelector('.product__description').innerHTML//, price: this.DOMGS.product.querySelector('.product__price').innerHTML
};
this.initEvents(index);
}
initEvents(index) {
this.DOMGS.elementClick.addEventListener('click', () => this.open(index));
}
open(index) {
DOMGS.details.fill(this.info);
DOMGS.details.open({
productBg: this.DOMGS.productBg,
photoImg: this.DOMGS.photoImg,
index: index
});
}
};
const DOMGS = {};
DOMGS.grid = document.querySelector('#grid');
DOMGS.content = DOMGS.grid.parentNode;
DOMGS.gridItemPhotos = Array.from(DOMGS.grid.querySelectorAll('li'));
DOMGS.hamburger = document.querySelector('.dummy-menu');
var items = [];
// DOMGS.gridItemPhotos.forEach(item => items.push(new ItemPhoto(item)));
DOMGS.gridItemPhotos.forEach(function(item, index) {
items.push(new ItemPhoto(item,index));
// //console.log(arrr_item.value);
});
// //console.log('DOMGS = items = '+items[0][0]);
DOMGS.details = new FullScreenPhoto();
// imagesLoaded(document.body, () => document.body.classList.remove('loading'));
// document.body.classList.remove('noscroll');
};
function eventInit(){
class EventsDetailClass {
constructor() {
this.DOMMY = {};
const eventdetailsTmpl = `
<div class="eventdEGRline"></div>
<div class="eventdetails__bg eventdetails__bg--up"></div>
<div class="eventdetails__img_place" /></div>
<div class="eventdetails__bg eventdetails__bg--down"></div>
<img class="eventdetails__img" src="" alt="img 01"/>
<h2 class="details__title"></h2>
<h3 class="details__subtitle"></h3>
<div class="eventdetails__description">
<h2 class="eventdetails__title"></h2>
<h3 class="eventdetails__subtitle"></h3>
<div class="eventPower">
<div class="ePower"></div>
<div class="eCardio"></div>
<div class="eFlexible"></div>
<div class="eRecover"></div>
</div>
<span class="eventdetails__description_text"></span>
</div>
`+
returnWowBtn('','Запись на занятие', 'занятие:','Записаться','buttonHolderEvents', 'event', 'event')+
`<div class="button-close-handler">
<button class="eventdetails__back"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></button>
<button class="eventdetails__close"><svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg></button>
</div>`;
// <div class="buttonHolder buttonHolderEvents">
// <div class="menuformaShapeWOWhandle">
// <ul class="menuformaShapeWOW inline formButton">
// <li>
// <a href="javascript:void(0);" class="md-trigger" data-modal="modal-12" data-title="Запись на занятие" data-subtitle="" data-button="Записаться">
// <svg>
// <rect x="1" y="1" width="calc(100% - 2px)" height="calc(100% - 2px)" rx="4" ry="4"></rect>
// </svg>
// <span>Индивидуальное занятие</span>
// </a>
// </li>
// </ul>
// </div>
// </div>
this.DOMMY.eventdetails = document.createElement('div');
this.DOMMY.eventdetails.className = 'eventdetails';
this.DOMMY.eventdetails.innerHTML = eventdetailsTmpl;
DOMMY.content.appendChild(this.DOMMY.eventdetails);
this.init();
}
init() {
// this.DOMMY.eventWeekHolder = this.DOMMY.eventdetails.querySelector('.eventWeekHolder');
this.DOMMY.eventPower = this.DOMMY.eventdetails.querySelector('.eventPower');
this.DOMMY.ePower = this.DOMMY.eventPower.querySelector('.ePower');
this.DOMMY.eCardio = this.DOMMY.eventPower.querySelector('.eCardio');
this.DOMMY.eFlexible = this.DOMMY.eventPower.querySelector('.eFlexible');
this.DOMMY.eRecover = this.DOMMY.eventPower.querySelector('.eRecover');
this.DOMMY.buttonHolderEvents = this.DOMMY.eventdetails.querySelector('.buttonHolderEvents');
// this.DOMMY.buttonHolderIndividual = this.DOMMY.eventdetails.querySelector('.buttonHolderIndividual');
this.DOMMY.eventdEGRline = this.DOMMY.eventdetails.querySelector('.eventdEGRline');
this.DOMMY.bgUp = this.DOMMY.eventdetails.querySelector('.eventdetails__bg--up');
this.DOMMY.bgDown = this.DOMMY.eventdetails.querySelector('.eventdetails__bg--down');
this.DOMMY.img = this.DOMMY.eventdetails.querySelector('.eventdetails__img');
// this.DOMMY.img_blured = this.DOMMY.eventdetails.querySelector('.details__img_blured').querySelector('.details__img_blured_img');
this.DOMMY.imgplace = this.DOMMY.eventdetails.querySelector('.eventdetails__img_place');
this.DOMMY.title = this.DOMMY.eventdetails.querySelector('.eventdetails__title');
this.DOMMY.subtitle = this.DOMMY.eventdetails.querySelector('.eventdetails__subtitle');
this.DOMMY.description = this.DOMMY.eventdetails.querySelector('.eventdetails__description');
this.DOMMY.description_text = this.DOMMY.description.querySelector('.eventdetails__description_text');
this.DOMMY.trenerName = this.DOMMY.eventdetails.querySelector('.details__title');
// this.DOMMY.trenerDescription = this.DOMMY.eventdetails.querySelector('.details__description');
this.DOMMY.trenerSubtitle = this.DOMMY.eventdetails.querySelector('.details__subtitle');
this.DOMMY.buttonCloseHandler = this.DOMMY.eventdetails.querySelector('.button-close-handler');
this.DOMMY.cart = this.DOMMY.eventdetails.querySelector('.eventdetails__addtocart');
this.DOMMY.close = this.DOMMY.eventdetails.querySelector('.eventdetails__close');
this.DOMMY.back = this.DOMMY.eventdetails.querySelector('.eventdetails__back');
this.DOMMY.dialogform = this.DOMMY.eventdetails.querySelector('.dialogform');
this.initEvents();
}
initEvents() {
this.DOMMY.close.addEventListener('click', () => this.close(false));
this.DOMMY.back.addEventListener('click', () => this.crossbackfrompersonal());
this.DOMMY.img.addEventListener('click', () => this.crosstopersonal());//this.DOMMY.eventdetails.classList.add('crosstopersonal'));////
// this.DOMMY.imgplace.addEventListener('click', () => this.crossbackfrompersonal());//this.DOMMY.eventdetails.classList.remove('crosstopersonal')); ////
}
fill(info) {
var trenerinfo = defineTrenerDescription(info.gridTrenerId);
// this.DOMMY.trenerDescription.innerHTML = returnDescriptionWithoutSubTitleTrener(trenerinfo.info);
this.DOMMY.buttonHolderEvents.querySelector('.md-trigger').setAttribute("data-subtitle", "занятие: "+info.title+', '+info.subtitle);
// this.DOMMY.buttonHolderIndividual.querySelector('.md-trigger').setAttribute("data-subtitle", "тренер: "+trenerinfo.fullname);
this.DOMMY.trenerSubtitle.innerHTML = returnSubTitleTrener(trenerinfo.info);
// //console.log(defineTrenerDescription(info.gridTrenerId));
this.DOMMY.imgplace.style.backgroundImage = 'url('+info.imgplace+')';//'../fitness-forma.ru/images/places/place_pool.jpg';//info.img;
this.DOMMY.img.src = info.img;//'images/personal/kuznetcova.png';
// this.DOMMY.img_blured.style.backgroundImage = "url('"+info.img+"')";
this.DOMMY.title.innerHTML = info.title;
this.DOMMY.subtitle.innerHTML = info.subtitle;
this.DOMMY.eventdEGRline.innerHTML = info.eventegrBeaforeClass;
this.DOMMY.trenerName.innerHTML = trenerinfo.fullname;//info.gridTrenerName;
this.DOMMY.trenerName.setAttribute("data-id", info.gridTrenerId);
// this.DOMMY.price.innerHTML = info.price;
this.DOMMY.description_text.innerHTML = info.description;
}
getProductEventsDetailClassRect() {
// //console.log('top = '+this.DOMMY.eventproductBg.getBoundingClientRect().top);
// //console.log('bottom = '+this.DOMMY.eventproductBg.getBoundingClientRect().bottom);
// //console.log('left = '+this.DOMMY.eventproductBg.getBoundingClientRect().left);
// //console.log('right = '+this.DOMMY.eventproductBg.getBoundingClientRect().right);
return {
gridBgRect: this.DOMMY.eventproductBg.getBoundingClientRect(),
detailsBgRect: this.DOMMY.bgDown.getBoundingClientRect(),
gridImgRect: this.DOMMY.eventproductImg.getBoundingClientRect(),
detailsImgRect: this.DOMMY.img.getBoundingClientRect(),
gridEGRBeaforeRect: this.DOMMY.eventegrBeafore.getBoundingClientRect(),
detailsEGRlineRect: this.DOMMY.eventdEGRline.getBoundingClientRect(),
gridTitleRect: this.DOMMY.titleCVB.getBoundingClientRect(),
detailsTitleRect: this.DOMMY.title.getBoundingClientRect()
};
}
crosstopersonal(){
if($('.returnback').length >= 1){
this.close(true);
}
selectormenu('content_personal',true);
this.DOMMY.eventproductBg.style.opacity = 1;
this.DOMMY.eventegrBeafore.style.opacity = 1;
this.DOMMY.titleCVB.style.opacity = 1;
$('.product[data-id="'+this.DOMMY.trenerName.getAttribute("data-id")+'"]').trigger("click");
// $('.mainMenu .menuformaShapeWOW li a').removeClass('yh_mouseClicked');
// $('.menuEvents[data-content="content_raspisanie"]').addClass('yh_mouseClicked');
// this.DOMMY.trenerDescription.style.display = 'block';
// this.DOMMY.buttonHolderIndividual.style.display = 'block';
// //console.log('crosstopersonal');
// this.DOMMY.eventdetails.classList.add('crosstopersonal');
// anime({
// targets: this.DOMMY.close,
// duration: 250,
// easing: 'easeOutSine',
// translateX: [0,'100%'],
// opacity: 0
// });
// anime({
// targets: this.DOMMY.back,
// duration: 250,
// easing: 'easeOutSine',
// translateX: ['10%','110%'],
// opacity: 1
// });
}
crossbackfrompersonal(){
// this.DOMMY.close.style.display = 'inline-block';
//console.log('crossbackfrompersonal');
this.close(true);
selectormenu('content_personal',false);
// this.DOMMY.eventdetails.classList.remove('crosstopersonal');
// this.DOMMY.buttonHolderIndividual.style.display = 'none';
// this.DOMMY.trenerDescription.style.display = 'none';
// anime({
// targets: this.DOMMY.close,
// duration: 250,
// easing: 'easeOutSine',
// translateX: ['100%', 0],
// opacity: 1
// });
// anime({
// targets: this.DOMMY.back,
// duration: 250,
// easing: 'easeOutSine',
// translateX: ['110%','10%'],
// opacity: 0,
// complete: () => {
// // this.DOMMY.back.style.pointerEvents = "none";
// // this.DOMMY.back.style.display = 'none';
// }
// });
}
open(data) {
if ( this.isAnimating ) return false;
this.isAnimating = true;
this.DOMMY.eventdetails.classList.add('eventdetails--open');
// document.body.classList.add('noscroll');
this.DOMMY.eventproductBg = data.eventproductBg;
this.DOMMY.eventproductImg = data.eventproductImg;
this.DOMMY.eventegrBeafore = data.eventegrBeafore;
this.DOMMY.titleCVB = data.titleCVB;
this.DOMMY.buttonCloseHandler.style.opacity = 1;
this.DOMMY.eventegrBeafore.style.opacity = 0;
this.DOMMY.eventproductBg.style.opacity = 0;
this.DOMMY.eventproductImg.style.opacity = 0;
this.DOMMY.titleCVB.style.opacity = 0;
// this.DOMMY.close.style.display = 'inline-block';
// this.DOMMY.back.style.display = 'none';
// this.DOMMY.back.style.pointerEvents = "none";
const rect = this.getProductEventsDetailClassRect();
// //console.log('top = '+this.getProductEventsDetailClassRect().top);
// //console.log('bottom = '+this.getProductEventsDetailClassRect().bottom);
// //console.log('left = '+this.getProductEventsDetailClassRect().left);
// //console.log('right = '+this.getProductEventsDetailClassRect().right);
const bodyfontsize = parseFloat(window.getComputedStyle(document.body, null).getPropertyValue('font-size'));
const fontsizeStart = 0.7*bodyfontsize;
const fontsizeEnd = 2*bodyfontsize;
this.DOMMY.title.style.fontSize = fontsizeStart+'px';
this.DOMMY.title.style.transform = `translateX(${rect.gridTitleRect.left-rect.detailsTitleRect.left}px) translateY(${rect.gridTitleRect.top-rect.detailsTitleRect.top}px) scaleX(1) scaleY(1)`;
this.DOMMY.title.style.opacity = 1;
this.DOMMY.eventdEGRline.style.transform = `translateX(${rect.gridEGRBeaforeRect.left-rect.detailsEGRlineRect.left}px) translateY(${rect.gridEGRBeaforeRect.top-rect.detailsEGRlineRect.top}px) scaleX(${rect.gridEGRBeaforeRect.width/rect.detailsEGRlineRect.width}) scaleY(${rect.gridEGRBeaforeRect.height/rect.detailsEGRlineRect.height})`;
this.DOMMY.eventdEGRline.style.opacity = 1;
this.DOMMY.bgDown.style.transform = `translateX(${rect.gridBgRect.left-rect.detailsBgRect.left}px) translateY(${rect.gridBgRect.top-rect.detailsBgRect.top}px) scaleX(${rect.gridBgRect.width/rect.detailsBgRect.width}) scaleY(${rect.gridBgRect.height/rect.detailsBgRect.height})`;
this.DOMMY.bgDown.style.opacity = 1;
// //console.log('gridBgRect = '+(rect.gridBgRect.top-rect.detailsBgRect.top));
this.DOMMY.img.style.transform = `translateX(${rect.gridImgRect.left-rect.detailsImgRect.left}px) translateY(${rect.gridImgRect.top-rect.detailsImgRect.top}px) scaleX(${rect.gridImgRect.width/rect.detailsImgRect.width}) scaleY(${rect.gridImgRect.height/rect.detailsImgRect.height})`;
this.DOMMY.img.style.opacity = 1;
this.DOMMY.title.querySelector('.iconsAtTitle').style.display = 'inline-block';
this.DOMMY.description.style.opacity = 1;
// this.DOMMY.trenerDescription.style.opacity = 1;
// this.DOMMY.trenerDescription.style.display = 'none';
// this.DOMMY.buttonHolderIndividual.style.opacity = 1;
// this.DOMMY.buttonHolderIndividual.style.display = 'none';
// this.DOMMY.imgplace.style.opacity = 1;
const animationtime = [800, 250, 800];
const animationeasing = ['easeOutElastic', 'easeOutSine', 'easeOutElastic'];
anime({
targets: [this.DOMMY.bgDown,this.DOMMY.img, this.DOMMY.eventdEGRline],
duration: (target, index) => animationtime[index],
easing: (target, index) => animationeasing[index],
elasticity: 250,
translateX: 0,
translateY: 0,
scaleX: 1,
scaleY: 1,
complete: () => {
$('body, html').addClass('noscroll');
}
});
anime({
targets: this.DOMMY.title,
duration: 800,
easing: 'easeOutElastic',
elasticity: 250,
translateX: 0,
translateY: 0,
fontSize: fontsizeEnd+'px',
scaleX: 1,
scaleY: 1
});
anime({
targets: [this.DOMMY.subtitle, this.DOMMY.description_text],// this.DOMMY.title, , this.DOMMY.price, this.DOMMY.cart
duration: 600,
easing: 'easeOutExpo',
delay: (target, index) => {
return index*300;
},
translateY: (target, index, total) => {
return ['-100%',0];//index !== total - 1 ? [50,0] : 0;
},
// scale: (target, index, total) => {
// return index === total - 1 ? [0,1] : 1;
// },
opacity: 1
});
const eventPower = [getRandomArbitrary(10,100), getRandomArbitrary(10,100), getRandomArbitrary(10,100), getRandomArbitrary(10,100)];
anime({
targets: [this.DOMMY.ePower, this.DOMMY.eCardio, this.DOMMY.eFlexible, this.DOMMY.eRecover],// this.DOMMY.title, , this.DOMMY.price, this.DOMMY.cart
duration: (target, index) => eventPower[index]*10 + 500,
easing: 'easeOutCirc',
delay: 600,
width: (target, index) => ['0%',eventPower[index]+'%']
});
anime({
targets: this.DOMMY.imgplace,// , this.DOMMY.price, this.DOMMY.cart
duration: 600,
easing: 'easeOutExpo',
delay: 400,
opacity: 1,
translateY: ['100%',0],
complete: () => {
this.isAnimating = false;
// this.DOMMY.eventdetails.classList.add('animateW');
// $(window).unbind('scroll');
}
});
anime({
targets: this.DOMMY.bgUp,
duration: 100,
easing: 'linear',
opacity: 1
});
anime({
targets: [this.DOMMY.trenerName, this.DOMMY.trenerSubtitle, this.DOMMY.buttonHolderEvents, this.DOMMY.eventPower],//this.DOMMY.eventWeekHolder
duration: 100,
delay: 600,
easing: 'linear',
opacity: 1
});
anime({
targets: this.DOMMY.close,
duration: 250,
easing: 'easeOutSine',
translateY: ['100%',0],
opacity: 1
});
anime({
targets: [DOMMY.hamburger, DOMMY.hamburgerFilter],
duration: 250,
easing: 'easeOutSine',
translateY: [0,'-200%']
});
}
close(hideHamburger) {
//console.log('close');
if ( this.isAnimating ) return false;
// this.DOMMY.eventdetails.classList.remove('crosstopersonal');
// this.DOMMY.eventdetails.classList.remove('animateW');
this.isAnimating = true;
this.DOMMY.description.style.opacity = 0;
this.DOMMY.eventdetails.classList.remove('eventdetails--open');
if(!hideHamburger){
anime({
targets: [DOMMY.hamburger, DOMMY.hamburgerFilter],
duration: 250,
easing: 'easeOutSine',
translateY: 0
});
}
anime({
targets: this.DOMMY.close,
duration: 250,
easing: 'easeOutSine',
translateY: '100%',
opacity: 0
});
anime({
targets: this.DOMMY.bgUp,
duration: 100,
easing: 'linear',
opacity: 0
});
anime({
targets: [this.DOMMY.trenerName, this.DOMMY.trenerSubtitle, this.DOMMY.subtitle,this.DOMMY.description,this.DOMMY.imgplace, this.DOMMY.eventPower, this.DOMMY.buttonHolderEvents],//, this.DOMMY.eventWeekHolder, this.DOMMY.title, , this.DOMMY.price, this.DOMMY.cart
duration: 20,
easing: 'linear',
opacity: 0
});
const bodyfontsize = parseFloat(window.getComputedStyle(document.body, null).getPropertyValue('font-size'));
const fontsizeStart = 0.7*bodyfontsize;
const fontsizeEnd = 3.5*bodyfontsize;
const rect = this.getProductEventsDetailClassRect();
rect.gridTitleRect.width = 1;
rect.detailsTitleRect.width = 1;
rect.gridTitleRect.height = 1;
rect.detailsTitleRect.height = 1;
var animationElement = [
[rect.gridBgRect, rect.detailsBgRect],
[rect.gridImgRect, rect.detailsImgRect],
[rect.gridEGRBeaforeRect, rect.detailsEGRlineRect],
[rect.gridTitleRect, rect.detailsTitleRect]
];
// //console.log('close gridBgRect = '+ (animationElement[1][0].top-animationElement[1][1].top));
// //console.log('close gridBgRect = '+ (animationElement[1][0].top-animationElement[1][1].top));
anime({
targets: [this.DOMMY.bgDown,this.DOMMY.img, this.DOMMY.eventdEGRline, this.DOMMY.title],
duration: 250,
easing: 'easeOutSine',
translateX: (target, index) => {
return animationElement[index][0].left-animationElement[index][1].left;
// index === 0 && return rect.gridImgRect.left-rect.detailsImgRect.left;
// index === 1 && return rect.gridBgRect.left-rect.detailsBgRect.left;
// index === 2 && return rect.gridEGRBeaforeRect.left-rect.detailsEGRlineRect.left;
// return index ? rect.gridImgRect.left-rect.detailsImgRect.left : rect.gridBgRect.left-rect.detailsBgRect.left;
},
translateY: (target, index) => {
return animationElement[index][0].top-animationElement[index][1].top;
// index === 0 && return rect.gridImgRect.top-rect.detailsImgRect.top;
// index === 1 && return rect.gridBgRect.top-rect.detailsBgRect.top;
// index === 2 && return rect.gridEGRBeaforeRect.top-rect.detailsEGRlineRect.top;
// return index ? rect.gridImgRect.top-rect.detailsImgRect.top : rect.gridBgRect.top-rect.detailsBgRect.top;
},
scaleX: (target, index) => {
return animationElement[index][0].width/animationElement[index][1].width;
// index === 0 && return rect.gridImgRect.width/rect.detailsImgRect.width;
// index === 1 && return rect.gridBgRect.width/rect.detailsBgRect.width;
// index === 2 && return rect.gridEGRBeaforeRect.width/rect.detailsEGRlineRect.width;
// return index ? rect.gridImgRect.width/rect.detailsImgRect.width : rect.gridBgRect.width/rect.detailsBgRect.width;
},
scaleY: (target, index) => {
return animationElement[index][0].height/animationElement[index][1].height;
// index === 0 && return rect.gridImgRect.height/rect.detailsImgRect.height;
// index === 1 && return rect.gridBgRect.height/rect.detailsBgRect.height;
// index === 2 && return rect.gridEGRBeaforeRect.height/rect.gridEGRBeaforeRect.height;
// return index ? rect.gridImgRect.height/rect.detailsImgRect.height : rect.gridBgRect.height/rect.detailsBgRect.height;
},
fontSize: (target, index) => {
if(index === 3){
return fontsizeStart+'px';
}
return "";
// index === 0 && return rect.gridImgRect.height/rect.detailsImgRect.height;
// index === 1 && return rect.gridBgRect.height/rect.detailsBgRect.height;
// index === 2 && return rect.gridEGRBeaforeRect.height/rect.gridEGRBeaforeRect.height;
// return index ? rect.gridImgRect.height/rect.detailsImgRect.height : rect.gridBgRect.height/rect.detailsBgRect.height;
},
complete: () => {
// stickyTimeLineHeader();
this.DOMMY.buttonCloseHandler.style.opacity = 0;
this.DOMMY.buttonHolderEvents.style.opacity = 0;
this.DOMMY.bgDown.style.opacity = 0;
this.DOMMY.img.style.opacity = 0;
this.DOMMY.eventdEGRline.style.opacity = 0;
this.DOMMY.title.style.opacity = 0;
this.DOMMY.bgDown.style.transform = 'none';
this.DOMMY.img.style.transform = 'none';
this.DOMMY.eventdEGRline.style.transform = 'none';
this.DOMMY.title.style.transform = 'none';
this.DOMMY.ePower.style.width = 0;
this.DOMMY.eCardio.style.width = 0;
this.DOMMY.eFlexible.style.width = 0;
this.DOMMY.eRecover.style.width = 0;
this.DOMMY.eventproductBg.style.opacity = 1;
this.DOMMY.eventproductImg.style.opacity = 1;
this.DOMMY.eventegrBeafore.style.opacity = 1;
this.DOMMY.titleCVB.style.opacity = 1;
this.isAnimating = false;
// document.body.classList.remove('noscroll');
$('body, html').removeClass('noscroll');
this.DOMMY.img.src = "";
}
});
}
};
class EventClass {
constructor(el) {
this.DOMMY = {};
this.DOMMY.el = el;
// //console.log('EventClass = '+this.DOMMY.el);
this.DOMMY.eventproduct = this.DOMMY.el;//.querySelector('.calendarEventCell');//eventproduct
if(this.DOMMY.eventproduct === null){
this.DOMMY.eventproductImg = '';
} else {
this.DOMMY.eventproductBg = this.DOMMY.el;//.querySelector('.calendarEventCell');//this.DOMMY.eventproduct.querySelector('.eventproduct__bg');
this.DOMMY.eventproductImg = this.DOMMY.eventproduct.querySelector('.imageTrenerCVB');
this.DOMMY.eventplaceImg = this.DOMMY.eventproduct.querySelector('.imageWhereCVB');
this.DOMMY.eventegrBeafore = this.DOMMY.eventproduct.querySelector('.egrBeafore');
this.DOMMY.titleCVB = this.DOMMY.eventproduct.querySelector('.titleCVB')
// //console.log('this.DOMMY.eventegrBeafore.className = '+this.DOMMY.eventegrBeafore.className);
this.info = {
gridTrenerId: this.DOMMY.eventproduct.getAttribute("data-trenerid"),
gridTrenerName: this.DOMMY.eventproduct.querySelector('.trenerCVB').innerHTML,
eventegrBeaforeClass: this.DOMMY.eventegrBeafore.outerHTML,
img: this.DOMMY.eventproductImg.src,
imgplace: this.DOMMY.eventplaceImg.src,
title: this.DOMMY.eventproduct.querySelector('.titleCVB').innerHTML,//eventproduct__title
subtitle: this.DOMMY.eventproduct.querySelector('.dateCVB').innerHTML,//,//eventproduct__subtitle
description: this.DOMMY.eventproduct.querySelector('.descriptionCVB').innerHTML
// price: this.DOMMY.eventproduct.querySelector('.eventproduct__price').innerHTML
};
this.initEvents();
}
}
initEvents() {
this.DOMMY.eventproduct.addEventListener('click', () => this.open());
}
open() {
DOMMY.eventdetails.fill(this.info);
DOMMY.eventdetails.open({
eventproductBg: this.DOMMY.eventproductBg,
eventproductImg: this.DOMMY.eventproductImg,
eventegrBeafore: this.DOMMY.eventegrBeafore,
titleCVB: this.DOMMY.titleCVB
});
}
};
const DOMMY = {};
DOMMY.grid = document.querySelector('.calendarScrollRows');//grid
DOMMY.content = DOMMY.grid.parentNode;
DOMMY.hamburger = document.querySelector('.dummy-menu');
DOMMY.hamburgerFilter = document.querySelector('.dummy-menu.menuFilter');
DOMMY.gridEventClasss = Array.from(DOMMY.grid.querySelectorAll('.calendarEventCell'));//grid__item
let items = [];
DOMMY.gridEventClasss.forEach(item => items.push(new EventClass(item)));
DOMMY.eventdetails = new EventsDetailClass();
}
function personalInit(){
//console.log('personalInit');
class Details {
constructor() {
this.DOM = {};
const detailsTmpl = `
<div class="details__bg details__bg--up"></div>
<div class="details__bg details__bg--down"></div>
<img class="details__img" src="" alt="img 01"/>
<div class="details__img_blured">
<div class="details__img_blured_img"></div>
</div>
<h2 class="details__title"></h2>
<h3 class="details__subtitle"></h3>
<div class="details__description">
<span class="details__description_text"></span>
<div class="buttonHolder details__list_events">
</div>
</div>
`+returnWowBtn('Индивидуальное занятие','Запись на индивидуальное занятие', 'Тренер','Отправить','buttonHolderIndividual', 'individual', 'individual')+`
<div class="button-close-handler">
<button class="eventdetails__back"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></button>
<button class="eventdetails__close"><svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg></button>
</div>`;//<div class="details__price"></div>
this.DOM.details = document.createElement('div');
this.DOM.details.className = 'details';
this.DOM.details.innerHTML = detailsTmpl;
DOM.content.appendChild(this.DOM.details);
this.init();
}
init() {
this.DOM.bgUp = this.DOM.details.querySelector('.details__bg--up');
this.DOM.bgDown = this.DOM.details.querySelector('.details__bg--down');
this.DOM.img = this.DOM.details.querySelector('.details__img');
this.DOM.img_blured = this.DOM.details.querySelector('.details__img_blured');
this.DOM.title = this.DOM.details.querySelector('.details__title');
this.DOM.subtitle = this.DOM.details.querySelector('.details__subtitle');
this.DOM.buttonHolderIndividual = this.DOM.details.querySelector('.buttonHolderIndividual');
// this.DOM.price = this.DOM.details.querySelector('.details__price');
this.DOM.description = this.DOM.details.querySelector('.details__description');
this.DOM.description_text = this.DOM.description.querySelector('.details__description_text');
this.DOM.cart = this.DOM.details.querySelector('.buttonHolderIndividual');
this.DOM.listevents = this.DOM.description.querySelector('.details__list_events');
this.DOM.close = this.DOM.details.querySelector('.eventdetails__close');
this.DOM.back = this.DOM.details.querySelector('.eventdetails__back');
this.DOM.dialogform = this.DOM.details.querySelector('.dialogform');
this.DOM.buttonCloseHandler = this.DOM.details.querySelector('.button-close-handler');
this.initEvents();
}
initEvents() {
//console.log('initEvents close');
this.DOM.close.addEventListener('click', () => this.close(false));
this.DOM.back.addEventListener('click', () => this.crossbackfromevent());
}
crossbackfromevent(){
// this.DOMMY.close.style.display = 'inline-block';
//console.log('crossbackfrompersonal');
this.close(true);
selectormenu('content_raspisanie',false);
}
fill(info) {
this.DOM.img.src = info.img;
this.DOM.buttonHolderIndividual.querySelector('.md-trigger').setAttribute("data-subtitle", "тренер: "+info.title);
this.DOM.img_blured.querySelector('.details__img_blured_img').style.backgroundImage = "url('"+info.img+"')";
this.DOM.title.innerHTML = info.title;
this.DOM.subtitle.innerHTML = info.subtitle;
this.DOM.listevents.innerHTML = wrapInHTMLPersonalEventsDayly(info.id);
// this.DOM.price.innerHTML = info.price;
this.DOM.description_text.innerHTML = info.description;
}
getProductDetailsRect() {
return {
productBgRect: this.DOM.productBg.getBoundingClientRect(),
detailsBgRect: this.DOM.bgDown.getBoundingClientRect(),
productImgRect: this.DOM.productImg.getBoundingClientRect(),
detailsImgRect: this.DOM.img.getBoundingClientRect()
};
}
open(data) {
if ( this.isAnimating ) return false;
this.isAnimating = true;
this.DOM.details.classList.add('details--open');
// document.body.classList.add('noscroll');
$('body, html').addClass('noscroll');
this.DOM.productBg = data.productBg;
this.DOM.productImg = data.productImg;
this.DOM.productBg.style.opacity = 0;
this.DOM.productImg.style.opacity = 0;
this.DOM.buttonCloseHandler.style.opacity = 1;
const rect = this.getProductDetailsRect();
this.DOM.bgDown.style.transform = `translateX(${rect.productBgRect.left-rect.detailsBgRect.left}px) translateY(${rect.productBgRect.top-rect.detailsBgRect.top}px) scaleX(${rect.productBgRect.width/rect.detailsBgRect.width}) scaleY(${rect.productBgRect.height/rect.detailsBgRect.height})`;
this.DOM.bgDown.style.opacity = 1;
this.DOM.img.style.transform = `translateX(${rect.productImgRect.left-rect.detailsImgRect.left}px) translateY(${rect.productImgRect.top-rect.detailsImgRect.top}px) scaleX(${rect.productImgRect.width/rect.detailsImgRect.width}) scaleY(${rect.productImgRect.height/rect.detailsImgRect.height})`;
this.DOM.img.style.opacity = 1;
// this.DOM.listevents.querySelectorAll('ul')[0].style.opacity = 0;
for (var i = 0; i < this.DOM.listevents.querySelectorAll('.menuformaShapeWOWhandle').length; i++) {
this.DOM.listevents.querySelectorAll('.menuformaShapeWOWhandle')[i].style.opacity = 0;
}
this.DOM.listevents.style.opacity = 1;
for (var i = 0; i < this.DOM.cart.querySelectorAll('.menuformaShapeWOWhandle').length; i++) {
this.DOM.cart.querySelectorAll('.menuformaShapeWOWhandle')[i].style.opacity = 0;
}
this.DOM.cart.style.opacity = 1;
// this.DOM.imgplace.style.opacity = 1;
this.DOM.listevents.style.overflowX = "hidden";
anime({
targets: [this.DOM.bgDown,this.DOM.img],
duration: (target, index) => index ? 800 : 250,
easing: (target, index) => index ? 'easeOutElastic' : 'easeOutSine',
elasticity: 250,
translateX: 0,
translateY: 0,
scaleX: 1,
scaleY: 1
});
anime({
targets: [this.DOM.title, this.DOM.subtitle, this.DOM.description],// this.DOM.price, this.DOM.deco, this.DOM.magnifier],
duration: 600,
easing: 'easeOutExpo',
delay: (target, index) => {
return index*60;
},
translateY: (target, index, total) => {
return index !== total - 1 ? [50,0] : 0;
},
scale: (target, index, total) => {
return index === total - 1 ? [0,1] : 1;
},
opacity: 1
});
anime({
targets: this.DOM.cart.querySelectorAll('.menuformaShapeWOWhandle'),// this.DOM.price, this.DOM.deco, this.DOM.magnifier],
duration: 600,
easing: 'easeOutExpo',
delay: (target, index) => {
return index*60+600;
},
translateX: (target, index, total) => {
return [50*index+100,0];
},
opacity: 1,
complete: () => {
this.isAnimating = false;
}
});
anime({
targets: this.DOM.listevents.querySelectorAll('.menuformaShapeWOWhandle'),// this.DOM.price, this.DOM.deco, this.DOM.magnifier],
duration: 600,
easing: 'easeOutExpo',
delay: (target, index) => {
return index*60+600;
},
translateX: (target, index, total) => {
return [50*index+100,0];
},
opacity: 1,
complete: () => {
this.DOM.listevents.style.overflowX = "hidden";
}
});
anime({
targets: this.DOM.bgUp,
duration: 100,
easing: 'linear',
opacity: 1
});
anime({
targets: this.DOM.img_blured,
delay: 550,
duration: 100,
easing: 'linear',
opacity: 1
});
anime({
targets: this.DOM.close,
duration: 250,
easing: 'easeOutSine',
translateY: ['100%',0],
opacity: 1
});
anime({
targets: [DOM.hamburger, DOM.hamburgerFilter],
duration: 250,
easing: 'easeOutSine',
translateY: [0,'-200%']
});
}
close(hideHamburger) {
//console.log('close');
if ( this.isAnimating ) return false;
this.isAnimating = true;
// this.DOM.img_blured.style.opacity = 0;
this.DOM.details.classList.remove('details--open');
if(!hideHamburger){
anime({
targets: [DOM.hamburger, DOM.hamburgerFilter],
duration: 250,
easing: 'easeOutSine',
translateY: 0
});
}
anime({
targets: this.DOM.close,
duration: 250,
easing: 'easeOutSine',
translateY: '100%',
opacity: 0
});
anime({
targets: this.DOM.bgUp,
duration: 100,
easing: 'linear',
opacity: 0
});
anime({
targets: [this.DOM.img_blured, this.DOM.title, this.DOM.subtitle, this.DOM.description, this.DOM.cart, this.DOM.listevents],// this.DOM.price, this.DOM.deco, this.DOM.magnifier],
duration: 20,
easing: 'linear',
opacity: 0
});
const rect = this.getProductDetailsRect();
anime({
targets: [this.DOM.bgDown,this.DOM.img],
duration: 250,
easing: 'easeOutSine',
translateX: (target, index) => {
return index ? rect.productImgRect.left-rect.detailsImgRect.left : rect.productBgRect.left-rect.detailsBgRect.left;
},
translateY: (target, index) => {
return index ? rect.productImgRect.top-rect.detailsImgRect.top : rect.productBgRect.top-rect.detailsBgRect.top;
},
scaleX: (target, index) => {
return index ? rect.productImgRect.width/rect.detailsImgRect.width : rect.productBgRect.width/rect.detailsBgRect.width;
},
scaleY: (target, index) => {
return index ? rect.productImgRect.height/rect.detailsImgRect.height : rect.productBgRect.height/rect.detailsBgRect.height;
},
complete: () => {
this.DOM.buttonCloseHandler.style.opacity = 0;
this.DOM.bgDown.style.opacity = 0;
this.DOM.img.style.opacity = 0;
this.DOM.bgDown.style.transform = 'none';
this.DOM.img.style.transform = 'none';
this.DOM.productBg.style.opacity = 1;
this.DOM.productImg.style.opacity = 1;
this.isAnimating = false;
// document.body.classList.remove('noscroll');
$('body, html').removeClass('noscroll');
this.DOM.img.src = "";
this.DOM.listevents.style.overflowX = "initial";
}
});
}
};
class Item {
constructor(el) {
this.DOM = {};
this.DOM.el = el;
this.DOM.product = this.DOM.el.querySelector('.product');
this.DOM.productBg = this.DOM.product.querySelector('.product__bg');
this.DOM.productImg = this.DOM.product.querySelector('.product__img');
this.info = {
img: this.DOM.productImg.src,
title: this.DOM.product.querySelector('.product__title').innerHTML,
id: this.DOM.product.getAttribute("data-id"),
subtitle: this.DOM.product.querySelector('.product__subtitle').innerHTML,
description: this.DOM.product.querySelector('.product__description').innerHTML//, price: this.DOM.product.querySelector('.product__price').innerHTML
};
this.initEvents();
}
initEvents() {
this.DOM.product.addEventListener('click', () => this.open());
}
open() {
DOM.details.fill(this.info);
DOM.details.open({
productBg: this.DOM.productBg,
productImg: this.DOM.productImg
});
}
};
const DOM = {};
DOM.grid = document.querySelector('.grid_personal');
DOM.content = DOM.grid.parentNode;
DOM.hamburger = document.querySelector('.dummy-menu');
DOM.hamburgerFilter = document.querySelector('.dummy-menu.menuFilter');
DOM.gridItems = Array.from(DOM.grid.querySelectorAll('.grid__item'));
let items = [];
DOM.gridItems.forEach(item => items.push(new Item(item)));
DOM.details = new Details();
};
function getRandomArbitrary(min, max) {
return Math.random() * (max - min) + min;
}
function updateevents(updateeventsBool){
var openTodayForMobileDevice = 0;
var shortDayOfWeek = [];
var shortDateStart = [];
fullDateArray = [];
timeArrayFromDateStart = [];
var lastDayOfWeek = '';
var lastTimeFromDateStart = '';
var timeFromDateStart = '';
for (var i = 0; i < raspisanie.length; i++) {
timeFromDateStart = parseInt(raspisanie[i].dateStart.substring(11,13));
if(timeArrayFromDateStart.length!=0){
if(timeFromDateStart!=lastTimeFromDateStart){
var flag = false;
for (var j = 0; j < timeArrayFromDateStart.length; j++) {
if(timeFromDateStart==timeArrayFromDateStart[j]){
flag = true;
}
}
if(!flag){
timeArrayFromDateStart.push(timeFromDateStart);
}
}
lastTimeFromDateStart = timeFromDateStart;
} else {
lastTimeFromDateStart = timeFromDateStart;
timeArrayFromDateStart.push(timeFromDateStart);
}
if(raspisanie[i].dayOfWeek!=lastDayOfWeek){
shortDayOfWeek.push(raspisanie[i].dayOfWeek);
// console.log('dateStart = '+raspisanie[i].dateStart);
// console.log('same = '+moment().isSame(raspisanie[i].dateStart, 'day')+' index = '+shortDateStart.length);
if(moment().isSame(raspisanie[i].dateStart, 'day')){
openTodayForMobileDevice = shortDateStart.length + 1;
}
shortDateStart.push(parseInt(raspisanie[i].dateStart.substring(8,10)));
fullDateArray.push(raspisanie[i].dateStart.substring(0,10));
lastDayOfWeek = raspisanie[i].dayOfWeek;
}
};
timeArrayFromDateStart.sort(function(a, b){return a-b});
$('#update_module').html('<div id="daysTimeLine" class="timeLineHeader"><a href="javascript:void(0);" class="btnPrevWeek" onclick="prevWeek(); return false;"></a></div>');
for (var i = 0; i < shortDateStart.length; i++) {
$('#daysTimeLine').append('<div class="calendarOneDaysColumn dayOfWeekColumn" data-id="'+(i+1)+'"><div class="calendarDateCell">'+shortDateStart[i]+'</div><div class="calendarDateWeekCell">'+shortDayOfWeek[i]+'</div></div>');
};
$('#daysTimeLine').append('<a href="javascript:void(0);" class="btnNextWeek" onclick="nextWeek(); return false;"></a><div class="clearfloat"></div>');
$('#update_module').append('<div id="calendarScrollRows" class="calendarScrollRows"><div id="wrapMarginCalendar" class="wrapMargin"></div></div>');
if(noRaspisanie){
$('#wrapMarginCalendar').html('<div class="noRaspisanieBg"><div class="noRaspisanieWindow"><h2>Расписание находится в разработке</h2><p>Уточнить любую информацию Вы всегда можете по тел. <a href="tel:+78422447071" class="underline">+7 (8422) 44-70-71</a></p></div></div>');
} else {// !noRaspisanie
for (var i = 0; i <= timeArrayFromDateStart.length+1; i++) {
if(i<timeArrayFromDateStart.length) {
timeLine = 'timeLineTop';
$('#wrapMarginCalendar').append('<div class="'+timeLine+'">'+
'<div class="calendarOneDaysColumn dayColumn1 daytime'+timeArrayFromDateStart[i]+'" id="day1_'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn2 daytime'+timeArrayFromDateStart[i]+'" id="day2_'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn3 daytime'+timeArrayFromDateStart[i]+'" id="day3_'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn4 daytime'+timeArrayFromDateStart[i]+'" id="day4_'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn5 daytime'+timeArrayFromDateStart[i]+'" id="day5_'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn6 daytime'+timeArrayFromDateStart[i]+'" id="day6_'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn7 daytime'+timeArrayFromDateStart[i]+'" id="day7_'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="clearfloat"></div></div>');
} else {
timeLine = 'timeLine';
$('#wrapMarginCalendar').append('<div class="'+timeLine+'">'+
'<div class="calendarOneDaysColumn dayColumn1 daytime'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn2 daytime'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn3 daytime'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn4 daytime'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn5 daytime'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn6 daytime'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="calendarOneDaysColumn dayColumn7 daytime'+timeArrayFromDateStart[i]+'"></div>'+
'<div class="clearfloat"></div></div>');
}
//var lastNumberOfWeek = '';
}
var timeFromDateStart;
for (var j = 0; j < raspisanie.length; j++) {
timeFromDateStart = parseInt(raspisanie[j].dateStart.substring(11,13)); //часы
timeStartMinute = raspisanie[j].dateStart.substring(14,16); //минуты
timeStart = timeFromDateStart+':'+timeStartMinute;
var groupFilterEGR = '';
var colorFilterCVB = '';
var egrBeafore = '';
if(raspisanie[j].ageTo <= 15 && raspisanie[j].ageTo > 0){//Детские
groupFilterEGR = 'childEGR';
colorFilterCVB = 'childCVB';
egrBeafore = 'childEGRbefore';
if(raspisanie[j].whereid == 5){//БАССЕЙН
groupFilterEGR = groupFilterEGR+' poolEGR';
}
} else if(raspisanie[j].whereid == 5){//БАССЕЙН
groupFilterEGR = 'poolEGR';
colorFilterCVB = 'poolCVB';
egrBeafore = 'poolEGRbefore';
} else {
groupFilterEGR = 'adaultEGR';
colorFilterCVB = 'adaultCVB';
egrBeafore = 'adaultEGRbefore';
}
$('#day'+raspisanie[j].numberOfWeek+'_'+timeFromDateStart).append('<div id="event'+j+'" class="calendarEventCell '+
groupFilterEGR+'" data-id="'+j+'" data-agefrom="'+parseInt(raspisanie[j].ageFrom)+'" data-ageto="'+parseInt(raspisanie[j].ageTo)+'" data-trenerid="'+raspisanie[j].trenerid+'">'+
'<div class="egrBeafore '+egrBeafore+'"></div>'+
'<div class="eventComponentViewBlock timeCVB '+colorFilterCVB+'"><span class="iconsAtTime"><span class="timeCVBText">'+timeStart+'</span><span class="iconsAtTimeDAY">'+getUnicalString(j)+'</span></span></div>'+
'<div class="eventComponentViewBlock titleCVB">'+raspisanie[j].title+'<span class="iconsAtTitle">'+getUnicalString(j)+'</span></div>'+
'<div class="eventComponentViewBlock trenerCVB ecDayOnly">'+raspisanie[j].trener+'</div>'+
'<div class="eventComponentViewBlock whereCVB ecDayOnly">'+raspisanie[j].where+'</div>'+
'<div class="eventComponentViewBlock durationCVB ecDayOnly">'+raspisanie[j].duration+'</div>'+
'<div class="descriptionCVB">'+raspisanie[j].description+'</div>'+
'<div class="dateCVB">'+moment(raspisanie[j].dateStart).format('dddd, D MMMM, в HH:mm')+'</div>'+
'<img class="imageTrenerCVB" src="'+raspisanie[j].trenerImageUrl+'"/>'+
'<img class="imageWhereCVB" src="'+basePlacelImageUrl+raspisanie[j].wherePhoto+'.jpg'+'"/>'+
'<div class="clearfloat"></div>'+
'</div>');
}
updateHeightTimeLine ('weekview',0);
updateHeightTimeLineHeader('weekview',0);
// update_module_left('calendar');
addEventsToDom();
eventInit();
}
if(updateeventsBool){
update_moduleDown();
}
if(openTodayForMobileDevice != 0 && $(window).width() <= 768){
$('.calendarOneDaysColumn.dayOfWeekColumn[data-id = '+openTodayForMobileDevice+']').trigger('click');
}
// stickyTimeLineHeader();
}
function groupFilter(that){
$('.selectedMF').removeClass('selectedMF');
$(that).addClass('selectedMF');
if(that!=''){
if(that.hasClass('selectedEG') || that.hasClass('allEG')){
$('.iconAge,#age-range').hide();
$('.filterEventsGroup').removeClass('selectedEG');
if(openViewOneDay){
showHideEGR('poolEGR',false);
showHideEGR('adaultEGR',false);
showHideEGR('childEGR',false);
} else {
updateHeightTimeLineDefaultWeekView();
}
$('#allEGR').addClass('selectedEG');
} else {
$('.filterEventsGroup').removeClass('selectedEG');
$('.iconAge,#age-range').hide();
if(that.hasClass('childEG')){
ageFilterFrom = that.data('from');
ageFilterTo = that.data('to');
$("#age-range").slider('values',0,ageFilterFrom).slider('values',1,ageFilterTo);
ageRangeUpdate();
$('.iconAge,#age-range').show();
showHideEGR('childEGR',true);
} else if (that.hasClass('poolEG')){
showHideEGR('poolEGR',true);
} else {
showHideEGR('adaultEGR',true);
}
}
}
}
function addEventsToDom(){
$( ".calendarEventCell" )
.mouseenter(function() {
if(openViewOneDay==false){
$(this).addClass("mouseEntered");
} else {
$(this).css({backgroundColor:colorCellBottomBgSelected});
}
})
.mouseleave(function() {
if(openViewOneDay==false){
$(this).removeClass("mouseEntered");
} else {
$(this).css({backgroundColor:colorCellBottomBg});
}
});
$('.dayOfWeekColumn').mouseenter(function() {
if(noRaspisanie){} else {
if(directionUpdate == ''){
var id = $(this).data("id");
if(openViewOneDay==false){
$('.dayColumn'+id).css({'background-color':colorCellBottomBgSelected});
$(this).css({'background-color':colorCellBottomBgSelected});
} else {
if(animationViewOneDay==false){
$(this).css({'background-color':colorCellBottomBgSelected});
$('.dayColumn'+id).children().each(function() {
$(this).css({'background-color':colorCellBottomBg});
});
}
}
} else {
}
}
}).mouseleave(function() {
if(noRaspisanie){} else {
var id = $(this).data("id");
if(openViewOneDay==false){
$('.dayColumn'+id).css({'background-color':'rgba(3, 17, 43,0.0)'});
$(this).css({'background-color':'rgba(3, 17, 43,0.0)'});
} else {
if(animationViewOneDay==false){
$(this).css({'background-color':'rgba(3, 17, 43,0.0)'});
$('.dayColumn'+id).children().each(function() {
$(this).css({'background-color':colorCellBottomBg});
});
}
}
}
}).click(function() {
if(noRaspisanie){} else {
var id = $(this).data("id");
$('.dayOfWeekColumn').addClass('animate50');
if(selectedDay == id){//тот же день
changeWeekOrDayAddClass($('.weekOrDaySelectButtonWeek'));
closeOneDayView(id);
} else { //другой день
animationViewOneDay = true;
$('.dayColumn'+id).css({'background-color':'rgba(3, 17, 43,0.0)'});
if(openViewOneDay == false){ //просмотр дня не открыт
changeWeekOrDayAddClass($('.weekOrDaySelectButtonDay'));
selectedDay = id;
openViewOneDayWidth = $(this).width();
updateEventBg(selectedDay, id,'dayview');
updateHeightTimeLine ('dayview',id);
updateHeightTimeLineHeader('dayview', selectedDay, id);
updateEventFloat(id);
unwrapTimeLine(selectedDay);
openViewOneDay = true;
updateHeightTimeLineDefaultDayView();
showHideEGR(groupFilterselectedEG,true);
} else {//if onedayopen //другой день недели
updateHeightTimeLineHeader('dayview', selectedDay, id);
updateHeightTimeLine ('dayview',selectedDay, id);
updateEventBg(selectedDay, id,'dayview');
selectedDay = id; //важный порядок после updateHeightTimeLineHeader!
updateEventFloat(id);
}
animationViewOneDay = false;
}
$('.dayOfWeekColumn').removeClass('animate50');
}
});
}
function getHeight() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
// myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
// myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
// myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
return myHeight;
}
function getWidth() {
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
return myWidth;
}
function imageSizeWrapInsta(img){
var imageSize = {};
myHeight = getHeight() - 68 - 70;
myWidth = getWidth();
//console.log('myHeight = '+ (myWidth/myHeight));
naturalWidth = img.naturalWidth;
naturalHeight = img.naturalHeight;
//console.log('naturalWidth = '+ (naturalWidth/naturalHeight));
if((naturalWidth/naturalHeight) >= (myWidth/myHeight)){
imageSize.width = '100%';
imageSize.height = 'auto';
} else {
imageSize.width = 'auto';
imageSize.height = '100%';
}
return imageSize;
}
function imageSizeWrap(img){
var imageSize = {};
myHeight = getHeight() - 68 - 70;
myWidth = getWidth();
//console.log('myHeight = '+ (myWidth/myHeight));
naturalWidth = img.naturalWidth;
naturalHeight = img.naturalHeight;
//console.log('naturalWidth = '+ (naturalWidth/naturalHeight));
if((naturalWidth/naturalHeight) >= (myWidth/myHeight)){
imageSize.width = '100%';
imageSize.height = 'auto';
} else {
imageSize.width = 'auto';
imageSize.height = '100%';
}
return imageSize;
}
function initMap () {
myMap = new ymaps.Map('map', {
center: [54.332910, 48.394815],
zoom: 17,
controls: ['zoomControl']
});
var FormaClub = new ymaps.Placemark([54.332910, 48.394815], {
hintContent: 'Фитнес-клуб Форма',
balloonContent: 'ул. Федерации, д. 141, <br/>Фитнес-клуб «ФОРМА»'
}, {
iconColor: 'red'
});
myMap.geoObjects.add(FormaClub);
myMap.behaviors.disable(['searchControl','scrollZoom', 'rightMouseButtonMagnifier']);
}
function handleForm(isFeedback, isSpa){
if(!$(".dialog-button").hasClass('disabled')){
let title = $('.md-content #dialog-title').text();
let description = $('.md-content #dialog-subtitle').text();
let yatarget = $('.md-content #dialogyatarget:input').val();
let gatarget = $('.md-content #dialoggatarget:input').val();
let name = $('.md-content #name:input').val();
let phone = $('.md-content #phone:input').val();
let feedback = false;
if(isFeedback){
name = $('.md-content #name-feed:input').val();
phone = $('.md-content #phone-feed:input').val();
feedback = $('.md-content #feedbacktextarea').val();
if(feedback == ''){
$('#empty_feedback').show();
} else {
$('#empty_feedback').hide();
$('#feedbackbtnsend').hide();
}
}
if(yatarget != ''){
// yandexTarget(yatarget,title,'');
ym(36390255, 'reachGoal', yatarget);
}
if(gatarget != '' && typeof ga === 'function'){
ga('send', 'event', 'click', gatarget);
}
if(phone != "" && name != "" || (feedback != "") && feedback){
$.ajax({
timeout: 35000,
type: "GET",
url: '/php/update.php?'
+'action='+(isFeedback? 'feedback' : 'sendform')
+'&sendform='+(isFeedback? 'feedback' : 'sendform')
+'&name='+encodeURIComponent((name == ""? "Не задано" : name))
+'&phone='+encodeURIComponent(phone)
+'&title='+encodeURIComponent(title)
+'&spa='+encodeURIComponent(isSpa)
+'&description='+encodeURIComponent(isFeedback? feedback : description),
beforeSend: function () {
$(".dialog-button").addClass('disabled');
$(".md-content .content.dialog-info").html("<h3>Идет отправка</h3>");
$(".md-content .content.dialog-form, .md-content .anyQuestion, .md-content .politica").hide();
},
success: function(data){
if(data=="OK"){
document.querySelector('.md-close-btn-handle').style.opacity=0;
document.querySelector('.md-action-btn-handle').style.opacity=0;
if(isFeedback){
$(".md-content .content.dialog-info").html("<h3>Ваш отзыв успешно отправлен.</h3><h3>Спасибо!</h3>");
setTimeout(function() {
// $(".md-content .content.dialog-info").html("")
// $('.md-content #name:input').val('');
// $('.md-content #phone:input').val('');
// $(".md-content .content.dialog-form, .md-content .anyQuestion, .md-content .politica").show();
// $(".md-close").trigger("click");
// $(".dialog-button").removeClass('disabled');
}, 3000);
} else {
$(".md-content .content.dialog-info").html("<h3>Ваша заявка успешно отправлена.</h3>");
setTimeout(function() {
$(".md-content .content.dialog-info").html("")
$('.md-content #name:input').val('');
$('.md-content #phone:input').val('');
$('.md-content #name-feed:input').val('');
$('.md-content #phone-feed:input').val('');
$('.md-content #feedbacktextarea').val('');
$(".md-content .content.dialog-form, .md-content .anyQuestion, .md-content .politica").show();
$(".md-close").trigger("click");
$(".dialog-button").removeClass('disabled');
}, 3000);
}
}else{
$(".md-content .content.dialog-info").html("<h3>Произошла ошибка при отправлении. Попробуйте позже.</h3>");
$(".md-content .content.dialog-form").show();
$('#feedbackbtnsend').show();
setTimeout(function() {
$(".md-content .content.dialog-info").html("")
$('.md-content #name:input').val('');
$('.md-content #phone:input').val('');
$('.md-content #name-feed:input').val('');
$('.md-content #phone-feed:input').val('');
$('.md-content #feedbacktextarea').val('');
$(".md-content .content.dialog-form, .md-content .anyQuestion, .md-content .politica").show();
$(".md-close").trigger("click");
$(".dialog-button").removeClass('disabled');
}, 3000);
}
},
error: function (data) {
$(".md-content .content.dialog-info").html("<h3>Произошла ошибка при отправлении. Попробуйте позже.</h3>");
$(".md-content .content.dialog-form").show();
setTimeout(function() {
$(".md-content .content.dialog-info").html("")
$('.md-content #name:input').val('');
$('.md-content #phone:input').val('');
$('.md-content #name-feed:input').val('');
$('.md-content #phone-feed:input').val('');
$(".md-content .content.dialog-form, .md-content .anyQuestion, .md-content .politica").show();
$(".md-close").trigger("click");
$(".dialog-button").removeClass('disabled');
}, 3000);
},
global: false
});
}
}
}
( function ( $ ) {
// Create a new instance of Slidebars
controller = new slidebars();
// Events
$( controller.events ).on( 'init', function () {
//console.log( 'Init event' );
} );
$( controller.events ).on( 'exit', function () {
//console.log( 'Exit event' );
} );
$( controller.events ).on( 'css', function () {
//console.log( 'CSS event' );
} );
$( controller.events ).on( 'opening', function ( event, id ) {
$('body').addClass('slidebars');
//console.log( 'Opening event of slidebar with id ' + id );
if(id == 'slidebar-1'){
wowLeftApear('#leftMenuMobile', 250);
}
} );
$( controller.events ).on( 'opened', function ( event, id ) {
//console.log( 'Opened event of slidebar with id ' + id );
} );
$( controller.events ).on( 'closing', function ( event, id ) {
//console.log( 'Closing event of slidebar with id ' + id );
$( '[canvas="container"]' ).removeClass( 'overflowhidden' );
} );
$( controller.events ).on( 'closed', function ( event, id ) {
$('body, html').removeClass('slidebars');
//console.log( 'Closed event of slidebar with id ' + id );
} );
// Initialize Slidebars
controller.init();
// Left Slidebar controls
// $( '#menumobileleft' ).on( 'click', function ( event ) {
// event.stopPropagation();
// // filterstate = $('.filter').css('display');
// $('.filter').hide();
// $('#chatra').hide();
// controller.open( 'slidebar-1' );
// $('.content-wrapper .content').removeClass('content-blurredFishfilter');
// } );
// $( '.js-close-left-slidebar,.mobile .menuHeader li' ).on( 'click', function ( event ) {//,.mobile .menuHeader li a
// if(filterstate !== undefined){
// $('.filter').css({'display': filterstate});
// }
// $('#chatra').show();
// controller.close( 'slidebar-1' );
// } );
// $( '.js-toggle-left-slidebar' ).on( 'click', function ( event ) {
// event.stopPropagation();
// controller.toggle( 'slidebar-1' );
// } );
// Right Slidebar controls
// $( '.cartPosition' ).on( 'click', function ( event ) {
// event.stopPropagation();
// if($('[canvas="container"]').hasClass( 'overflowhidden' )){
// if(filterstate !== undefined){
// $('.filter').css({'display': filterstate});
// }
// $('#chatra').show();
// controller.close( 'slidebar-2' );
// } else {
// $('#chatra').hide();
// // filterstate = $('.filter').css('display');
// $( '[canvas="container"]' ).addClass( 'overflowhidden' );
// $('#full_cart').removeClass('firststepmobile secondstepmobile');
// $('.filter').hide();
// controller.open( 'slidebar-2' );
// }
// } );
$( '.js-close-right-slidebar' ).on( 'click', function ( event ) {
event.stopPropagation();
if(filterstate !== undefined){
$('.filter').css({'display': filterstate});
}
controller.close( 'slidebar-2' );
} );
$( '.js-toggle-right-slidebar' ).on( 'click', function ( event ) {
event.stopPropagation();
if(filterstate !== undefined){
$('.filter').css({'display': filterstate});
}
controller.toggle( 'slidebar-2' );
} );
// Top Slidebar controls
// $( '.js-open-top-slidebar' ).on( 'click', function ( event ) {
// event.stopPropagation();
// controller.open( 'slidebar-3' );
// } );
// $( '.js-close-top-slidebar' ).on( 'click', function ( event ) {
// event.stopPropagation();
// controller.close( 'slidebar-3' );
// } );
// $( '.js-toggle-top-slidebar' ).on( 'click', function ( event ) {
// event.stopPropagation();
// controller.toggle( 'slidebar-3' );
// } );
// // Bottom Slidebar controls
// $( '.js-open-bottom-slidebar' ).on( 'click', function ( event ) {
// event.stopPropagation();
// controller.open( 'slidebar-4' );
// } );
// $( '.js-close-bottom-slidebar' ).on( 'click', function ( event ) {
// event.stopPropagation();
// controller.close( 'slidebar-4' );
// } );
// $( '.js-toggle-bottom-slidebar' ).on( 'click', function ( event ) {
// event.stopPropagation();
// controller.toggle( 'slidebar-4' );
// } );
// Close any
$( controller.events ).on( 'opened', function () {
$( '[canvas="container"]' ).addClass( 'js-close-any-slidebar' );
} );
$( controller.events ).on( 'closed', function () {
$( '[canvas="container"]' ).removeClass( 'js-close-any-slidebar' );
} );
$( 'body' ).on( 'click', '.js-close-any-slidebar, #leftMenuMobile a', function ( event ) {
event.stopPropagation();
//console.log('leftMenuMobile');
// if(filterstate !== undefined){
// $('.filter').css({'display': filterstate});
// }
// $('#chatra').show();
controller.close();
} );
// Initilize, exit and css reset
$( '.js-initialize-slidebars' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.init();
} );
$( '.js-exit-slidebars' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.exit();
} );
$( '.js-reset-slidebars-css' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.css();
} );
// Is and get
$( '.js-is-active' ).on( 'click', function ( event ) {
event.stopPropagation();
//console.log( controller.isActive() );
} );
$( '.js-is-active-slidebar' ).on( 'click', function ( event ) {
event.stopPropagation();
var id = prompt( 'Enter a Slidebar id' );
//console.log( controller.isActiveSlidebar( id ) );
} );
$( '.js-get-active-slidebar' ).on( 'click', function ( event ) {
event.stopPropagation();
//console.log( controller.getActiveSlidebar() );
} );
$( '.js-get-all-slidebars' ).on( 'click', function ( event ) {
event.stopPropagation();
//console.log( controller.getSlidebars() );
} );
$( '.js-get-slidebar' ).on( 'click', function ( event ) {
event.stopPropagation();
var id = prompt( 'Enter a Slidebar id' );
//console.log( controller.getSlidebar( id ) );
} );
// Callbacks
$( '.js-init-callback' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.init( function () {
//console.log( 'Init callback' );
} );
} );
$( '.js-exit-callback' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.exit( function () {
//console.log( 'Exit callback' );
} );
} );
$( '.js-css-callback' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.css( function () {
//console.log( 'CSS callback' );
} );
} );
// $( '.js-open-callback' ).on( 'click', function ( event ) {
// event.stopPropagation();
// controller.open( 'slidebar-1', function () {
// //console.log( 'Open callback' );
// } );
// } );
$( '.js-close-callback' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.close( function () {
//console.log( 'Close callback' );
} );
} );
$( '#leftMenuMobileBtn' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.toggle( 'slidebar-1', function () {
//console.log( 'Toggle callback' );
} );
} );
$( '#leftMenuMobileFilterBtn' ).on( 'click', function ( event ) {
event.stopPropagation();
controller.toggle( 'slidebar-2', function () {
//console.log( 'Toggle callback' );
} );
} );
} ) ( jQuery );