webpack-bootstrap-ui-kit/src/js/ajax/links.js

// browser tab visibility state detection

import Events from "../_events";
import Consts from "../_consts";
import Page from "./models/page.jsx";

import { getParents } from "../main/funcs";

import { Collapse } from "bootstrap";

import SpinnerUI from "../main/loading-spinner";

const MainUILinks = ((W) => {
  const NAME = "main.links";
  const D = document;
  const BODY = D.body;

  class MainUILinks {
    window;
    static init() {
      const ui = this;
      ui.GraphPage = null;

      console.log(`${NAME}: init`);

      ui.loaded();

      // history state switch
      W.addEventListener("popstate", (e) => {
        ui.popState(e);
      });
    }

    static loaded() {
      const ui = this;

      D.querySelectorAll(".graphql-page").forEach((el, i) => {
        const el_id = el.getAttribute("href");
        el.setAttribute(`data-${ui.name}-id`, el_id);

        el.addEventListener("click", ui.loadClick);
      });
    }

    static setActiveLinks(link) {
      const ui = this;
      D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach((el) => {
        el.classList.add("active");
      });
    }

    static reset() {
      // reset focus
      D.activeElement.blur();

      // remove active and loading classes
      D.querySelectorAll(".graphql-page,.nav-item").forEach((el2) => {
        el2.classList.remove("active", "loading");
      });
    }

    static popState(e) {
      const ui = this;

      SpinnerUI.show();

      if (e.state && e.state.page) {
        console.log(`${NAME}: [popstate] load`);
        const state = JSON.parse(e.state.page);

        state.current = null;
        state.popstate = true;

        ui.reset();
        ui.setActiveLinks(e.state.link);

        if (!ui.GraphPage) {
          console.log(
            `${NAME}: [popstate] GraphPage is missing. Have to render it first`
          );

          ui.GraphPage = ReactDOM.render(
            <Page />,
            document.getElementById("MainContent")
          );
        }

        ui.GraphPage.setState(state);
        SpinnerUI.hide();

        window.dispatchEvent(new Event(Events.AJAX));
      } else if (e.state && e.state.landing) {
        console.log(`${NAME}: [popstate] go to landing`);
        W.location.href = e.state.landing;
      } else {
        console.warn(`${NAME}: [popstate] state is missing`);
        console.log(e);
        SpinnerUI.hide();
      }
    }

    // link specific event {this} = current event, not MainUILinks
    static loadClick(e) {
      console.groupCollapsed(`${NAME}: load on click`);
      e.preventDefault();

      const ui = MainUILinks;
      const el = e.currentTarget;

      SpinnerUI.show();

      ui.reset();
      el.classList.add("loading");
      el.classList.remove("response-404", "response-500", "response-523");
      BODY.classList.add("ajax-loading");

      // hide parent mobile nav
      const navs = getParents(el, ".collapse");
      if (navs.length) {
        navs.forEach((nav) => {
          const collapseInst = Collapse.getInstance(nav);
          if (collapseInst) {
            collapseInst.hide();
          }
        });
      }

      // hide parent dropdown
      /*const dropdowns = getParents(el, '.dropdown-menu');
                                      if (dropdowns.length) {
                                        const DropdownInst = Dropdown.getInstance(dropdowns[0]);
                                        DropdownInst.hide();
                                      }*/

      if (!ui.GraphPage) {
        ui.GraphPage = ReactDOM.render(
          <Page />,
          document.getElementById("MainContent")
        );
      }

      const link = el.getAttribute("href") || el.getAttribute("data-href");

      ui.GraphPage.state.current = el;

      ui.GraphPage.load(link)
        .then((response) => {
          BODY.classList.remove("ajax-loading");
          el.classList.remove("loading");
          el.classList.add("active");

          D.loading_apollo_link = null;

          if (ui.GraphPage.state.Link) {
            window.history.pushState(
              {
                page: JSON.stringify(ui.GraphPage.state),
                link: el.getAttribute(`data-${ui.name}-id`),
              },
              ui.GraphPage.state.Title,
              ui.GraphPage.state.Link
            );

            ui.setActiveLinks(ui.GraphPage.state.Link);
          }

          SpinnerUI.hide();

          window.dispatchEvent(new Event(Events.AJAX));
          console.groupEnd(`${NAME}: load on click`);
        })
        .catch((e) => {
          console.error(`${NAME}: loading error`);
          console.log(e);

          /*BODY.classList.remove('ajax-loading');
                                                                                el.classList.remove('loading');*/
          el.classList.add("error", `response-${e.status}`);
          /*switch (e.status) {
                                                                                    case 500:
                                                                                        break;
                                                                                    case 404:
                                                                                        el.classList.add('not-found');
                                                                                        break;
                                                                                    case 523:
                                                                                        el.classList.add('unreachable');
                                                                                        break;
                                                                                }*/

          //SpinnerUI.hide();

          //window.dispatchEvent(new Event(Events.AJAX));
          console.groupEnd(`${NAME}: load on click`);

          console.log(`${NAME}: reloading page ${link}`);

          // fallback loading
          W.location.href = link;
        });
    }
  }

  W.addEventListener(`${Events.LOADED}`, () => {
    MainUILinks.init();
  });

  W.addEventListener(`${Events.AJAX}`, () => {
    MainUILinks.loaded();
  });

  // fallback
  /*W.addEventListener(`${Events.APOLLO_ERROR}`, (e) => {
                            console.error(`${NAME}: [APOLLO_ERROR] loading failure, reloading the page`);
                            //W.dispatchEvent(new Event(Events.OFFLINE));
                            if (D.loading_apollo_link) {
                                W.location.href = D.loading_apollo_link;
                            }
                        });*/
})(window);

export default MainUILinks;