All files / src/components/e-ripple.vue index.vue

39.39% Statements 13/33
20% Branches 2/10
14.28% Functions 1/7
43.33% Lines 13/30

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67      7x     7x         7x                                                                                 7x 7x             7x 7x 7x 7x 7x 7x 7x
<template>
<span :class="$style.root"><slot></slot></span>
</template>
 
<script>
export default {
    name: 'e-ripple',
    props: { reference: { type: [String], default: 'parent' } },
    data() {
        return { referenceEl: undefined };
    },
    mounted() {
        this.referenceEl = this.$el.parentElement;
        const computedStyle = window.getComputedStyle(this.referenceEl);
        if (computedStyle.overflow !== 'hidden')
            this.referenceEl.style.overflow = 'hidden';
        if (computedStyle.position === 'static')
            this.referenceEl.style.position = 'relative';
        this.referenceEl.addEventListener('click', this.onClick);
    },
    destroyed() {
        this.referenceEl.removeEventListener('click', this.onClick);
    },
    methods: {
        onClick(e) {
            this.$el.removeAttribute('animated');
            const pos = this.referenceEl.getBoundingClientRect();
            this.$el.style.left = e.clientX - pos.left + 'px';
            this.$el.style.top = e.clientY - pos.top + 'px';
            this.$el.setAttribute('animated', 'animated');
        },
    },
};
</script>

<style module>
.root {
    display: block;
    position: absolute;
    z-index: 9000;
    background-color: var(--ripple-background);
    border-radius: 100%;
    width: var(--ripple-size);
    height: var(--ripple-size);
    margin-left: calc(var(--ripple-size) / -2);
    margin-top: calc(var(--ripple-size) / -2);
    transform: scale(0);
    cursor: var(--cursor-pointer);
    pointer-events: none;
}
 
.root[color="light"] {
    background-color: var(--ripple-background-light);
}

.root[animated] {
    transition: var(--ripple-transition);
    transform: scale(12);
    background-color: transparent;
}
 
.reference {
    position: relative !important;
    overflow: hidden !important;
}
</style>