@aurelia-mdc-web/ripple
Version:
Wrapper for Material Components Web Ripple
143 lines • 7.59 kB
JavaScript
import { __awaiter, __decorate, __extends, __generator, __metadata, __read, __spreadArray } from "tslib";
import { MdcComponent } from '@aurelia-mdc-web/base';
import { MDCRippleFoundation, util } from '@material/ripple';
import { matches } from '@material/dom/ponyfill';
import { applyPassive } from '@material/dom/events';
import { inject, customAttribute } from 'aurelia-framework';
import { bindable } from 'aurelia-typed-observable-plugin';
var MdcRipple = /** @class */ (function (_super) {
__extends(MdcRipple, _super);
function MdcRipple() {
var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
_this.inputBindingPromise = new Promise(function (r) { return _this.inputBindingPromiseResolver = r; });
return _this;
}
MdcRipple_1 = MdcRipple;
MdcRipple.prototype.inputChanged = function () {
this.inputBindingPromiseResolver();
};
MdcRipple.prototype.unboundedChanged = function () {
return __awaiter(this, void 0, void 0, function () {
var _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, this.initialised];
case 1:
_b.sent();
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.setUnbounded(Boolean(this.unbounded));
return [2 /*return*/];
}
});
});
};
MdcRipple.prototype.initialise = function () {
return __awaiter(this, void 0, void 0, function () {
var inputBinding;
var _a, _b, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
this.root.classList.add(MdcRipple_1.ATTRIBUTE_CLASS);
if (!this.noClass) {
((_a = this.surface) !== null && _a !== void 0 ? _a : this.root).classList.add('mdc-ripple-surface');
if (this.primary) {
((_b = this.surface) !== null && _b !== void 0 ? _b : this.root).classList.add('mdc-ripple-surface--primary');
}
if (this.accent) {
((_c = this.surface) !== null && _c !== void 0 ? _c : this.root).classList.add('mdc-ripple-surface--accent');
}
}
inputBinding = this.root.au['mdc-ripple'].boundProperties.find(function (x) { return x.binding.targetProperty === 'input'; });
if (!inputBinding) return [3 /*break*/, 2];
return [4 /*yield*/, this.inputBindingPromise];
case 1:
_d.sent();
_d.label = 2;
case 2: return [2 /*return*/];
}
});
});
};
MdcRipple.prototype.activate = function () {
var _a;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.activate();
};
MdcRipple.prototype.deactivate = function () {
var _a;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.deactivate();
};
MdcRipple.prototype.layout = function () {
var _a;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.layout();
};
MdcRipple.prototype.getDefaultFoundation = function () {
return new MDCRippleFoundation(this.createAdapter());
};
MdcRipple.prototype.createAdapter = function () {
var _this = this;
var _a;
return {
addClass: function (className) { var _a; return ((_a = _this.surface) !== null && _a !== void 0 ? _a : _this.root).classList.add(className); },
browserSupportsCssVars: function () { return util.supportsCssVariables(window); },
computeBoundingRect: (_a = this.computeBoundingRect) !== null && _a !== void 0 ? _a : (function () { var _a; return ((_a = _this.surface) !== null && _a !== void 0 ? _a : _this.root).getBoundingClientRect(); }),
containsEventTarget: function (target) { return _this.root.contains(target); },
deregisterDocumentInteractionHandler: function (evtType, handler) { return document.documentElement.removeEventListener(evtType, handler, applyPassive()); },
deregisterInteractionHandler: function (evtType, handler) { var _a; return ((_a = _this.input) !== null && _a !== void 0 ? _a : _this.root).removeEventListener(evtType, handler, applyPassive()); },
deregisterResizeHandler: function (handler) { return window.removeEventListener('resize', handler); },
getWindowPageOffset: function () { return ({ x: window.pageXOffset, y: window.pageYOffset }); },
isSurfaceActive: function () { var _a; return _this.activeSurface && matches((_a = _this.input) !== null && _a !== void 0 ? _a : _this.root, ':active'); },
isSurfaceDisabled: function () { return _this.disabled; },
isUnbounded: function () { return _this.unbounded; },
registerDocumentInteractionHandler: function (evtType, handler) { return document.documentElement.addEventListener(evtType, handler, applyPassive()); },
registerInteractionHandler: function (evtType, handler) { var _a; return ((_a = _this.input) !== null && _a !== void 0 ? _a : _this.root).addEventListener(evtType, handler, applyPassive()); },
registerResizeHandler: function (handler) { return window.addEventListener('resize', handler); },
removeClass: function (className) { var _a; return ((_a = _this.surface) !== null && _a !== void 0 ? _a : _this.root).classList.remove(className); },
updateCssVariable: function (varName, value) { var _a; return ((_a = _this.surface) !== null && _a !== void 0 ? _a : _this.root).style.setProperty(varName, value); },
};
};
var MdcRipple_1;
MdcRipple.ATTRIBUTE_CLASS = 'mdc-ripple-enhanced';
__decorate([
bindable.none,
__metadata("design:type", HTMLInputElement)
], MdcRipple.prototype, "input", void 0);
__decorate([
bindable.none,
__metadata("design:type", HTMLElement)
], MdcRipple.prototype, "surface", void 0);
__decorate([
bindable.none,
__metadata("design:type", Function)
], MdcRipple.prototype, "computeBoundingRect", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcRipple.prototype, "disabled", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcRipple.prototype, "unbounded", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcRipple.prototype, "activeSurface", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcRipple.prototype, "noClass", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcRipple.prototype, "primary", void 0);
__decorate([
bindable.booleanAttr,
__metadata("design:type", Boolean)
], MdcRipple.prototype, "accent", void 0);
MdcRipple = MdcRipple_1 = __decorate([
inject(Element),
customAttribute('mdc-ripple')
], MdcRipple);
return MdcRipple;
}(MdcComponent));
export { MdcRipple };
//# sourceMappingURL=mdc-ripple.js.map