Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure data-bs-toggle is present in the BS3 tabset compatibility shims #501

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

gadenbuie
Copy link
Member

Fixes #492

The fix here is that, just before calling the Bootstrap tab plugin, we check for data-bs-toggle. If it's not present on the nav element, and if data-toggle is, we copy data-toggle to data-bs-toggle. This fixes tab behavior for tab BS3-era tab markup that's being used in a BS5+ page.

To reproduce this I used the markup created by flexdashboard (before we applied rstudio/flexdashboard#421) and confirmed that the tab plugin works as expected even if data-bs-toggle isn't an attribute on the nav item.

Reprex
---
pagetitle: Issue 492
output:
  "pkgload::load_all(); html_document":
    theme:
      version: 5
    self_contained: false
---

```{=html}
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <span class="navbar-logo pull-left"> </span>
            <span class="navbar-brand">
                Pages in Nav Dropdown
                <span class="navbar-author"> </span>
            </span>

            <button id="navbar-button" type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbar" data-bs-target="#navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left" role="tablist">
                <li class="nav-item" role="presentation"><a class="nav-link active" href="#page-1" data-toggle="tab" aria-selected="true" role="tab">Page 1</a></li>
                <li class="nav-item dropdown" id="Topics">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" data-bs-toggle="dropdown" role="button" aria-expanded="false">Topics <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a class="dropdown-item" href="#page-2" data-toggle="tab">Page 2</a></li>
                        <li><a class="dropdown-item" href="#page-3" data-toggle="tab">Page 3</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right"></ul>
        </div>
        <!--/.nav-collapse-->
    </div>
    <!--/.container-->
</div>

<div id="dashboard-container" class="desktop-layout" style="visibility: visible;margin-top: 80px">
    <div class="tab-content">
        <div class="dashboard-page-wrapper tab-pane active show" id="page-1" role="tabpanel">
            <div class="section level1 vertical-layout-scroll dashboard-column-orientation">
                <div class="section level2 dashboard-column" style="flex: 576 576 0px;">
                    <div class="section level3 chart-wrapper">
                        <div class="chart-title"></div>
                        <div class="chart-stage">
                            <p>Just a regular page here</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-page-wrapper tab-pane" id="page-2">
            <div class="section level1 vertical-layout-scroll dashboard-column-orientation" data-navmenu="Topics">
                <div class="section level2 dashboard-column" style="flex: 576 576 0px;">
                    <div id="page-2-box" class="section level3 chart-wrapper">
                        <div class="chart-title">Page 2 Box</div>
                        <div class="chart-stage">
                            <p>Page 2 is accessed via the nav manu ‘Topics’</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dashboard-page-wrapper tab-pane" id="page-3">
            <div class="section level1 vertical-layout-scroll dashboard-column-orientation" data-navmenu="Topics">
                <div class="section level2 dashboard-column" style="flex: 576 576 0px;">
                    <div id="page-3-box" class="section level3 chart-wrapper">
                        <div class="chart-title">Page 3 Box</div>
                        <div class="chart-stage">
                            <p>Page 3 is also accessed via the nav menu ‘Topics’</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

Before

Kapture.2023-03-10.at.17.10.54.mp4

After

Kapture.2023-03-10.at.17.12.16.mp4

@gadenbuie gadenbuie requested a review from cpsievert March 10, 2023 22:15
$(this).tab("show");
var $this = $(this);
// New (bs5+) tabs use only `data-bs-toggle`, so we provide fallback manually
if (!$this.attr("data-bs-toggle") && $this.attr("data-toggle")) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bs namespace is actually configurable, and may change in a future, so let's see if there's a CSS variables we can read to get the actual namespace.

@gadenbuie gadenbuie closed this Jul 11, 2023
@gadenbuie gadenbuie deleted the fix/492-tabs-bs-toggle branch July 11, 2023 17:32
@gadenbuie gadenbuie restored the fix/492-tabs-bs-toggle branch July 11, 2023 17:32
@gadenbuie gadenbuie reopened this Jul 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Ensure data-bs-toggle is present in the BS3 tabset compatibility shims
2 participants