var windowWidth = $(window).width();
var mainNavFixed = $('.m-mainNavigation--fixed');
var wrapperContainerFixed = $('.m-mainNavigation__col--fixed');
var oHeader = $('.o-header');
var mBreadcrumb = function () {
var __items = $('.m-breadcrumb__items');
var __item = $('.m-breadcrumb__item');
$('.m-breadcrumb__item--separator').remove();
if (__item.length > 5) {
__items.find('.m-breadcrumb__item').addClass('m-breadcrumb__item--hide');
__items.find('.m-breadcrumb__item:first-child, .m-breadcrumb__item:nth-child(2)').removeClass('m-breadcrumb__item--hide');
__items.find('.m-breadcrumb--active').removeClass('m-breadcrumb__item--hide');
$('
...').insertBefore('.m-breadcrumb__item:nth-child(3)');
}
$('.m-breadcrumb--toggle').on('click', function (event) {
event.preventDefault();
$('.m-breadcrumb__item--points').remove();
$('.m-breadcrumb__item--hide').removeClass('m-breadcrumb__item--hide');
});
};
var mMainNavigation = function () {
if (windowWidth > 992) {
try {
mainNavFixed.affix({
offset: {
top: function () {
var nav = mainNavFixed.parent();
var navOffsetTop = nav.offset().top;
var navHeight = nav.outerHeight();
var navTopPos = navOffsetTop + navHeight;
return (navTopPos);
}
}
});
} catch(err) {
$(window).scroll(function() {
if (window.pageYOffset > 163) {
mainNavFixed.addClass('affix');
} else {
mainNavFixed.removeClass('affix');
}
});
}
if (mainNavFixed.hasClass('affix')) {
oHeader.addClass('js-headerFixed');
$(window).trigger('init:datatable');
}
mainNavFixed.on('affix.bs.affix', function () {
oHeader.addClass('js-headerFixed');
$(window).trigger('init:datatable');
});
mainNavFixed.on('affix-top.bs.affix', function () {
oHeader.removeClass('js-headerFixed');
});
} else if (windowWidth < 991) {
wrapperContainerFixed.affix({
offset: {
top: function () {
var nav = wrapperContainerFixed.parent();
var navOffsetTop = nav.offset().top;
var navHeight = nav.outerHeight();
var navTopPos = navOffsetTop + navHeight;
return (navTopPos);
}
}
});
if (wrapperContainerFixed.hasClass('affix')) {
oHeader.addClass('js-headerFixed');
$(window).trigger('init:datatable');
}
wrapperContainerFixed.on('affix.bs.affix', function () {
oHeader.addClass('js-headerFixed');
$(window).trigger('init:datatable');
});
wrapperContainerFixed.on('affix-top.bs.affix', function () {
oHeader.removeClass('js-headerFixed');
});
}
$.fn.showOn = function (d) {
if (!this.length) {
return this;
}
this.each(function () {
if (d) {
$(this).show();
} else {
$(this).hide();
}
});
};
$.fn.btmenu = function (p) {
if (!this.length) {
return this;
}
var settings = $.extend({}, {
backLabel: 'Back'
}, p);
this.each(function () {
$(this).on('show-children', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).trigger({
type: 'show-sub-children',
title: event.title
});
}).on('hide-children', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).trigger({
type: 'hide-sub-children',
title: event.title
});
});
$(this).children('li').on('show-children', function (event) {
$(this).children('a').each(function () {
$(this).data('original-text', $(this).text());
$(this).removeClass('m-mainNavigation__link').addClass('m-mainNavigation__link--back');
$(this).find('span').text(settings.backLabel);
$(this).insertBefore($(this).parent().find('> ul'));
});
$(this).siblings('li').showOn(false);
$(this).children('ul').addClass('m-mainNavigation__dropdownItems--visible').showOn(true);
$(this).children('ul').removeClass('m-mainNavigation__dropdownItems--hidden').showOn(true);
}).on('hide-children', function (event) {
$(this).children('a').each(function () {
$(this).removeClass('m-mainNavigation__link--back').addClass('m-mainNavigation__link');
$(this).find('span').text($(this).data('original-text'));
});
$(this).siblings('li').showOn(true);
$(this).children('ul').removeClass('m-mainNavigation__dropdownItems--visible').showOn(false);
$(this).children('ul').addClass('m-mainNavigation__dropdownItems--hidden').showOn(false);
}).on('show-sub-children', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).children('a').hide();
}).on('hide-sub-children', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).children('a').show();
});
});
this.children('li').find('ul').showOn(false);
this.children('li').children('a').on('click', function (event) {
if ($(this).siblings('ul').length) {
event.preventDefault();
event.stopPropagation();
$(this).trigger({
type: ($(this).hasClass('m-mainNavigation__link--back') ? 'hide-children' : 'show-children'),
title: $(this).find('span').data('original-text')
});
}
});
};
var __itemsWrapper = $('.m-mainNavigation__itemsWrapper');
var __toggle = $('.m-mainNavigation__toggle');
// var __items = $('.m-mainNavigation__items');
var __link = $('m-mainNavigation__dropdownItem:not(.m-mainNavigation__dropdownItem--header) .m-mainNavigation__link');
if (windowWidth < 991) {
var label = __itemsWrapper.data('backlabel');
__itemsWrapper.find('ul').btmenu({
backLabel: label
});
__toggle.on('click', function () {
__itemsWrapper.toggleClass('m-mainNavigation__itemsWrapper--active');
wrapperContainerFixed.toggleClass('m-mainNavigation__col--active');
$(this).toggleClass('m-mainNavigation__toggle--active');
$('html, body').animate({
scrollTop: 0
}, 450);
});
__link.on('click', function (event) {
if ($(this).parent().has('ul')) {
event.preventDefault();
} else {
return false;
}
});
} else {
return false;
}
};
var mHeaderNavigationFlyout = function () {
var __buttonClose = $('.m-header_navigation_flyout__button--close');
var __link = $('.m-mainNavigation__link');
var __linkActive = $('.m-mainNavigation__link--active');
var showFlyout = function () {
__link.each(function () {
var target = $(this).data('target');
if (target) {
$(this).on('click', function (event) {
event.preventDefault();
if ($(this).hasClass('m-mainNavigation__link--active')) {
__buttonClose.trigger('click');
} else {
__buttonClose.trigger('click');
$(this).addClass('m-mainNavigation__link--active');
$(target).addClass('open');
$('html, body').animate({
scrollTop: 0
}, 550);
}
});
}
__buttonClose.on('click', function (event) {
event.preventDefault();
$(target).removeClass('open');
__link.removeClass('m-mainNavigation__link--active');
});
});
};
if (windowWidth > 992) {
showFlyout();
}
};
var mSearchNavigation = function () {
var $document = $(document);
var searchNavigation = $('.m-searchNavigation');
var __form = $('.m-searchNavigation__form');
var __inputWrapper = $('.m-searchNavigation__inputWrapper');
var __label = $('.m-searchNavigation__label');
var __submit = $('.m-searchNavigation__button--submit');
var __close = $('.m-searchNavigation__button--close');
var __searchField = $('.m-searchNavigation__searchField');
var __overlay = $('.m-searchNavigationResults');
var conversionBar = $('.m-conversion_bar');
var searchNavigationShow = function () {
searchNavigation.addClass('m-searchNavigation--open');
__inputWrapper.addClass('m-searchNavigation__inputWrapper--expanded');
__searchField.prop('placeholder', '');
__submit.addClass('m-searchNavigation__submit--active');
conversionBar.css('z-index', '1000');
};
var searchNavigationHide = function () {
searchNavigation.removeClass('m-searchNavigation--open');
__inputWrapper.removeClass('m-searchNavigation__inputWrapper--expanded');
__submit.removeClass('m-searchNavigation__submit--active');
conversionBar.removeAttr('style');
};
// var searchNavigationOverlayShow = function () {
// __overlay.removeClass('m-searchNavigationResults--hidden');
// };
var searchNavigationOverlayHide = function () {
__overlay.addClass('m-searchNavigationResults--hidden');
};
__submit.on('click', function (event) {
__inputWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (event) {
__searchField.focus();
});
});
__label.on('click', function (event) {
event.preventDefault();
searchNavigationShow();
__inputWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (event) {
__searchField.focus();
});
});
__form.on('submit', function (event) {
var searchNavigationStatus = searchNavigation.hasClass('m-searchNavigation--open');
if (!searchNavigationStatus) {
event.preventDefault();
searchNavigationShow();
} else {
return true;
}
});
__close.on('click', function (event) {
event.preventDefault();
event.stopPropagation();
searchNavigationHide();
searchNavigationOverlayHide();
__inputWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (event) {
__searchField.blur();
});
});
__searchField.on('keyup', function () {
if ($(this).val().length > 2) {
// searchNavigationOverlayShow();
} else searchNavigationOverlayHide();
});
$document.on('click', function () {
searchNavigationOverlayHide();
});
};
var mConversionBar = function () {
var __items = $('.m-mainNavigation .m-conversion_bar');
var __linkToTop = $('.m-conversion_bar__link--toTop');
if (windowWidth < 768) {
__items.find('.notification-white').removeClass('notification-white').addClass('notification-red');
}
if (windowWidth > 768) {
mainNavFixed.on('affix.bs.affix', function () {});
mainNavFixed.on('affix-top.bs.affix', function () {});
}
__linkToTop.on('click', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 450);
});
};
var HeaderSearch = function (element, options) {
var elem = $(element);
var obj = this;
var currentSearchTerm;
var defaultComplexItemsTemplate = '' +
'' +
' - ' +
' ' +
'
' +
' - ' +
'
{description}
' +
' {headline}
' +
' ' +
'
';
// Merge options with defaults
var settings = $.extend({
currlang: 'DE',
url: '/_res/js/searchresults_ki.json',
searchbackend: 'https://www.bosch-professional.com/boptbeusearchfrontend/de/de/search/search.htm?sparam=',
searchfield: '.m-searchNavigation__searchField',
content_area: '#header_search_results',
category: 'searchCategory',
char_min: 2,
max_results: 10,
typeahead: true,
complexItemsTemplate: defaultComplexItemsTemplate,
suggestionKeys: ['suggestions', 'categories', 'service'],
typeahead_cb: function () {
typeahead_cb();
},
display_ta_cb: function (data) {
display_ta_cb(data);
},
debug: true
}, options || {});
var gobutton = elem.find(settings.gobutton).css('cursor', 'pointer');
var searchfield = elem.find(settings.searchfield);
if (settings.typeahead) {
// Initzialize TA Markup ...
// Typeahead doesnt work with autocomplete!
searchfield.prop('autocomplete', 'off');
}
elem.on('keyup', settings.searchfield, function (e) {
if (settings.typeahead && typeof settings.typeahead_cb ===
'function') {
currentSearchTerm = searchfield.val().replace(
/<(?:.|\n)*?>/gm, '');
if (currentSearchTerm.length > settings.char_min) {
settings.typeahead_cb.call(this);
} else if (settings.debug) {
console.warn('TypeAhead suche started ab ' +
settings.char_min + ' Zeichen! Eingabe: "' +
searchfield.val().replace(/<(?:.|\n)*?>/gm,
'') + '"');
}
} else if (settings.debug) {
console.warn('No valid AJAX Callback function!');
}
});
// highlight current search term
var preg_quote = function (str) {
return (str + '').replace(
/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, '\\$1');
};
var highlight = function (data, search) {
return data.replace(new RegExp('(' + preg_quote(search) + ')',
'gi'), '$1');
};
var renderComplexSuggestionItems = function (data) {
var renderedItems = '';
var items = data.complexSuggests;
var itemsLength = data.complexSuggests.length;
for (var i = 0; i < itemsLength; i++) {
var item = items[i];
var text = settings.complexItemsTemplate;
for (var key in item) {
var search = new RegExp('\{' + key + '\}', 'ig');
text = text.replace(search, item[key]);
}
renderedItems += text;
}
return renderedItems;
};
var renderSuggestion = function (data, part) {
var suggestion = data[part];
var renderedItems = '';
if (suggestion && suggestion.links) {
var links = suggestion.links;
var linksLength = links.length;
if (linksLength > 0) {
renderedItems = '' + suggestion.label + '
';
renderedItems += '';
}
}
return renderedItems;
};
// Display Typeahead Results - Private method
var display_ta_cb = function (data) {
var output = '';
var outputComplexSuggests = '';
var wrapperComplexSuggests = '';
var outputAutoSuggests = '';
var outputCategorySuggests = '';
var wrapperAutoSuggests = '';
var label_from = 'from ';
if (data.complexSuggests.length < 1 && !data.suggestions && data.suggestions.links.length < 1) {
return;
}
outputComplexSuggests = renderComplexSuggestionItems(data);
// build wrapperComplexSuggests
wrapperComplexSuggests +=
'';
wrapperComplexSuggests += '
';
wrapperComplexSuggests += data.complexSuggestionHeadline + '
';
wrapperComplexSuggests += '
';
wrapperComplexSuggests +=
'
';
wrapperComplexSuggests += outputComplexSuggests;
wrapperComplexSuggests += '
';
wrapperComplexSuggests += '
';
// build wrapperAutoSuggests
wrapperAutoSuggests +=
'';
var suggestionKeysLength = settings.suggestionKeys.length;
for (var i = 0; i < suggestionKeysLength; i++) {
var suggestionKey = settings.suggestionKeys[i];
wrapperAutoSuggests += renderSuggestion(data, suggestionKey);
}
wrapperAutoSuggests += '
';
wrapperAutoSuggests += '
';
// build output
output += wrapperComplexSuggests + wrapperAutoSuggests;
$(settings.content_area).html(output);
$(settings.content_area).removeClass(
'm-searchNavigationResults--hidden');
};
// AJAX Typeahead callback - Private method
var typeahead_cb = function () {
$.ajax({
url: settings.url,
data: 'q=' + currentSearchTerm,
dataType: 'json',
cache: false,
async: true
})
.done(function (response) {
if (typeof settings.display_ta_cb === 'function') {
settings.display_ta_cb.call(this, response);
} else if (settings.debug) {
console.warn('No valid AJAX Callback function!');
}
})
.fail(function (response) {
settings.debug && console.warn('ERROR IN REQUEST\n' +
response.responseText);
});
};
};
/* ============= MAIN headsearch ============= */
$.fn.headsearch = function (options) {
// if nothing is selected, return nothing; can't chain anyway
if (!this.length) {
if (options && options.debug && window.console) {
console.warn('no objects found, returning nothing.');
}
return;
}
return this.each(function () {
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('headsearch')) return;
var headsearch = new HeaderSearch(this, options);
// Store plugin object in this element's data
element.data('headsearch', headsearch);
});
};
$(function () {
mBreadcrumb();
mMainNavigation();
mSearchNavigation();
mHeaderNavigationFlyout();
mConversionBar();
});
/* START Desktop Flyout */
var initFlyout = function (wrapper) {
wrapper.each(function (i, el) {
var trigger = $(this).find('> ul > li > a');
trigger.each(function (j, el) {
var siblings = $(this).closest('ul').find('>li').not(':eq(' + j + ')');
var triggerParent = $(this).closest('li');
var childwrapper = $(this).next();
var backlink = childwrapper.find(' > .backlink');
var hasSublevel = childwrapper.length;
var isChild = $(this).parent().is('li');
$(this).on('click', function (event) {
// console.log('trigger Flyout');
if (hasSublevel) {
event.preventDefault();
if (isChild) {
triggerParent.removeClass('hidden').addClass('visible');
}
$(this).removeClass('visible').addClass('hidden');
siblings.removeClass('visible').addClass('hidden');
childwrapper.removeClass('hidden').addClass('visible');
// hide all backlinks and list-headlines
$('.backlink').removeClass('visible').addClass('hidden');
$('.list-headline').removeClass('visible').addClass('hidden');
// show current backlink and list-headline
$(this).next().find('.backlink').removeClass('hidden').addClass('visible');
$(this).next().find('.backlink').next().removeClass('hidden').addClass('visible');
} else {
// trigger regular link
console.log('no submenu found > trigger regular link');
// return false;
}
});
// backlink
if (backlink.length) {
// trigger backlink
backlink.on('click', function (event) {
event.preventDefault();
var currentWrapper = $(this).parent();
var currentSiblings = $(this).closest('ul').find('>li');
var currentTrigger = $(this).closest('li').find('>a');
var parentBacklink = $(this).closest('ul').parent().find('> .backlink');
currentWrapper.removeClass('visible');
currentWrapper.find('li').removeClass('hidden').addClass('visible');
currentSiblings.removeClass('hidden').addClass('visible');
currentTrigger.removeClass('hidden');
$('.backlink').removeClass('visible').addClass('hidden');
if (parentBacklink.length) {
parentBacklink.removeClass('hidden').addClass('visible');
// list-headline
parentBacklink.next().removeClass('hidden').addClass('visible');
} else {
// reset flyoutgrid on click of top level backlink
changeFlyoutGrid($('.m-header_navigation_flyout'), 'twoTen', $('.m-header_navigation_flyout .headline.hl4'));
}
});
}
});
});
};
var changeFlyoutGrid = function (flyout, type, categoryheadline) {
if (flyout.length) {
// col-xs-12
if (type === 'full') {
flyout.find('.col-xs-2').addClass('hidden');
flyout.find('.col-xs-10').removeClass('col-xs-10').addClass('col-xs-12');
categoryheadline.addClass('hidden');
} else {
// col-xs-2 col-xs-10
if (flyout.find('.col-xs-12').length) {
flyout.find('.col-xs-12').removeClass('col-xs-12').addClass('col-xs-10');
flyout.find('.col-xs-2').removeClass('hidden');
categoryheadline.removeClass('hidden');
}
}
}
};
var resetFlyout = function () {
$('.m-header_navigation_flyout *').not('li').removeClass('visible').removeClass('hidden');
$('.m-header_navigation_flyout li').removeClass('hidden').addClass('visible');
$('.m-header_navigation_flyout ul:first-child').closest('.m-header_navigation_flyout__items').addClass('visible');
changeFlyoutGrid($('.m-header_navigation_flyout'), 'twoTen', $('.m-header_navigation_flyout .headline.hl4'));
};
$(document).ready(function () {
initFlyout($('.m-header_navigation_flyout__items'));
// reset flyout
$('.m-header_navigation_flyout__button--close').on('click', function (event) {
resetFlyout();
});
// change flyoutgrid on click of top level li>a
$('.m-header_navigation_flyout ul:first-child>li>a:not(:only-child)').on('click', function (event) {
// event.preventDefault();
changeFlyoutGrid($('.m-header_navigation_flyout'), 'full', $('.m-header_navigation_flyout .headline.hl4'));
});
});
/* END Desktop Flyout */