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 |
|
---|
5 | function 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 |
|
---|
32 | function 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 |
|
---|
77 | export default {
|
---|
78 | name: 'applyStyles',
|
---|
79 | enabled: true,
|
---|
80 | phase: 'write',
|
---|
81 | fn: applyStyles,
|
---|
82 | effect: effect,
|
---|
83 | requires: ['computeStyles']
|
---|
84 | }; |
---|