1
0
mirror of https://github.com/ansible/awx.git synced 2024-10-28 02:25:27 +03:00

fix infinite scrolling of job run standard out, resolves #1829

This commit is contained in:
Leigh Johnson 2016-05-25 12:45:13 -04:00
parent bef61f4003
commit 2b16c882f4
7 changed files with 311 additions and 614 deletions

View File

@ -0,0 +1,32 @@
{
"name": "lrInfiniteScroll",
"main": "lrInfiniteScroll.js",
"version": "1.0.0",
"homepage": "https://github.com/lorenzofox3/lrInfiniteScroll",
"authors": [
"lorenzofox3 <laurent34azerty@gmail.com>"
],
"description": "angular directive to handle element scroll",
"keywords": [
"angular",
"scroll",
"inifinite"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"_release": "1.0.0",
"_resolution": {
"type": "version",
"tag": "1.0.0",
"commit": "c833e9d8ff56d6c66e2a21ed7f27ad840f159a8b"
},
"_source": "https://github.com/lorenzofox3/lrInfiniteScroll.git",
"_target": "~1.0.0",
"_originalSource": "lrInfiniteScroll"
}

View File

@ -0,0 +1,2 @@
require('./lrInfiniteScroll');
module.exports = 'lrInfiniteScroll';

View File

@ -2,13 +2,12 @@
'use strict';
var module = ng.module('lrInfiniteScroll', []);
module.directive('lrInfiniteScroll', ['$log', '$timeout', function ($log, timeout) {
module.directive('lrInfiniteScroll', ['$timeout', function (timeout) {
return{
link: function (scope, element, attr) {
var
lengthThreshold = attr.scrollThreshold || 50,
timeThreshold = attr.timeThreshold || 400,
direction = attr.direction || 'down',
handler = scope.$eval(attr.lrInfiniteScroll),
promise = null,
lastRemaining = 9999;
@ -20,14 +19,14 @@
handler = ng.noop;
}
$log.debug('lrInfiniteScroll: ' + attr.lrInfiniteScroll);
element.bind('scroll', function () {
var remaining = (direction === 'down') ? element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop) : element[0].scrollTop;
// if we have reached the threshold and we scroll down
if ((direction === 'down' && remaining < lengthThreshold && (remaining - lastRemaining) < 0) ||
direction === 'up' && remaining < lengthThreshold) {
//if there is already a timer running which has not expired yet we have to cancel it and restart the timer
var
remaining = element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop);
//if we have reached the threshold and we scroll down
if (remaining < lengthThreshold && (remaining - lastRemaining) < 0) {
//if there is already a timer running which has no expired yet we have to cancel it and restart the timer
if (promise !== null) {
timeout.cancel(promise);
}

View File

@ -79,6 +79,7 @@ __deferLoadIfEnabled();
var tower = angular.module('Tower', [
//'ngAnimate',
'lrInfiniteScroll',
'ngSanitize',
'ngCookies',
about.name,

View File

@ -87,7 +87,7 @@ export default ['$log', '$rootScope', '$scope', '$state', '$stateParams', 'Proce
});
function loadStdout() {
Rest.setUrl($scope.stdoutEndpoint + '?format=json&start_line=-' + page_size);
Rest.setUrl($scope.stdoutEndpoint + '?format=json&start_line=0&end_line=' + page_size);
Rest.get()
.success(function(data) {
Wait('stop');
@ -145,38 +145,17 @@ export default ['$log', '$rootScope', '$scope', '$state', '$stateParams', 'Proce
});
}
$scope.stdOutScrollToTop = function() {
// scroll up or back in time toward the beginning of the file
var start, end, url;
if (loaded_sections.length > 0 && loaded_sections[0].start > 0) {
start = (loaded_sections[0].start - page_size > 0) ? loaded_sections[0].start - page_size : 0;
end = loaded_sections[0].start - 1;
}
else if (loaded_sections.length === 0) {
start = 0;
end = page_size;
}
if (start !== undefined && end !== undefined) {
$('#stdoutMoreRowsTop').fadeIn();
url = stdout_url + '?format=json&start_line=' + start + '&end_line=' + end;
// lrInfiniteScroll handler
// grabs the next stdout section
$scope.stdOutGetNextSection = function(){
if (current_range.absolute_end > current_range.end){
var url = $scope.stdoutEndpoint + '?format=json&start_line=' + current_range.end +
'&end_line=' + (current_range.end + page_size);
Rest.setUrl(url);
Rest.get()
.success( function(data) {
//var currentPos = $('#pre-container').scrollTop();
var newSH, oldSH = $('#pre-container').prop('scrollHeight'),
st = $('#pre-container').scrollTop();
$('#pre-container-content').prepend(data.content);
newSH = $('#pre-container').prop('scrollHeight');
$('#pre-container').scrollTop(newSH - oldSH + st);
loaded_sections.unshift({
start: (data.range.start < 0) ? 0 : data.range.start,
end: data.range.end
});
.success(function(data){
$('#pre-container-content').append(data.content);
current_range = data.range;
$('#stdoutMoreRowsTop').fadeOut(400);
})
.error(function(data, status) {
ProcessErrors($scope, data, status, null, { hdr: 'Error!',

View File

@ -1,6 +1,5 @@
<div class="StandardOut-consoleOutput">
<div id="pre-container" class="body_background body_foreground pre mono-space StandardOut-preContainer"
lr-infinite-scroll="stdOutScrollToTop" scroll-threshold="300" data-direction="up" time-threshold="500">
<div class="StandardOut-consoleOutput" lr-infinite-scroll="stdOutGetNextSection" scroll-threshold="300" time-threshold="500">
<div id="pre-container" class="body_background body_foreground pre mono-space StandardOut-preContainer">
<div id="pre-container-content" class="StandardOut-preContent"></div>
</div>
<div class="scroll-spinner" id="stdoutMoreRowsBottom">

829
npm-shrinkwrap.json generated

File diff suppressed because it is too large Load Diff