미디어위키:Gadget-Vector.js

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

(function () {
	'use strict';

	var animationDuration = 360;
	var animationEndTime = 0;
	var observer = null;

	function getWatchButton() {
		return document.querySelector('#ca-watch, #ca-unwatch');
	}

	function startWatchAnimation() {
		var button = getWatchButton();

		animationEndTime = Date.now() + animationDuration;

		if (button) {
			button.classList.remove('pvz-watch-spinning');

			/* 같은 클래스를 연속으로 적용해도 애니메이션이 다시 시작되게 한다. */
			void button.offsetWidth;
			button.classList.add('pvz-watch-spinning');
		}
	}

	function continueAnimationAfterStateChange() {
		var button;
		var remaining;

		if (Date.now() >= animationEndTime) {
			return;
		}

		button = getWatchButton();
		remaining = animationEndTime - Date.now();

		if (!button || button.classList.contains('pvz-watch-spinning')) {
			return;
		}

		button.classList.add('pvz-watch-spinning');

		window.setTimeout(function () {
			button.classList.remove('pvz-watch-spinning');
		}, remaining);
	}

	function handleClick(event) {
		var link = event.target.closest('#ca-watch > a, #ca-unwatch > a');

		if (!link) {
			return;
		}

		startWatchAnimation();
	}

	function init() {
		document.addEventListener('click', handleClick, true);

		observer = new MutationObserver(function () {
			continueAnimationAfterStateChange();
		});

		observer.observe(document.body, {
			childList: true,
			subtree: true,
			attributes: true,
			attributeFilter: ['id']
		});
	}

	if (document.readyState === 'loading') {
		document.addEventListener('DOMContentLoaded', init, { once: true });
	} else {
		init();
	}
}());