https://www.silicon.fr/wp-content/themes/kamino/assets/dot-net/js/header-skin.js?ver=1789999041

1/*! Sil Settings */
2
3/* ######################################################### */
4/*    Hauteur de la barre de header quand elle est en sticky minify
5 *    Défini par site
6/* ######################################################### */
7
8function getMainHeaderMinHeight() {
9    // Pour les navigateurs avec un width <640 on n'applique pas de marge - Request 11360
10    if (window.innerWidth <= 640) {
11        return 50;
12    }
13    return 62;
14}
15
16/*! ToolBox */
17
18////////////////////////////////////////////////////////////////////////////////////////////////////////////
19// Get ViewPortSize
20////////////////////////////////////////////////////////////////////////////////////////////////////////////
21
22function viewportSize() {
23    var d = document.documentElement;
24    return {
25        height: d.clientHeight,
26        width: d.clientWidth
27    };
28}
29
30/*! headerOpt */
31
32// Version optimisés pour ne pas créer de décalage dans la structure du site
33
34jQuery(function () {
35    // Listener sur le scroll pour updater le comportement du menu notamment en fonction de la présence de pub
36    jQuery(window).scroll(function () {
37        nmg_ads_menu();
38    });
39
40    // Calage par défaut au chargement de la page
41    nmg_ads_menu();
42
43    var buttonactu = jQuery('#buttonactu');
44    var listederoulante = jQuery('.liste-deroulante');
45
46    if (buttonactu.length && listederoulante.length) {
47        buttonactu.click(function () {
48            buttonactu.toggleClass('active');
49            listederoulante.toggleClass('active');
50
51        });
52    }
53});
54
55/* ######################################################### */
56/* Gestion du placement des pub / menu */
57/* ######################################################### */
58window.previousY = 0;
59
60function nmg_ads_menu() {
61    // Listener sur le scroll pour updater le comportement du menu notamment en fonction de la présence de pub
62
63    // Activate Debug
64    var url = document.location;
65    var debug = false;
66    var strippedUrl = url.toString().split('#debug');
67    if (strippedUrl.length > 1) {
68
69        debug = true;
70    }
71
72    // TODO: Dev mode to remove before MEP
73
74    // Point de rupture à partir duquel le menu n'est plus en minify par défaut
75    var minViewPortSizeHeaderMinifiy = 1000;
76    var myViewportSize = viewportSize();
77
78    var scrollY = window.scrollY;
79    var mainHeader = jQuery('#main-header');
80
81    var isScrollUp = scrollY < window.previousY;
82    var isScrollDown = scrollY > window.previousY;
83
84    var header = mainHeader;
85    var recherche = jQuery('#search-form');
86
87    var conteneur= jQuery('#main');
88
89    const habillageHeight = 200;
90
91    // Hauteur quand la barre est en sticky minify
92    // Défini dans le fichier de setting js par site
93    var mainHeaderHeight = mainHeader.outerHeight();
94
95    if (myViewportSize.width > minViewPortSizeHeaderMinifiy) {
96
97        var habillage = jQuery('#publink');
98
99        if (debug) {
100            console.log("###################################");
101            console.log("scrollY => " + scrollY + " => Previous scrollY " + window.previousY);
102            console.log("isScrollUp => " + isScrollUp);
103            console.log("isScrollDown => " + isScrollDown);
104            console.log("=> Debug mainHeaderHeight (" + mainHeaderHeight + ")> getMainHeaderMinHeight() (" + getMainHeaderMinHeight() + ")");
105        }
106
107        // Déplacement avant que le menu soit Sticky Minify
108        const scrollBeforeMinify = 149;
109
110        // Si le menu n'est pas en minify
111        if (mainHeaderHeight > getMainHeaderMinHeight()) {
112            // Si le scroll est < au point de rupture qui passe le menu en sticky / minify
113            if (scrollY < scrollBeforeMinify) {
114
115                if (habillage.length) {
116                    var backgroundPos = habillage.css('backgroundPosition').split(" ");
117                    var xPos = backgroundPos[0];
118
119                    var newPos = mainHeaderHeight - scrollY;
120                    habillage.css('backgroundPosition', xPos + ' ' + newPos + 'px');
121                    conteneur.css("position", "relative");
122                }
123
124                conteneur.css("margin-top", 0);
125
126                if (habillage.length) {
127                    // S'il existe un habillage on ajout un margin top au footer
128                    jQuery("#footer").css("margin-top", habillageHeight);
129
130                    // S'il existe un habillage on décale la hauteur du site
131                    conteneur.css("top", 0);
132                    nmg_adapt_skin();
133                }
134            }
135            else if (scrollY > scrollBeforeMinify) {
136                // Si le scroll est > au point de rupture qui passe le menu en sticky / minify
137
138                if (debug) console.log("Scroll > " + scrollBeforeMinify);
139
140                // Ajout des class permettant de mettre le menu en sticky / minify
141                mainHeader.addClass('fixed-header');
142                // Passage en minify
143                header.addClass('minify');
144                recherche.addClass('minify');
145
146                // Passage minify - Suppression de la la class non-minify utilisée pour la gestion des styles du mobile
147                header.removeClass('none-minify');
148
149                // On cache l'élément haut du menu (celui contenant le logo desktop)
150                jQuery('#bandeau-logo-wrap-contenus').hide();
151

152                // On affiche le logo pour la version minify
153                jQuery('#logo-minify').show();
154
155                // S'il existe un habillage on ajout un margin top
156                if (habillage.length) {
157                    if (debug) {
158                        console.log(" conteneur => top 189");
159                    }
160                    conteneur.css("top", 189);
161                    jQuery("#footer").css("margin-top", 189);
162                    habillage.css('backgroundPosition', '50% 50px');
163                    nmg_adapt_skin();
164
165                } else {
166                    // Pas d'habillage - Compensation du decalage lié au changement d'état du menu
167                    // Qui passe en flotant => Perte de 189 pixels
168                    conteneur.css("margin-top", 189);
169                }
170            }
171        }
172        else if (mainHeaderHeight == getMainHeaderMinHeight()) {
173
174            // Si le menu est minify
175            if (debug) {
176                console.log("mainHeaderHeight (" + mainHeaderHeight + ") == getMainHeaderMinHeight() (" + getMainHeaderMinHeight() + ")");
177            }
178
179            var ruptpureScrollDown = scrollBeforeMinify + getMainHeaderMinHeight();
180            var ruptpureScrollUp = habillageHeight - getMainHeaderMinHeight();
181            habillage.css('backgroundPosition', '50% 50px');
182
183            if (scrollY > ruptpureScrollDown && isScrollDown) {
184
185                if (debug) {
186                    console.log("scrollY (" + scrollY + ") > ruptpureScrollDown (" + ruptpureScrollDown + ") && scrollDown ");
187                }
188
189                // Si il existe un habillage
190                if (habillage.length) {
191                    if (debug) {
192                        console.log("conteneur => top 189");
193                    }
194                    conteneur.css("top", 189);
195                    nmg_adapt_skin();
196                }
197            }
198
199            // ruptpureScrollUp  => 149
200            else if (scrollY <= ruptpureScrollUp && isScrollUp) {
201
202                // Suppressionn des class fixed et minify
203                mainHeader.removeClass('fixed-header');
204                header.removeClass('minify');
205                recherche.removeClass('minify');
206
207                // Passage en non minify - Ajout de la class non-minify pour la gestion des styles du mobile
208                header.addClass('none-minify');
209
210                if (debug) {
211                    console.log("scrollY<=" + ruptpureScrollUp + " - Suppression minify (" + scrollY + ")");
212                }
213
214                // Affichage menu avec le logo desktop
215                jQuery('#bandeau-logo-wrap-contenus').show();
216                conteneur.css("margin-top", 0);
217                conteneur.css("top", 0);
218                jQuery('#logo-minify').hide();
219                nmg_adapt_skin();
220
221            }
222        }
223    }
224    else {
225        // Nettoyage des compensations desktop sur mobile
226        conteneur.css("top", 0);
227        conteneur.css("margin-top", 0);
228        mainHeader.removeClass("fixed-header");
229        header.removeClass("minify");
230        recherche.removeClass("minify");
231        jQuery("#bandeau-logo-wrap-contenus").show();
232        jQuery("#logo-minify").hide();
233    }
234
235    window.previousY = scrollY;
236};
237
238function nmg_adapt_skin() {
239    const $skin = jQuery('.megabanner');
240    let $fakeSkin = $skin.find('.fake-skin');
241    if(!jQuery('body').hasClass('skin-habillage')) {
242        if($fakeSkin) {
243            $skin.css({
244                height: 'auto',
245            });
246            $fakeSkin.remove();
247        }
248        return;
249    }
250    const $habillage = jQuery('#publink');
251    const skinBg = $habillage.css('backgroundImage');
252    const skinBgPos = $habillage.css('backgroundPosition');
253    const $header = jQuery('#main-header');
254
255    if (!$fakeSkin.length) {
256        $header.css({
257            'margin-bottom': '0px',
258        });
259        $fakeSkin = jQuery('<div class="fake-skin"></div>').appendTo($skin);
260
261        $skin.css({
262            position: 'relative',
263            overflow: 'hidden',
264            height: '200px',
265        });
266
267        $fakeSkin.on('click', function () {
268            $habillage.get(0).click();
269        });
270    }
271
272    $fakeSkin.css({
273        position: 'absolute',
274        inset: 0,
275        backgroundImage: skinBg,
276        backgroundRepeat: 'no-repeat',
277        backgroundAttachment: 'fixed',
278        backgroundPosition: skinBgPos,
279        cursor: 'pointer',
280    });
281}
282
283var header = (function () {
284    'use strict';
285
286    var init,
287        toggleMenuBtn,
288        menu,
289        searchInput,
290        openClose,
291        recherche,
292        rechercheZone,
293        observe,
294        option,
295        window;
296
297    openClose = function (evt) {
298
299        switch (evt.target.id) {
300            case 'search-btn':
301                rechercheZone.classList.toggle("open");
302                menu.classList.remove("main-mobile");
303                jQuery("#autoSuggest-contenus").html();
304                jQuery("#searchInput").val('');
305                if (option) { option.classList.remove("open"); }
306                searchInput.focus();
307                break;
308            case 'account':
309                if (option) option.classList.toggle("open");
310                rechercheZone.classList.remove("open");
311                jQuery("#searchInput").val('');
312                jQuery("#autoSuggest-contenus").html('');
313                break;
314            case 'open-close-menu':
315                menu.classList.toggle("main-mobile");
316                rechercheZone.classList.remove("open");
317                jQuery("#autoSuggest-contenus").html('');
318                jQuery("#searchInput").val('');
319                if (option) { option.classList.remove("open"); }
320                break;
321            case 'searchInput':
322                break;
323            case 'searchHeader':
324                break;
325            case 'sugg':
326                break;
327            default:
328                rechercheZone.classList.remove("open");
329                jQuery("#autoSuggest-contenus").html('');
330                jQuery("#searchInput").val('');
331                if (option) { option.classList.remove("open"); }
332                break;
333        }
334    };
335
336    function initHeader() {
337        console.debug("FUNCTION initHeader");
338        toggleMenuBtn = document.getElementById('open-close-menu');
339        menu = document.getElementById('main-header');
340        rechercheZone = document.getElementById('recherche-zone');
341        searchInput = document.getElementById("searchInput");
342        option = document.getElementById('option');
343

344        if (jQuery("#recherche-zone").length) {
345            document.addEventListener('click', openClose);
346        }
347
348    };
349
350    initHeader();
351
352}());
353
354/* ######################################################### */
355/* Collapse du menu de naivagation si trop d'elements present*/
356/* ######################################################### */
357
358function af_resize_menu_edi() {
359    console.debug('FUNCTION af_resize_menu_edi');
360
361    var menuSize = 0;
362    var menuLimit = 0;
363    var _navChildrenSize = 0;
364    var _newDropDownMenu = '';
365    var storageItems = '';
366
367    var itemsNav = document.getElementById('main-menu');
368    if (itemsNav == null) return 0;
369
370    _navChildren = itemsNav.children;
371    menuLimit = document.getElementById('sous-nav').clientWidth - 20;
372
373    // D�tection menu Sticky ou pas
374    mainHeader = document.getElementById('main-header');
375
376    // Pas de gestion en mode sticky (notament pour le responsive)
377    if (mainHeader.className.indexOf("minify") > -1) {
378        return 0;
379
380        //menuSize = document.getElementById('header-categ').clientWidth;
381        //cta = document.getElementById("cta").clientWidth;
382        //menuLimit = menuSize - cta;
383        //_navChildrenSize = itemsNav.children.length;
384    }
385    else {
386        menuSize = itemsNav.offsetWidth;
387    }
388
389    var j = _navChildrenSize - 1;
390    if (menuSize > menuLimit) {
391        menuLimit -= 50; // Space for dropdown menu 
392
393        while (menuSize > menuLimit && j >= 0) {
394            document.getElementById('main-menu').style.overflow = 'visible';
395            if (!_navChildren[j].className.match(/visible|selected/i) && _navChildren[j].getAttribute('id') !== 'dropdown') {
396                _navChildren[j].style.display = 'none';
397                _newDropDownMenu = '<li>' + _navChildren[j].innerHTML + '</li>\r\n' + _newDropDownMenu;
398                menuSize = itemsNav.offsetWidth;
399            }
400            j--;
401        }
402        // console.log('_newDropDownMenu', _newDropDownMenu);
403        if (!document.getElementById('dropdown')) {
404            var _wrapper = document.createElement('li');
405            _wrapper.id = 'dropdown';
406            _wrapper.innerHTML += '<a href="javascript: void(0);" id="opener">+</a>';
407            _wrapper.innerHTML += '<div id="dropdown-items"><ul>' + _newDropDownMenu + '</ul></div>';
408            itemsNav.appendChild(_wrapper);
409        } else {
410            document.getElementById('dropdown-items').getElementsByTagName('ul')[0].innerHTML = _newDropDownMenu;
411        }
412    }
413}
414
415function resizeMenu() {
416    console.debug("FUNCTION resizeMenu");
417    var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
418    var dropDown = document.getElementById('dropdown');
419    if (dropDown) {
420        dropDown.parentNode.removeChild(dropDown);
421        dropDown = '';
422    }
423
424    var itemsNav = document.getElementById('main-menu');
425    if (itemsNav != null) {
426        var _navChildren = itemsNav.children;
427        var _navChildrenSize = itemsNav.children.length;
428        for (var i = 0; i < _navChildrenSize; i++) {
429            _navChildren[i].style.display = '';
430        }
431    }
432
433    af_resize_menu_edi();
434}
435
436// Launch resize once page completly load - Otherwise size elements are not correct  
437window.onload = (event) => {
438    // Init 
439    resizeMenu();
440
441    // Recalc menu on resize
442    var res = window.addEventListener('resize', function () {
443        resizeMenu();
444    }, false);
445
446    console.log("page is fully loaded");
447};
448
449/* ######################################################### */
450/* / collapse du menu de naivagation si trop d'�l�ments pr�sent*/
451/* ######################################################### */