Skip to content

Commit 2f799fa

Browse files
jcheng5jcheng5
committed
Fix navbarList; improve dropdowns
- navbarList is now supported - navbarPage(position="fixed-bottom") dropdown menus now use poppler - added more test cases to test-apps/bs3-navs
1 parent daa271f commit 2f799fa

File tree

7 files changed

+197
-138
lines changed

7 files changed

+197
-138
lines changed

‎inst/bs3compat/_nav_compat.scss

+7
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,10 @@
2323
color: $nav-pills-link-active-color;
2424
background-color: $nav-pills-link-active-bg;
2525
}
26+
27+
// Support vertical pills
28+
.nav-stacked {
29+
// Don't extend the .flex-column utility, it uses !important
30+
// @extend .flex-column;
31+
flex-direction: column;
32+
}

‎inst/bs3compat/js/bs3compat.js

+26
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,29 @@
4444
// bs4 navbar: li > a.active
4545
// bs3 tabset: li.active > a
4646
// bs4 tabset: li > a.active
47+
48+
49+
(function($) {
50+
/*
51+
* Bootstrap 4 uses poppler.js to choose what direction to show dropdown
52+
* menus, except in the case of navbars; they assume that navbars are always
53+
* at the top of the page, so this isn't necessary. However, Bootstrap 3
54+
* explicitly supported bottom-positioned navbars via .navbar-fixed-bottom,
55+
* and .fixed-bottom works on Bootstrap 4 as well.
56+
*
57+
* We monkeypatch the dropdown plugin's _detectNavbar method to return false
58+
* if we're in a bottom-positioned navbar.
59+
*/
60+
if (!$.fn.dropdown.Constructor.prototype._detectNavbar) {
61+
// If we get here, the dropdown plugin's implementation must've changed.
62+
// Someone will need to go into Bootstrap's dropdown.js.
63+
(console.warn || console.error || console.log)("bs3compat.js couldn't detect the dropdown plugin's _detectNavbar method");
64+
return;
65+
}
66+
67+
var oldDetectNavbar = $.fn.dropdown.Constructor.prototype._detectNavbar;
68+
$.fn.dropdown.Constructor.prototype._detectNavbar = function() {
69+
return oldDetectNavbar.apply(this, this.arguments) &&
70+
!($(this._element).closest('.navbar').filter('.navbar-fixed-bottom, .fixed-bottom').length > 0);
71+
};
72+
})(jQuery);

‎test-apps/bs3-navs/app.R

+160-47
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,123 @@
11
library(bootscss)
22
library(shiny)
33

4+
make_bs3_tabs <- function() {
5+
list(
6+
tabPanel("One",
7+
"One"
8+
),
9+
tabPanel("Two",
10+
icon = icon("download"),
11+
"Two"
12+
),
13+
navbarMenu("A submenu",
14+
tabPanel("Three", "Three"),
15+
"---",
16+
tabPanel("Four", "Four"),
17+
tabPanel("Five", "Five")
18+
)
19+
)
20+
}
21+
22+
23+
make_bs4_tabs <- function(id, type = "nav-tabs") {
24+
ns <- NS(paste0("#", id))
25+
withTags(
26+
ul(class = "nav",
27+
class = type,
28+
li(class = "nav-item",
29+
a("data-toggle" = "tab",
30+
class = "nav-link active",
31+
href = ns("1"),
32+
"Link 1"
33+
)
34+
),
35+
li(class = "nav-item",
36+
a("data-toggle" = "tab",
37+
class = "nav-link",
38+
href = ns("2"),
39+
40+
icon("download"),
41+
"Link 2"
42+
)
43+
),
44+
li(class = "nav-item dropdown",
45+
a(class = "nav-link dropdown-toggle",
46+
"data-toggle" = "dropdown",
47+
href = "#",
48+
role = "button",
49+
"aria-haspopup" = "true",
50+
"aria-expanded" = "false",
51+
"Dropdown"
52+
),
53+
div(class = "dropdown-menu",
54+
a("data-toggle" = "tab",
55+
class = "dropdown-item",
56+
href = ns("3"),
57+
"Link 3"
58+
),
59+
a("data-toggle" = "tab",
60+
class = "dropdown-item",
61+
href = ns("4"),
62+
"Link 4"
63+
),
64+
div(class = "dropdown-divider"),
65+
a("data-toggle" = "tab",
66+
class = "dropdown-item disabled",
67+
href = ns("dis-1"),
68+
tabindex = "-1",
69+
"aria-disabled" = "true",
70+
"Disabled Link"
71+
),
72+
a("data-toggle" = "tab",
73+
class = "dropdown-item disabled",
74+
href = ns("dis-2"),
75+
tabindex = "-1",
76+
"aria-disabled" = "true",
77+
"Another Disabled Link"
78+
)
79+
)
80+
),
81+
li(class = "nav-item",
82+
a("data-toggle" = "tab",
83+
class = "nav-link disabled",
84+
href = ns("dis-3"),
85+
tabindex = "-1",
86+
"aria-disabled" = "true",
87+
"Disabled Link"
88+
)
89+
)
90+
)
91+
)
92+
}
93+
94+
make_bs4_tab_contents <- function(id) {
95+
ns <- NS(id)
96+
div(class = "tab-content",
97+
div(class = "tab-pane fade show active",
98+
id = ns("1"),
99+
"Panel 1"
100+
),
101+
div(class = "tab-pane fade",
102+
id = ns("2"),
103+
"Panel 2"
104+
),
105+
div(class = "tab-pane fade",
106+
id = ns("3"),
107+
"Panel 3"
108+
),
109+
div(class = "tab-pane fade",
110+
id = ns("4"),
111+
"Panel 4"
112+
)
113+
)
114+
}
115+
116+
4117
ui <- fluidPage(
5118
bs4_sass(),
6119
tags$style(
7-
"h4 { margin-top: 48px; text-align: center; }"
120+
"h4 { margin-top: 120px; }"
8121
),
9122

10123
tags$br(),
@@ -14,66 +127,66 @@ ui <- fluidPage(
14127
tags$br(),
15128

16129
h4("bs3 navbarPage"),
17-
navbarPage("Test", inverse = TRUE,
18-
tabPanel("One",
19-
"One"
20-
),
21-
tabPanel("Two",
22-
icon = icon("download"),
23-
"Two"
24-
),
25-
navbarMenu("A submenu",
26-
tabPanel("Five", "Five"),
27-
"---",
28-
tabPanel("Six", "Six"),
29-
tabPanel("Seven", "Seven")
30-
)
130+
do.call(navbarPage, rlang::list2(
131+
"bs3 navbarPage", inverse = FALSE,
132+
!!!make_bs3_tabs()
133+
)),
134+
135+
h4("bs3 navbarPage (inverse)"),
136+
helpText("(Fixed to bottom of page)"),
137+
do.call(navbarPage, rlang::list2(
138+
"bs4 navbarPage (inverse)", inverse = TRUE, position = "fixed-bottom",
139+
!!!make_bs3_tabs()
140+
)),
141+
142+
h4("bs4 navbar - default"),
143+
tags$nav(class="navbar navbar-expand-sm navbar-light bg-light",
144+
tags$a(class="navbar-brand", href="#", "Navbar"),
145+
make_bs4_tabs("bs4nav", "navbar-nav mr-auto"),
31146
),
147+
make_bs4_tab_contents("bs4nav"),
32148

33-
h4("bs4 navbar"),
34-
includeHTML("navbar-bs4.html"),
149+
h4("bs4 navbar (dark)"),
150+
tags$nav(class="navbar navbar-expand-sm navbar-dark bg-dark",
151+
tags$a(class="navbar-brand", href="#", "Navbar"),
152+
make_bs4_tabs("bs4nav", "navbar-nav mr-auto"),
153+
),
154+
make_bs4_tab_contents("bs4nav"),
155+
156+
h4("bs4 navbar (.bg-success)"),
157+
tags$nav(class="navbar navbar-expand-sm navbar-dark bg-success",
158+
tags$a(class="navbar-brand", href="#", "Navbar"),
159+
make_bs4_tabs("bs4nav", "navbar-nav mr-auto"),
160+
),
161+
make_bs4_tab_contents("bs4nav"),
35162

36163
h4("bs3 rmarkdown site navbar"),
37164
p(class = "text-center", "(pinned to top of page)"),
38165
includeHTML("navbar-rmdsite.html"),
39166

40167
h4("bs3 tabsetPanel"),
41-
tabsetPanel(
42-
tabPanel("Three",
43-
"Three"
44-
),
45-
tabPanel("Four",
46-
"Four",
47-
icon = icon("cloud")
48-
),
49-
navbarMenu("Dropdown",
50-
tabPanel("Five",
51-
"Five"
52-
)
53-
)
54-
),
168+
do.call(tabsetPanel, rlang::list2(
169+
!!!make_bs3_tabs()
170+
)),
55171

56172
h4("bs4 tabs"),
57-
includeHTML("navbar-bs4tabs.html"),
173+
make_bs4_tabs("bs4tabs", "nav-tabs"),
174+
make_bs4_tab_contents("bs4tabs"),
58175

59176
h4("bs3 tabsetPanel(type=\"pills\")"),
60-
tabsetPanel(type = "pills",
61-
tabPanel("Three",
62-
"Three"
63-
),
64-
tabPanel("Four",
65-
"Four",
66-
icon = icon("cloud")
67-
),
68-
navbarMenu("Dropdown",
69-
tabPanel("Five",
70-
"Five"
71-
)
72-
)
73-
),
177+
do.call(tabsetPanel, rlang::list2(
178+
type = "pills",
179+
!!!make_bs3_tabs()
180+
)),
74181

75182
h4("bs4 pills"),
76-
includeHTML("navbar-bs4pills.html"),
183+
make_bs4_tabs("bs4pills", "nav-pills"),
184+
make_bs4_tab_contents("bs4pills"),
185+
186+
h4("bs3 navlist panel"),
187+
do.call(navlistPanel, rlang::list2(
188+
!!!make_bs3_tabs()
189+
)),
77190

78191
tags$br(),
79192
tags$br(),

‎test-apps/bs3-navs/navbar-bs4.html

-41
This file was deleted.

‎test-apps/bs3-navs/navbar-bs4pills.html

-23
This file was deleted.

‎test-apps/bs3-navs/navbar-bs4tabs.html

-23
This file was deleted.

‎test-apps/bs3-navs/navbar-rmdsite.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@
88
<span class="icon-bar"></span>
99
<span class="icon-bar"></span>
1010
</button>
11-
<a class="navbar-brand" href="index.html">RMarkdown Website</a>
11+
<a class="navbar-brand" href="#">RMarkdown Website</a>
1212
</div>
1313
<div id="navbar" class="navbar-collapse collapse">
1414
<ul class="nav navbar-nav">
15-
<li><a href="index.html">Home</a></li>
16-
<li><a href="PageA.html">Page A</a></li>
17-
<li><a href="PageB.html">Page B</a></li>
15+
<li><a href="#">Home</a></li>
16+
<li><a href="#">Page A</a></li>
17+
<li><a href="#">Page B</a></li>
1818
</ul>
1919
<ul class="nav navbar-nav navbar-right">
2020
<li><a href="https://github.com">GitHub</a></li>

0 commit comments

Comments
 (0)