mirror of
https://github.com/overleaf/overleaf.git
synced 2024-09-16 02:52:31 -04:00
361f6f245a
* [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
65 lines
1.9 KiB
JavaScript
65 lines
1.9 KiB
JavaScript
// m-a stands for monthly-annual
|
|
|
|
export function toggleMonthlyAnnualSwitching(
|
|
view,
|
|
currentMonthlyAnnualSwitchValue
|
|
) {
|
|
const containerEl = document.querySelector(
|
|
'[data-ol-plans-v2-m-a-switch-container]'
|
|
)
|
|
const checkbox = containerEl.querySelector('input[type="checkbox"]')
|
|
|
|
containerEl.classList.toggle('disabled', view === 'group')
|
|
|
|
checkbox.disabled = view === 'group'
|
|
checkbox.checked = currentMonthlyAnnualSwitchValue === 'annual'
|
|
|
|
switchMonthlyAnnual(currentMonthlyAnnualSwitchValue)
|
|
}
|
|
|
|
export function switchMonthlyAnnual(currentMonthlyAnnualSwitchValue) {
|
|
const el = document.querySelector('[data-ol-plans-v2-m-a-tooltip]')
|
|
el.classList.toggle(
|
|
'plans-v2-m-a-tooltip-annual-selected',
|
|
currentMonthlyAnnualSwitchValue === 'annual'
|
|
)
|
|
|
|
document
|
|
.querySelectorAll('[data-ol-plans-v2-table-annual-price-before-discount]')
|
|
.forEach(el => {
|
|
el.classList.toggle(
|
|
'hidden',
|
|
currentMonthlyAnnualSwitchValue === 'monthly'
|
|
)
|
|
})
|
|
|
|
document.querySelectorAll('[data-ol-plans-v2-period').forEach(el => {
|
|
const period = el.getAttribute('data-ol-plans-v2-period')
|
|
|
|
el.hidden = currentMonthlyAnnualSwitchValue !== period
|
|
})
|
|
|
|
document
|
|
.querySelectorAll('[data-ol-plans-v2-m-a-switch-text]')
|
|
.forEach(el => {
|
|
el.classList.toggle(
|
|
'underline',
|
|
el.getAttribute('data-ol-plans-v2-m-a-switch-text') ===
|
|
currentMonthlyAnnualSwitchValue
|
|
)
|
|
})
|
|
}
|
|
|
|
function changeMonthlyAnnualTooltipPosition() {
|
|
const smallScreen = window.matchMedia('(max-width: 767px)').matches
|
|
const el = document.querySelector('[data-ol-plans-v2-m-a-tooltip]')
|
|
|
|
el.classList.toggle('bottom', smallScreen)
|
|
el.classList.toggle('right', !smallScreen)
|
|
}
|
|
|
|
// click event listener for monthly-annual switch
|
|
export function setUpMonthlyAnnualSwitching() {
|
|
changeMonthlyAnnualTooltipPosition()
|
|
window.addEventListener('resize', changeMonthlyAnnualTooltipPosition)
|
|
}
|