Commit 07174514 authored by Kushal Pandya's avatar Kushal Pandya

Enable build log autoscroll when page scrolls to bottom

parent 528c3e2b
...@@ -10,6 +10,26 @@ ...@@ -10,6 +10,26 @@
Build.state = null; Build.state = null;
function isInViewPort(el) {
var elTop = el.offset().top;
var elBottom = elTop + el.outerHeight();
var vpBottom = $(window).scrollTop() + $(window).height();
return vpBottom > elTop;
}
function toggleAutoScroll(state) {
var $autoScrollBtn = $('#autoscroll-button');
if (state) {
$autoScrollBtn.data("state", "enabled");
$autoScrollBtn.text("Disable autoscroll");
} else {
$autoScrollBtn.data("state", "disabled");
$autoScrollBtn.text("Enable autoscroll");
}
}
function Build(options) { function Build(options) {
options = options || $('.js-build-options').data(); options = options || $('.js-build-options').data();
this.pageUrl = options.pageUrl; this.pageUrl = options.pageUrl;
...@@ -40,18 +60,26 @@ ...@@ -40,18 +60,26 @@
this.initScrollButtonAffix(); this.initScrollButtonAffix();
} }
if (this.buildStatus === "running" || this.buildStatus === "pending") { if (this.buildStatus === "running" || this.buildStatus === "pending") {
// Bind autoscroll button to follow build output // Bind document scroll listener to detect if user has scrolled to page bottom
$('#autoscroll-button').on('click', function() { // and enable autoscroll of build log, disable autoscroll otherwise
var state; this.$document.on('scroll', function() {
state = $(this).data("state"); var $autoScrollBtn = $('#autoscroll-button');
if ("enabled" === state) { if (isInViewPort($('.js-build-refresh'))) { // Check if Refresh Animation is in Viewport
$(this).data("state", "disabled"); if ($autoScrollBtn.data("state") === 'disabled') {
return $(this).text("Enable autoscroll"); toggleAutoScroll(true); // Enable Autoscroll
}
} else { } else {
$(this).data("state", "enabled"); if ($autoScrollBtn.data("state") === 'enabled') {
return $(this).text("Disable autoscroll"); toggleAutoScroll(false); // Disable Autoscroll
}
} }
}); });
// Bind autoscroll button to follow build output
$('#autoscroll-button').on('click', function() {
toggleAutoScroll($(this).data("state") === 'disabled');
});
Build.interval = setInterval((function(_this) { Build.interval = setInterval((function(_this) {
// Check for new build output if user still watching build page // Check for new build output if user still watching build page
// Only valid for runnig build when output changes during time // Only valid for runnig build when output changes during time
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment