anim-scroll/dist/bin/tuneBox/setNavBar.js

Small library to animate your web pages

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _setStyle = _interopRequireDefault(require("../../libs/setStyle"));

var _getElement = _interopRequireDefault(require("../../libs/getElement"));

var _setSsClick = _interopRequireDefault(require("./setSsClick"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _default = (box, options, amount) => {
  var navBar = document.createElement('div');
  var dotWrapper = document.createElement('div');
  var dot = (0, _getElement.default)(options.navBarStyle.dots.shape);
  var hint = {};
  (0, _setStyle.default)(navBar, options.navBarStyle.wrapper);
  navBar.style.display = 'flex';
  navBar.style.flexDirection = options.navBarStyle.wrapper.direction;
  box.appendChild(navBar);
  (0, _setStyle.default)(dotWrapper, options.navBarStyle.dots.wrapper);
  dotWrapper.style.display = 'flex';
  dotWrapper.appendChild(dot);

  if (options.hints) {
    hint = document.createElement('span');
    (0, _setStyle.default)(hint, options.hintStyle);
    hint.style.transition = options.hintStyle.transition;
    hint.style.display = 'block';
    var pos = 0;
    var middle = 0;
    var func = '';
    var indent = '';
    var flexDir = '';
    var jC = '';
    var aI = '';
    options.hintIndex = 1;
    options.dotIndex = 0;

    if (options.navBarStyle.wrapper.direction === 'row') {
      pos = navBar.offsetTop;
      middle = box.offsetHeight / 2;
      hint.style.position = 'absolute';
      flexDir = 'column';
      aI = 'center';
      func = 'appendChild';
      if (pos < middle) indent = 'bottom';else indent = 'top';
    } else {
      pos = navBar.offsetLeft;
      middle = box.offsetWidth / 2;
      flexDir = 'row';
      aI = 'center';

      if (pos < middle) {
        func = 'appendChild';
        jC = 'flex-start';
        indent = 'marginLeft';
      } else {
        func = 'insertBefore';
        jC = 'flex-end';
        indent = 'marginRight';
        options.hintIndex = 0;
        options.dotIndex = 1;
      }
    }

    if (indent === 'top' || indent === 'bottom') {
      options.hintStyle.indent = `${0 - parseFloat(options.hintStyle.indent)}px`;
    }

    hint.style[indent] = options.hintStyle.indent;
    hint.style.opacity = '0';
    hint.style.zIndex = '-10';
    dotWrapper.style.flexDirection = flexDir;
    dotWrapper.style.justifyContent = jC;
    dotWrapper.style.alignItems = aI;
    dotWrapper[func](hint, dotWrapper.firstChild);
  }

  var el = {};

  for (var i = 0; i < amount; i += 1) {
    if (i === 0) el = dotWrapper;else el = dotWrapper.cloneNode(true);
    (0, _setSsClick.default)(el, i);
    el.children[options.hintIndex].textContent = options.hints[i];
    navBar.appendChild(el);
  }

  (0, _setStyle.default)(navBar.children[options.whereToBegin].children[options.dotIndex], options.navBarStyle.dots.active);
  var block = document.createElement('div');
  block.style.height = `${navBar.offsetHeight}px`;
  block.style.width = `${navBar.offsetWidth}px`;
  block.style.position = 'absolute';
  block.style.display = 'none';
  navBar.appendChild(block);
  return navBar;
};

exports.default = _default;