mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-02 14:19:39 -05:00
781c1c97c7
* Update split test config and infrastructure for plans-page-layout-v3
* Implement view for `old-plans-page-annual` variant of the new split test:
- Make `annual` the default view for all elements on the old plans page
- Change the tooltip background to green for monthly/student view
* Implement a new design for the new plans page:
- switch annual and monthly locations (annual on the left now)
- change the tooltip background to green color for all choice
- make the monthly-annual switch has green background if annual is chosen
* Fix mobile view plans page header style
GitOrigin-RevId: b2b3c6ac6adbe26bf6def7e072493f503793cfcb
61 lines
1.9 KiB
JavaScript
61 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 === 'monthly'
|
|
|
|
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-monthly-selected',
|
|
currentMonthlyAnnualSwitchValue === 'monthly'
|
|
)
|
|
|
|
document.querySelectorAll('[data-ol-tooltip-period]').forEach(el => {
|
|
const period = el.getAttribute('data-ol-tooltip-period')
|
|
el.hidden = period !== currentMonthlyAnnualSwitchValue
|
|
})
|
|
|
|
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('left', !smallScreen)
|
|
}
|
|
|
|
// click event listener for monthly-annual switch
|
|
export function setUpMonthlyAnnualSwitching() {
|
|
changeMonthlyAnnualTooltipPosition()
|
|
window.addEventListener('resize', changeMonthlyAnnualTooltipPosition)
|
|
}
|