https://www.wunderkarten.de/common/components-js/navbar.js

1$(function () {
2    var $navbar = $(".navbar");
3
4    var $isPhoneOrTablet = navigator.userAgent.match(/iPhone|iPad|iPod|Android|Opera Mini|IEMobile/i) != null;
5
6    if ($isPhoneOrTablet) {
7        $("body").addClass("is-touch");
8
9        if ($(".js-hide-on-phone-tablet").length) {
10            $(".js-hide-on-phone-tablet").hide();
11        }
12    } else {
13        if ($(".js-hide-on-desktop").length) {
14            $(".js-hide-on-desktop").hide();
15        }
16    }
17
18    if (!$("#headerlogin").length) {
19        $(".topbar-menu-right").find("#navbar-login").remove();
20    }
21    if (!$("#headerlogout").length) {
22        $(".topbar-menu-right").find("#navbar-logout").remove();
23    }
24
25    $navbar.find(".js-open-navbar-search").on("click", function (e) {
26        e.preventDefault();
27        e.stopImmediatePropagation();
28        var _self = $(this);
29        _self.toggle();
30        var target = _self.closest($navbar).find(".js-navbar-search-field");
31        target.toggle();
32    });
33
34    $navbar.find(".js-open-collapse").on("click", function (e) {
35        e.preventDefault();
36        var _self = $(this);
37        var target = _self.closest($navbar).find(".collapse");
38
39        target.toggle();
40
41        if (target.is(":visible")) {
42            $("html").css("overflowY", "hidden");
43        } else {
44            $("html").css("overflowY", "auto");
45        }
46    });
47
48    if ($(".js-open-topbar-basket-menu-mob").length) {
49        $(".js-open-topbar-basket-menu-mob").click(function () {
50            $(".js-topbar-basket-menu-mob").toggle();
51        });
52    }
53
54    if ($(".js-open-middlebar-menu-right-mob").length) {
55        $(".js-open-middlebar-menu-right-mob").click(function () {
56            $("body").toggleClass("scroll-lock");
57            $(".js-middlebar-menu-right").toggle();
58        });
59    }
60
61    if ($(".js-open-middlebar-menu-left-mob").length) {
62        $(".js-open-middlebar-menu-left-mob").click(function () {
63            $(".js-middlebar-menu-left").toggle();
64        });
65    }
66
67    $(".navbar")
68        .not(".navbar-style-1")
69        .find(".navbar-hamburger")
70        .on("click", function (e) {
71            e.preventDefault();
72            $(".collapse").toggle();
73            if ($(".js-middlebar-menu-right").length) {
74                $(".js-middlebar-menu-right").toggle();
75            }
76        });
77
78    $(window).load(function () {
79        if ($(".topbar-basket-mob").length) {
80            if ($("#navbar-basket").text().trim() == "0 items") {
81                $(".topbar-basket-menu-mob .basket-items-count").text("Je winkelmandje is leeg");
82            } else if ($("#navbar-basket").text().trim().substring(0, 2) == "1 ") {
83                $(".topbar-basket-menu-mob .basket-items-count").text("1 item in je winkelmandje");
84            } else {
85                $(".topbar-basket-menu-mob .basket-items-count").text(
86                    $("#navbar-basket").text() + "in je winkelmandje"
87                );
88            }
89        }
90    });
91
92    $navbar.find("#navbar-basket").html($("#headerbasket #basket_count").html());
93
94    $navbar.find(".js-dropdown-click").on("click", function (e) {
95        e.preventDefault();
96        var _self = $(this);
97        _self.closest(".js-dropdown").toggleClass("active");
98        var target = _self.closest(".js-dropdown").find(".js-dropdown-content");
99        target.toggle();
100    });
101
102    if ($isPhoneOrTablet) {
103        $navbar.find(".js-dropdown-hover").on("click", function (e) {
104            e.preventDefault();
105            var _self = $(this);
106            _self.closest(".js-dropdown").toggleClass("active");
107            var target = _self.closest(".js-dropdown").find(".js-dropdown-content");
108            target.toggle();
109        });
110    } else {
111        $navbar.find(".js-dropdown-hover").on("mouseenter", function (e) {
112            e.preventDefault();
113            var _self = $(this);
114            _self.closest(".js-dropdown").toggleClass("active");
115            var target = _self.closest(".js-dropdown").find(".js-dropdown-content");
116            target.toggle();
117        });
118    }
119
120    $navbar.find(".js-dropdown").on("mouseleave", function (e) {
121        e.preventDefault();
122        var _self = $(this);

123        _self.closest(".js-dropdown").removeClass("active");
124        var target = _self.closest(".js-dropdown").find(".js-dropdown-content");
125        target.hide();
126    });
127
128    onWindowSize();
129
130    $(window).resize(function () {
131        onWindowSize();
132    });
133});
134
135function onWindowSize() {
136    if ($(window).width() < 991) {
137        $(".basket-count-mob").text(function (index, text) {
138            return text.replace(" items", "");
139        });
140    }
141
142    if ($(window).width() > 992) {
143        $(window).scroll(function () {
144            if ($(document).scrollTop() > 75) {
145                $(".dropdown-content").hide();
146            }
147        });
148    }
149
150    if ($(document).width() < 767) {
151        $(window).scroll(function () {
152            if ($(document).scrollTop() > 50) {
153                $(".navbar .middlebar").not(".navbar.navbar-style-1 .middlebar").hide();
154                $(".navbar .topbar").not(".navbar.navbar-style-1 .topbar").addClass("topbar-border");
155                $(".navbar").not(".navbar.navbar-style-1").addClass("navbar-collapsed");
156            } else {
157                $(".navbar .middlebar").show();
158                $(".navbar .topbar").removeClass("topbar-border");
159                $(".navbar").removeClass("navbar-collapsed");
160            }
161        });
162    }
163}