https://www.bnf.fr/themes/custom/bnfsi/js/archeDeNavigation.js?v=8.9.20

1/**
2 * Fonctions relatives au fonctionnement de l'arche de navigation
3 */
4$(function () {
5  var archenav = {
6
7    /**
8     * Ouverture de l'arche de navigation
9     */
10    openArchenav: function () {
11      $("#archenav").addClass("open");
12      $("#overlay").addClass("open");
13      $(document.body).addClass("overflow-y-hidden");
14
15      $(".sidebar-wrapper").width(110);
16      $(".sidebar-wrapper").css("z-index", 500);
17      $(".sidebar-wrapper > div.top > button").css("display", "none");
18
19      // $.Callbacks().fire(archenav.refresh());
20
21      // $(document).ajaxComplete(function() {
22      //   alert('OPEN');
23      //   archenav.refresh();
24      // $(".slider-agenda-archenav").slick('refresh');
25      // });
26
27      /** ACCESSIBILITE **/
28      $('.bottom .sidebar-tools a[role="button"]').each(function () {
29        $(this).attr('aria-expanded', false);
30      });
31      $(this).attr('aria-expanded', true);
32
33
34
35
36      $(document).ajaxSuccess(function() {
37        $('.sidebar-tools a').removeClass( "show-legend-arche");
38        // alert('OK2');
39        /* Placement du focus sur la crois de fermeture */
40        $('#archenav-close button').focus();
41        // archenav.intitiateSlider();
42        // $(".slider-agenda-archenav").slick('refresh');
43        archenav.refresh();
44        // replaceImgToSvg(1);
45
46        archenav.instantiateScrollbar();
47
48        /* Aria-current = false avant mettre le true */
49        $('#arche_nav_lieu .ajax-link').each(function () {
50          $(this).attr('aria-current', false);
51        });
52        /* Aria-current = true sur l'élément actif */
53        $("#arche_nav_lieu li.place.active a").attr('aria-current', true);
54      });
55
56
57
58      // $.when($.ajax()).then(function () {
59      //   // alert('WHEN');
60      //   archenav.refresh();
61      // });
62    },
63
64    /**
65     * Fermeture de l'arche de navigation
66     */
67    closeArchenav: function () {
68      function close() {
69        $("#archenav").removeClass("open");
70        $("#overlay").removeClass("open");
71        $(document.body).removeClass("overflow-y-hidden");
72        $(".sidebar-wrapper").width(74);
73        $(".sidebar-wrapper").css("z-index", 4);
74        $(".sidebar-wrapper > div.top > button").css("display", "block");
75        // setAriaExpanded($('.bottom .sidebar-tools a'));
76        $('.bottom .sidebar-tools a').each(function () {
77          $(this).attr('aria-expanded', false);
78
79        });
80        $('.bottom .sidebar-tools .ajax-link.active').focus();
81      };
82
83
84      /**
85       * Fermeture de l'arche de navigation grâce à la touche "échap"
86       */
87      $(document).on('keydown', function(evt) {
88        if (evt.keyCode == 27) { // escape key
89          close();
90        }
91      });
92
93      /**
94       * Fermeture de l'arche de navigation lors du clique sur le bouton de fermeture de l'arche
95       */
96      $("#archenav-close").on("click", function () {
97        close();
98      });
99
100      /**
101       * Fermeture de l'arche lorsque l'on clique à l'extérieur de celle-ci
102       */
103      $("#overlay").on("click", function() {
104        close();
105      });
106    },
107
108    /**
109     * Masquage de l'arche de navigation
110     */
111    hideArchenav: function () {
112      $("#archenav-content").css({
113        "visibility": "hidden"
114      });
115    },
116
117    /**
118     * Affichage de l'arche de navigation
119     */
120    showArchenav: function () {
121      $("#archenav-content").css({
122        "visibility": "visible"
123      })
124    },
125
126    /**
127     * Construction du menu adaptatif "Lieux" pour la version mobile de la page informations pratiques
128     */
129    constructMobileNavigation: function () {
130      var listLi = $('#select-informations-pratiques').find("li");
131      var active = false;
132
133      $('#menu-de-navigation-mobile').on("click", function () {
134
135        if(!active) {
136          // alert("ok");
137          var marginTop = 40;
138
139          $(listLi).each(function () {
140            var li = $(this);
141
142            if ( !(li.hasClass("active-trail")) & !(li.hasClass("active")) ) {
143              $(this).css({
144                "display": "block",
145                "margin-top": marginTop
146              });
147              marginTop += 20;
148            }else{
149              marginTop -= 20;
150              $(this).css({
151                "display": "block",
152                "margin-top": 0
153              });
154            }
155          });
156
157          active = true;
158        } else {
159          $(listLi).each(function () {
160            var li = $(this);
161
162            if(!(li.hasClass("active-trail")) & !(li.hasClass("active"))) {
163              $(this).css({
164                "display": "none",
165              });
166            }
167          });
168
169          active = false;

170        }
171      });
172    },
173
174    /**
175     * Gestion de l'affichage du menu adaptatif "Lieux" pour les versions mobile / tablette / desktop de la page informations pratiques
176     */
177    adaptNavigation: function () {
178      var windowWidth = $(window).width();
179
180      if(windowWidth < 600) {
181        $("#menu-de-navigation-desktop").addClass("display-none");
182        $("#menu-de-navigation-mobile").removeClass("display-none");
183      } else {
184        $("#menu-de-navigation-desktop").removeClass("display-none");
185        $("#menu-de-navigation-mobile").addClass("display-none");
186      }
187    },
188
189    /**
190     * Gestion de l'adaptativité de la "Map" pour la page informations pratiques
191     */
192    adaptMap: function () {
193      var windowWidth = $(window).width();
194
195      if(windowWidth < 600) {
196        $(".map-image").addClass("display-none");
197        $(".btn-map").removeClass("display-none");
198      } else {
199        $(".btn-map").addClass("display-none");
200        $(".map-image").removeClass("display-none");
201      }
202    },
203
204    /**
205     * Instantitaion de la scrollbar
206     */
207    instantiateScrollbar: function () {
208      var arche = document.getElementById('archenav-content');
209      if (arche != null) {
210        var archeWidth = arche.offsetWidth;
211      }
212
213
214      var windowWidth = $(window).width();
215
216      var element = $('.scrollable').jScrollPane({
217        contentWidth: '0px'
218      }).css({
219        "width": archeWidth,
220        "visibility": "visible"
221      });
222
223      var api = element.data('jsp');
224
225      $('#archenav-infos-pratiques, #archenav-close').css({
226        "visibility": "visible"
227      });
228
229      if(windowWidth < 1023) {
230        if (api) {
231          api.destroy();
232        }
233      }else{
234
235      }
236    },
237
238    /**
239     * Gestion de l'affichage de la scrollbar pour les versions mobile / tablette / desktop
240     */
241    hideShowScrollbar: function () {
242
243      var windowWidth = $(window).width();
244
245      // var element = $('.scrollable').jScrollPane();
246      var api = $('.scrollable').data('jsp');
247
248      if(windowWidth < 1023) {
249        if (api) {
250          api.destroy();
251        }
252      }else{
253        $('.scrollable').jScrollPane();
254      }
255    },
256
257
258    /**
259     * Rafraichissement des fonctions javascript de l'arche de navigation
260     */
261    refresh: function () {
262      this.hideArchenav();
263
264      this.constructMobileNavigation();
265      this.adaptNavigation();
266      this.adaptMap();
267
268      // this.hideShowScrollbar();
269
270      // this.intitiateSlider();
271
272      this.closeArchenav();
273      this.showArchenav();
274      // this.instantiateScrollbar();
275    }
276  };
277
278
279
280  // Rafraichissement de la page lorsque l'écran est redimenssioné
281  $(window).on("resize", function () {
282    archenav.refresh();
283    archenav.hideShowScrollbar();
284
285  });
286
287  // Ouverture de l'arche de navigation
288  $(".archenav-link").on("click", archenav.openArchenav);
289
290  // Focus sur la legende du men
291  $(".sidebar-tools a").focus( function() {
292    $( this ).next(".legend").addClass( "show-legend-arche");
293  })
294    .focusout( function() {
295      $( this ).next(".legend").removeClass( "show-legend-arche");
296    });
297});
298
299
300