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.
84 lines
2.5 KiB
84 lines
2.5 KiB
import getNodeName from "../dom-utils/getNodeName.js";
|
|
import { isHTMLElement } from "../dom-utils/instanceOf.js"; // This modifier takes the styles prepared by the `computeStyles` modifier
|
|
// and applies them to the HTMLElements such as popper and arrow
|
|
|
|
function applyStyles(_ref) {
|
|
var state = _ref.state;
|
|
Object.keys(state.elements).forEach(function (name) {
|
|
var style = state.styles[name] || {};
|
|
var attributes = state.attributes[name] || {};
|
|
var element = state.elements[name]; // arrow is optional + virtual elements
|
|
|
|
if (!isHTMLElement(element) || !getNodeName(element)) {
|
|
return;
|
|
} // Flow doesn't support to extend this property, but it's the most
|
|
// effective way to apply styles to an HTMLElement
|
|
// $FlowFixMe[cannot-write]
|
|
|
|
|
|
Object.assign(element.style, style);
|
|
Object.keys(attributes).forEach(function (name) {
|
|
var value = attributes[name];
|
|
|
|
if (value === false) {
|
|
element.removeAttribute(name);
|
|
} else {
|
|
element.setAttribute(name, value === true ? '' : value);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function effect(_ref2) {
|
|
var state = _ref2.state;
|
|
var initialStyles = {
|
|
popper: {
|
|
position: state.options.strategy,
|
|
left: '0',
|
|
top: '0',
|
|
margin: '0'
|
|
},
|
|
arrow: {
|
|
position: 'absolute'
|
|
},
|
|
reference: {}
|
|
};
|
|
Object.assign(state.elements.popper.style, initialStyles.popper);
|
|
state.styles = initialStyles;
|
|
|
|
if (state.elements.arrow) {
|
|
Object.assign(state.elements.arrow.style, initialStyles.arrow);
|
|
}
|
|
|
|
return function () {
|
|
Object.keys(state.elements).forEach(function (name) {
|
|
var element = state.elements[name];
|
|
var attributes = state.attributes[name] || {};
|
|
var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them
|
|
|
|
var style = styleProperties.reduce(function (style, property) {
|
|
style[property] = '';
|
|
return style;
|
|
}, {}); // arrow is optional + virtual elements
|
|
|
|
if (!isHTMLElement(element) || !getNodeName(element)) {
|
|
return;
|
|
}
|
|
|
|
Object.assign(element.style, style);
|
|
Object.keys(attributes).forEach(function (attribute) {
|
|
element.removeAttribute(attribute);
|
|
});
|
|
});
|
|
};
|
|
} // eslint-disable-next-line import/no-unused-modules
|
|
|
|
|
|
export default {
|
|
name: 'applyStyles',
|
|
enabled: true,
|
|
phase: 'write',
|
|
fn: applyStyles,
|
|
effect: effect,
|
|
requires: ['computeStyles']
|
|
};
|