flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Toggle layout button: Create a reusable function to animate pill

Browse Source
This commit is contained in:
Félix Péault
2020-02-26 16:00:49 +01:00
parent a5e692eeb2
commit aba1f87482
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/atoms/ToggleLayout.svelte
View File

@@ -19,11 +19,15 @@
const grid = document.querySelector('.photos') const grid = document.querySelector('.photos')
const toggle = document.querySelector('.toggle') const toggle = document.querySelector('.toggle')
const pill = toggle.querySelector('.pill') const pill = toggle.querySelector('.pill')
const activeButton = document.querySelector(`.toggle [data-layout="${layoutSetting}"]`)
// Change active pill
const toggleAnimate = (elem, pill, toggle) => {
pill.style.width = Math.round(elem.getBoundingClientRect().width) + 'px'
pill.style.left = Math.round(elem.getBoundingClientRect().left - toggle.getBoundingClientRect().left) + 'px'
}
// Init of first option // Init of first option
pill.style.width = activeButton.getBoundingClientRect().width + 'px' toggleAnimate(document.querySelector(`.toggle [data-layout="${layoutSetting}"]`), pill, toggle)
pill.style.left = activeButton.getBoundingClientRect().left - toggle.getBoundingClientRect().left + 'px'
// Toggle layout // Toggle layout
toggleLayout = event => { toggleLayout = event => {
@@ -44,8 +48,7 @@
} }
// Animate the active pill // Animate the active pill
pill.style.width = clicked.getBoundingClientRect().width + 'px' toggleAnimate(clicked, pill, toggle)
pill.style.left = clicked.getBoundingClientRect().left - toggle.getBoundingClientRect().left + 'px'
// Add/Remove active classes // Add/Remove active classes
document.querySelectorAll('.toggle button').forEach(button => button.classList.remove('active')) document.querySelectorAll('.toggle button').forEach(button => button.classList.remove('active'))