You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

83 lines
2.5 KiB

2 months ago
  1. import getNodeName from "../dom-utils/getNodeName.js";
  2. import { isHTMLElement } from "../dom-utils/instanceOf.js"; // This modifier takes the styles prepared by the `computeStyles` modifier
  3. // and applies them to the HTMLElements such as popper and arrow
  4. function applyStyles(_ref) {
  5. var state = _ref.state;
  6. Object.keys(state.elements).forEach(function (name) {
  7. var style = state.styles[name] || {};
  8. var attributes = state.attributes[name] || {};
  9. var element = state.elements[name]; // arrow is optional + virtual elements
  10. if (!isHTMLElement(element) || !getNodeName(element)) {
  11. return;
  12. } // Flow doesn't support to extend this property, but it's the most
  13. // effective way to apply styles to an HTMLElement
  14. // $FlowFixMe[cannot-write]
  15. Object.assign(element.style, style);
  16. Object.keys(attributes).forEach(function (name) {
  17. var value = attributes[name];
  18. if (value === false) {
  19. element.removeAttribute(name);
  20. } else {
  21. element.setAttribute(name, value === true ? '' : value);
  22. }
  23. });
  24. });
  25. }
  26. function effect(_ref2) {
  27. var state = _ref2.state;
  28. var initialStyles = {
  29. popper: {
  30. position: state.options.strategy,
  31. left: '0',
  32. top: '0',
  33. margin: '0'
  34. },
  35. arrow: {
  36. position: 'absolute'
  37. },
  38. reference: {}
  39. };
  40. Object.assign(state.elements.popper.style, initialStyles.popper);
  41. state.styles = initialStyles;
  42. if (state.elements.arrow) {
  43. Object.assign(state.elements.arrow.style, initialStyles.arrow);
  44. }
  45. return function () {
  46. Object.keys(state.elements).forEach(function (name) {
  47. var element = state.elements[name];
  48. var attributes = state.attributes[name] || {};
  49. var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
  50. var style = styleProperties.reduce(function (style, property) {
  51. style[property] = '';
  52. return style;
  53. }, {}); // arrow is optional + virtual elements
  54. if (!isHTMLElement(element) || !getNodeName(element)) {
  55. return;
  56. }
  57. Object.assign(element.style, style);
  58. Object.keys(attributes).forEach(function (attribute) {
  59. element.removeAttribute(attribute);
  60. });
  61. });
  62. };
  63. } // eslint-disable-next-line import/no-unused-modules
  64. export default {
  65. name: 'applyStyles',
  66. enabled: true,
  67. phase: 'write',
  68. fn: applyStyles,
  69. effect: effect,
  70. requires: ['computeStyles']
  71. };