Sha256: 4c9635f87dadf911aee22b5a878c8d0fb960aff1d72f2a074390afbc6eea39ee

Contents?: true

Size: 1.34 KB

Versions: 489

Compression:

Stored size: 1.34 KB

Contents

import PbEnhancedElement from '../pb_enhanced_element'

const NAV_SELECTOR = '[data-pb-nav-tab]'
const NAV_ITEM_SELECTOR = '[data-pb-tab-target]'

export default class PbNav extends PbEnhancedElement {
    static get selector() {
        return NAV_SELECTOR
    }

    connect() {
        this.hideAndAddEventListeners()
    }

    hideAndAddEventListeners() {
        const navItems = this.element.querySelectorAll(NAV_ITEM_SELECTOR)
        navItems.forEach((navItem) => {
            if (!navItem.className.includes('active')) {
                this.changeContentDisplay(navItem.dataset.pbTabTarget, 'none')
            }

            navItem.addEventListener('click', event => this.handleNavItemClick(event))
        })
    }

    handleNavItemClick(event) {
        event.preventDefault()
        const navItem = event.target.closest(NAV_ITEM_SELECTOR)
        this.changeContentDisplay(navItem.dataset.pbTabTarget, 'block')

        const navItems = this.element.querySelectorAll(NAV_ITEM_SELECTOR)
        navItems.forEach((navItemSelected) => {
            if (navItem !== navItemSelected) {
                this.changeContentDisplay(navItemSelected.dataset.pbTabTarget, 'none')
            }
        })
    }

    changeContentDisplay(contentId, display) {
        const content = document.getElementById(contentId)
        content.style.display = display
    }
}

Version data entries

489 entries across 489 versions & 1 rubygems

Version Path
playbook_ui-14.11.1.pre.alpha.PLAY1720phonenumberinputformatAsYouType5377 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1.pre.alpha.play17725374 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1.pre.alpha.play17725372 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.12.0.pre.rc.4 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1.pre.alpha.hfhbrakemanplaybook5370 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1.pre.alpha.responsivetablerails5364 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1.pre.alpha.responsivetablerails5362 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1.pre.alpha.PBNTR769sticky5359 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5341 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5340 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5339 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.12.0.pre.rc.3 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.12.0.pre.rc.2 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.12.0.pre.rc.1 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.12.0.pre.rc.0 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5315 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.10.0.pre.alpha.PLAY1774timelinelabelstepspacing5314 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.10.0.pre.alpha.PLAY1750pbcontenttagkitbutton5308 app/pb_kits/playbook/pb_nav/index.js
playbook_ui-14.11.1 app/pb_kits/playbook/pb_nav/index.js