util.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _vue = require("vue");
  7. // We only handle element & text node.
  8. var TEXT_NODE = 3;
  9. var COMMENT_NODE = 8;
  10. var ellipsisContainer;
  11. var wrapperStyle = {
  12. padding: 0,
  13. margin: 0,
  14. display: 'inline',
  15. lineHeight: 'inherit'
  16. };
  17. function styleToString(style) {
  18. // There are some different behavior between Firefox & Chrome.
  19. // We have to handle this ourself.
  20. var styleNames = Array.prototype.slice.apply(style);
  21. return styleNames.map(function (name) {
  22. return "".concat(name, ": ").concat(style.getPropertyValue(name), ";");
  23. }).join('');
  24. }
  25. function resetDomStyles(target, origin) {
  26. target.setAttribute('aria-hidden', 'true');
  27. var originStyle = window.getComputedStyle(origin);
  28. var originCSS = styleToString(originStyle);
  29. // Set shadow
  30. target.setAttribute('style', originCSS);
  31. target.style.position = 'fixed';
  32. target.style.left = '0';
  33. target.style.height = 'auto';
  34. target.style.minHeight = 'auto';
  35. target.style.maxHeight = 'auto';
  36. target.style.paddingTop = '0';
  37. target.style.paddingBottom = '0';
  38. target.style.borderTopWidth = '0';
  39. target.style.borderBottomWidth = '0';
  40. target.style.top = '-999999px';
  41. target.style.zIndex = '-1000';
  42. // clean up css overflow
  43. target.style.textOverflow = 'clip';
  44. target.style.whiteSpace = 'normal';
  45. target.style.webkitLineClamp = 'none';
  46. }
  47. function getRealLineHeight(originElement) {
  48. var heightContainer = document.createElement('div');
  49. resetDomStyles(heightContainer, originElement);
  50. heightContainer.appendChild(document.createTextNode('text'));
  51. document.body.appendChild(heightContainer);
  52. // The element real height is always less than multiple of line-height
  53. // Use getBoundingClientRect to get actual single row height of the element
  54. var realHeight = heightContainer.getBoundingClientRect().height;
  55. document.body.removeChild(heightContainer);
  56. return realHeight;
  57. }
  58. var _default = function _default(originElement, option, content, fixedContent, ellipsisStr) {
  59. if (!ellipsisContainer) {
  60. ellipsisContainer = document.createElement('div');
  61. ellipsisContainer.setAttribute('aria-hidden', 'true');
  62. document.body.appendChild(ellipsisContainer);
  63. }
  64. var rows = option.rows,
  65. _option$suffix = option.suffix,
  66. suffix = _option$suffix === void 0 ? '' : _option$suffix;
  67. var lineHeight = getRealLineHeight(originElement);
  68. var maxHeight = Math.round(lineHeight * rows * 100) / 100;
  69. resetDomStyles(ellipsisContainer, originElement);
  70. // Render in the fake container
  71. var vm = (0, _vue.createApp)({
  72. render: function render() {
  73. return (0, _vue.createVNode)("div", {
  74. "style": wrapperStyle
  75. }, [(0, _vue.createVNode)("span", {
  76. "style": wrapperStyle
  77. }, [content, suffix]), (0, _vue.createVNode)("span", {
  78. "style": wrapperStyle
  79. }, [fixedContent])]);
  80. }
  81. });
  82. vm.mount(ellipsisContainer);
  83. // Check if ellipsis in measure div is height enough for content
  84. function inRange() {
  85. var currentHeight = Math.round(ellipsisContainer.getBoundingClientRect().height * 100) / 100;
  86. return currentHeight - 0.1 <= maxHeight; // -.1 for firefox
  87. }
  88. // Skip ellipsis if already match
  89. if (inRange()) {
  90. vm.unmount();
  91. return {
  92. content: content,
  93. text: ellipsisContainer.innerHTML,
  94. ellipsis: false
  95. };
  96. }
  97. var childNodes = Array.prototype.slice.apply(ellipsisContainer.childNodes[0].childNodes[0].cloneNode(true).childNodes).filter(function (_ref) {
  98. var nodeType = _ref.nodeType,
  99. data = _ref.data;
  100. return nodeType !== COMMENT_NODE && data !== '';
  101. });
  102. var fixedNodes = Array.prototype.slice.apply(ellipsisContainer.childNodes[0].childNodes[1].cloneNode(true).childNodes);
  103. vm.unmount();
  104. // ========================= Find match ellipsis content =========================
  105. var ellipsisChildren = [];
  106. ellipsisContainer.innerHTML = '';
  107. // Create origin content holder
  108. var ellipsisContentHolder = document.createElement('span');
  109. ellipsisContainer.appendChild(ellipsisContentHolder);
  110. var ellipsisTextNode = document.createTextNode(ellipsisStr + suffix);
  111. ellipsisContentHolder.appendChild(ellipsisTextNode);
  112. fixedNodes.forEach(function (childNode) {
  113. ellipsisContainer.appendChild(childNode);
  114. });
  115. // Append before fixed nodes
  116. function appendChildNode(node) {
  117. ellipsisContentHolder.insertBefore(node, ellipsisTextNode);
  118. }
  119. // Get maximum text
  120. function measureText(textNode, fullText) {
  121. var startLoc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  122. var endLoc = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : fullText.length;
  123. var lastSuccessLoc = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
  124. var midLoc = Math.floor((startLoc + endLoc) / 2);
  125. var currentText = fullText.slice(0, midLoc);
  126. textNode.textContent = currentText;
  127. if (startLoc >= endLoc - 1) {
  128. // Loop when step is small
  129. for (var step = endLoc; step >= startLoc; step -= 1) {
  130. var currentStepText = fullText.slice(0, step);
  131. textNode.textContent = currentStepText;
  132. if (inRange() || !currentStepText) {
  133. return step === fullText.length ? {
  134. finished: false,
  135. vNode: fullText
  136. } : {
  137. finished: true,
  138. vNode: currentStepText
  139. };
  140. }
  141. }
  142. }
  143. if (inRange()) {
  144. return measureText(textNode, fullText, midLoc, endLoc, midLoc);
  145. }
  146. return measureText(textNode, fullText, startLoc, midLoc, lastSuccessLoc);
  147. }
  148. function measureNode(childNode) {
  149. var type = childNode.nodeType;
  150. // console.log('type', type);
  151. // if (type === ELEMENT_NODE) {
  152. // // We don't split element, it will keep if whole element can be displayed.
  153. // appendChildNode(childNode);
  154. // if (inRange()) {
  155. // return {
  156. // finished: false,
  157. // vNode: contentList[index],
  158. // };
  159. // }
  160. // // Clean up if can not pull in
  161. // ellipsisContentHolder.removeChild(childNode);
  162. // return {
  163. // finished: true,
  164. // vNode: null,
  165. // };
  166. // }
  167. if (type === TEXT_NODE) {
  168. var fullText = childNode.textContent || '';
  169. var textNode = document.createTextNode(fullText);
  170. appendChildNode(textNode);
  171. return measureText(textNode, fullText);
  172. }
  173. // Not handle other type of content
  174. return {
  175. finished: false,
  176. vNode: null
  177. };
  178. }
  179. childNodes.some(function (childNode) {
  180. var _measureNode = measureNode(childNode),
  181. finished = _measureNode.finished,
  182. vNode = _measureNode.vNode;
  183. if (vNode) {
  184. ellipsisChildren.push(vNode);
  185. }
  186. return finished;
  187. });
  188. return {
  189. content: ellipsisChildren,
  190. text: ellipsisContainer.innerHTML,
  191. ellipsis: true
  192. };
  193. };
  194. exports.default = _default;