UNPKG

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