jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSR-1483: updates to scroll animation

Browse source
This commit is contained in:
Adam Caouette 2023-07-17 13:59:47 -04:00
parent 4884027344
commit 3455c685cf
1 changed files with 23 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/digital-components/date-picker/date-picker.vue
View file

@ -60,6 +60,7 @@
v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton" v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
type="button" type="button"
class="btn btn-link" class="btn btn-link"
id="viewMoreDates"
:disabled="isLoading" :disabled="isLoading"
@click="showAnotherMonth"> @click="showAnotherMonth">
View more dates View more dates
@ -615,37 +616,27 @@ export default {
}); });
}); });
}, },
scrollToElement(elementId, speed, easing) { scrollToElement(elementId, duration = 800, easing = "ease-in-out") {
// TODO - needs to be cleaned up & refactored const wrapper = document.querySelector(".page-container-grouped-styles");
function scrollTopSmooth(wrapper, target, duration = 300, timingName = "linear") { const target = document.getElementById(elementId);
const initY = wrapper.scrollTop; const initY = wrapper.scrollTop;
const wrapperRect = wrapper.getBoundingClientRect(); const wrapperRect = wrapper.getBoundingClientRect();
const targetRect = target.getBoundingClientRect(); const targetRect = target.getBoundingClientRect();
const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET; const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
const timingFunc = TIMINGFUNC_MAP[timingName]; const timingFunc = TIMINGFUNC_MAP[easing];
let start = null; let start = null;
const step = (timestamp) => {
const step = (timestamp) => { start = start || timestamp;
start = start || timestamp; const time = Math.min(1, (timestamp - start) / duration);
const progress = timestamp - start, const percentageNew = timingFunc(time);
// Growing from 0 to 1 const distanceToGo = targetY;
time = Math.min(1, (timestamp - start) / duration); const thisDistance = percentageNew * distanceToGo;
const percentageNew = timingFunc(time); wrapper.scrollTo(0, initY + thisDistance);
const distanceToGo = targetY; if (percentageNew < 1) {
const thisDistance = percentageNew * distanceToGo; window.requestAnimationFrame(step);
}
wrapper.scrollTo(0, initY + thisDistance); };
if (percentageNew < 1) { window.requestAnimationFrame(step);
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
const wrapper = document.getElementById("date-picker-fieldset");
const targetMonth = document.getElementById(elementId);
scrollTopSmooth(wrapper, targetMonth, 800, "ease-in-out");
}, },
}, },
components: { components: {
@ -655,6 +646,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.date-picker-hidden { .date-picker-hidden {
opacity: 0; opacity: 0;
max-height: 0; max-height: 0;
@ -911,9 +903,6 @@ export default {
margin-bottom: 0; margin-bottom: 0;
overflow: hidden; overflow: hidden;
} }
&.last-available-month:not(&.month-hidden) {
margin-bottom: 14rem;
}
} }
.btn-link { .btn-link {