var lg = 'quiqqer/template-cologne',
USER_BUTTON_CLICKED = false;
window.addEvent('domready', function () {
"use strict";
require([
'qui/QUI',
'qui/utils/System'
], function (QUI, QUISystemUtils) {
// change default loader
QUI.setAttribute('control-loader-type', 'fa-circle-o-notch');
initMobileMenu();
initScrollToAnchor();
if (QUISystemUtils.iOSversion()) {
document.body.classList.add('iosFix');
}
if (document.body.hasClass('type-quiqqer-products-types-category')) {
initExpandCategoryContent();
setSidebarPosition();
}
/**
* toTop button
*/
if (document.getElements('[href=#top]')) {
var toTop = document.getElements('[href=#top]'),
buttonVisible = false;
// show on load after 1s delay
if (QUI.getScroll().y > 300) {
toTop.addClass('toTop__show');
buttonVisible = true;
}
// show button toTop after scrolling down
QUI.addEvent('scroll', function () {
if (QUI.getScroll().y > 300) {
if (!buttonVisible) {
toTop.addClass('toTop__show');
buttonVisible = true;
}
return;
}
if (!buttonVisible) {
return;
}
toTop.removeClass('toTop__show');
buttonVisible = false;
});
// scroll to top
toTop.addEvent('click', function (event) {
event.stop();
new Fx.Scroll(window).toTop();
});
}
var Header = document.getElement('.cologne-header');
require.config({
paths: {
Hammer : URL_OPT_DIR + 'bin/quiqqer-asset/hammerjs/hammerjs/hammer.min',
FastClick: URL_OPT_DIR + 'bin/quiqqer-asset/fastclick/fastclick/lib/fastclick'
}
});
require(['FastClick'], function (FastClick) {
FastClick.attach(document.body);
});
/**
* Sticky menu
* @type {boolean}
*/
var Menu = document.getElement('.cologne-header'),
TopBar = document.getElement('.topbar');
if (Menu) {
initMenu(Menu, TopBar);
}
/**
* Init basket
*/
if (document.getElement('.cologne-header-control-basket')) {
initBasket();
}
/**
* User icon
*/
if (TopBar) {
require([
'Locale',
'package/quiqqer/tooltips/bin/html5tooltips'
], function (QUILocale, html5tooltips) {
var Logo = Menu ? Menu.getElement('.logo') : null,
UserButton = document.getElement('.cologne-header-control-user');
if (!UserButton) {
return;
}
var UserButtonLoader = UserButton.getElement('.cologne-header-control-user-loader');
/**
* Login
*/
require([
'utils/Controls'
], function (QUIControlUtils) {
if (QUIQQER_USER.id) {
var UserIcon = document.getElement(
'[data-qui="package/quiqqer/frontend-users/bin/frontend/controls/UserIcon"]'
);
QUIControlUtils.getControlByElement(UserIcon).then(function (UserIconControl) {
UserIconControl.addEvent('load', function () {
userIconLoadEvent(UserIconControl, QUILocale);
});
});
}
UserButton.addEvents({
click: function (event) {
if (event) {
event.stop();
}
if (!QUIQQER_USER.id) {
if (USER_BUTTON_CLICKED) {
return;
}
USER_BUTTON_CLICKED = true;
createLoginWindow();
}
}
});
if (UserButtonLoader) {
moofx(UserButtonLoader).animate({
opacity: 0
}, {
callback: function () {
UserButtonLoader.destroy();
}
});
}
if ("QUIQQER_LOGIN_FAILED" in window && window.QUIQQER_LOGIN_FAILED) {
new LoginWindow({
maxHeight : 380,
social : false,
registration: false,
logo : Logo ? Logo.src : '',
events : {
onSuccess: function () {
window.location.reload();
}
}
}).open();
}
});
});
}
// region functions
/**
* Init menu
*/
function initMenu (Menu, TopBar) {
var showMenuFrom = TopBar ? TopBar.getSize().y : 0,
isMenuSticky = false,
SearchBtn = Menu.getElement('.search-button'),
SearchInput = TopBar ? TopBar.getElement('.template-search input[type="search"]') : null,
MenuWrapper = document.querySelector('.cologne-header-menu-wrapper'),
menuPos = MenuWrapper ? MenuWrapper.offsetTop : 0;
if (SHOW_MENU_AFTER_SCROLL_POS && SHOW_MENU_AFTER_SCROLL_POS.toInt() > 0) {
showMenuFrom = SHOW_MENU_AFTER_SCROLL_POS.toInt();
}
if (SearchBtn && SearchInput) {
const ActionSearchBtn = document.getElement('.quiqqer-products-search-suggest-form-button');
if (!ActionSearchBtn) {
return;
}
let clickEvent = function () {
new Fx.Scroll(window, {
onComplete: function () {
SearchInput.focus();
}
}).toTop();
};
if (QUI.getWindowSize().x < 767) {
// https://dev.quiqqer.com/quiqqer/template-cologne/-/issues/104
ActionSearchBtn.removeAttribute('type');
clickEvent = function () {
ActionSearchBtn.click();
};
}
SearchBtn.addEvent('click', clickEvent);
}
/**
* Stick menu to the top
*
* @param smooth {boolean} - helpful on page reload when the page is already scrolled
*/
function setMenuFixed (smooth) {
smooth = !!smooth;
if (smooth === true) {
Menu.setStyles({
position : 'fixed',
transform: 'translateY(-150px)'
});
moofx(Menu).animate({
transform: 'translateY(0)'
});
}
Menu.addClass('cologne-header-fixed');
document.body.addClass('header-fixed');
isMenuSticky = true;
}
/**
* Show search button
*/
var showSearchBtn = function () {
if (!SearchBtn) {
return;
}
moofx(SearchBtn).animate({
opacity : 1,
transform: 'scale(1)'
}, {
duration: 300,
equation: 'cubic-bezier(0.6, -0.4, 0.2, 2.11)'
});
};
/**
* Hide search button
*/
var hideSearchBtn = function () {
if (!SearchBtn) {
return;
}
moofx(SearchBtn).animate({
opacity : 0,
transform: 'scale(0)'
}, {
duration: 300
});
};
/**
* Set menu position to initial
*/
var removeMenuFixed = function () {
Menu.removeClass('cologne-header-fixed');
Menu.setStyle('position', null);
document.body.removeClass('header-fixed');
isMenuSticky = false;
};
// check on page load if menu should stick to the top
// delay 500ms for performance reasons on page load
setTimeout(() => {
if (QUI.getScroll().y > showMenuFrom) {
if (isMenuSticky) {
return;
}
let showMenuSmooth = false;
if (MenuWrapper && QUI.getScroll().y > MenuWrapper.offsetHeight + MenuWrapper.offsetTop) {
showMenuSmooth = true;
}
setMenuFixed(showMenuSmooth);
showSearchBtn();
}
}, 500)
QUI.addEvent('scroll', function () {
if (QUI.getScroll().y > showMenuFrom) {
if (isMenuSticky) {
return;
}
setMenuFixed(SHOW_MENU_SMOOTH);
showSearchBtn();
return;
}
if (!isMenuSticky) {
return;
}
// set menu position back on menu initial position
if (SET_MENU_POS_BACK_ON_INIT === true) {
if (QUI.getScroll().y <= menuPos) {
removeMenuFixed();
hideSearchBtn();
}
return;
}
// set menu position back depend on "show menu from" setting
removeMenuFixed();
hideSearchBtn();
});
}
/**
* Basket
*/
function initBasket () {
require([
'package/quiqqer/order/bin/frontend/controls/basket/Button'
], function (Basket) {
new Basket({
open : BASKET_OPEN.toInt(),
events: {
onCreate: function (Basket) {
var BasketNode = Basket.getElm(),
basketStyleCss = '';
if (BASKET_STYLE) {
basketStyleCss = 'basket-style-' + BASKET_STYLE;
}
// clear default content
BasketNode.set('html', '');
BasketNode.addClass('tpl-btn ' + basketStyleCss);
new Element('span', {
'class': 'quiqqer-order-basketButton-icon-custom',
html : '<span class="fa fa-shopping-basket"></span>'
}).inject(BasketNode);
new Element('span', {
'class': 'quiqqer-order-basketButton-quantity quiqqer-order-basketButton-batch-custom',
html : '0'
}).inject(BasketNode);
if (BASKET_STYLE && BASKET_STYLE === 'full') {
new Element('span', {
'class': 'quiqqer-order-basketButton-sum',
html : INITAL_BASKET_PRICE
}).inject(BasketNode);
}
document.getElement('.cologne-header-control-basket').set('html', '');
},
/**
* onShowBasketBegin event
*
* @param Basket
* @param pos - position of popup basket
* @param height - height of basket button
*/
showBasketBegin: function (Basket, pos, height) {
// move basket popup from bottom of the page to header
// it's better to manage for sticky header
Header.getElement('.cologne-header-control').adopt(Basket.$BasketContainer);
var headerHeight = Header.getSize().y;
// -1px because of header bottom border
pos.y = headerHeight - 1;
// reset button height
// see package/quiqqer/order/bin/frontend/controls/basket/Button.showSmallBasket()
height.y = 0;
Basket.$BasketContainer.setStyles({
right: 0 // right margin from .cologne-header-control-basket
});
// Do not scroll the page
Basket.$BasketContainer.addEvent('focus', function (event) {
event.preventDefault();
});
Basket.$BasketContainer.setStyles({
border: '1px solid #ddd'
});
}
}
}).inject(document.getElement('.cologne-header-control-basket'));
});
}
/**
* UserIcon load event
*
* @param UserIconControl
* @param QUILocale
*/
function userIconLoadEvent (UserIconControl, QUILocale) {
var Menu = UserIconControl.$Menu;
require([
'controls/users/LogoutWindow',
'qui/controls/contextmenu/Item',
'qui/controls/contextmenu/Separator'
], function (LogoutWindow, Item, Separator) {
Menu.appendChild(new Separator());
// own logout entry
Menu.appendChild(
new Item({
icon : 'fa fa-sign-out',
text : QUILocale.get(lg, 'frontend.usericon.menuentry.logout.label'),
events: {
click: function () {
createLogoutWindow(LogoutWindow);
}
}
})
);
});
UserIconControl.addEvent('onMenuShow', function (UserIconControl, MenuNode) {
MenuNode.setStyles({
left : null,
right: -25
});
});
}
/**
* Create and open logout window
*
* @param LogoutWindow
*/
function createLogoutWindow (LogoutWindow) {
new LogoutWindow({
class : 'cologne-logout-dialog',
title : false,
icon : false,
maxHeight: 350,
maxWidth : 400,
events : {
onOpen: function (Popup) {
var Content = Popup.getElm(),
ContentElms = [
Content.getElement('.qui-window-popup-content'),
Content.getElement('.qui-window-popup-buttons')
];
ContentElms.each(function (ContentElm) {
ContentElm.setStyle('opacity', 0);
});
var CancelButton = Content.getElement('button[name="cancel"]');
if (CancelButton) {
// CancelButton.removeClass('btn-light');
CancelButton.addClass('btn-secondary btn-outline');
}
// workaround due to the CancelButton.addClass
// to avoid the "flash" effect
(function () {
ContentElms.each(function (ContentElm) {
moofx(ContentElm).animate({
opacity: 1
});
});
}).delay(50);
}
}
}).open();
}
/**
* Create and open login popup
*/
function createLoginWindow (onlyLogin = false) {
USER_BUTTON_CLICKED = false;
require([
'Locale',
'utils/Controls',
'package/quiqqer/frontend-users/bin/frontend/controls/login/Window'
], function (QUILocale, QUIControlUtils, LoginWindow) {
new LoginWindow({
class : 'cologne-login-dialog',
title : false,
maxHeight: 550,
maxWidth : 400,
events : {
onOpen : function (LoginWindow) {
if (!REGISTER_URL && !onlyLogin) {
return;
}
if (onlyLogin) {
return;
}
var Elm = LoginWindow.getElm();
var CreateAccountWrapper = new Element('div', {
'class': 'login-popup-create-account-wrapper'
});
new Element('a', {
href: REGISTER_URL,
html: QUILocale.get(lg, 'template.popup.login.registration.button'),
}).inject(CreateAccountWrapper);
CreateAccountWrapper.inject(Elm.getElement('.qui-window-popup-content'));
},
onSuccess: function () {
window.location.reload();
}
}
}).open();
});
}
/**
* Menu mobile
*
* In mobile resolution (less than 767px) opens category menu button
* the mobile navigation instead category navigation.
*/
function initMobileMenu () {
if (QUI.getWindowSize().x >= 768) {
return;
}
let OpenCategoryBtn = document.getElement('.shop-category-menu-button'),
MenuElm = document.getElement('[data-qui="package/quiqqer/menu/bin/SlideOut"]');
if (!MenuElm) {
MenuElm = document.getElement('[data-qui="package/quiqqer/menu/bin/SlideoutAdvanced"]');
}
if (!MenuElm) {
console.debug('Neither SlideOut nor SlideoutAdvanced found.');
return;
}
if (!OpenCategoryBtn) {
console.debug('Open Category Button ".shop-category-menu-button" not found.');
return;
}
require(['utils/Controls'], function (Controls) {
Controls.getControlByElement(MenuElm).then(function (MenuControl) {
OpenCategoryBtn.removeEvents('click');
OpenCategoryBtn.addEvent('click', function () {
MenuControl.toggle();
});
});
});
}
/**
* Show content of category site after click on button
*/
function initExpandCategoryContent () {
var ButtonContainer = document.getElement('.quiqqer-category-content-button'),
Wrapper = document.getElement('.quiqqer-category-content-inner'),
Body = document.getElement('.quiqqer-category-content-inner-body'),
Bg = document.getElement('.quiqqer-category-content-inner-body__bg');
if (!ButtonContainer || !Wrapper || !Body) {
return;
}
var Button = ButtonContainer.getElement('button'),
realHeight = Body.getSize().y;
if (!Button) {
return;
}
if (Wrapper.getSize().y >= realHeight) {
// content is small, no button needed
Wrapper.setStyle('max-height', null);
Button.destroy();
if (Bg) {
Bg.destroy();
}
return;
}
(function () {
Button.setStyle('display', null);
moofx(Button).animate({
opacity: 1
}, {
duration: 200
});
}).delay(500);
Button.addEvent('click', function (event) {
event.stop();
moofx(Wrapper).animate({
maxHeight: realHeight
}, {
callback: function () {
moofx(ButtonContainer).animate({
opacity: 0
}, {
duration: 200,
callback: function () {
ButtonContainer.destroy();
}
});
if (Bg) {
moofx(Bg).animate({
opacity: 0
}, {
duration: 200,
callback: function () {
Bg.destroy();
}
});
}
Wrapper.setStyle('maxHeight', null);
}
});
});
}
/**
* Change position sticky to initial
*/
function setSidebarPosition () {
var Sidebar = document.getElement('.quiqqer-product-sidebar');
if (!Sidebar) {
return;
}
var sidebarHeight = Sidebar.getSize().y,
windowHeight = QUI.getWindowSize().y;
if (sidebarHeight > windowHeight - 60) {
Sidebar.setStyle('position', 'initial');
}
}
/**
* Find all anchors and set click event to smoothly scroll to the element.
* It works both with all HTML elements.
* Every element witch is not an <a> tag, needs "data-qui-target-id" or "data-qui-target-class" attribute.
* Target for <a> elements is always a # (hash) string
*
* Anchor settings:
* scrollToLink - [required] only elements with this css class will be considered
* data-qui-target="myTargetElement" - [optional] every valid css selector
* data-qui-offset="60" - [optional] scroll offset
*
* Examples:
* <a class="scrollToLink" href="#myElement">Scroll to myElement</a>
* <button class="scrollToLink" data-qui-target"#myElement">Scroll to element with ID myElement</button>
* <span class="scrollToLink" data-qui-target=".exampleParagraph" data-qui-offset="150">Scroll to element with CSS class exampleParagraph</span>
*/
function initScrollToAnchor () {
let links = document.querySelectorAll('.scrollToLink');
let getTarget = function (Link) {
if (Link.get('data-qui-target')) {
return document.querySelector(Link.get('data-qui-target'));
}
let href = Link.href;
if (!href || href.indexOf('#') === -1) {
return false;
}
let targetString = href.substring(href.indexOf('#') + 1);
if (targetString.length < 1) {
return false;
}
let TargetElm = document.getElementById(targetString);
if (!TargetElm) {
return false;
}
return TargetElm;
};
let clickEvent = function (Target, offset) {
new Fx.Scroll(window, {
offset: {
y: -offset
}
}).toElement(Target);
};
for (let Link of links) {
let TargetElm = getTarget(Link);
if (!TargetElm) {
continue;
}
let offset = Link.get('data-qui-offset');
if (!offset) {
offset = window.SCROLL_OFFSET ? window.SCROLL_OFFSET : 80;
}
Link.addEvent('click', function (event) {
event.stop();
clickEvent(TargetElm, offset);
});
}
}
// end region functions
});
});