Sliding switch test

by MegaScience

HTML

<div class="YouTube-Prevent-Playlist-Autoplay-Button-Container"><div class="YouTube-Prevent-Playlist-Autoplay-Button-Bar"></div><div class="YouTube-Prevent-Playlist-Autoplay-Button-Circle"></div></div>

CSS

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.YouTube-Prevent-Playlist-Autoplay-Button-Container {
  position: relative;
  height: 20px;
  width: 36px;
  cursor: pointer;
  transform: scale(2000%);
}
.YouTube-Prevent-Playlist-Autoplay-Button-Container .YouTube-Prevent-Playlist-Autoplay-Button-Bar {
  position: absolute;
  top: calc(50% - 7px);
  border-radius: 7px;
  background-color: rgba(23.5, 23.5, 23.5, 0.8);
  height: 14px;
  width: 36px;
}
.YouTube-Prevent-Playlist-Autoplay-Button-Container .YouTube-Prevent-Playlist-Autoplay-Button-Circle {
  position: absolute;
  left: 0;
  background-color: #909090;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  transition-property: background-color, left;
  transition-duration: 0.08s;
}
.YouTube-Prevent-Playlist-Autoplay-Button-Container.YouTube-Prevent-Playlist-Autoplay-Button-On .YouTube-Prevent-Playlist-Autoplay-Button-Circle {
  position: absolute;
  left: calc(100% - 20px);
  background-color: #3ea6ff;
}

JavaScript

let transition = false
function toggle(e) {
	console.log('Bam', new Date().toLocaleString(), transition)
  if(!transition) e.currentTarget.classList.toggle('YouTube-Prevent-Playlist-Autoplay-Button-On')
}
const container = document.getElementsByClassName('YouTube-Prevent-Playlist-Autoplay-Button-Container')[0]
const circle = container.getElementsByClassName('YouTube-Prevent-Playlist-Autoplay-Button-Circle')[0]
container.addEventListener('click', toggle)
circle.addEventListener('transitionrun', e => {
	transition = true
  console.log(`transitionrun ${e.propertyName}`)
  //setTimeout(() => circle.remove(), 200)
})
circle.addEventListener('transitionend', e => {
	transition = false
  console.log(`transitionend ${e.propertyName}`)
})
circle.addEventListener('transitioncancel', e => {
	transition = false
	console.log(`transitioncancel ${e.propertyName}`)
})