201 lines
8 KiB
JavaScript
Vendored
201 lines
8 KiB
JavaScript
Vendored
if (document.querySelector('.content.menu')) {
|
|
function hide(el) {
|
|
el.style.height = "0px";
|
|
};
|
|
function slideUp(el) {
|
|
el.style.transition = "all 2s ease-in-out";
|
|
el.style.height = "0px";
|
|
};
|
|
function slideDown(el) {
|
|
el.style.transition = "all 2s ease-in-out";
|
|
el.style.height = 'inherit';
|
|
};
|
|
var menuData = {
|
|
tnsDefault: {
|
|
container: '',
|
|
items: 1.5,
|
|
controls: false,
|
|
nav: false,
|
|
center: true,
|
|
mouseDrag: true,
|
|
preventScrollOnTouch: 'auto',
|
|
prevButton: null,
|
|
nextButton: null,
|
|
responsive: {
|
|
350: {
|
|
items: 2.8
|
|
},
|
|
500: {
|
|
items: 3.6
|
|
},
|
|
768: {
|
|
controls: true
|
|
},
|
|
1024: {
|
|
items: 4,
|
|
}
|
|
},
|
|
events: {
|
|
touchStart: function (info) {
|
|
console.log('touch')
|
|
let tns = this;
|
|
let el = info.event.target.classList.contains('tns-item') ? info.event.target : info.event.target.parentElement;
|
|
el = el.classList.contains('tns-item') ? el : el.parentElement;
|
|
let container = el.parentElement.parentElement;
|
|
let overflow = __Gaul.detectElementOverflow(el, container);
|
|
setTimeout(function () {
|
|
if (overflow.collidedLeft) {
|
|
tns.goTo('prev');
|
|
}
|
|
if (overflow.collidedRight) {
|
|
tns.goTo('next');
|
|
}
|
|
}, 200)
|
|
}
|
|
}
|
|
},
|
|
addTns: function (selector) {
|
|
menuData.tnsDefault.container = selector;
|
|
let slider = tns(menuData.tnsDefault);
|
|
for (let eventName in menuData.tnsDefault.events) {
|
|
slider.events.on(eventName, menuData.tnsDefault.events[eventName].bind(slider));
|
|
}
|
|
},
|
|
genre: null,
|
|
productID: null,
|
|
productItem: null,
|
|
menuIsShown: false,
|
|
menuNotFound: false,
|
|
getProducts: function (callback) {
|
|
axios.get(window.product_from_menu)
|
|
.then(function (response) {
|
|
callback(response.data);
|
|
}).catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
},
|
|
getMenu: function (callback) {
|
|
axios.get(window.balanced_menu_url.replace('#genre#', menuData.genre).replace('#productID#', menuData.productID))
|
|
.then(function (response) {
|
|
callback(response.data);
|
|
}).catch(function (error) {
|
|
if (error.response.status == 404) {
|
|
callback(null)
|
|
} else {
|
|
console.log(error)
|
|
}
|
|
});
|
|
},
|
|
setActivableItem: function (items, callback) {
|
|
for (let item of document.querySelectorAll(items)) {
|
|
item.onclick = function (e) {
|
|
for (let item of document.querySelectorAll(items)) {
|
|
item.classList.remove('active');
|
|
}
|
|
item.classList.add('active');
|
|
callback(item);
|
|
};
|
|
}
|
|
},
|
|
setMenuInfo: function (item) {
|
|
let nomenu = document.getElementById('nomenu'),
|
|
menu = document.getElementById('menuSection'),
|
|
svg = menu.querySelector('svg'),
|
|
figure = menu.querySelector('figure'),
|
|
img = figure.querySelector('img'),
|
|
details = menu.querySelector('.details'),
|
|
entree = menu.querySelector('.entree'),
|
|
plat = menu.querySelector('.plat'),
|
|
dessert = menu.querySelector('.dessert');
|
|
|
|
menu.classList.add('show'); // For loading svg
|
|
img.setAttribute('src', '');
|
|
svg.classList.remove('fadeOut');
|
|
svg.classList.add('animated');
|
|
svg.classList.add('fadeIn');
|
|
figure.classList.remove('fadeInLeft');
|
|
figure.classList.add('fadeOut');
|
|
details.classList.remove('fadeInUp');
|
|
details.classList.add('fadeOut');
|
|
|
|
menuData.productID = item.dataset.id;
|
|
menuData.getMenu(function (balancedmenu) {
|
|
if (!balancedmenu) {
|
|
nomenu.classList.remove('display-none')
|
|
menu.classList.add('display-none')
|
|
menuData.menuNotFound = true;
|
|
} else {
|
|
nomenu.classList.add('display-none')
|
|
menu.classList.remove('display-none')
|
|
img.setAttribute('src', balancedmenu.picture.indexOf('/') !== 0 ? '/' + balancedmenu.picture : balancedmenu.picture);
|
|
entree.innerHTML = balancedmenu.entree;
|
|
plat.innerHTML = balancedmenu.meal;
|
|
dessert.innerHTML = balancedmenu.dessert;
|
|
menuData.menuNotFound = false;
|
|
}
|
|
svg.classList.remove('fadeIn');
|
|
svg.classList.add('fadeOut');
|
|
figure.classList.remove('fadeOut')
|
|
figure.classList.add('fadeInLeft');
|
|
details.classList.remove('fadeOut')
|
|
details.classList.add('fadeInUp');
|
|
menuData.menuIsShown = true;
|
|
});
|
|
}
|
|
};
|
|
|
|
// Hide products and menu
|
|
document.getElementById('productSection')
|
|
document.getElementById('menuSection')
|
|
|
|
// Set profiles carousel
|
|
menuData.tnsDefault.prevButton = document.querySelector('#profiles .control.left');
|
|
menuData.tnsDefault.nextButton = document.querySelector('#profiles .control.right');
|
|
// menuData.addTns('#profiles div');
|
|
|
|
// Click on genres
|
|
menuData.setActivableItem('.genreBtn', function (item) {
|
|
menuData.genre = item.dataset.genre;
|
|
item.classList.add('active');
|
|
document.getElementById('productSection').classList.add('show')
|
|
if (menuData.menuIsShown) {
|
|
menuData.setMenuInfo(menuData.productItem);
|
|
if (!menuData.menuNotFound) {
|
|
__Gaul.scrollToContent('menuSection', 110)
|
|
} else {
|
|
__Gaul.scrollToContent('nomenu', 110)
|
|
}
|
|
} else {
|
|
__Gaul.scrollToContent('productSection', 110)
|
|
}
|
|
});
|
|
|
|
// Set Time out to let JS parse inline vars in push scripts page
|
|
setTimeout(function () {
|
|
// Get all products on page load
|
|
// Set product carousel
|
|
// Set product click events
|
|
menuData.getProducts(function (data) {
|
|
let template = document.querySelector('#templates .produitBtn');
|
|
let container = document.querySelector('#products .produits');
|
|
document.querySelector('#products svg').remove();
|
|
for (let product of data) {
|
|
let newProd = template.cloneNode(true);
|
|
let img = newProd.querySelector('img');
|
|
let p = newProd.querySelector('p');
|
|
newProd.dataset.id = product.id;
|
|
img.setAttribute('src', product.picture.indexOf('/') !== 0 ? '/' + product.picture : product.picture);
|
|
p.textContent = product.name;
|
|
container.appendChild(newProd);
|
|
}
|
|
menuData.tnsDefault.prevButton = document.querySelector('#products .control.left');
|
|
menuData.tnsDefault.nextButton = document.querySelector('#products .control.right');
|
|
menuData.addTns(container);
|
|
menuData.setActivableItem('.produitBtn', function (item) {
|
|
menuData.productItem = item;
|
|
menuData.setMenuInfo(item);
|
|
__Gaul.scrollToContent('menuSection', 110)
|
|
});
|
|
});
|
|
}, 600);
|
|
}
|