@aurelia-mdc-web/ripple
Version:
Wrapper for Material Components Web Ripple
122 lines • 5.86 kB
JavaScript
var MdcRipple_1;
import { __awaiter, __decorate, __metadata } 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';
let MdcRipple = MdcRipple_1 = class MdcRipple extends MdcComponent {
constructor() {
super(...arguments);
this.inputBindingPromise = new Promise(r => this.inputBindingPromiseResolver = r);
}
inputChanged() {
this.inputBindingPromiseResolver();
}
unboundedChanged() {
return __awaiter(this, void 0, void 0, function* () {
var _a;
yield this.initialised;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.setUnbounded(Boolean(this.unbounded));
});
}
initialise() {
return __awaiter(this, void 0, void 0, function* () {
var _a, _b, _c;
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');
}
}
const inputBinding = this.root.au['mdc-ripple'].boundProperties.find(x => x.binding.targetProperty === 'input');
if (inputBinding) {
yield this.inputBindingPromise;
}
});
}
activate() {
var _a;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.activate();
}
deactivate() {
var _a;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.deactivate();
}
layout() {
var _a;
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.layout();
}
getDefaultFoundation() {
return new MDCRippleFoundation(this.createAdapter());
}
createAdapter() {
var _a;
return {
addClass: (className) => { var _a; return ((_a = this.surface) !== null && _a !== void 0 ? _a : this.root).classList.add(className); },
browserSupportsCssVars: () => util.supportsCssVariables(window),
computeBoundingRect: (_a = this.computeBoundingRect) !== null && _a !== void 0 ? _a : (() => { var _a; return ((_a = this.surface) !== null && _a !== void 0 ? _a : this.root).getBoundingClientRect(); }),
containsEventTarget: (target) => this.root.contains(target),
deregisterDocumentInteractionHandler: (evtType, handler) => document.documentElement.removeEventListener(evtType, handler, applyPassive()),
deregisterInteractionHandler: (evtType, handler) => { var _a; return ((_a = this.input) !== null && _a !== void 0 ? _a : this.root).removeEventListener(evtType, handler, applyPassive()); },
deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
getWindowPageOffset: () => ({ x: window.pageXOffset, y: window.pageYOffset }),
isSurfaceActive: () => { var _a; return this.activeSurface && matches((_a = this.input) !== null && _a !== void 0 ? _a : this.root, ':active'); },
isSurfaceDisabled: () => this.disabled,
isUnbounded: () => this.unbounded,
registerDocumentInteractionHandler: (evtType, handler) => document.documentElement.addEventListener(evtType, handler, applyPassive()),
registerInteractionHandler: (evtType, handler) => { var _a; return ((_a = this.input) !== null && _a !== void 0 ? _a : this.root).addEventListener(evtType, handler, applyPassive()); },
registerResizeHandler: (handler) => window.addEventListener('resize', handler),
removeClass: (className) => { var _a; return ((_a = this.surface) !== null && _a !== void 0 ? _a : this.root).classList.remove(className); },
updateCssVariable: (varName, value) => { var _a; return ((_a = this.surface) !== null && _a !== void 0 ? _a : this.root).style.setProperty(varName, value); },
};
}
};
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);
export { MdcRipple };
//# sourceMappingURL=mdc-ripple.js.map