@fe6/water-pro/lib/_util/dom.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getBoundingClientRect = getBoundingClientRect;
exports.hasClass = hasClass;
exports.addClass = addClass;
exports.removeClass = removeClass;
exports.getViewportOffset = getViewportOffset;
exports.hackCss = hackCss;
exports.on = on;
exports.off = off;
exports.once = once;
exports.triggerWindowResize = triggerWindowResize;
exports.getPopupContainer = getPopupContainer;
exports.addResizeListener = addResizeListener;
exports.removeResizeListener = removeResizeListener;
exports.setCaretPosition = setCaretPosition;
exports.getCursortPositionFormTextArea = exports.isServer = void 0;

var _shared = require("@fe6/shared");

var _warning = _interopRequireDefault(require("./warning"));

var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));

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

function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function getBoundingClientRect(element) {
  if (!element || !element.getBoundingClientRect) {
    return 0;
  }

  return element.getBoundingClientRect();
}

var trim = function trim(string) {
  return (string || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '');
};
/* istanbul ignore next */


function hasClass(el, cls) {
  if (!el || !cls) {
    return false;
  }

  if (cls.includes(' ')) {
    throw (0, _warning.default)('className 不应包含空格');
  }

  if (el.classList) {
    return el.classList.contains(cls);
  } else {
    return " ".concat(el.className, " ").includes(" ".concat(cls, " "));
  }
}
/* istanbul ignore next */


function addClass(el, cls) {
  if (!el) {
    return;
  }

  var curClass = el.className;
  var classes = (cls || '').split(' ');

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];

    if (!clsName) {
      continue;
    }

    if (el.classList) {
      el.classList.add(clsName);
    } else if (!hasClass(el, clsName)) {
      curClass += " ".concat(clsName);
    }
  }

  if (!el.classList) {
    el.className = curClass;
  }
}
/* istanbul ignore next */


function removeClass(el, cls) {
  if (!el || !cls) {
    return;
  }

  var classes = cls.split(' ');
  var curClass = " ".concat(el.className, " ");

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];

    if (!clsName) {
      continue;
    }

    if (el.classList) {
      el.classList.remove(clsName);
    } else if (hasClass(el, clsName)) {
      curClass = curClass.replace(" ".concat(clsName, " "), ' ');
    }
  }

  if (!el.classList) {
    el.className = trim(curClass);
  }
}
/**
 * Get the left and top offset of the current element
 * left: the distance between the leftmost element and the left side of the document
 * top: the distance from the top of the element to the top of the document
 * right: the distance from the far right of the element to the right of the document
 * bottom: the distance from the bottom of the element to the bottom of the document
 * rightIncludeBody: the distance between the leftmost element and the right side of the document
 * bottomIncludeBody: the distance from the bottom of the element to the bottom of the document
 *
 * @description:
 */


function getViewportOffset(element) {
  var doc = document.documentElement;
  var docScrollLeft = doc.scrollLeft;
  var docScrollTop = doc.scrollTop;
  var docClientLeft = doc.clientLeft;
  var docClientTop = doc.clientTop;
  var pageXOffset = window.pageXOffset;
  var pageYOffset = window.pageYOffset;
  var box = getBoundingClientRect(element);
  var retLeft = box.left,
      rectTop = box.top,
      rectWidth = box.width,
      rectHeight = box.height;
  var scrollLeft = (pageXOffset || docScrollLeft) - (docClientLeft || 0);
  var scrollTop = (pageYOffset || docScrollTop) - (docClientTop || 0);
  var offsetLeft = retLeft + pageXOffset;
  var offsetTop = rectTop + pageYOffset;
  var left = offsetLeft - scrollLeft;
  var top = offsetTop - scrollTop;
  var clientWidth = window.document.documentElement.clientWidth;
  var clientHeight = window.document.documentElement.clientHeight;
  return {
    left: left,
    top: top,
    right: clientWidth - rectWidth - left,
    bottom: clientHeight - rectHeight - top,
    rightIncludeBody: clientWidth - left,
    bottomIncludeBody: clientHeight - top
  };
}

function hackCss(attr, value) {
  var prefix = ['webkit', 'Moz', 'ms', 'OT'];
  var styleObj = {};
  prefix.forEach(function (item) {
    styleObj["".concat(item).concat((0, _shared.firstCapitalize)(attr))] = value;
  });
  return _extends(_extends({}, styleObj), _defineProperty({}, attr, value));
}
/* istanbul ignore next */


function on(element, event, handler) {
  if (element && event && handler) {
    element.addEventListener(event, handler, false);
  }
}
/* istanbul ignore next */


function off(element, event, handler) {
  if (element && event && handler) {
    element.removeEventListener(event, handler, false);
  }
}
/* istanbul ignore next */


function once(el, event, fn) {
  var listener = function listener() {
    if (fn) {
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      fn.apply(this, args);
    }

    off(el, event, listener);
  };

  on(el, event, listener);
}
/**
 * triggter window.resize
 */


function triggerWindowResize() {
  var event = document.createEvent('HTMLEvents');
  event.initEvent('resize', true, true);
  event.eventType = 'message';
  window.dispatchEvent(event);
}
/**
 * @description:  Set ui mount node
 */


function getPopupContainer(node) {
  var _a;

  return (_a = node === null || node === void 0 ? void 0 : node.parentNode) !== null && _a !== void 0 ? _a : document.body;
}

var isServer = typeof window === 'undefined';
/* istanbul ignore next */

exports.isServer = isServer;

function resizeHandler(entries) {
  var _iterator = _createForOfIteratorHelper(entries),
      _step;

  try {
    for (_iterator.s(); !(_step = _iterator.n()).done;) {
      var entry = _step.value;
      var listeners = entry.target.__resizeListeners__ || [];

      if (listeners.length) {
        listeners.forEach(function (fn) {
          fn();
        });
      }
    }
  } catch (err) {
    _iterator.e(err);
  } finally {
    _iterator.f();
  }
}
/* istanbul ignore next */


function addResizeListener(element, fn) {
  if (isServer) {
    return;
  }

  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = [];
    element.__ro__ = new _resizeObserverPolyfill.default(resizeHandler);

    element.__ro__.observe(element);
  }

  element.__resizeListeners__.push(fn);
}
/* istanbul ignore next */


function removeResizeListener(element, fn) {
  if (!element || !element.__resizeListeners__) {
    return;
  }

  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);

  if (!element.__resizeListeners__.length) {
    element.__ro__.disconnect();
  }
}

var getCursortPositionFormTextArea = function getCursortPositionFormTextArea(ctrl) {
  var CaretPos = {
    start: 0,
    end: 0
  };

  if (ctrl.selectionStart) {
    // Firefox support
    CaretPos.start = ctrl.selectionStart;
  }

  if (ctrl.selectionEnd) {
    CaretPos.end = ctrl.selectionEnd;
  }

  return CaretPos;
}; // 设置光标位置


exports.getCursortPositionFormTextArea = getCursortPositionFormTextArea;

function setCaretPosition(ctrl, pos) {
  // 设置光标位置函数
  if (ctrl.setSelectionRange) {
    ctrl.focus(); // 获取焦点

    ctrl.setSelectionRange(pos, pos); // 设置选定区的开始和结束点
  } else if (ctrl.createTextRange) {
    var range = ctrl.createTextRange(); // 创建选定区

    range.collapse(true); // 设置为折叠,即光标起点和结束点重叠在一起

    range.moveEnd('character', pos); // 移动结束点

    range.moveStart('character', pos); // 移动开始点

    range.select(); // 选定当前区域
  }
}