Tau Switcher

A tool to define tabs and switch between them.

Usage

Require or import package first

// cjs
const { TabSwitcher, CycleSwitcher, BooleanSwitcher } = require('tau-switcher')

// esm
import { TabSwitcher, CycleSwitcher, BooleanSwitcher } from 'tau-switcher'

Tab Switcher

Create a switcher and use it to switch between tabs

const ts = new TabSwitcher()
ts.getTab() // null

ts.switch('a')
ts.getTab() // 'a'
ts.switch('a') // switch back to null
ts.getTab() // null

ts.switch('b')
ts.isTab(['a', 'b']) // true
ts.isTab('b') // true
ts.isTab(['c', 'd']) // false
ts.isTab('c') // false

ts.setTab('c')
ts.getTab() // 'c'

ts.reset()
ts.getTab() // null

Cycle Switcher

Use CycleSwitcher to create a switcher with pre-define tabs, then you can use #goNext, #goPrev, #goFirst, #goLast to switch tabs.

const cs = new CycleSwitcher({ tabs: ['a', 'b', 'c'] })
cs.getTab() // null

cs.goFirst()
cs.getTab() // 'a'
cs.goNext()
cs.getTab() // 'b'
cs.goNext()
cs.getTab() // 'c'
cs.goNext()
cs.getTab() // 'a'
cs.goPrev()
cs.getTab() // 'c'
cs.goPrev()
cs.getTab() // 'b'
cs.goPrev()
cs.getTab() // 'a'
cs.goLast()
cs.getTab() // 'c'

Use #isFirst, #isLast, #currentIndex to get the current tab information.

cs.setTab('a')
cs.getTab() // 'a'
cs.isFirst // true
cs.isLast // false
cs.currentIndex // 0

cs.setTab(null)
cs.getTab() // null
cs.isFirst // false
cs.isLast // false
cs.currentIndex // -1

You can disable the cycle behavior by given a parameter disableCycle: true when creating a cycle switcher, then the current tab would not be changed if you try to go to the next tab from the last tab or go to the previous tab from the first tab.

const cs = new CycleSwitcher({ tabs: ['a', 'b', 'c'], disableCycle: true })
cs.goFirst()
cs.getTab() // 'a'
cs.goPrev()
cs.getTab() // 'a'
cs.goLast()
cs.getTab() // 'c'
cs.goNext()
cs.getTab() // 'c'

CycleSwither has #switch, #getTab, #isTab as well, but the given tab must be pre-defined or null, otherwise the current tab would be not changed.

cs.switch('b')
cs.getTab() // 'b'
cs.switch('invalid_tab')
cs.getTab() // 'b'

Boolean Switcher

BooleanSwitcher has only two tabs - true and false. The #switch don't receive any tab parameter and just switch the current boolean value to the opposite one.

const bs = new BooleanSwitcher()
bs.getTab() // false

bs.switch()
bs.getTab() // true
bs.switch()
bs.getTab() // false
bs.switchOn()
bs.getTab() // true
bs.switchOff()
bs.getTab() // false

bs.setTab(true)
bs.isTab(true) // true
bs.isTab(false) // false

bs.setTab(true)
bs.getTab() // true
bs.setTab(false)
bs.getTab() // false

bs.reset()
bs.getTab() // false

BooleanSwitcher would try to covert (by !!tab ) tabs to boolean values before using them.

bs.setTab('a')
bs.getTab() // true
bs.setTab(null)
bs.getTab() // false

The initial tab

All switchers have a initial tab by default(tab/cycle switchers are null, boolean switchers are false). When doing switch-back or reset, the current tab would be set to the initial one. You can use the initTab parameter to change the initial tab when create a switcher.

const ts = new TabSwitcher({ initTab: 'a' })
ts.getTab() // 'a'
const cs = new CycleSwitcher({ tabs: ['a', 'b', 'c'], initTab: 'a' })
cs.getTab() // 'a'
const bs = new BooleanSwitcher({ initTab: true })
bs.getTab() // true

Test

npm test

Authors

Sibevin Wang

Copyright

Copyright (c) 2019 Sibevin Wang. Released under the MIT license.