@ionic/core
Version:
Base components for Ionic
87 lines (86 loc) • 3.08 kB
JavaScript
export class RippleEffect {
constructor() {
this.type = 'bounded';
}
async addRipple(pageX, pageY) {
return new Promise(resolve => {
this.queue.read(() => {
const rect = this.el.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
const hypotenuse = Math.sqrt(width * width + height * height);
const maxDim = Math.max(height, width);
const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
const finalScale = maxRadius / initialSize;
let posX = pageX - rect.left;
let posY = pageY - rect.top;
if (this.unbounded) {
posX = width * 0.5;
posY = height * 0.5;
}
const x = posX - initialSize * 0.5;
const y = posY - initialSize * 0.5;
const moveX = width * 0.5 - posX;
const moveY = height * 0.5 - posY;
this.queue.write(() => {
const div = this.win.document.createElement('div');
div.classList.add('ripple-effect');
const style = div.style;
style.top = y + 'px';
style.left = x + 'px';
style.width = style.height = initialSize + 'px';
style.setProperty('--final-scale', `${finalScale}`);
style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
const container = this.el.shadowRoot || this.el;
container.appendChild(div);
setTimeout(() => {
resolve(() => {
removeRipple(div);
});
}, 225 + 100);
});
});
});
}
get unbounded() {
return this.type === 'unbounded';
}
hostData() {
return {
role: 'presentation',
class: {
'unbounded': this.unbounded
}
};
}
static get is() { return "ion-ripple-effect"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"addRipple": {
"method": true
},
"el": {
"elementRef": true
},
"queue": {
"context": "queue"
},
"type": {
"type": String,
"attr": "type"
},
"win": {
"context": "window"
}
}; }
static get style() { return "/**style-placeholder:ion-ripple-effect:**/"; }
}
function removeRipple(ripple) {
ripple.classList.add('fade-out');
setTimeout(() => {
ripple.remove();
}, 200);
}
const PADDING = 10;
const INITIAL_ORIGIN_SCALE = 0.5;