Skip to content

Commit 733992b

Browse files
jcollins-gjcollins-g
authored
Add sessionStorage based scroll memory for Dartdoc's scrolling divs (#1917)
* Link to source now works, minus icons * Add material icons * Refactor dartdoc_test to avoid asynchronous delete collisions * dartfmt * Fix windows * dartfmt * Tweak padding and change icon to description * Fix styles to match dartlang site * Review comments * Add example and use it in the dartdoc package. * dartfmt * Add lscache and give us some scroll memory * Review comment * Use sessionStorage. * Remove setInterval (no longer needed without localStorage) * Use try-finally and ordering to reduce the risk we might generate a blank page.
1 parent 2aa6060 commit 733992b

17 files changed

+117
-43
lines changed

‎lib/resources/script.js

+64
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,67 @@ function initSideNav() {
2727
}
2828
}
2929

30+
function saveLeftScroll() {
31+
var leftSidebar = document.getElementById('dartdoc-sidebar-left');
32+
sessionStorage.setItem('dartdoc-sidebar-left-scrollt', leftSidebar.scrollTop);
33+
sessionStorage.setItem('dartdoc-sidebar-left-scrolll', leftSidebar.scrollLeft);
34+
}
35+
36+
function saveMainContentScroll() {
37+
var mainContent = document.getElementById('dartdoc-main-content');
38+
sessionStorage.setItem('dartdoc-main-content-scrollt', mainContent.scrollTop);
39+
sessionStorage.setItem('dartdoc-main-content-scrolll', mainContent.scrollLeft);
40+
}
41+
42+
function saveRightScroll() {
43+
var rightSidebar = document.getElementById('dartdoc-sidebar-right');
44+
sessionStorage.setItem('dartdoc-sidebar-right-scrollt', rightSidebar.scrollTop);
45+
sessionStorage.setItem('dartdoc-sidebar-right-scrolll', rightSidebar.scrollLeft);
46+
}
47+
48+
function restoreScrolls() {
49+
var leftSidebar = document.getElementById('dartdoc-sidebar-left');
50+
var mainContent = document.getElementById('dartdoc-main-content');
51+
var rightSidebar = document.getElementById('dartdoc-sidebar-right');
52+
53+
try {
54+
var leftSidebarX = sessionStorage.getItem('dartdoc-sidebar-left-scrolll');
55+
var leftSidebarY = sessionStorage.getItem('dartdoc-sidebar-left-scrollt');
56+
57+
var mainContentX = sessionStorage.getItem('dartdoc-main-content-scrolll');
58+
var mainContentY = sessionStorage.getItem('dartdoc-main-content-scrollt');
59+
60+
var rightSidebarX = sessionStorage.getItem('dartdoc-sidebar-right-scrolll');
61+
var rightSidebarY = sessionStorage.getItem('dartdoc-sidebar-right-scrollt');
62+
63+
leftSidebar.scrollTo(leftSidebarX, leftSidebarY);
64+
mainContent.scrollTo(mainContentX, mainContentY);
65+
rightSidebar.scrollTo(rightSidebarX, rightSidebarY);
66+
} finally {
67+
// Set visibility to visible after scroll to prevent the brief appearance of the
68+
// panel in the wrong position.
69+
leftSidebar.style.visibility = 'visible';
70+
mainContent.style.visibility = 'visible';
71+
rightSidebar.style.visibility = 'visible';
72+
}
73+
}
74+
75+
function initScrollSave() {
76+
var leftSidebar = document.getElementById('dartdoc-sidebar-left');
77+
var mainContent = document.getElementById('dartdoc-main-content');
78+
var rightSidebar = document.getElementById('dartdoc-sidebar-right');
79+
80+
// For portablility, use two different ways of attaching saveLeftScroll to events.
81+
// Keep the scroll position from expiring from the cache for a page that's been displayed
82+
// a long time but not moved by re-saving its position every hour.
83+
leftSidebar.onscroll = saveLeftScroll;
84+
leftSidebar.addEventListener("scroll", saveLeftScroll, true);
85+
mainContent.onscroll = saveMainContentScroll;
86+
mainContent.addEventListener("scroll", saveMainContentScroll, true);
87+
rightSidebar.onscroll = saveRightScroll;
88+
rightSidebar.addEventListener("scroll", saveRightScroll, true);
89+
}
90+
3091
function initSearch(name) {
3192
var searchIndex; // the JSON data
3293

@@ -193,8 +254,11 @@ function initSearch(name) {
193254
}
194255

195256
document.addEventListener("DOMContentLoaded", function() {
257+
// Place this first so that unexpected exceptions in other JavaScript do not block page visibility.
258+
restoreScrolls();
196259
hljs.initHighlightingOnLoad();
197260
initSideNav();
261+
initScrollSave();
198262
initSearch("search-box");
199263
initSearch("search-body");
200264
initSearch("search-sidebar");

‎lib/resources/styles.css

+4
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ main {
8080
overflow-y: scroll;
8181
padding: 20px 0 15px 30px;
8282
margin: 5px 20px 0 0;
83+
visibility: hidden; /* shown by Javascript after scroll position restore */
8384
}
8485

8586
::-webkit-scrollbar-button{ display: none; height: 13px; border-radius: 0px; background-color: #AAA; }
@@ -95,6 +96,7 @@ main {
9596
flex: 1;
9697
overflow-y: scroll;
9798
padding: 10px 20px 0 20px;
99+
visibility: hidden; /* shown by Javascript after scroll position restore */
98100
}
99101

100102
.sidebar-offcanvas-right {
@@ -103,6 +105,7 @@ main {
103105
padding: 20px 15px 15px 15px;
104106
margin-top: 5px;
105107
margin-right: 20px;
108+
visibility: hidden; /* shown by Javascript after scroll position restore */
106109
}
107110
/* end for layout */
108111

@@ -788,6 +791,7 @@ button {
788791
padding: 10px;
789792
margin: 10px 10px;
790793
box-shadow: 5px 5px 5px 5px #444444;
794+
visibility: hidden; /* shown by Javascript after scroll position restore */
791795
}
792796

793797
ol#sidebar-nav {

‎lib/templates/404error.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5><span class="package-name">{{self.name}}</span> <span class="package-kind">{{self.kind}}</span></h5>
66
{{>packages}}
77
</div>
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
<h1>404: Something's gone wrong :-(</h1>
1111

1212
<section class="desc">
@@ -21,4 +21,7 @@ <h1>404: Something's gone wrong :-(</h1>
2121
</section>
2222
</div> <!-- /.main-content -->
2323

24+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
25+
</div>
26+
2427
{{>footer}}

‎lib/templates/category.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5><span class="package-name">{{parent.name}}</span> <span class="package-kind">{{parent.kind}}</span></h5>
66
{{>packages}}
77
</div>
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#self}}
1111
<h1>{{name}} {{kind}}</h1>
1212
{{>documentation}}
@@ -121,7 +121,7 @@ <h2>Exceptions / Errors</h2>
121121
{{/self}}
122122

123123
</div> <!-- /.main-content -->
124-
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
124+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
125125
<h5>{{self.name}} {{self.kind}}</h5>
126126
{{>sidebar_for_category}}
127127
</div><!--/sidebar-offcanvas-right-->

‎lib/templates/class.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5>{{parent.name}} {{parent.kind}}</h5>
66
{{>sidebar_for_library}}
77
</div>
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#self}}
1111
<div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}} {{>categorization}}</h1></div>
1212
{{/self}}
@@ -164,7 +164,7 @@ <h2>Constants</h2>
164164

165165
</div> <!-- /.main-content -->
166166

167-
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
167+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
168168
{{>sidebar_for_class}}
169169
</div><!--/.sidebar-offcanvas-->
170170

‎lib/templates/constant.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5>{{parent.name}} {{parent.kind}}</h5>
66
{{>sidebar_for_class}}
77
</div><!--/.sidebar-offcanvas-left-->
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#self}}
1111
<div>{{>source_link}}<h1>{{{name}}} {{kind}}</h1></div>
1212
{{/self}}
@@ -27,7 +27,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
2727

2828
</div> <!-- /.main-content -->
2929

30-
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
30+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
3131
</div><!--/.sidebar-offcanvas-->
3232

3333
{{>footer}}

‎lib/templates/constructor.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5>{{parent.name}} {{parent.kind}}</h5>
66
{{>sidebar_for_class}}
77
</div><!--/.sidebar-offcanvas-left-->
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#self}}
1111
<div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}}</h1></div>
1212
{{/self}}
@@ -33,7 +33,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
3333
{{/constructor}}
3434
</div> <!-- /.main-content -->
3535

36-
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
36+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
3737
</div><!--/.sidebar-offcanvas-->
3838

3939
{{>footer}}

‎lib/templates/enum.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5>{{parent.name}} {{parent.kind}}</h5>
66
{{>sidebar_for_library}}
77
</div>
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#self}}
1111
<div>{{>source_link}}<h1>{{{name}}} {{kind}} {{>categorization}}</h1></div>
1212
{{/self}}
@@ -163,7 +163,7 @@ <h2>Static Methods</h2>
163163
{{/eNum}}
164164
</div> <!-- /.main-content -->
165165

166-
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
166+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
167167
{{>sidebar_for_enum}}
168168
</div><!--/.sidebar-offcanvas-->
169169

‎lib/templates/function.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5>{{parent.name}} {{parent.kind}}</h5>
66
{{>sidebar_for_library}}
77
</div><!--/.sidebar-offcanvas-left-->
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#self}}
1111
<div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}} {{>categorization}}</h1></div>
1212
{{/self}}
@@ -22,7 +22,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
2222
{{/function}}
2323
</div> <!-- /.main-content -->
2424

25-
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
25+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
2626
</div><!--/.sidebar-offcanvas-->
2727

2828
{{>footer}}

‎lib/templates/index.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5 class="hidden-xs"><span class="package-name">{{self.name}}</span> <span class="package-kind">{{self.kind}}</span></h5>
66
{{>packages}}
77
</div>
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#packageGraph.defaultPackage}}
1111
{{>documentation}}
1212
{{/packageGraph.defaultPackage}}
@@ -37,4 +37,7 @@ <h3>{{name}}</h3>
3737

3838
</div> <!-- /.main-content -->
3939

40+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
41+
</div>
42+
4043
{{>footer}}

‎lib/templates/library.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5><span class="package-name">{{parent.name}}</span> <span class="package-kind">{{parent.kind}}</span></h5>
66
{{>packages}}
77
</div>
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#self}}
1111
<div>{{>source_link}}<h1>{{{name}}} {{kind}} {{>categorization}}</h1></div>
1212
{{/self}}
@@ -113,7 +113,7 @@ <h2>Exceptions / Errors</h2>
113113

114114
</div> <!-- /.main-content -->
115115

116-
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
116+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
117117
<h5>{{self.name}} {{self.kind}}</h5>
118118
{{>sidebar_for_library}}
119119
</div><!--/sidebar-offcanvas-right-->

‎lib/templates/method.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5>{{parent.name}} {{parent.kind}}</h5>
66
{{>sidebar_for_class}}
77
</div><!--/.sidebar-offcanvas-->
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#self}}
1111
<div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}}</h1></div>
1212
{{/self}}
@@ -23,7 +23,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
2323
{{/method}}
2424
</div> <!-- /.main-content -->
2525

26-
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
26+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
2727
</div><!--/.sidebar-offcanvas-->
2828

2929
{{>footer}}

‎lib/templates/mixin.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5>{{parent.name}} {{parent.kind}}</h5>
66
{{>sidebar_for_library}}
77
</div>
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#self}}
1111
<div>{{>source_link}}<h1>{{{nameWithGenerics}}} {{kind}} {{>categorization}}</h1></div>
1212
{{/self}}
@@ -172,7 +172,7 @@ <h2>Constants</h2>
172172
{{/mixin}}
173173
</div> <!-- /.main-content -->
174174

175-
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
175+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
176176
{{>sidebar_for_class}}
177177
</div><!--/.sidebar-offcanvas-->
178178

‎lib/templates/property.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{{>head}}
22

3-
<div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
3+
<div id="dartdoc-sidebar-left" class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
44
{{>search_sidebar}}
55
<h5>{{parent.name}} {{parent.kind}}</h5>
66
{{>sidebar_for_class}}
77
</div><!--/.sidebar-offcanvas-->
88

9-
<div class="col-xs-12 col-sm-9 col-md-8 main-content">
9+
<div id="dartdoc-main-content" class="col-xs-12 col-sm-9 col-md-8 main-content">
1010
{{#self}}
1111
<div>{{>source_link}}<h1>{{name}} {{kind}}</h1></div>
1212
{{/self}}
@@ -34,7 +34,7 @@ <h5>{{parent.name}} {{parent.kind}}</h5>
3434
{{/self}}
3535
</div> <!-- /.main-content -->
3636

37-
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
37+
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
3838
</div><!--/.sidebar-offcanvas-->
3939

4040
{{>footer}}

0 commit comments

Comments
 (0)