overleaf/services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-sticky-header.js
M Fahru 361f6f245a Refactor new plans page (#8493)
* [web] hide the monthly/annual switch for small screens via css

Co-Authored-By: Jakob Ackermann <jakob.ackermann@overleaf.com>

* [web] merge logic for hiding elements shown in a subset of view

Co-Authored-By: M Fahru <m.fahru@overleaf.com>

* [web] hide the monthly/annual switch for small screens via css

Co-Authored-By: M Fahru <m.fahru@overleaf.com>

* [web] merge logic for hiding elements shown in a subset of view

Co-Authored-By: M Fahru <m.fahru@overleaf.com>

* fix inverted logic on monthly annual checking

* delete some duplicated logic and refactor

* merge switch functions

* move global variable into the main module

* simplify the enable and disable switch

* remove unused parseFloat

* simplify group plan pricing calculation

* simplify discount group plan logic

* simplify sticky header logic

* merge view and period switching

* fix underlining of switch text

* simplify class list toggling

* merging two function of the group plan

Co-authored-by: Jakob Ackermann <jakob.ackermann@overleaf.com>
GitOrigin-RevId: 5e51690514bbf1dee2639011748c6a8470e1c19a
2022-06-23 08:02:56 +00:00

17 lines
496 B
JavaScript

function stickyHeaderObserverCallback(entry) {
document
.querySelectorAll('[data-ol-plans-v2-table-sticky-header]')
.forEach(el =>
el.classList.toggle('sticky', entry[0].boundingClientRect.bottom > 0)
)
}
export function setUpStickyHeaderObserver() {
const stickyHeaderStopEl = document.querySelector(
'[data-ol-plans-v2-table-sticky-header-stop]'
)
const observer = new IntersectionObserver(stickyHeaderObserverCallback)
observer.observe(stickyHeaderStopEl)
}