generated from wbkd/webpack-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
observer.js
31 lines (29 loc) · 1.08 KB
/
observer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import {isStyleMutation, propNameToCssVarName} from "./helper";
/**
* Observer option to watch style changes on current node
* @type {{subtree: boolean, attributes: boolean, childList: boolean, attributeFilter: [string]}}
*/
export const OBSERVER_OPTIONS = {
attributeFilter: ["style"],
attributes: true,
subtree: false,
childList: false
};
/**
* Observer style changes to keep css var and property synced
* @returns {MutationObserver}
*/
export const createObserver = () => new MutationObserver(mutations => {
mutations
.filter(isStyleMutation)
.forEach(({target}) => {
target._cssVarsProperties.forEach((cssVarNameInList) => {
// Update the element property (for 2-way binding)
const cssValue = target.style.getPropertyValue(propNameToCssVarName(cssVarNameInList));
const propValue = target[cssVarNameInList];
if (cssValue !== propValue) {
target[cssVarNameInList] = cssValue; // TODO: remove left whitespaces?
}
});
});
});