@aurelia-mdc-web/ripple
Version:
Wrapper for Material Components Web Ripple
146 lines • 8.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MdcRipple = void 0;
var tslib_1 = require("tslib");
var base_1 = require("@aurelia-mdc-web/base");
var ripple_1 = require("@material/ripple");
var ponyfill_1 = require("@material/dom/ponyfill");
var events_1 = require("@material/dom/events");
var aurelia_framework_1 = require("aurelia-framework");
var aurelia_typed_observable_plugin_1 = require("aurelia-typed-observable-plugin");
var MdcRipple = /** @class */ (function (_super) {
tslib_1.__extends(MdcRipple, _super);
function MdcRipple() {
var _this = _super.apply(this, tslib_1.__spreadArray([], tslib_1.__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 tslib_1.__awaiter(this, void 0, void 0, function () {
var _a;
return tslib_1.__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 tslib_1.__awaiter(this, void 0, void 0, function () {
var inputBinding;
var _a, _b, _c;
return tslib_1.__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 ripple_1.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 ripple_1.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, (0, events_1.applyPassive)()); },
deregisterInteractionHandler: function (evtType, handler) { var _a; return ((_a = _this.input) !== null && _a !== void 0 ? _a : _this.root).removeEventListener(evtType, handler, (0, events_1.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 && (0, ponyfill_1.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, (0, events_1.applyPassive)()); },
registerInteractionHandler: function (evtType, handler) { var _a; return ((_a = _this.input) !== null && _a !== void 0 ? _a : _this.root).addEventListener(evtType, handler, (0, events_1.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';
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.none,
tslib_1.__metadata("design:type", HTMLInputElement)
], MdcRipple.prototype, "input", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.none,
tslib_1.__metadata("design:type", HTMLElement)
], MdcRipple.prototype, "surface", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.none,
tslib_1.__metadata("design:type", Function)
], MdcRipple.prototype, "computeBoundingRect", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcRipple.prototype, "disabled", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcRipple.prototype, "unbounded", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcRipple.prototype, "activeSurface", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcRipple.prototype, "noClass", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcRipple.prototype, "primary", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.booleanAttr,
tslib_1.__metadata("design:type", Boolean)
], MdcRipple.prototype, "accent", void 0);
MdcRipple = MdcRipple_1 = tslib_1.__decorate([
(0, aurelia_framework_1.inject)(Element),
(0, aurelia_framework_1.customAttribute)('mdc-ripple')
], MdcRipple);
return MdcRipple;
}(base_1.MdcComponent));
exports.MdcRipple = MdcRipple;
//# sourceMappingURL=mdc-ripple.js.map