Fixed page navigation with special chars in id

Also made so it smooth-scrolls and uses app theme color.
Fixes #254
This commit is contained in:
Dan Brown 2017-01-14 16:36:12 +00:00
parent 969ad8911c
commit 0bcf608e0b
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 16 additions and 10 deletions

View File

@ -61,10 +61,9 @@ Controllers(ngApp, window.Events);
// Smooth scrolling // Smooth scrolling
jQuery.fn.smoothScrollTo = function () { jQuery.fn.smoothScrollTo = function () {
if (this.length === 0) return; if (this.length === 0) return;
let scrollElem = document.documentElement.scrollTop === 0 ? document.body : document.documentElement; $('html, body').animate({
$(scrollElem).animate({
scrollTop: this.offset().top - 60 // Adjust to change final scroll position top margin scrollTop: this.offset().top - 60 // Adjust to change final scroll position top margin
}, 800); // Adjust to change animations speed (ms) }, 300); // Adjust to change animations speed (ms)
return this; return this;
}; };

View File

@ -1,6 +1,6 @@
"use strict"; "use strict";
// Configure ZeroClipboard // Configure ZeroClipboard
import zeroClipBoard from "zeroclipboard"; import ZeroClipBoard from "zeroclipboard";
export default window.setupPageShow = function (pageId) { export default window.setupPageShow = function (pageId) {
@ -16,10 +16,10 @@ export default window.setupPageShow = function (pageId) {
}); });
// Set up copy-to-clipboard // Set up copy-to-clipboard
zeroClipBoard.config({ ZeroClipBoard.config({
swfPath: window.baseUrl('/ZeroClipboard.swf') swfPath: window.baseUrl('/ZeroClipboard.swf')
}); });
new zeroClipBoard($pointer.find('button').first()[0]); new ZeroClipBoard($pointer.find('button').first()[0]);
// Hide pointer when clicking away // Hide pointer when clicking away
$(document.body).find('*').on('click focus', function (e) { $(document.body).find('*').on('click focus', function (e) {
@ -57,10 +57,12 @@ export default window.setupPageShow = function (pageId) {
// Go to, and highlight if necessary, the specified text. // Go to, and highlight if necessary, the specified text.
function goToText(text) { function goToText(text) {
let idElem = $('.page-content #' + text).first(); let idElem = document.getElementById(text);
if (idElem.length !== 0) { $('.page-content [data-highlighted]').attr('data-highlighted', '').css('background-color', '');
idElem.smoothScrollTo(); if (idElem !== null) {
idElem.css('background-color', 'rgba(244, 249, 54, 0.25)'); let $idElem = $(idElem);
let color = $('#custom-styles').attr('data-color-light');
$idElem.css('background-color', color).attr('data-highlighted', 'true').smoothScrollTo();
} else { } else {
$('.page-content').find(':contains("' + text + '")').smoothScrollTo(); $('.page-content').find(':contains("' + text + '")').smoothScrollTo();
} }
@ -72,6 +74,11 @@ export default window.setupPageShow = function (pageId) {
goToText(text); goToText(text);
} }
// Sidebar page nav click event
$('.sidebar-page-nav').on('click', 'a', event => {
goToText(event.target.getAttribute('href').substr(1));
});
// Make the book-tree sidebar stick in view on scroll // Make the book-tree sidebar stick in view on scroll
let $window = $(window); let $window = $(window);
let $bookTree = $(".book-tree"); let $bookTree = $(".book-tree");