Skip to content

Add sessionStorage based scroll memory for Dartdoc's scrolling divs #1917

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

Merged
merged 25 commits into from
Feb 4, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
f827171
Link to source now works, minus icons
jcollins-g Jan 28, 2019
d2e95f6
Merge branch 'master' into link-to-source
jcollins-g Jan 28, 2019
12d9f33
Add material icons
jcollins-g Jan 29, 2019
d02577b
Refactor dartdoc_test to avoid asynchronous delete collisions
jcollins-g Jan 29, 2019
1795f69
dartfmt
jcollins-g Jan 29, 2019
3acd727
Fix windows
jcollins-g Jan 29, 2019
cf15e98
dartfmt
jcollins-g Jan 29, 2019
74e0cf7
Tweak padding and change icon to description
jcollins-g Jan 29, 2019
c7f5ba3
Fix styles to match dartlang site
jcollins-g Jan 31, 2019
102090e
Review comments
jcollins-g Jan 31, 2019
ff8c3cc
Add example and use it in the dartdoc package.
jcollins-g Jan 31, 2019
f0d6c7e
dartfmt
jcollins-g Jan 31, 2019
9fe1a81
Merge branch 'link-to-source' into link-to-source+hoverlinks
jcollins-g Jan 31, 2019
e1e1bb8
Merge branch 'master' into link-to-source
jcollins-g Jan 31, 2019
caa58a7
Merge branch 'link-to-source' into link-to-source+hoverlinks
jcollins-g Jan 31, 2019
816fd70
Add lscache and give us some scroll memory
jcollins-g Jan 31, 2019
3baf68b
Review comment
jcollins-g Jan 31, 2019
177b5e8
Merge branch 'style-refresh' into style-refresh+javascript-scroll-memory
jcollins-g Jan 31, 2019
49efcac
Merge branch 'master' into style-refresh
jcollins-g Jan 31, 2019
59b9df6
Merge branch 'style-refresh' into style-refresh+javascript-scroll-memory
jcollins-g Jan 31, 2019
cea00d3
Use sessionStorage.
jcollins-g Feb 1, 2019
d746206
Merge branch 'master' into style-refresh+javascript-scroll-memory
jcollins-g Feb 1, 2019
8384dd5
Remove setInterval (no longer needed without localStorage)
jcollins-g Feb 1, 2019
d03a49d
Merge branch 'master' into style-refresh+javascript-scroll-memory
jcollins-g Feb 1, 2019
1659ded
Use try-finally and ordering to reduce the risk we might generate a b…
jcollins-g Feb 1, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions lib/resources/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,67 @@ function initSideNav() {
}
}

function saveLeftScroll() {
var leftSidebar = document.getElementById('dartdoc-sidebar-left');
sessionStorage.setItem('dartdoc-sidebar-left-scrollt', leftSidebar.scrollTop);
sessionStorage.setItem('dartdoc-sidebar-left-scrolll', leftSidebar.scrollLeft);
}

function saveMainContentScroll() {
var mainContent = document.getElementById('dartdoc-main-content');
sessionStorage.setItem('dartdoc-main-content-scrollt', mainContent.scrollTop);
sessionStorage.setItem('dartdoc-main-content-scrolll', mainContent.scrollLeft);
}

function saveRightScroll() {
var rightSidebar = document.getElementById('dartdoc-sidebar-right');
sessionStorage.setItem('dartdoc-sidebar-right-scrollt', rightSidebar.scrollTop);
sessionStorage.setItem('dartdoc-sidebar-right-scrolll', rightSidebar.scrollLeft);
}

function restoreScrolls() {
var leftSidebar = document.getElementById('dartdoc-sidebar-left');
var mainContent = document.getElementById('dartdoc-main-content');
var rightSidebar = document.getElementById('dartdoc-sidebar-right');

try {
var leftSidebarX = sessionStorage.getItem('dartdoc-sidebar-left-scrolll');
var leftSidebarY = sessionStorage.getItem('dartdoc-sidebar-left-scrollt');

var mainContentX = sessionStorage.getItem('dartdoc-main-content-scrolll');
var mainContentY = sessionStorage.getItem('dartdoc-main-content-scrollt');

var rightSidebarX = sessionStorage.getItem('dartdoc-sidebar-right-scrolll');
var rightSidebarY = sessionStorage.getItem('dartdoc-sidebar-right-scrollt');

leftSidebar.scrollTo(leftSidebarX, leftSidebarY);
mainContent.scrollTo(mainContentX, mainContentY);
rightSidebar.scrollTo(rightSidebarX, rightSidebarY);
} finally {
// Set visibility to visible after scroll to prevent the brief appearance of the
// panel in the wrong position.
leftSidebar.style.visibility = 'visible';
mainContent.style.visibility = 'visible';
rightSidebar.style.visibility = 'visible';
}
}

function initScrollSave() {
var leftSidebar = document.getElementById('dartdoc-sidebar-left');
var mainContent = document.getElementById('dartdoc-main-content');
var rightSidebar = document.getElementById('dartdoc-sidebar-right');

// For portablility, use two different ways of attaching saveLeftScroll to events.
// Keep the scroll position from expiring from the cache for a page that's been displayed
// a long time but not moved by re-saving its position every hour.
leftSidebar.onscroll = saveLeftScroll;
leftSidebar.addEventListener("scroll", saveLeftScroll, true);
mainContent.onscroll = saveMainContentScroll;
mainContent.addEventListener("scroll", saveMainContentScroll, true);
rightSidebar.onscroll = saveRightScroll;
rightSidebar.addEventListener("scroll", saveRightScroll, true);
}

function initSearch(name) {
var searchIndex; // the JSON data

Expand Down Expand Up @@ -193,8 +254,11 @@ function initSearch(name) {
}

document.addEventListener("DOMContentLoaded", function() {
// Place this first so that unexpected exceptions in other JavaScript do not block page visibility.
restoreScrolls();
hljs.initHighlightingOnLoad();
initSideNav();
initScrollSave();
initSearch("search-box");
initSearch("search-body");
initSearch("search-sidebar");
Expand Down
4 changes: 4 additions & 0 deletions lib/resources/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ main {
overflow-y: scroll;
padding: 20px 0 15px 30px;
margin: 5px 20px 0 0;
visibility: hidden; /* shown by Javascript after scroll position restore */
Copy link
Member

Choose a reason for hiding this comment

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

This all looks correct, but I can't help but wonder if there are places where this could fall off the rails. If you javascript script didn't run, or threw an exceptions for some reason before it could restore visibility?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, this is a risk. If the javascript doesn't run due to an exception, the screen becomes blank (indeed, I experienced this when writing the code and accidentally introducing bugs).

The only thing I can think of to reduce that risk is to wrap all our JavaScript in the try of a try/finally with the visibility switch-on occurring in the finally block.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've wrapped the restore part that can be wrapped in a try-finally block, and moved it ahead of all the other javascript initialization. This means the page visibly appears slightly faster and should be more resilient to exceptions.

}

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

.sidebar-offcanvas-right {
Expand All @@ -103,6 +105,7 @@ main {
padding: 20px 15px 15px 15px;
margin-top: 5px;
margin-right: 20px;
visibility: hidden; /* shown by Javascript after scroll position restore */
}
/* end for layout */

Expand Down Expand Up @@ -788,6 +791,7 @@ button {
padding: 10px;
margin: 10px 10px;
box-shadow: 5px 5px 5px 5px #444444;
visibility: hidden; /* shown by Javascript after scroll position restore */
}

ol#sidebar-nav {
Expand Down
7 changes: 5 additions & 2 deletions lib/templates/404error.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
</div>

{{>footer}}
6 changes: 3 additions & 3 deletions lib/templates/category.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

</div> <!-- /.main-content -->
<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
<h5>{{self.name}} {{self.kind}}</h5>
{{>sidebar_for_category}}
</div><!--/sidebar-offcanvas-right-->
Expand Down
6 changes: 3 additions & 3 deletions lib/templates/class.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

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

Expand Down
6 changes: 3 additions & 3 deletions lib/templates/constant.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

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

{{>footer}}
6 changes: 3 additions & 3 deletions lib/templates/constructor.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

{{>footer}}
6 changes: 3 additions & 3 deletions lib/templates/enum.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

Expand Down
6 changes: 3 additions & 3 deletions lib/templates/function.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

{{>footer}}
7 changes: 5 additions & 2 deletions lib/templates/index.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
</div>

{{>footer}}
6 changes: 3 additions & 3 deletions lib/templates/library.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

<div class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
<div id="dartdoc-sidebar-right" class="col-xs-6 col-sm-6 col-md-2 sidebar sidebar-offcanvas-right">
<h5>{{self.name}} {{self.kind}}</h5>
{{>sidebar_for_library}}
</div><!--/sidebar-offcanvas-right-->
Expand Down
6 changes: 3 additions & 3 deletions lib/templates/method.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

{{>footer}}
6 changes: 3 additions & 3 deletions lib/templates/mixin.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

Expand Down
6 changes: 3 additions & 3 deletions lib/templates/property.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{>head}}

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

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

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

{{>footer}}
Loading