https://www.floridablue.com/webfiles/1789682342788/js/nav-reimagined.js

1//nav-reimagined.js START -----------------------//
2
3const LS_ANIMATION_KEY = "noanimate";
4const ANIMATION_CLASS = "noanimate";
5
6/**
7 * Users can turn of annimations. 
8 * When no animations - documeent body gets class ANIMATION_CLASS
9 * When no animations - localStorage key LS_ANIMATION_KEY is 'true' (not undefined).
10 */
11
12/**
13 * 
14 * @returns true if no animation is set, otherwise returns false.
15 */
16function isNoAnimate() {
17  return document.body.classList.contains(ANIMATION_CLASS);
18}
19
20/**
21 * Toggle whether no animation is set or not.
22 * @returns the new state of no animation.
23 */
24function toggleAnimationControl() {
25  let noAnimate = isNoAnimate();
26  if (noAnimate) {
27    document.body.classList.remove(ANIMATION_CLASS);
28    localStorage.removeItem(LS_ANIMATION_KEY);
29  } else {
30    document.body.classList.add(ANIMATION_CLASS);
31    localStorage.setItem(LS_ANIMATION_KEY, "true");
32  }
33  return !noAnimate;
34}
35
36/**
37 * Should be called on page load. Sets the no animation on the page from localStorage.
38 * @returns true if no animation is set, otherwise false.
39 */
40function initializeAnimationControlOnPage() {
41  let noAnimate = localStorage.getItem(LS_ANIMATION_KEY);
42  if (noAnimate) {
43    if (!document.body.classList.contains(ANIMATION_CLASS)) {
44      !document.body.classList.add(ANIMATION_CLASS);
45    }
46  } else {
47    document.body.classList.remove(ANIMATION_CLASS);
48  }
49  return noAnimate;
50}
51
52//animation-control.js END -----------------------//
53
54
55//headerInit.js START -----------------------//
56
57// import { initCxComponents } from "../cxComponents_new.js";
58// import * as ac from "../www/animation-control.js";
59
60/**
61 * Animation button strings - English
62 */
63const englishAnimationStrings = {
64  on: "Turn on animations",
65  off: "Turn off animations",
66};
67
68/**
69 * Animation button strings - Spanish
70 */
71const spanishAnimationStrings = {
72  on: "Activar animaciones",
73  off: "Desactivar animaciones",
74};
75
76/**
77 * Initialize the header
78 * @param animationStrings - (optional) one of englishAnimationStrings or spanishAnimationStrings
79 * @param otherLanguageLink - (optional) URL of the page to go to when the language button is clicked
80 */
81function initUiHeader(animationStrings, otherLanguageLink) {
82  let lang = document.querySelector("html").getAttribute("lang").toLowerCase();
83  let a11y = document.querySelectorAll(".ui-accessibility-theme-menu");
84  let animS = animationStrings
85    ? animationString
86    : lang.includes("es")
87    ? spanishAnimationStrings
88    : englishAnimationStrings;
89  let langLink = otherLanguageLink
90    ? otherLanguageLink
91    : lang.includes("es")
92    ? "https://www.floridablue.com/"
93    : "https://www.floridablue.com/es/";
94
95  initCxComponents();
96  initAnimationControl(animS);
97  if(a11y){
98    a11y.forEach(a => {
99      initAccessibiltyMenu(a);
100    })
101  }
102  // initOtherLangButton(langLink);
103  initMobileMenu();
104}
105
106/**
107 * Initialize the site settings (mobile page)
108 * @param otherLanguageLink - (optional) URL of the page to go to when the language button is clicked
109 */
110function initSiteSettings(otherLanguageLink) {
111    let langLink = otherLanguageLink
112    ? otherLanguageLink
113    : lang.includes("es")
114    ? "https://www.floridablue.com/"
115    : "https://www.floridablue.com/es/";
116
117  // initOtherLangButton(langLink);
118}
119
120/**
121 *  Add a listener to the animation button and set the button's text.
122 * @param textObj - one of  englishAnimationStrings or spanishAnimationStrings
123 */
124function initAnimationControl(textObj) {
125  let noAnimate = initializeAnimationControlOnPage();
126  let toggleAC = document.querySelectorAll(".ui-animationcontrol-t");
127  if (toggleAC){
128    toggleAC.forEach(toggle => {
129      setAnimationText(toggle, noAnimate);
130      toggle.addEventListener("click", toggleAnimation);
131
132      function toggleAnimation() {
133        let noAnimate = toggleAnimationControl();
134        setAnimationText(toggle, noAnimate);
135      }
136
137      function setAnimationText(toggle, noAnimate) {
138        toggle.textContent = noAnimate ? textObj.on : textObj.off;
139      }
140    });
141  }
142}
143
144/*
145function initAnimationControl(textObj) {
146  let noAnimate = initializeAnimationControlOnPage();
147  let b = document.getElementById("ui-animationcontrol-t");
148  if (b){
149    setAnimationText(b, noAnimate);
150    b.addEventListener("click", toggleAnimation);
151
152    function toggleAnimation() {
153      let b = document.getElementById("ui-animationcontrol-t");
154      let noAnimate = toggleAnimationControl();
155      setAnimationText(b, noAnimate);
156    }
157
158    function setAnimationText(b, noAnimate) {
159      b.textContent = noAnimate ? textObj.on : textObj.off;
160    }
161  }
162}
163*/
164
165/**
166 * Initialize the language button.
167 * @param otherLangUrl URL of the page to go to when button clicked
168 */
169function initOtherLangButton(otherLangUrl) {
170  // let button = document.getElementById("ui-other-lang-button");
171  let button = document.querySelectorAll("ui-other-lang-button");
172  if(button){
173    button.forEach(e => {
174      e.addEventListener("click", () => {
175        window.location.assign(otherLangUrl);
176      });
177    });
178  }
179}
180
181/**
182 * Initialize the CSS theme (high contrast, normal, low contrast) buttons
183 * @param a11yMenu container of the 3 buttons (only)
184 */
185function initAccessibiltyMenu(a11yMenu) {
186  let buttons = a11yMenu.querySelectorAll("button");
187  let theme = localStorage.getItem("theme")
188    ? localStorage.getItem("theme")
189    : "app";
190  setAriaPressedCssButtons(a11yMenu, theme);
191  buttons.forEach(function (button) {
192    button.addEventListener("click", switchCss);
193  });
194}
195
196/**
197 * Switch CSS to this theme
198 * @param event
199 */
200function switchCss(event) {
201  // Main stylesheet link - href will be changed
202  let styleSheet = document.getElementById("access-style-loader")
203    ? document.getElementById("access-style-loader")
204    : document.getElementsByTagName("link")[1];
205  let ssUrl = styleSheet.getAttribute("href");
206  let lastSlash = ssUrl.lastIndexOf("/");
207  let pre = lastSlash > -1 ? ssUrl.slice(0, lastSlash + 1) : "";
208  let button = event.target.closest("button");
209  let type = button.getAttribute("data-type");
210  let newUrl = `${pre}${type}.css`;
211  localStorage.setItem("theme", type);
212  styleSheet.setAttribute("href", newUrl);
213  let container = button.closest("div");
214  let contrast = (type == "app") ? "normal" : type.replace("contrast","");
215  localStorage.setItem('contrast-preference', contrast);
216  setAriaPressedCssButtons(container, type);
217}
218
219/**
220 * Sets aria-pressed on a11yMenu buttons.
221 * @param a11yMenu container for CSS buttons.
222 * @param theme current theme.
223 */
224function setAriaPressedCssButtons(a11yMenu, theme) {
225  let buttons = a11yMenu.querySelectorAll("button");
226  buttons.forEach(function (button) {
227    button.setAttribute(
228      "aria-pressed",
229      button.getAttribute("data-type") == theme
230    );
231  });
232}
233
234//headerInit.js END -----------------------//
235
236
237//GLOBAL START -----------------------//
238
239function removeHeader(){
240  var letCurrentView = window.MediaQuery.current;
241
242  if (letCurrentView == "small" || letCurrentView == "medium") {
243    // remove desktop header for mobile portrait/landscape and tablet portrait
244      document.getElementById("header-reimagined-desktop").remove();
245      document.getElementById("header-reimagined-desktop-sticky").remove();
246      initMobileMenu;
247  }else{
248    // remove mobile header for tablet landscape and desktop
249      document.getElementById("header-reimagined-mobile").remove();
250  }
251}
252
253
254/***** REIMAGINED HEADER MOBILE *****/
255
256/**
257 * Set mobile menu toggle event listener to toggle classes
258 */
259 function toggleMobileMenu(nav) {
260  let mobileToggleBtn = document.getElementById("mobile-menu-btn");
261  
262  if (mobileToggleBtn){
263    let mobileHeader = document.getElementById("mobile-menu-header");
264    let mobileToggleIcon = document.getElementById("mobile-menu-toggle-icon");
265
266    mobileToggleBtn.addEventListener('click', function (event) {
267      mobileHeader.classList.toggle("active");
268      mobileToggleIcon.className = (mobileToggleBtn.ariaExpanded == "true") ? "icon-close" : "icon-menu-mobile";
269

270      if(mobileHeader.classList.contains("sub-active")){
271          mobileHeader.classList.remove("sub-active");
272          hideMobileMenus(nav);
273          hideMobileViews(nav);
274          parentMenuId = "";
275          submenuTitle = "";
276
277          if(this.getAttribute("aria-expanded")){
278              let toggleBtn = this;
279              setTimeout(function() {
280                  toggleBtn.click();
281                  mobileHeader.classList.remove("active");
282              },1)
283          }
284      }
285      /*
286          if(this.getAttribute("aria-expanded")){
287            mobileHeader.classList.add("active");
288          }else{
289            mobileHeader.classList.remove("active");
290          }
291
292      */
293
294    }, false);
295  }
296}
297
298// container for mobile nav active menu's parent menu id
299let parentMenuId = "";
300let submenuTitle = "";
301
302function initMobileMenu(){
303  let mobileHeader = document.getElementById("mobile-menu-header");
304  let mobileNav = document.getElementById("header-reimagined-mobile");
305
306  if(mobileNav){
307    let backBtn = document.getElementById("mobile-menu-back-btn");
308    // let mobileToggleBtn = document.getElementById("mobile-menu-btn");
309    let mobileMenu = document.getElementById("mobile-menu-dropdown");
310    let btns = mobileNav.querySelectorAll(`[data-view]`);
311
312    // remove login button on Member, Employee, and Medicare login pages
313    if (document.getElementById("login-members-form")){
314        let mobileLoginBtn = document.querySelector("#header-mobile-login-panel");
315        if(mobileLoginBtn){
316            mobileLoginBtn.classList.add("hide");
317        }
318    }
319
320    toggleMobileMenu(mobileNav);
321
322    backBtn.addEventListener("click", function(){
323      hideMobileMenus(mobileNav);
324      hideMobileViews(mobileNav);
325
326      if(parentMenuId != ""){
327        // if grandchld submenu is active, back button takes you to the active menu's parent menu
328        let topbarTitle = document.getElementById("mobile-submenu-title");
329        let parentMenu = document.getElementById(parentMenuId);
330        parentMenu.classList.remove("hide");
331        topbarTitle.innerHTML = parentMenu.dataset.title;
332        parentMenuId = "";
333      }else{
334        // else return to main menu
335        mobileHeader.classList.remove("sub-active");
336        mobileMenu.classList.remove("hide");
337      }
338    });
339
340    btns.forEach(function (btn) {
341      let menuId = btn.getAttribute("data-view");
342      let menu = document.getElementById(menuId);
343      
344      // add menu button event listener to render button's associated submenu
345      btn.addEventListener("click", function(){
346        // hide main menu
347        mobileMenu.classList.add("hide");
348        // enable submenu top-bar styles and render
349        mobileHeader.classList.add("sub-active");
350        // hide all active submenus
351        hideMobileMenus(mobileNav);
352        hideMobileViews(mobileNav);
353
354        // show submenu
355        if(menu.classList.contains("hide")){
356          let topbarTitle = document.getElementById("mobile-submenu-title");
357          submenuTitle = this.getElementsByClassName("mobile-label-text")[0].innerHTML.trim();
358          topbarTitle.innerHTML = submenuTitle;
359
360          menu.classList.toggle("hide");
361          
362          // set parent menu's id
363          if(menu.dataset.parent){
364            parentMenuId = menu.dataset.parent;
365          }
366        }
367      });
368    });
369
370  }
371}
372
373// hide all active submenus
374function hideMobileMenus(nav){
375  let allMenus = nav.querySelectorAll(".sub-menu");
376
377  allMenus.forEach(function (m){
378    if(!m.classList.contains("hide")){
379      m.classList.add("hide");
380    }
381  });
382}
383
384// hide all active subview
385function hideMobileViews(nav){
386  let allViews = nav.querySelectorAll(".subview");
387
388  allViews.forEach(function (m){
389    if(!m.classList.contains("hide")){
390      m.classList.add("hide");
391    }
392  });
393}
394
395// add menu marker for reimagined active page underline style
396function initLocalStorage(){
397  /*
398     * Set Accessibility Contrast based on localStorage
399     */
400  if (!mobileTest() && document.querySelectorAll(".ui-accessibility-theme-menu")) {
401    let switchers = document.querySelectorAll(".ui-accessibility-theme-menu");

402    switchers.forEach(switcher => {
403      let switcherBtns = switcher.querySelectorAll("button");
404      // var contrastPreference = (localStorage.getItem('contrast-preference') == "normal" ? "app" : localStorage.getItem('contrast-preference') + "contrast");
405      var contrastPreference = localStorage.getItem('contrast-preference');
406
407      switcherBtns.forEach( i => {
408          if (i.ariaPressed == "true"){
409              let styleSheet = document.querySelector("access-style-loader")
410              ? document.querySelector("access-style-loader")
411              : document.getElementsByTagName("link")[1];
412              let ssUrl = styleSheet.getAttribute("href");
413              let lastSlash = ssUrl.lastIndexOf("/");
414              let pre = lastSlash > -1 ? ssUrl.slice(0, lastSlash + 1) : "";
415              let type = i.getAttribute("data-type");
416              let newUrl = `${pre}${type}.css`;
417              
418              if (contrastPreference && contrastPreference != "app"){
419                  styleSheet.setAttribute("href", newUrl);
420              }
421          }
422      })
423    });
424  }
425}
426
427//GLOBAL END -----------------------//