-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
48 lines (42 loc) · 1.44 KB
/
index.js
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
/**
* @description Ripple 이펙트 영역을 생성하고 추가합니다.
* @param {MouseEvent} e 마우스 이벤트 객체
*/
function addRippleEffact (e) {
const $this = this
const size = Math.max(this.offsetWidth, this.offsetHeight)
const x = e.offsetX
const y = e.offsetY
const ripple = createRippleElement(x, y, size)
ripple.addEventListener('animationend', function () {
$this.removeChild(this)
})
this.appendChild(ripple)
}
/**
* @description 지정한 위치와 크기로 Ripple 이펙트 Element를 생성합니다.
* @param {number} x 마우스 클릭 X
* @param {number} y 마우스 클릭 Y
* @param {number} size Ripple 이펙트 크기
* @return {HTMLElement} Ripple 이펙트 Element
*/
function createRippleElement (x, y, size) {
const div = document.createElement('div')
div.classList.add('ripple')
div.style.left = x - size / 2 + 'px'
div.style.top = y - size / 2 + 'px'
div.style.width = div.style.height = size + 'px'
return div
}
// 전역 객체에 $material 등록
window.$material = {
button: function (el) {
el.onmousedown = addRippleEffact
}
}
document.addEventListener('DOMContentLoaded', function () {
const el_1 = document.getElementById('btn-1')
const el_2 = document.getElementById('btn-2')
$material.button(el_1)
$material.button(el_2)
})