RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.2.5

Browse Source 
refactor (dev): change logic for on-boarding animation
This commit is contained in:
sairaj mote 2020-11-12 22:05:13 +05:30
parent 349d08ed3b
commit e165ac96fd
4 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/main.css
View File

@ -251,7 +251,7 @@ sm-button[variant=outlined] {
pointer-events: none; pointer-events: none;
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
position: fixed; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
z-index: 10; z-index: 10;
@ -263,7 +263,7 @@ sm-button[variant=outlined] {
} }
#on_boarding { #on_boarding {
position: fixed; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
border-radius: 0.8rem; border-radius: 0.8rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
css/main.scss
View File

@ -250,7 +250,7 @@ sm-button[variant="outlined"]{
pointer-events: none; pointer-events: none;
height: 3rem; height: 3rem;
width: 3rem; width: 3rem;
position: fixed; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
z-index: 10; z-index: 10;
@ -261,7 +261,7 @@ sm-button[variant="outlined"]{
} }
} }
#on_boarding{ #on_boarding{
position: fixed; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
border-radius: 0.8rem; border-radius: 0.8rem;

25
index.html
View File

@ -2575,15 +2575,14 @@
if (currentFeatureIndex === onBoarding.length - 1 && index > 0) { if (currentFeatureIndex === onBoarding.length - 1 && index > 0) {
finishOnBoarding() finishOnBoarding()
} }
index = Math.min(Math.max(index + currentFeatureIndex, 0), onBoarding.length - 1) index = (nextTutButton.textContent === 'Got it') ? 0 : Math.min(Math.max(index + currentFeatureIndex, 0), onBoarding.length - 1)
if (index === 0){ if (index === 0){
prevTutButton.classList.add('hide') prevTutButton.classList.add('hide')
focusIllu.classList.add('hide') focusIllu.classList.add('hide')
} }
else{ else{
prevTutButton.classList.remove('hide') prevTutButton.classList.remove('hide')
if(currentFeatureIndex) focusIllu.classList.remove('hide')
focusIllu.classList.remove('hide')
} }
if (index === onBoarding.length - 1) { if (index === onBoarding.length - 1) {
nextTutButton.textContent = `Got it` nextTutButton.textContent = `Got it`
@ -2631,30 +2630,18 @@
const targetOption = document.getElementById(onBoarding[index].id) const targetOption = document.getElementById(onBoarding[index].id)
let targetPosition = targetOption.getBoundingClientRect() let targetPosition = targetOption.getBoundingClientRect()
if(window.innerWidth > 640){ if(window.innerWidth > 640){
onBoardingPanel.setAttribute('style', `transform: translate(${targetPosition.left + targetPosition.width}px, ${targetPosition.top}px)`) onBoardingPanel.setAttribute('style', `transform: translate(${targetPosition.left + targetPosition.width}px, ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`)
} }
else{ else{
if(targetPosition.bottom + onBoardingPanel.getBoundingClientRect().height < window.innerHeight) if(targetPosition.bottom + onBoardingPanel.getBoundingClientRect().height < window.innerHeight)
onBoardingPanel.setAttribute('style', `transform: translateY(calc(${targetPosition.bottom}px + 1.5rem))`) onBoardingPanel.setAttribute('style', `transform: translateY(calc(${targetPosition.bottom + Math.abs(document.body.getBoundingClientRect().top)}px + 1.5rem))`)
else{ else{
if(targetPosition.top + targetPosition.height > window.innerHeight) onBoardingPanel.setAttribute('style', `transform: translateY(calc(${targetPosition.top - onBoardingPanel.getBoundingClientRect().height + Math.abs(document.body.getBoundingClientRect().top)}px - 1.5rem))`)
setTimeout(() => {
onBoardingPanel.setAttribute('style', `transform: translateY(calc(${targetPosition.top - onBoardingPanel.getBoundingClientRect().height}px - 1.5rem))`)
}, 300);
else
onBoardingPanel.setAttribute('style', `transform: translateY(calc(${targetPosition.top - onBoardingPanel.getBoundingClientRect().height}px - 1.5rem))`)
} }
if(targetPosition.top + targetPosition.height > window.innerHeight){ if(targetPosition.top + targetPosition.height > window.innerHeight){
targetOption.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'start'}) targetOption.scrollIntoView({behavior: 'smooth', block: 'center', inline: 'start'})
setTimeout(() => {
targetPosition = targetOption.getBoundingClientRect()
onBoardingPanel.setAttribute('style', `transform: translateY(calc(${targetPosition.top - onBoardingPanel.getBoundingClientRect().height}px - 1.5rem))`)
focusIllu.setAttribute('style', `transform: translate(calc(${targetPosition.left + targetPosition.width/2}px - 1.5rem), ${targetPosition.top}px)`)
}, 300);
}
else{
focusIllu.setAttribute('style', `transform: translate(calc(${targetPosition.left + targetPosition.width/2}px - 1.5rem), ${targetPosition.top}px)`)
} }
focusIllu.setAttribute('style', `transform: translate(calc(${targetPosition.left + targetPosition.width/2}px - 1.5rem), ${targetPosition.top + Math.abs(document.body.getBoundingClientRect().top)}px)`)
} }
} }
if (currentFeatureIndex > index) { if (currentFeatureIndex > index) {