portal-www/src/store/ui.ts

Nova Portal Website. Based on Next starter by Ueno

import { action, extendObservable, makeObservable, observable } from 'mobx';

/** @deprecated in favor of beta/store/ui */
export default class UI {
  constructor({ ui = {} }) {
    makeObservable(this, {
      hasCustomerMenu: observable,
      isMegaMenuOpen: observable,
      hasMultiMenu: observable,
      hasSideMenu: observable,
      announcementBannerHeight: observable,
      pageColor: observable,
      headerStyle: observable,
      isHiddenFooter: observable,
      colorTransition: observable,
      view: observable,
      isMobile: observable,
      navigationPanelScrollCount: observable,
      isNavigationPanelPinned: observable,
      isNavigationPanelOpen: observable,
      showContactBubble: observable,
      isContactMenuOpen: observable,
      isStickyBar: observable,
      showSalesLocationPrompt: observable,
      setHasCustomerMenu: action,
      setIsMegaMenuOpen: action,
      setIsHiddenFooter: action,
      setHasSideMenu: action,
      setIsStickyBar: action,
      setPageColor: action,
      setShowContactBubble: action,
      setHeaderStyle: action,
      setColorTransition: action,
      setIsContactMenuOpen: action,
      setMobile: action,
      setNavigationPanelScrollCount: action,
      setNavigationPanelOpen: action,
      setNavigationPanelPinned: action,
      scrollNavigationPanel: action,
      toggleNavigationPanel: action,
      toggleNavigationPanelPin: action,
      toggleView: action,
      toggleComponent: action,
    });

    extendObservable(this, ui);
  }

  showSalesLocationPrompt = false;

  hasCustomerMenu = false;

  hasMultiMenu = false;

  isMegaMenuOpen = false;

  hasSideMenu = false;

  announcementBannerHeight = 0;

  pageColor = 'ocean';

  headerStyle = 'light';

  isHiddenFooter = false;

  colorTransition = 'light';

  view = 'box';

  isMobile = false;

  /* NavigationPanel - begin*/
  navigationPanelScrollCount = 0;

  isNavigationPanelPinned = false;

  isNavigationPanelOpen = !this.isMobile;
  /* NavigationPanel - end */

  showContactBubble = true;

  isContactMenuOpen = false;

  isStickyBar = false;

  setShowSalesLocationPrompt = (showSalesLocation: boolean) => {
    this.showSalesLocationPrompt = showSalesLocation;
  };

  setHasCustomerMenu(hasMenu: boolean) {
    this.hasCustomerMenu = hasMenu;
  }

  setHasMultiMenu(hasMenu: boolean) {
    this.hasMultiMenu = hasMenu;
  }

  setIsMegaMenuOpen(isOpen: boolean) {
    this.isMegaMenuOpen = isOpen;
  }

  setIsHiddenFooter(isHidden: boolean) {
    this.isHiddenFooter = isHidden;
  }

  setHasSideMenu(sideMenu: boolean) {
    this.hasSideMenu = sideMenu;
  }

  setIsStickyBar(isSticky: boolean) {
    this.isStickyBar = isSticky;
  }

  setPageColor(color: string) {
    this.pageColor = color;
  }

  setShowContactBubble(showBubble: boolean) {
    this.showContactBubble = showBubble;
  }

  setHeaderStyle(style: string) {
    this.headerStyle = style;
  }

  setColorTransition(style: string) {
    this.headerStyle = style;
  }

  setIsContactMenuOpen(isOpen: boolean) {
    this.isContactMenuOpen = isOpen;
  }

  setMobile(isMobile: boolean) {
    this.isMobile = isMobile;
  }

  setNavigationPanelScrollCount(ScrollCount: number) {
    this.navigationPanelScrollCount = ScrollCount;
  }

  setNavigationPanelOpen(isOpen: boolean) {
    this.isNavigationPanelOpen = isOpen;
  }

  setNavigationPanelPinned(isPinned: boolean) {
    this.isNavigationPanelPinned = isPinned;
  }

  scrollNavigationPanel() {
    if (!this.isMobile) {
      if (!this.isNavigationPanelPinned && this.navigationPanelScrollCount > 3) {
        this.setNavigationPanelOpen(false);
      }
      this.setNavigationPanelScrollCount(this.navigationPanelScrollCount + 1);
    }
  }

  toggleNavigationPanel() {
    this.setNavigationPanelOpen(!this.isNavigationPanelOpen);

    if (this.isNavigationPanelOpen) {
      this.setNavigationPanelPinned(false);
      if (this.isMobile) {
        this.setShowContactBubble(false);
      }
    } else {
      // reset navigationPanelScrollCount on open
      this.setNavigationPanelScrollCount(0);
      if (this.isMobile) {
        this.setShowContactBubble(true);
      }
    }
  }

  toggleNavigationPanelPin() {
    this.setNavigationPanelPinned(!this.isNavigationPanelPinned);

    // reset navigationPanelScrollCount on unPin
    if (this.isNavigationPanelPinned) {
      this.setNavigationPanelScrollCount(0);
    }
  }

  toggleView(view: string) {
    if (view) {
      this.view = view;
    } else {
      this.view = this.view === 'list' ? 'box' : 'list';
    }
  }

  toggleComponent(name: string, value?: string) {
    if (name === undefined) {
      return;
    }

    if (value !== undefined) {
      this[`is${name}Open`] = value;
    } else {
      this[`is${name}Open`] = !this[`is${name}Open`];
    }
  }
}