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;
height: 3rem;
width: 3rem;
position: fixed;
position: absolute;
left: 0;
top: 0;
z-index: 10;
@ -263,7 +263,7 @@ sm-button[variant=outlined] {
}
#on_boarding {
position: fixed;
position: absolute;
left: 0;
top: 0;
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;
height: 3rem;
width: 3rem;
position: fixed;
position: absolute;
left: 0;
top: 0;
z-index: 10;
@ -261,7 +261,7 @@ sm-button[variant="outlined"]{
}
}
#on_boarding{
position: fixed;
position: absolute;
left: 0;
top: 0;
border-radius: 0.8rem;

25
index.html
View File

@ -2575,15 +2575,14 @@
if (currentFeatureIndex === onBoarding.length - 1 && index > 0) {
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){
prevTutButton.classList.add('hide')
focusIllu.classList.add('hide')
}
else{
prevTutButton.classList.remove('hide')
if(currentFeatureIndex)
focusIllu.classList.remove('hide')
focusIllu.classList.remove('hide')
}
if (index === onBoarding.length - 1) {
nextTutButton.textContent = `Got it`
@ -2631,30 +2630,18 @@
const targetOption = document.getElementById(onBoarding[index].id)
let targetPosition = targetOption.getBoundingClientRect()
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{
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{
if(targetPosition.top + targetPosition.height > window.innerHeight)
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))`)
onBoardingPanel.setAttribute('style', `transform: translateY(calc(${targetPosition.top - onBoardingPanel.getBoundingClientRect().height + Math.abs(document.body.getBoundingClientRect().top)}px - 1.5rem))`)
}
if(targetPosition.top + targetPosition.height > window.innerHeight){
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) {