primevue/styleclass/StyleClass.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue)

"use strict";

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

var _DomHandler = _interopRequireDefault(require("../utils/DomHandler"));

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

function _bind(el, binding) {
  el.$_pstyleclass_clicklistener = function () {
    var target = resolveTarget(el, binding);

    if (binding.value.toggleClass) {
      if (_DomHandler.default.hasClass(target, binding.value.toggleClass)) _DomHandler.default.removeClass(target, binding.value.toggleClass);else _DomHandler.default.addClass(target, binding.value.toggleClass);
    } else {
      if (target.offsetParent === null) enter(target, el, binding);else leave(target, binding);
    }
  };

  el.addEventListener('click', el.$_pstyleclass_clicklistener);
}

function _unbind(el) {
  if (el.$_pstyleclass_clicklistener) {
    el.addEventListener('click', el.$_pstyleclass_clicklistener);
    el.$_pstyleclass_clicklistener = null;
  }

  unbindDocumentListener(el);
}

function enter(target, el, binding) {
  if (binding.value.enterActiveClass) {
    if (!target.$_pstyleclass_animating) {
      target.$_pstyleclass_animating = true;

      if (binding.value.enterActiveClass === 'slidedown') {
        target.style.height = '0px';

        _DomHandler.default.removeClass(target, 'hidden');

        target.style.maxHeight = target.scrollHeight + 'px';

        _DomHandler.default.addClass(target, 'hidden');

        target.style.height = '';
      }

      _DomHandler.default.addClass(target, binding.value.enterActiveClass);

      if (binding.value.enterClass) {
        _DomHandler.default.removeClass(target, binding.value.enterClass);
      }

      target.$p_styleclass_enterlistener = function () {
        _DomHandler.default.removeClass(target, binding.value.enterActiveClass);

        if (binding.value.enterToClass) {
          _DomHandler.default.addClass(target, binding.value.enterToClass);
        }

        target.removeEventListener('animationend', target.$p_styleclass_enterlistener);

        if (binding.value.enterActiveClass === 'slidedown') {
          target.style.maxHeight = '';
        }

        target.$_pstyleclass_animating = false;
      };

      target.addEventListener('animationend', target.$p_styleclass_enterlistener);
    }
  } else {
    if (binding.value.enterClass) {
      _DomHandler.default.removeClass(target, binding.value.enterClass);
    }

    if (binding.value.enterToClass) {
      _DomHandler.default.addClass(target, binding.value.enterToClass);
    }
  }

  if (binding.value.hideOnOutsideClick) {
    bindDocumentListener(target, el, binding);
  }
}

function leave(target, binding) {
  if (binding.value.leaveActiveClass) {
    if (!target.$_pstyleclass_animating) {
      target.$_pstyleclass_animating = true;

      _DomHandler.default.addClass(target, binding.value.leaveActiveClass);

      if (binding.value.leaveClass) {
        _DomHandler.default.removeClass(target, binding.value.leaveClass);
      }

      target.$p_styleclass_leavelistener = function () {
        _DomHandler.default.removeClass(target, binding.value.leaveActiveClass);

        if (binding.value.leaveToClass) {
          _DomHandler.default.addClass(target, binding.value.leaveToClass);
        }

        target.removeEventListener('animationend', target.$p_styleclass_leavelistener);
        target.$_pstyleclass_animating = false;
      };

      target.addEventListener('animationend', target.$p_styleclass_leavelistener);
    }
  } else {
    if (binding.value.leaveClass) {
      _DomHandler.default.removeClass(target, binding.value.leaveClass);
    }

    if (binding.value.leaveToClass) {
      _DomHandler.default.addClass(target, binding.value.leaveToClass);
    }
  }

  if (binding.value.hideOnOutsideClick) {
    unbindDocumentListener(target);
  }
}

function resolveTarget(el, binding) {
  switch (binding.value.selector) {
    case '@next':
      return el.nextElementSibling;

    case '@prev':
      return el.previousElementSibling;

    case '@parent':
      return el.parentElement;

    case '@grandparent':
      return el.parentElement.parentElement;

    default:
      return document.querySelector(binding.value.selector);
  }
}

function bindDocumentListener(target, el, binding) {
  if (!target.$p_styleclass_documentlistener) {
    target.$p_styleclass_documentlistener = function (event) {
      if (getComputedStyle(target).getPropertyValue('position') === 'static') {
        unbindDocumentListener(target);
      } else if (!el.isSameNode(event.target) && !el.contains(event.target) && !target.contains(event.target)) {
        leave(target, binding);
      }
    };

    target.ownerDocument.addEventListener('click', target.$p_styleclass_documentlistener);
  }
}

function unbindDocumentListener(target) {
  if (target.$p_styleclass_documentlistener) {
    target.ownerDocument.removeEventListener('click', target.$p_styleclass_documentlistener);
    target.$p_styleclass_documentlistener = null;
  }
}

var StyleClass = {
  bind: function bind(el, binding) {
    _bind(el, binding);
  },
  unbind: function unbind(el) {
    _unbind(el);
  }
};
var _default = StyleClass;
exports.default = _default;