@aurelia-mdc-web/base
Version:
Base classes for Aurelia Material Components Web
86 lines • 3.52 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { customAttribute, bindingMode, inject, bindable } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
var MdcSizeCustomAttribute = /** @class */ (function () {
function MdcSizeCustomAttribute(element) {
this.element = element;
this.value = { width: 0, height: 0 };
this.width = 0;
this.height = 0;
}
MdcSizeCustomAttribute.prototype.bind = function () {
var _a;
this.observer = this.getObserver();
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.observe(this.element);
};
MdcSizeCustomAttribute.prototype.unbind = function () {
var _a;
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
this.observer = void 0;
};
MdcSizeCustomAttribute.prototype.getObserver = function () {
var _this = this;
if (typeof PLATFORM.global.ResizeObserver === 'function') {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return new PLATFORM.global.ResizeObserver(function (records) {
var rect = records[0].contentRect;
_this.value = { width: rect.width, height: rect.height };
});
}
else {
return new ElementSizeDirtyChecker(function (size) {
_this.value = size;
});
}
};
MdcSizeCustomAttribute.prototype.valueChanged = function (size) {
this.value = size;
this.width = size.width;
this.height = size.height;
};
__decorate([
bindable({ defaultBindingMode: bindingMode.fromView, primaryProperty: true }),
__metadata("design:type", Object)
], MdcSizeCustomAttribute.prototype, "value", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.fromView }),
__metadata("design:type", Number)
], MdcSizeCustomAttribute.prototype, "width", void 0);
__decorate([
bindable({ defaultBindingMode: bindingMode.fromView }),
__metadata("design:type", Number)
], MdcSizeCustomAttribute.prototype, "height", void 0);
MdcSizeCustomAttribute = __decorate([
customAttribute('mdc-size'),
inject(Element),
__metadata("design:paramtypes", [HTMLElement])
], MdcSizeCustomAttribute);
return MdcSizeCustomAttribute;
}());
export { MdcSizeCustomAttribute };
var ElementSizeDirtyChecker = /** @class */ (function () {
function ElementSizeDirtyChecker(callback, rate /* 3 times a second */) {
if (rate === void 0) { rate = 330; }
this.callback = callback;
this.rate = rate;
this.size = { width: 0, height: 0 };
}
ElementSizeDirtyChecker.prototype.observe = function (element) {
var _this = this;
this.timerId = setInterval(function () {
var _a = element.getBoundingClientRect(), width = _a.width, height = _a.height;
var currentSize = _this.size;
if (width !== currentSize.width || height !== currentSize.height) {
_this.size = { width: width, height: height };
if (typeof _this.callback === 'function') {
_this.callback(_this.size);
}
}
}, this.rate);
};
ElementSizeDirtyChecker.prototype.disconnect = function () {
clearInterval(this.timerId);
};
return ElementSizeDirtyChecker;
}());
//# sourceMappingURL=mdc-size-attribute.js.map