webpack-bootstrap-ui-kit/src/js_old/_components/_ui.sidebar.js

"use strict";

//import StickySidebar from 'sticky-sidebar/src/sticky-sidebar';
import $ from "jquery";
import Events from "../_events";

const SidebarUI = (($) => {
  const D = document;
  const W = window;
  const $Body = $("body");
  const NAME = "SidebarUI";
  const CLASSNAME = `js${NAME}`;
  const CONTENTHOLDER = "content-holder";
  const INNERWRAPPER = `${CLASSNAME}__inner`;

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

      if (!$(`.${CLASSNAME}`).length) {
        return;
      }

      console.log(`${NAME}: init ...`);
      //const fontSize = parseInt($Body.css('font-size'));
      const fontSize = 0;
      const contentElement = $(`.${CONTENTHOLDER}`)[0];

      //$(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`);
      const $el = $(`.${CLASSNAME}`);
      const $innerWrapper = $(`.${INNERWRAPPER}`);

      /*const sticky = new StickySidebar(`.${CLASSNAME}`, {
        topSpacing: fontSize,
        bottomSpacing: fontSize,
        containerSelector: CONTENTHOLDER,
        innerWrapperSelector: INNERWRAPPER,
      });*/

      $el.addClass(`${CLASSNAME}-active`);

      $Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => {
        const contentOffset = parseInt(contentElement.offsetTop) + fontSize;
        const contentOffsetHeight =
          parseInt(contentElement.offsetHeight) - fontSize;
        const sidebarWidth = $el[0].offsetWidth;

        const scrollPos = parseInt($Body.scrollTop());

        // normal pos
        if (contentOffset >= scrollPos) {
          $innerWrapper.attr("style", "");
        } else if (
          scrollPos >=
          contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight
        ) {
          // bottom pos
          $innerWrapper.attr("style", `position:absolute;bottom:${fontSize}px`);
        } else {
          // scrolled pos
          $innerWrapper.attr(
            "style",
            `position:fixed;top:${fontSize}px;width:${sidebarWidth}px`
          );
        }
      });
    }

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

  $(W).on(`${NAME}.init ${Events.LODEDANDREADY}`, () => {
    SidebarUI.init();
  });

  W.SidebarUI = new SidebarUI();

  return SidebarUI;
})($);

export default SidebarUI;