webpack-bootstrap-ui-kit/src/js_old/_main.js

"use strict";

import $ from "jquery";

import Events from "./_events";
import Consts from "./_consts";

import EventsRouter from "./_events.router";
import Spinner from "./_components/_ui.spinner";

// AJAX functionality
import AjaxUI from "./_components/_ui.ajax";

import FormBasics from "./_components/_ui.form.basics";
import HeaderUI from "./_components/_ui.header-footer";

import SmoothScroll from "smooth-scroll";
const smoothScroll = SmoothScroll();

const MainUI = (($) => {
  // Constants
  const W = window;
  const $W = $(W);
  const D = document;
  const $Body = $("body");

  const NAME = "MainUI";

  console.clear();

  console.info(
    `%cUI Kit ${UINAME} ${UIVERSION}`,
    "color:yellow;font-size:14px"
  );
  console.info(
    `%c${UIMetaNAME} ${UIMetaVersion}`,
    "color:yellow;font-size:12px"
  );
  console.info(
    `%chttps://github.com/a2nt/webpack-bootstrap-ui-kit by ${UIAUTHOR}`,
    "color:yellow;font-size:10px"
  );

  console.groupCollapsed("Events");
  Object.keys(Events).forEach((k) => {
    console.info(`${k}: ${Events[k]}`);
  });
  console.groupEnd("Events");

  console.groupCollapsed("Consts");
  Object.keys(Consts).forEach((k) => {
    console.info(`${k}: ${Consts[k]}`);
  });
  console.groupEnd("Events");

  console.groupCollapsed("Init");
  console.time("init");
  $W.on(`${Events.LODEDANDREADY}`, () => {
    console.groupEnd("Init");
    console.timeEnd("init");

    console.time("Post-init");
    console.groupCollapsed("Post-init");
  });

  // get browser locale
  //const Locale = $('html').attr('lang').substring(0, 2);

  const $AlertNotify = $("#AlertNotify");
  const $SiteWideMessage = $("#SiteWideMessage");

  // get browser window visibility preferences
  // Opera 12.10, Firefox >=18, Chrome >=31, IE11
  const HiddenName = "hidden";
  const VisibilityChangeEvent = "visibilitychange";

  // update visibility state
  D.addEventListener(VisibilityChangeEvent, () => {
    if (D.visibilityState === HiddenName) {
      console.log(`${NAME}: Tab: hidden`);
      $Body.addClass("is-hidden");
      $Body.trigger(Events.TABHIDDEN);
      $W.trigger(Events.TABHIDDEN);
    } else {
      console.log(`${NAME}: Tab: focused`);
      $Body.removeClass("is-hidden");
      $Body.trigger(Events.TABFOCUSED);
      $W.trigger(Events.TABFOCUSED);
    }
  });

  // session ping
  let pingInterval;
  let pingLock = false;
  const sessionPing = () => {
    if (pingLock || $Body.hasClass("is-offline")) {
      return;
    }

    console.log(`${NAME}: session ping`);
    pingLock = true;
    $.ajax({
      sync: false,
      async: true,
      cache: false,
      url: "/Security/ping",
      global: false,
      type: "POST",
      complete: (data, datastatus) => {
        updateOnlineStatus();
        if (datastatus !== "success") {
          console.warn(`${NAME}: ping failed`);

          clearInterval(pingInterval);
          pingInterval = null;
        }

        pingLock = false;
      },
    });
  };

  // update online/offline state
  let statusLock = false;
  const updateOnlineStatus = () => {
    if (statusLock) {
      return;
    }
    statusLock = true;

    if (typeof navigator.onLine === "undefined") {
      return false;
    }

    if (!navigator.onLine) {
      console.log(`${NAME}: Offline`);

      clearInterval(pingInterval);
      pingInterval = null;

      $Body.addClass("is-offline");
      $Body.removeClass("is-online");

      $Body.trigger(Events.OFFLINE);
      $W.trigger(Events.OFFLINE);

      statusLock = false;
      return true;
    }

    if (!pingInterval) {
      pingInterval = setInterval(sessionPing, 300000); // 5 min in ms
    }

    if ($Body.hasClass("is-offline")) {
      sessionPing();

      console.log(`${NAME}: is back online`);
      $Body.trigger(Events.BACKONLINE);
    } else {
      console.log(`${NAME}: Online`);
    }

    $Body.addClass("is-online");
    $Body.removeClass("is-offline");

    $Body.trigger(Events.ONLINE);
    $W.trigger(Events.ONLINE);

    statusLock = false;
    return true;
  };

  W.addEventListener(
    `${Events.OFFLINE}`,
    () => {
      updateOnlineStatus();
    },
    false
  );

  W.addEventListener(
    `${Events.ONLINE}`,
    () => {
      updateOnlineStatus();
    },
    false
  );

  $W.on(`${Events.LOADED} ${Events.AJAX}`, () => {
    updateOnlineStatus();
  });

  // scrollTo
  const ScrollTo = (trigger, selector) => {
    smoothScroll.animateScroll(D.querySelector(selector), trigger, {
      speed: 500,
      offset: -20,
      //easing: 'easeInOutCubic',
      // Callback API
      //before: (anchor, toggle) => {}, // Callback to run before scroll
      //`after: (anchor, toggle) => {} // Callback to run after scroll
    });
  };

  W.URLDetails = {
    base: $("base").attr("href"),
    relative: "/",
    hash: "",
  };

  let eventFired = false;
  const setTouchScreen = (bool) => {
    if (W.IsTouchScreen === bool || eventFired) {
      return;
    }

    eventFired = true;

    W.IsTouchScreen = bool;
    $.support.touch = W.IsTouchScreen;

    if (bool) {
      console.log(`${NAME}: Touch screen enabled`);
      $Body.trigger(Events.TOUCHENABLE);
      $W.trigger(Events.TOUCHENABLE);
    } else {
      console.log(`${NAME}: Touch screen disabled`);
      $Body.trigger(Events.TOUCHDISABLED);
      $W.trigger(Events.TOUCHDISABLED);
    }

    // prevent firing touch and mouse events together
    setTimeout(() => {
      eventFired = false;
    }, 200);
  };

  setTouchScreen("ontouchstart" in window || navigator.msMaxTouchPoints > 0);

  // disable touch on mouse events
  /*D.addEventListener('mousemove', () => {
    setTouchScreen(false);
  });

  D.addEventListener('mousedown', () => {
    setTouchScreen(false);
  });*/

  // enable touch screen on touch events
  D.addEventListener("touchmove", () => {
    setTouchScreen(true);
  });
  D.addEventListener("touchstart", () => {
    setTouchScreen(true);
  });

  class MainUI {
    // Static methods

    static init() {
      const ui = this;
      ui.dispose();

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

      // update location details
      ui.updateLocation();

      // mark available offline areas
      if ("caches" in W) {
        $("a.offline").addClass("offline-available");
      }

      ui.loadImages();

      // detect bootstrap screen size
      ui.detectBootstrapScreenSize();

      // mark external links
      $('a.external,a[rel="external"]').attr("target", "_blank");

      // show encoded emails
      /*$(D).find('.obm').each(() => {
              if ($(this).attr('data-val') !== undefined) {
                const email = $(this).attr('data-val').split('')
                  .reverse()
                  .join('')
                  .slice(0, -8)
                  .replace(/[a-zA-Z]/g, (c) => String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26))
                  .replace('#AT#', '@');
                const attr = $(this).attr('data-val-append');
                if (attr !== undefined && attr !== false) {
                  $(this).append(email);
                }
                if ($(this).find('.sr-only').length > 0) {
                  $(this).find('.sr-only').append(email);
                }
                if ($(this).attr('href') !== undefined) {
                  $(this).attr('href', `mailto:${email}`);
                }
              }
            });*/
      //

      // scroll links
      $(".js-scrollTo").on("click", (e) => {
        console.log(`${NAME}: .js-scrollTo`);

        e.preventDefault();
        const el = e.currentTarget;
        const $el = $(e.currentTarget);

        ScrollTo(el, $el.attr("data-target"));
      });

      // load external fonts
      if ($("[data-extfont]").length) {
        console.log(`${NAME}: loading external fonts [data-extfont]`);
        $.getScript(
          "//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js",
          () => {
            const fonts = [];

            $("[data-extfont]").each((i, el) => {
              fonts[i] = $(el).attr("data-extfont");
            });

            W.WebFont.load({
              google: {
                families: fonts,
              },
            });
          }
        );
      }

      // data-set links
      $("[data-set-target]").on("click", (e) => {
        console.log(`${NAME}: [data-set-target]`);

        const $el = $(e.currentTarget);
        const $target = $($el.data("set-target"));

        if (!$target.length) {
          return;
        }

        $target.each((i, targetEl) => {
          const $targetEl = $(targetEl);
          const tag = $targetEl.prop("tagName").toLowerCase();

          if (tag === "input" || tag === "select") {
            $targetEl.val($el.data("set-val"));
          } else if (!$targetEl.hasClass("field")) {
            $targetEl.text($el.data("set-val"));
          }
        });

        $el.trigger(Events.SET_TARGET_UPDATE);
        $target.closest("form").trigger(Events.SET_TARGET_UPDATE);
      });

      // emulate links
      $(".a[data-href]").on("click", (e) => {
        console.log(`${NAME}: js link processing .a[data-href]`);

        const $el = $(e.currentTarget);
        const href = $el.data("href");
        if (!href.length) {
          console.warn(`${NAME}: .a[data-href] | Missing data-href`);
          console.warn($el);
        }

        W.location.assign(href);
      });

      // set attributes for mobile friendly tables
      $(".typography table").each((i, el) => {
        const $table = $(el);
        let $header = $table.find("thead tr:first-child");
        if (!$header.length) {
          $header = $(el).find("tr:first-child");
        }

        $header.addClass("d-typography-breakpoint-none");

        $header.find("td").each((i, h) => {
          const $h = $(h);
          $table
            .find("tr")
            .find(`td:eq(${i})`)
            .each((i, el) => {
              const $el = $(el);
              if (!$el.attr("data-label")) {
                $el.attr("data-label", $h.text());
              }
            });
        });
      });
      //

      // hide spinner
      Spinner.hide(() => {
        $Body.addClass("loaded");
      });

      // fire page printing
      if (W.URLDetails["hash"].indexOf("printpage") > -1) {
        W.print();
      }

      $Body.data(NAME, ui);
      $W.removeClass("lock-main-init");
    }

    static detectBootstrapScreenSize() {
      const $el = $('<div class="env-test"></div>');
      let envs = [...Consts.ENVS];
      $Body.append($el);

      let curEnv = envs.shift();
      envs = envs.reverse();

      for (let i = 0; i < envs.length; ++i) {
        const env = envs[i];
        $el.addClass(`d-${env}-none`);
        if ($el.is(":hidden")) {
          curEnv = env;
          break;
        }
      }

      $el.remove();
      $Body.removeClass(envs);
      $Body.addClass(curEnv);

      let landscape = true;
      if ($W.width() > $W.height()) {
        $Body.removeClass("portrait");
        $Body.addClass("landscape");
      } else {
        landscape = false;

        $Body.removeClass("landscape");
        $Body.addClass("portrait");
      }

      console.log(
        `${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
      );

      return curEnv;
    }

    static updateLocation(url) {
      let location = url || W.location.href;
      location = location.replace(W.URLDetails["base"], "/");
      const hash = location.indexOf("#");

      W.URLDetails.relative = location.split("#")[0];
      W.URLDetails.hash =
        hash >= 0 ? location.substr(location.indexOf("#")) : "";
    }

    // show site-wide alert
    static alert(msg, cls) {
      $SiteWideMessage.fadeOut("fast");

      $SiteWideMessage.html(
        `<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">&times;</i>${msg}</div></div>`
      );
      $SiteWideMessage.find(".page-alert").alert();

      $SiteWideMessage.find('.close[data-dismiss="alert"]').click(() => {
        $SiteWideMessage.fadeOut("slow", () => {
          $SiteWideMessage.find(".page-alert").alert("close");
        });
      });

      $SiteWideMessage.fadeIn("slow");

      if ($AlertNotify.length) {
        $AlertNotify[0].play();
      }

      $W.trigger(`${Events.ALLERTAPPEARED}`);
    }

    // hide site-wide alert
    static alertHide() {
      if ($SiteWideMessage.length !== 0) {
        $SiteWideMessage.fadeOut("slow", () => {
          $SiteWideMessage.find(".alert").alert("close");
        });
      }

      if ($AlertNotify.length && typeof $AlertNotify[0].stop !== "undefined") {
        $AlertNotify[0].stop();
      }

      $W.trigger(`${Events.ALLERTREMOVED}`);
    }

    // load all images
    static loadImages() {
      const $imgs = $Body.find("img").not(".loaded");
      const $imgUrls = [];
      const $imgLazyUrls = [];

      // collect image details
      $imgs.each((i, el) => {
        const $el = $(el);
        const src = $el.attr("src");
        const lazySrc = $el.data("lazy-src");

        if ($el.hasClass("loaded")) {
          return;
        }

        if (src && src.length) {
          $imgUrls.push(src);
        }
        if (lazySrc && lazySrc.length) {
          $imgLazyUrls.push(lazySrc);
          $el.addClass("loading");

          AjaxUI.preload([lazySrc]).then(() => {
            $el.attr("src", lazySrc);

            $el.on(`${Events.LOADED}`, () => {
              $el.addClass("loaded");
              $el.removeClass("loading");

              $el.trigger(`${Events.LAZYIMAGEREADY}`);
            });
          });
        }
      });

      // load lazy backgrounds
      $Body
        .find("[data-lazy-bg]")
        .not(".loaded")
        .each((i, el) => {
          const $el = $(el);
          const lazySrc = $el.data("lazy-bg");

          if ($el.hasClass("loaded")) {
            return;
          }

          if (lazySrc && lazySrc.length) {
            $imgLazyUrls.push(lazySrc);
            $el.addClass("loading");

            AjaxUI.preload([lazySrc]).then(() => {
              $el.css({ "background-image": `url(${lazySrc})` });

              $el.addClass("loaded");
              $el.removeClass("loading");

              $el.trigger(`${Events.LAZYIMAGEREADY}`);
            });
          }
        });

      // replace img src
      $Body
        .find("[data-src-replace]")
        .not(".loaded")
        .each((i, el) => {
          const $el = $(el);
          const lazySrc = $el.data("src-replace");

          if ($el.hasClass("loaded")) {
            return;
          }

          if (lazySrc && lazySrc.length) {
            $el.addClass("loaded");
            $el.attr("src", lazySrc);
          }
        });

      // load defined images
      AjaxUI.preload($imgUrls).then(() => {
        $W.trigger("images-loaded");

        // load lazy images
        AjaxUI.preload($imgLazyUrls).then(() => {
          console.log(`${NAME}: All images are loaded!`);

          setTimeout(() => {
            $W.trigger(`${Events.LAZYIMAGESREADY}`);

            console.groupEnd("Post-init");
            console.timeEnd("Post-init");
          }, 100);
        });
      });
    }

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

  $W.on(
    `${Events.MAININIT} ${Events.AJAX} ${Events.AJAXMAIN} ${Events.LOADED}`,
    () => {
      if ($W.hasClass("lock-main-init")) {
        console.warn(`${NAME}: locked`);
        return;
      }

      $W.addClass("lock-main-init");
      MainUI.init();
    }
  );

  $W.on(`${Events.RESIZE}`, () => {
    MainUI.detectBootstrapScreenSize();
  });

  $W.on("beforeunload unload", () => {
    Spinner.show(() => {
      $Body.removeClass("loaded");
    });
  });

  // hide spinner on target _blank
  $('[target="_blank"],.external')
    .not('[data-toggle="lightbox"],[data-lightbox-gallery]')
    .on("click submit touch", (e) => {
      console.log(`${NAME}: External link`);

      setTimeout(() => {
        Spinner.hide(() => {
          $Body.addClass("loaded");
        });
      }, 1000);
    });

  W.MainUI = MainUI;

  return MainUI;
})($);

export default MainUI;