Skip to content

Commit fcba55f

Browse files
sethladdsethladd
committed
add a dark overlay under the drawer, when open
1 parent 8fe502f commit fcba55f

File tree

4 files changed

+75
-86
lines changed

4 files changed

+75
-86
lines changed

‎lib/resources/script.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Adds a shadow for the top nav when the masthead is scrolled off the top.
2+
function initScroller() {
3+
var header = document.querySelector("header");
4+
var title = document.querySelector(".title-description");
5+
var selfName = document.querySelector('nav .self-name');
6+
7+
window.addEventListener('scroll', function(e) {
8+
var position = window.pageYOffset || document.documentElement.scrollTop;
9+
10+
if (header) {
11+
if (position >= 110) { // TODO: where did this num come from?
12+
header.classList.add("header-fixed");
13+
} else if (header.classList.contains("header-fixed")) {
14+
header.classList.remove("header-fixed");
15+
}
16+
}
17+
18+
if (selfName) {
19+
if (position >= 80) { // TODO: is this too brittle ?
20+
selfName.classList.add('visible-xs-inline');
21+
} else {
22+
selfName.classList.remove('visible-xs-inline');
23+
}
24+
}
25+
});
26+
}
27+
28+
function initSideNav() {
29+
var leftNavToggle = document.getElementById('sidenav-left-toggle');
30+
var leftDrawer = document.querySelector('.sidebar-offcanvas-left');
31+
32+
var overlay = document.createElement('div');
33+
overlay.id = 'overlay-under-drawer';
34+
overlay.addEventListener('click', function(e) {
35+
if (leftDrawer) leftDrawer.classList.remove('active');
36+
document.body.removeChild(overlay);
37+
});
38+
39+
if (leftNavToggle) {
40+
leftNavToggle.addEventListener('click', function(e) {
41+
if (leftDrawer) {
42+
leftDrawer.classList.toggle('active');
43+
document.body.appendChild(overlay);
44+
}
45+
});
46+
}
47+
}
48+
49+
// Make sure the anchors scroll past the fixed page header (#648).
50+
function shiftWindow() {
51+
scrollBy(0, -68);
52+
}
53+
54+
document.addEventListener("DOMContentLoaded", function() {
55+
prettyPrint();
56+
initScroller();
57+
initSideNav();
58+
59+
// Make sure the anchors scroll past the fixed page header (#648).
60+
if (location.hash) shiftWindow();
61+
window.addEventListener("hashchange", shiftWindow);
62+
});

‎lib/resources/styles.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -596,3 +596,14 @@ button {
596596
.source-code pre {
597597
margin: 16px 0 16px 0;
598598
}
599+
600+
#overlay-under-drawer {
601+
opacity: 0.7;
602+
width: 100%;
603+
height: 100%;
604+
z-index: 1999;
605+
position: fixed;
606+
top: 0px;
607+
left: 0px;
608+
background-color: black;
609+
}

‎lib/src/resources.g.dart

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const List<String> resource_names = const [
66
'package:dartdoc/resources/favicon.png',
77
'package:dartdoc/resources/prettify.css',
88
'package:dartdoc/resources/prettify.js',
9+
'package:dartdoc/resources/script.js',
910
'package:dartdoc/resources/styles.css',
1011
'package:dartdoc/resources/css/bootstrap.css',
1112
'package:dartdoc/resources/css/bootstrap.css.map',

‎lib/templates/_footer.html

Lines changed: 1 addition & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -23,92 +23,7 @@
2323
</footer>
2424

2525
<script src="static-assets/prettify.js"></script>
26-
<script>
27-
// Adds a shadow for the top nav when the masthead is scrolled off the top.
28-
function initScroller() {
29-
var header = document.querySelector("header");
30-
var title = document.querySelector(".title-description");
31-
var selfName = document.querySelector('nav .self-name');
32-
33-
window.addEventListener('scroll', function(e) {
34-
var position = window.pageYOffset || document.documentElement.scrollTop;
35-
36-
if (header) {
37-
if (position >= 110) { // TODO: where did this num come from?
38-
header.classList.add("header-fixed");
39-
} else if (header.classList.contains("header-fixed")) {
40-
header.classList.remove("header-fixed");
41-
}
42-
}
43-
44-
if (selfName) {
45-
if (position >= 80) { // TODO: is this too brittle ?
46-
selfName.classList.add('visible-xs-inline');
47-
} else {
48-
selfName.classList.remove('visible-xs-inline');
49-
}
50-
}
51-
});
52-
}
53-
54-
function initSideNav() {
55-
var leftNavToggle = document.getElementById('sidenav-left-toggle');
56-
if (leftNavToggle) {
57-
leftNavToggle.addEventListener('click', function(e) {
58-
e.stopPropagation();
59-
var leftNav = document.querySelector('.sidebar-offcanvas-left');
60-
if (leftNav) {
61-
leftNav.classList.toggle('active');
62-
}
63-
});
64-
}
65-
66-
document.addEventListener('click', function(e) {
67-
var rightDrawer = document.querySelector('.sidebar-offcanvas-right');
68-
var leftDrawer = document.querySelector('.sidebar-offcanvas-left');
69-
console.log('a drawer is open');
70-
var clickOutsideOfDrawer = true;
71-
var t = e.target;
72-
while (t !== document) {
73-
if (t === rightDrawer || t === leftDrawer) {
74-
clickOutsideOfDrawer = false;
75-
break;
76-
}
77-
t = t.parentNode;
78-
}
79-
if (clickOutsideOfDrawer) {
80-
if (rightDrawer) rightDrawer.classList.remove('active');
81-
if (leftDrawer) leftDrawer.classList.remove('active');
82-
}
83-
});
84-
85-
var rightNavToggle = document.getElementById('sidenav-right-toggle');
86-
if (rightNavToggle) {
87-
rightNavToggle.addEventListener('click', function(e) {
88-
e.stopPropagation();
89-
var rightNav = document.querySelector('.sidebar-offcanvas-right');
90-
if (rightNav) {
91-
rightNav.classList.toggle('active');
92-
}
93-
});
94-
}
95-
}
96-
97-
// Make sure the anchors scroll past the fixed page header (#648).
98-
function shiftWindow() {
99-
scrollBy(0, -68);
100-
}
101-
102-
document.addEventListener("DOMContentLoaded", function() {
103-
prettyPrint();
104-
initScroller();
105-
initSideNav();
106-
107-
// Make sure the anchors scroll past the fixed page header (#648).
108-
if (location.hash) shiftWindow();
109-
window.addEventListener("hashchange", shiftWindow);
110-
});
111-
</script>
26+
<script src="static-assets/script.js"></script>
11227
<!-- Do not remove placeholder -->
11328
<!-- Footer Placeholder -->
11429
</body>

0 commit comments

Comments
 (0)