bracketryjs
Visualize a knockout tournament in the browser
"External" navigation
("Navigation" means switching between rounds in a tournament which is too wide to be fully visible)

The following "lifecycle" methods (those returned from createBracket()) can help you implement your own navigation mechanism:


An approach described here will make more sense if you want to change how navigation behaves. If you just want to change how navigation buttons look or how they are positioned, an easier solution might be to adjust some of the navigation-related options:


You may also want to define how much rounds will be visible at a time using these options:

Example
1

You may add for example some buttons which will change the bracket's navigation state.

prev
next

Example above utilizes moveToPreviousRound and moveToNextRound methods.
Built-in navigation buttons are hidden by setting navButtonsPosition option to "hidden": 

import { createBracket } from 'bracketry'

const options = {
    navButtonsPosition: 'hidden',
    verticalScrollMode: 'mixed'
}

const bracket = createBracket(
    data,
    document.querySelector('.some-wrapper')
)

document.querySelector('.button-prev').addEventListener('click', () => {
    bracket.moveToPreviousRound()
})

document.querySelector('.button-next').addEventListener('click', () => {
    bracket.moveToNextRound()
})


2

Let's add more buttons

first
prev
0
1
2
3
4
5
6
next
last


Here setBaseRoundIndex and moveToLastRound methods are also employed:

...

document.querySelector('.button-first').addEventListener('click', () => {
    bracket.setBaseRoundIndex(0)
})

document.querySelector('.button-last').addEventListener('click', () => {
    bracket.moveToLastRound()
})

document.querySelector('.button-2').addEventListener('click', () => {
    bracket.setBaseRoundIndex(2)
})

document.querySelector('.button-4').addEventListener('click', () => {
    bracket.setBaseRoundIndex(4)
})

...


3

You can use getNavigationState to highlight / enable / disable the buttons.

first
prev
0
1
2
3
4
5
6
next
last


...

const bracket = createBracket(
    data,
    wrapper,
    { navButtonsPosition: 'hidden' }
)

...

buttonNext.addEventListener('click', () => {
    bracket.moveToNextRound()
    const {
        lastRoundIsFullyVisible,
        allRoundsAreVisible,
        baseRoundIndex
    } = playffs.getNavigationState()

    if (lastRoundIsFullyVisible) {
        buttonLast.classList.add('disabled')
    }

    if (baseRoundIndex === 0) {
        button0.classList.add('disabled', 'selected')
    }

    if (allRoundsAreVisible) {
        // perhaps hide the buttons or disable them all
    }

    ...
})

...
Made by sbachinin