Skip to content

Instantly share code, notes, and snippets.

@FremyCompany
Last active February 5, 2019 13:37
Show Gist options
  • Save FremyCompany/1fd1a66db356b7e4105d5987139f7beb to your computer and use it in GitHub Desktop.
Save FremyCompany/1fd1a66db356b7e4105d5987139f7beb to your computer and use it in GitHub Desktop.
Proof of concept of styleMap extension
// ================================================================
// enable to update a set of properties with a single call
// ================================================================
StylePropertyMapReadOnly.prototype.update = function(updaters) {
var oldValues = Object.create(null);
for(var key in updaters) { oldValues[key] = this.get(key); }
for(var key in updaters) { let newValue = updaters[key](oldValues); if (newValue) this.set(key, newValue); }
}
// ================================================================
// demo of the above
// ================================================================
document.body.style.width = '10px';
document.body.style.height = '15px';
document.body.style.zoom = '2';
// swap width and height, and apply the zoom on those values only
document.body.attributeStyleMap.update({
zoom : old => 1,
width : old => old.height.mul(old.zoom),
height : old => old.width.mul(old.zoom)
});
// ================================================================
// enable fast usage of properties directly out of a styleMap
// ================================================================
Object.defineProperty(StylePropertyMapReadOnly.prototype, 'p', { get: function() {
var styleMap = this;
return new Proxy(Object.create(null), {
get(o,k) { return styleMap.get(k); },
set(o,k,v) { return styleMap.set(k,v); }
})
} });
// ================================================================
// enable to use css units on any number
// ================================================================
Object.defineProperty(Number.prototype, 'px', { get: function() {
return CSS.px(this);
} });
// ================================================================
// demo of the above
// ================================================================
document.body.style.width = document.body.style.width || "10px";
var styleMap = document.body.attributeStyleMap.p;
styleMap.width = styleMap.width.add(5..px);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment