https://www.4dox.nl/user/templates/static-assets/js/modules/top-menu.js?build=601

1
2class TopMenu {
3
4    constructor() {
5        this.elementID = '#modules-top-menu';
6        this.init();
7
8    }
9
10    init() {
11        this.element = $(this.elementID);
12        if (this.element.length) {
13            var a = $('#modules-top-menu-currency');
14            if (a.length) {
15                /*
16                 * Máme změnu měny, nadefinujeme
17                 */
18                a.find('.modules-top-menu-set-currency').each(function () {
19                    $(this).click(function (e) {
20                        e.preventDefault();
21                        nody.modules.TopMenu.setCurrency($(this).data('code'));
22                    });
23                });
24            }
25        }
26        // init priority menu
27        this.updateMenu();
28
29        $(window).on('resize', () => {
30            this.updateMenu();
31        });
32        this.initCenterDropdownLayer();
33    }
34    initCenterDropdownLayer() {
35        var self = this;
36
37        var $layer = $('#modules-top-menu-dropdown-layer');
38        if (!$layer.length) {
39            // když layer není, nemá cenu pokračovat
40            return;
41        }
42
43        // otevření jakéhokoliv dropdownu v CENTER
44        this.element.on('shown.bs.dropdown', '.modules-top-menu-center .modules-top-menu-item', function () {
45
46            var $item = $(this);
47            var $toggle = $item.children('.dropdown-toggle');
48            var $menu = $item.children('.dropdown-menu');
49
50            if (!$toggle.length || !$menu.length) {
51                return;
52            }
53
54            // uložíme, kam to vrátit
55            $menu.data('tm_parent', $item);
56
57            // přesun do layeru (stále v headeru, ne v body)
58            $layer.append($menu);
59
60            // pozice podle toggle
61            var rect = $toggle[0].getBoundingClientRect();
62
63            // základně pod togglem
64            var top = rect.bottom + window.scrollY;
65            var left = rect.left + window.scrollX;
66
67            // aby mělo menu aspoň šířku togglu
68            var minW = $toggle.outerWidth();
69
70            $menu.css({
71                top: top + 'px',
72                left: left + 'px',
73                minWidth: minW + 'px'
74            });
75        });
76
77        // zavření – vrátíme dropdown zpět tam, kde byl
78        this.element.on('hidden.bs.dropdown', '.modules-top-menu-center .modules-top-menu-item', function () {
79            var $item = $(this);
80
81            // v momentě hidden už menu není child itemu (je v layeru), musíme ho najít podle uloženého parenta
82            var $menus = $('#modules-top-menu-dropdown-layer .dropdown-menu');
83            $menus.each(function () {
84                var $m = $(this);
85                var $p = $m.data('tm_parent');
86                if ($p && $p.length && $p[0] === $item[0]) {
87                    $p.append($m);
88                    $m.removeAttr('style'); // uklidíme fixed pozici
89                    $m.removeData('tm_parent');
90                    return false;
91                }
92            });
93        });
94    }
95    updateMenu() {
96        var $center = this.element.find('.modules-top-menu-center > ul');
97        var $centerSize = this.element.find('.modules-top-menu-center');
98        if (!$center.length) {
99            return;
100        }
101
102        var $moreItem = $center.find('.modules-top-menu-more');
103        var $moreMenu = $moreItem.find('.dropdown-menu');
104
105        // reset
106        $moreMenu.empty();
107        $moreItem.addClass('d-none');
108
109        var availableWidth = $centerSize.width();
110        var usedWidth = 0;
111
112        var $items = $center.children('li').not('.modules-top-menu-more');
113        $items.removeClass('d-none');
114
115        /* ============================
116         🔑 KLÍČOVÁ ČÁST – REZERVACE
117         ============================ */
118
119        // dočasně zobrazíme "Více", abychom znali jeho šířku
120        $moreItem.removeClass('d-none').css('visibility', 'hidden');
121        var moreWidth = $moreItem.outerWidth(true);
122        $moreItem.addClass('d-none').css('visibility', '');
123
124        // odečteme místo pro "Více"
125        availableWidth -= moreWidth;
126
127        /* ============================ */
128
129        $items.each(function (index) {
130            var $li = $(this);
131            usedWidth += $li.outerWidth(true);
132
133            if (usedWidth > availableWidth) {
134                $moreItem.removeClass('d-none');
135
136                $items.slice(index).each(function () {
137                    var $hidden = $(this);
138                    var $a = $hidden.find('a').first();
139
140                    if (!$a.length) {
141                        return;
142                    }
143
144                    var $dropdownLink = $('<a></a>')
145                            .addClass('dropdown-item')
146                            .attr('href', $a.attr('href'))
147                            .text($.trim($a.text()));
148
149                    if ($a.attr('target')) {
150                        $dropdownLink.attr('target', $a.attr('target'));
151                    }
152
153                    $moreMenu.append($dropdownLink);
154                    $hidden.addClass('d-none');
155                });
156
157                return false; // break
158            }
159        });
160    }
161
162    setCurrency(_code) {
163        if (_code + '' === '') {
164            return false;
165        }
166        Spinner('show');
167        var _data = new Object();
168        _data.currency_code = _code;
169        _data.url = nody.functions.append_url('/action/shop/set-currency/');
170        $.post(_data.url, _data, function () {
171            window.location.reload();
172        }).fail(function () {
173            window.location.reload();
174        });
175    }
176
177}
178
179nody.modules.TopMenu = new TopMenu();