@aurelia-mdc-web/base
Version:
Base classes for Aurelia Material Components Web
89 lines • 3.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MdcSizeCustomAttribute = void 0;
var tslib_1 = require("tslib");
var aurelia_framework_1 = require("aurelia-framework");
var aurelia_pal_1 = require("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 aurelia_pal_1.PLATFORM.global.ResizeObserver === 'function') {
// eslint-disable-next-line @typescript-eslint/no-unsafe-return
return new aurelia_pal_1.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;
};
tslib_1.__decorate([
(0, aurelia_framework_1.bindable)({ defaultBindingMode: aurelia_framework_1.bindingMode.fromView, primaryProperty: true }),
tslib_1.__metadata("design:type", Object)
], MdcSizeCustomAttribute.prototype, "value", void 0);
tslib_1.__decorate([
(0, aurelia_framework_1.bindable)({ defaultBindingMode: aurelia_framework_1.bindingMode.fromView }),
tslib_1.__metadata("design:type", Number)
], MdcSizeCustomAttribute.prototype, "width", void 0);
tslib_1.__decorate([
(0, aurelia_framework_1.bindable)({ defaultBindingMode: aurelia_framework_1.bindingMode.fromView }),
tslib_1.__metadata("design:type", Number)
], MdcSizeCustomAttribute.prototype, "height", void 0);
MdcSizeCustomAttribute = tslib_1.__decorate([
(0, aurelia_framework_1.customAttribute)('mdc-size'),
(0, aurelia_framework_1.inject)(Element),
tslib_1.__metadata("design:paramtypes", [HTMLElement])
], MdcSizeCustomAttribute);
return MdcSizeCustomAttribute;
}());
exports.MdcSizeCustomAttribute = 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