fake-your-git-history.js
let currentColor = '#ebedf0'; | |
let clicking = false; | |
const boxes = document.querySelectorAll('.js-calendar-graph-svg rect'); | |
const graph = document.querySelector('.js-calendar-graph-svg'); | |
// code for switching the current color | |
function handleColorChange(e) { | |
const el = e.currentTarget; | |
currentColor = el.style['background-color']; | |
console.log(currentColor) | |
} | |
function handlePointerEnter(e) { | |
const rect = e.currentTarget; | |
if(clicking) { | |
rect.setAttribute('fill', currentColor) | |
} | |
} | |
boxes.forEach(box => box.addEventListener('pointermove', handlePointerEnter)) | |
boxes.forEach(box => box.addEventListener('pointerup', handlePointerEnter)) | |
document.querySelectorAll('.legend li').forEach(li => li.addEventListener('click', handleColorChange)) | |
graph.addEventListener('pointerup', () => {clicking = false}); | |
graph.addEventListener('pointerdown', () => {clicking = true}); | |
graph.addEventListener('pointerleave', () => {clicking = false}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
hey forked and added 1 line so that when you click on a date it doesnt "shade" the rest of the boxes (undoing some of your hard work! )
https://gist.github.com/mybundletv/69446faff894802d198c560f98bea728