qmlcore
qmlcore copied to clipboard
Styles from attributes to node
After app render, will be good idea to move binded styles to style node
var styleNode = null;
function createStyleNode() {
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
head.appendChild(style);
return style;
}
function addStyle(css) {
if (!styleNode) {
styleNode = createStyleNode();
}
if (styleNode.styleSheet){
styleNode.styleSheet.cssText = css;
} else {
styleNode.innerHTML = '';
styleNode.appendChild(document.createTextNode(css));
}
}
var styles = Array.prototype.map.call(document.getElementsByTagName('div'), function(node, index) {
node.dataset.index = index;
var style = node.getAttribute('style');
node.removeAttribute('style');
var prefix = '';
if (node.className) {
prefix = '.'+node.className.split(' ').join('.');
}
return `${prefix}[data-index="${index}"]{${style};}`;
});
addStyle(styles.join(''));
this needs additional performance investigation, since we already do updates in batches and it will most likely trigger additional layouts