Skip to content

Commit 3c71516

Browse files
gfrankogfranko
committed
Merge pull request #44 from frohoff/conditional-scroll-event-handler
only register scroll event handler if necessary (expensive in IE)
2 parents a4e78e0 + e8b6fd3 commit 3c71516

File tree

1 file changed

+80
-76
lines changed

1 file changed

+80
-76
lines changed

‎src/javascripts/jquery.tocify.js

Lines changed: 80 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -572,137 +572,141 @@
572572
}
573573
});
574574

575+
// only attach handler if needed (expensive in IE)
576+
if (self.options.extendPage || self.options.highlightOnScroll || self.options.scrollHistory || self.options.showAndHideOnScroll)
577+
{
575578
// Window scroll event handler
576-
$(window).on("scroll.tocify", function() {
579+
$(window).on("scroll.tocify", function() {
577580

578-
// Once all animations on the page are complete, this callback function will be called
579-
$("html, body").promise().done(function() {
581+
// Once all animations on the page are complete, this callback function will be called
582+
$("html, body").promise().done(function() {
583+
584+
// Local variables
580585

581-
// Local variables
586+
// Stores how far the user has scrolled
587+
var winScrollTop = $(window).scrollTop(),
582588

583-
// Stores how far the user has scrolled
584-
var winScrollTop = $(window).scrollTop(),
589+
// Stores the height of the window
590+
winHeight = $(window).height(),
585591

586-
// Stores the height of the window
587-
winHeight = $(window).height(),
592+
// Stores the height of the document
593+
docHeight = $(document).height(),
588594

589-
// Stores the height of the document
590-
docHeight = $(document).height(),
595+
scrollHeight = $("body")[0].scrollHeight,
591596

592-
scrollHeight = $("body")[0].scrollHeight,
597+
// Instantiates a variable that will be used to hold a selected HTML element
598+
elem,
593599

594-
// Instantiates a variable that will be used to hold a selected HTML element
595-
elem,
600+
lastElem,
596601

597-
lastElem,
602+
lastElemOffset,
598603

599-
lastElemOffset,
604+
currentElem;
600605

601-
currentElem;
606+
if(self.options.extendPage) {
602607

603-
if(self.options.extendPage) {
608+
// If the user has scrolled to the bottom of the page and the last toc item is not focused
609+
if((self.webkit && winScrollTop >= scrollHeight - winHeight - self.options.extendPageOffset) || (!self.webkit && winHeight + winScrollTop > docHeight - self.options.extendPageOffset)) {
604610

605-
// If the user has scrolled to the bottom of the page and the last toc item is not focused
606-
if((self.webkit && winScrollTop >= scrollHeight - winHeight - self.options.extendPageOffset) || (!self.webkit && winHeight + winScrollTop > docHeight - self.options.extendPageOffset)) {
611+
if(!$(extendPageClass).length) {
607612

608-
if(!$(extendPageClass).length) {
613+
lastElem = $('div[data-unique="' + $(itemClass).last().attr("data-unique") + '"]');
609614

610-
lastElem = $('div[data-unique="' + $(itemClass).last().attr("data-unique") + '"]');
615+
if(!lastElem.length) return;
611616

612-
if(!lastElem.length) return;
617+
// Gets the top offset of the page header that is linked to the last toc item
618+
lastElemOffset = lastElem.offset().top;
613619

614-
// Gets the top offset of the page header that is linked to the last toc item
615-
lastElemOffset = lastElem.offset().top;
620+
// Appends a div to the bottom of the page and sets the height to the difference of the window scrollTop and the last element's position top offset
621+
$(self.options.context).append($("<div />", {
616622

617-
// Appends a div to the bottom of the page and sets the height to the difference of the window scrollTop and the last element's position top offset
618-
$(self.options.context).append($("<div />", {
623+
"class": extendPageClassName,
619624

620-
"class": extendPageClassName,
625+
"height": Math.abs(lastElemOffset - winScrollTop) + "px",
621626

622-
"height": Math.abs(lastElemOffset - winScrollTop) + "px",
627+
"data-unique": extendPageClassName
623628

624-
"data-unique": extendPageClassName
629+
}));
625630

626-
}));
631+
if(self.extendPageScroll) {
627632

628-
if(self.extendPageScroll) {
633+
currentElem = self.element.find('li.active');
629634

630-
currentElem = self.element.find('li.active');
635+
self._scrollTo($("div[data-unique=" + currentElem.attr("data-unique") + "]"));
631636

632-
self._scrollTo($("div[data-unique=" + currentElem.attr("data-unique") + "]"));
637+
}
633638

634639
}
635640

636641
}
637642

638643
}
639644

640-
}
641-
642-
// The zero timeout ensures the following code is run after the scroll events
643-
setTimeout(function() {
645+
// The zero timeout ensures the following code is run after the scroll events
646+
setTimeout(function() {
644647

645-
// _Local variables_
648+
// _Local variables_
646649

647-
// Stores the distance to the closest anchor
648-
var closestAnchorDistance = null,
650+
// Stores the distance to the closest anchor
651+
var closestAnchorDistance = null,
649652

650-
// Stores the index of the closest anchor
651-
closestAnchorIdx = null,
653+
// Stores the index of the closest anchor
654+
closestAnchorIdx = null,
652655

653-
// Keeps a reference to all anchors
654-
anchors = $(self.options.context).find("div[data-unique]"),
656+
// Keeps a reference to all anchors
657+
anchors = $(self.options.context).find("div[data-unique]"),
655658

656-
anchorText;
659+
anchorText;
657660

658-
// Determines the index of the closest anchor
659-
anchors.each(function(idx) {
660-
var distance = Math.abs(($(this).next().length ? $(this).next() : $(this)).offset().top - winScrollTop - self.options.highlightOffset);
661-
if (closestAnchorDistance == null || distance < closestAnchorDistance) {
662-
closestAnchorDistance = distance;
663-
closestAnchorIdx = idx;
664-
} else {
665-
return false;
666-
}
667-
});
661+
// Determines the index of the closest anchor
662+
anchors.each(function(idx) {
663+
var distance = Math.abs(($(this).next().length ? $(this).next() : $(this)).offset().top - winScrollTop - self.options.highlightOffset);
664+
if (closestAnchorDistance == null || distance < closestAnchorDistance) {
665+
closestAnchorDistance = distance;
666+
closestAnchorIdx = idx;
667+
} else {
668+
return false;
669+
}
670+
});
668671

669-
anchorText = $(anchors[closestAnchorIdx]).attr("data-unique");
672+
anchorText = $(anchors[closestAnchorIdx]).attr("data-unique");
670673

671-
// Stores the list item HTML element that corresponds to the currently traversed anchor tag
672-
elem = $('li[data-unique="' + anchorText + '"]');
674+
// Stores the list item HTML element that corresponds to the currently traversed anchor tag
675+
elem = $('li[data-unique="' + anchorText + '"]');
673676

674-
// If the `highlightOnScroll` option is true and a next element is found
675-
if(self.options.highlightOnScroll && elem.length) {
677+
// If the `highlightOnScroll` option is true and a next element is found
678+
if(self.options.highlightOnScroll && elem.length) {
676679

677-
// Removes highlighting from all of the list item's
678-
self.element.find("." + self.focusClass).removeClass(self.focusClass);
680+
// Removes highlighting from all of the list item's
681+
self.element.find("." + self.focusClass).removeClass(self.focusClass);
679682

680-
// Highlights the corresponding list item
681-
elem.addClass(self.focusClass);
683+
// Highlights the corresponding list item
684+
elem.addClass(self.focusClass);
682685

683-
}
686+
}
684687

685-
if(self.options.scrollHistory) {
688+
if(self.options.scrollHistory) {
686689

687-
if(window.location.hash !== "#" + anchorText) {
690+
if(window.location.hash !== "#" + anchorText) {
688691

689-
window.location.replace("#" + anchorText);
692+
window.location.replace("#" + anchorText);
690693

694+
}
691695
}
692-
}
693696

694-
// If the `showAndHideOnScroll` option is true
695-
if(self.options.showAndHideOnScroll && self.options.showAndHide) {
697+
// If the `showAndHideOnScroll` option is true
698+
if(self.options.showAndHideOnScroll && self.options.showAndHide) {
696699

697-
self._triggerShow(elem, true);
700+
self._triggerShow(elem, true);
698701

699-
}
702+
}
700703

701-
}, 0);
704+
}, 0);
702705

703-
});
706+
});
704707

705-
});
708+
});
709+
}
706710

707711
},
708712

0 commit comments

Comments
 (0)