mostly-dom
Version:
A virtual-dom for TypeScript
128 lines • 4.47 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
}
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var BaseModule_1 = require("./BaseModule");
var emptyVNode_1 = require("./emptyVNode");
function createStylesModule() {
return new StylesModule();
}
exports.createStylesModule = createStylesModule;
var StylesModule = /** @class */ (function (_super) {
__extends(StylesModule, _super);
function StylesModule() {
return _super !== null && _super.apply(this, arguments) || this;
}
StylesModule.prototype.pre = function () {
setRequestAnimationFrame();
};
StylesModule.prototype.create = function (vNode) {
updateStyle(emptyVNode_1.emptyVNode, vNode);
};
StylesModule.prototype.update = function (formerVNode, vNode) {
updateStyle(formerVNode, vNode);
};
StylesModule.prototype.remove = function (vNode, removeElement) {
applyRemoveStyle(vNode, removeElement);
};
StylesModule.prototype.destroy = function (vNode) {
applyDestroyStyle(vNode);
};
return StylesModule;
}(BaseModule_1.BaseModule));
var requestAnimationFrame;
function setRequestAnimationFrame() {
if (!requestAnimationFrame)
requestAnimationFrame =
(typeof window !== 'undefined' && window.requestAnimationFrame) || setTimeout;
}
exports.pre = setRequestAnimationFrame;
function nextFrame(fn) {
requestAnimationFrame(function () {
requestAnimationFrame(fn);
});
}
function setValueOnNextFrame(obj, prop, value) {
nextFrame(function () {
obj[prop] = value;
});
}
function updateStyle(formerVNode, vNode) {
var styleValue;
var element = vNode.element;
var formerStyle = formerVNode.props.style;
var style = vNode.props.style;
if (!formerStyle && !style)
return;
formerStyle = formerStyle || {};
style = style || {};
var formerHasDelayedProperty = !!formerStyle.delayed;
// tslint:disable-next-line:prefer-const
for (var key in formerStyle)
if (!style[key])
element.style[key] = '';
for (var key in style) {
styleValue = style[key];
if (key === 'delayed') {
// tslint:disable-next-line:prefer-const
for (var delayKey in style.delayed) {
styleValue = style.delayed[delayKey];
if (!formerHasDelayedProperty || styleValue !== formerStyle.delayed[delayKey])
setValueOnNextFrame(element.style, delayKey, styleValue);
}
}
else if (key !== 'remove') {
element.style[key] = styleValue;
}
}
}
exports.create = updateStyle;
exports.update = updateStyle;
function applyDestroyStyle(vNode) {
var element = vNode.element;
var style = vNode.props.style;
if (!style || !style.destroy)
return;
var destroy = style.destroy;
for (var key in destroy)
element.style[key] = destroy[key];
}
exports.destroy = applyDestroyStyle;
function applyRemoveStyle(vNode, callback) {
var style = vNode.props.style;
if (!style || !style.remove)
return callback();
var element = vNode.element;
var index = 0;
var computedStyle;
var listenerCount = 0;
var appliedStyles = [];
for (var key in style) {
appliedStyles.push(key);
element.style[key] = style[key];
}
computedStyle = getComputedStyle(element);
var transitionProperties = computedStyle['transition-property'].split(', ');
for (; index < transitionProperties.length; ++index)
if (appliedStyles.indexOf(transitionProperties[index]) !== -1)
listenerCount++;
element.addEventListener('transitionend', function (event) {
if (event.target === element)
--listenerCount;
if (listenerCount === 0)
callback();
});
}
exports.remove = applyRemoveStyle;
//# sourceMappingURL=styles.js.map