github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-05-31 04:55:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Made book-navigation sidebar on pages sticky

Browse Source
This commit is contained in:
Dan Brown
2016-02-11 22:23:19 +00:00
parent eacff3a9f0
commit 354912a1df
13 changed files with 77 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
resources/assets/js/pages/page-show.js
View File

@ -13,7 +13,7 @@ window.setupPageShow = module.exports = function (pageId) {
var isSelection = false;
// Select all contents on input click
$pointer.on('click', 'input', function(e) {
$pointer.on('click', 'input', function (e) {
$(this).select();
e.stopPropagation();
});
@ -30,6 +30,7 @@ window.setupPageShow = module.exports = function (pageId) {
// Show pointer when selecting a single block of tagged content
$('.page-content [id^="bkmrk"]').on('mouseup keyup', function (e) {
e.stopPropagation();
var selection = window.getSelection();
if (selection.toString().length === 0) return;
@ -47,8 +48,6 @@ window.setupPageShow = module.exports = function (pageId) {
var pointerLeftOffsetPercent = (pointerLeftOffset / $elem.width()) * 100;
$pointerInner.css('left', pointerLeftOffsetPercent + '%');
e.stopPropagation();
isSelection = true;
setTimeout(() => {
isSelection = false;
@ -72,19 +71,43 @@ window.setupPageShow = module.exports = function (pageId) {
goToText(text);
}
// Get current tree's width
var bookTreeWidth = $(".book-tree").width();
// Get header height
var headerHeight = $("#header").height() + $(".faded-small").height();
$(window).scroll(function () {
if($(window).scrollTop() > headerHeight){
// Begin to scroll
$(".book-tree").width(bookTreeWidth);
$(".book-tree").css("position", "fixed");
$(".book-tree").css("top", 0);
} else {
// Lock it back in place
$(".book-tree").css("position", "relative");
}
})
// Make the book-tree sidebar stick in view on scroll
var $window = $(window);
var $bookTree = $(".book-tree");
// Check the page is scrollable and the content is taller than the tree
var pageScrollable = ($(document).height() > $window.height()) && ($bookTree.height() < $('.page-content').height());
// Get current tree's width and header height
var headerHeight = $("#header").height() + $(".toolbar").height();
var isFixed = $window.scrollTop() > headerHeight;
var bookTreeWidth = $bookTree.width();
// Function to fix the tree as a sidebar
function stickTree() {
$bookTree.width(bookTreeWidth + 48 + 15);
$bookTree.addClass("fixed");
isFixed = true;
}
// Function to un-fix the tree back into position
function unstickTree() {
$bookTree.css('width', 'auto');
$bookTree.removeClass("fixed");
isFixed = false;
}
// Checks if the tree stickiness state should change
function checkTreeStickiness(skipCheck) {
var shouldBeFixed = $window.scrollTop() > headerHeight;
if (shouldBeFixed && (!isFixed || skipCheck)) {
stickTree();
} else if (!shouldBeFixed && (isFixed || skipCheck)) {
unstickTree();
}
}
// If the page is scrollable and the window is wide enough listen to scroll events
// and evaluate tree stickiness.
if (pageScrollable && $window.width() > 1000) {
$window.scroll(function() {
checkTreeStickiness(false);
});
checkTreeStickiness(true);
}
};