[메모] loader 클래스로 만들기

임택·2021년 3월 5일
0

메모

목록 보기
7/14
class Loader {
	$loader = null;
	data = {
		visible: false,
	};

	constructor({ $target, data, setLoading }) {
		this.$loader = document.createElement('section');
		$target.appendChild(this.$loader);
		this.data = data;
		this.setLoading = setLoading;

		this.render();
		this.$loader.onclick = () => this.toggleLoader(false);
		console.log('[CREATED]', 'LOADER', this.isLoading);
	}

	setState(nextData) {
		this.data = nextData;
		this.render();
		console.log('[UPDATE]', 'Loading', nextData);
	}

	toggleLoader(visible) {
		this.setState({ visible });
	}

	render() {
		const { visible } = this.data;
		if (visible) {
			this.$loader.innerHTML = `
                <div class="loader-wrapper"> 
                    <div class="loader"></div>
                </div>
            `;
		} else {
			this.$loader.innerHTML = '';
		}
	}
}
profile
캬-!

0개의 댓글