@aurelia-mdc-web/ripple
Version:
Wrapper for Material Components Web Ripple
112 lines • 4.81 kB
JavaScript
var MdcRipple_1;
import { __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();
}
async unboundedChanged() {
await this.initialised;
this.foundation?.setUnbounded(Boolean(this.unbounded));
}
async initialise() {
this.root.classList.add(MdcRipple_1.ATTRIBUTE_CLASS);
if (!this.noClass) {
(this.surface ?? this.root).classList.add('mdc-ripple-surface');
if (this.primary) {
(this.surface ?? this.root).classList.add('mdc-ripple-surface--primary');
}
if (this.accent) {
(this.surface ?? this.root).classList.add('mdc-ripple-surface--accent');
}
}
const inputBinding = this.root.au['mdc-ripple'].boundProperties.find(x => x.binding.targetProperty === 'input');
if (inputBinding) {
await this.inputBindingPromise;
}
}
activate() {
this.foundation?.activate();
}
deactivate() {
this.foundation?.deactivate();
}
layout() {
this.foundation?.layout();
}
getDefaultFoundation() {
return new MDCRippleFoundation(this.createAdapter());
}
createAdapter() {
return {
addClass: (className) => (this.surface ?? this.root).classList.add(className),
browserSupportsCssVars: () => util.supportsCssVariables(window),
computeBoundingRect: this.computeBoundingRect ?? (() => (this.surface ?? this.root).getBoundingClientRect()),
containsEventTarget: (target) => this.root.contains(target),
deregisterDocumentInteractionHandler: (evtType, handler) => document.documentElement.removeEventListener(evtType, handler, applyPassive()),
deregisterInteractionHandler: (evtType, handler) => (this.input ?? this.root).removeEventListener(evtType, handler, applyPassive()),
deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
getWindowPageOffset: () => ({ x: window.pageXOffset, y: window.pageYOffset }),
isSurfaceActive: () => this.activeSurface && matches(this.input ?? this.root, ':active'),
isSurfaceDisabled: () => this.disabled,
isUnbounded: () => this.unbounded,
registerDocumentInteractionHandler: (evtType, handler) => document.documentElement.addEventListener(evtType, handler, applyPassive()),
registerInteractionHandler: (evtType, handler) => (this.input ?? this.root).addEventListener(evtType, handler, applyPassive()),
registerResizeHandler: (handler) => window.addEventListener('resize', handler),
removeClass: (className) => (this.surface ?? this.root).classList.remove(className),
updateCssVariable: (varName, value) => (this.surface ?? 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