Dan Brown

Made stick book navigation recalc on window resize

...@@ -74,15 +74,15 @@ window.setupPageShow = module.exports = function (pageId) { ...@@ -74,15 +74,15 @@ window.setupPageShow = module.exports = function (pageId) {
74 // Make the book-tree sidebar stick in view on scroll 74 // Make the book-tree sidebar stick in view on scroll
75 var $window = $(window); 75 var $window = $(window);
76 var $bookTree = $(".book-tree"); 76 var $bookTree = $(".book-tree");
77 + var $bookTreeParent = $bookTree.parent();
77 // Check the page is scrollable and the content is taller than the tree 78 // Check the page is scrollable and the content is taller than the tree
78 var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height()); 79 var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
79 // Get current tree's width and header height 80 // Get current tree's width and header height
80 var headerHeight = $("#header").height() + $(".toolbar").height(); 81 var headerHeight = $("#header").height() + $(".toolbar").height();
81 var isFixed = $window.scrollTop() > headerHeight; 82 var isFixed = $window.scrollTop() > headerHeight;
82 - var bookTreeWidth = $bookTree.width();
83 // Function to fix the tree as a sidebar 83 // Function to fix the tree as a sidebar
84 function stickTree() { 84 function stickTree() {
85 - $bookTree.width(bookTreeWidth + 48 + 15); 85 + $bookTree.width($bookTreeParent.width() + 15);
86 $bookTree.addClass("fixed"); 86 $bookTree.addClass("fixed");
87 isFixed = true; 87 isFixed = true;
88 } 88 }
...@@ -101,13 +101,27 @@ window.setupPageShow = module.exports = function (pageId) { ...@@ -101,13 +101,27 @@ window.setupPageShow = module.exports = function (pageId) {
101 unstickTree(); 101 unstickTree();
102 } 102 }
103 } 103 }
104 + // The event ran when the window scrolls
105 + function windowScrollEvent() {
106 + checkTreeStickiness(false);
107 + }
108 +
104 // If the page is scrollable and the window is wide enough listen to scroll events 109 // If the page is scrollable and the window is wide enough listen to scroll events
105 // and evaluate tree stickiness. 110 // and evaluate tree stickiness.
106 if (pageScrollable && $window.width() > 1000) { 111 if (pageScrollable && $window.width() > 1000) {
107 - $window.scroll(function() { 112 + $window.on('scroll', windowScrollEvent);
108 - checkTreeStickiness(false);
109 - });
110 checkTreeStickiness(true); 113 checkTreeStickiness(true);
111 } 114 }
112 115
116 + // Handle window resizing and switch between desktop/mobile views
117 + $window.on('resize', event => {
118 + if (pageScrollable && $window.width() > 1000) {
119 + $window.on('scroll', windowScrollEvent);
120 + checkTreeStickiness(true);
121 + } else {
122 + $window.off('scroll', windowScrollEvent);
123 + unstickTree();
124 + }
125 + });
126 +
113 }; 127 };
......