【javascript】【Gimmick】トグルスイッチ Toggle Switch

【HTML】

<div class="Toggle"></div>

【CSS】

.Toggle {
	position: relative;
	width: 3rem;
	height: 1rem;
	border-radius: 0.5rem;
	border: 1px solid black;
}
.Toggle::before {
	content: "";
	position: absolute;
	left: 1px;
	width: 1rem;
	height: 1rem;
	background-color: #6699FF;
	border-radius: 50%;
}
.Toggle.On::before {
	left: auto;
	right: 1px;
}

【Javascript】

(function () {
	var toggle = new Event('ChangeToggle', {bubbles: true});
	(function (click) {
		document.addEventListener('click', click, false);
	})(function (event) {
		var target = event.target;
		
		if (!target.classList.contains('Toggle')) { return; }
		
		target.classList.toggle('On');
		
		target.dispatchEvent(toggle);
	});
})();

【使い方】

(function (toggle) {
	document.addEventListener('ChangeToggle', toggle, false);
})(function (event) {
	var target = event.target;
	
	console.log(target.classList.contains('On'));
});