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:
parent
bef61f4003
commit
2b16c882f4
32
awx/ui/client/lib/lrInfiniteScroll/.bower.json
Normal file
32
awx/ui/client/lib/lrInfiniteScroll/.bower.json
Normal 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"
|
||||
}
|
2
awx/ui/client/lib/lrInfiniteScroll/index.js
Normal file
2
awx/ui/client/lib/lrInfiniteScroll/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
require('./lrInfiniteScroll');
|
||||
module.exports = 'lrInfiniteScroll';
|
@ -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);
|
||||
}
|
||||
|
@ -79,6 +79,7 @@ __deferLoadIfEnabled();
|
||||
|
||||
var tower = angular.module('Tower', [
|
||||
//'ngAnimate',
|
||||
'lrInfiniteScroll',
|
||||
'ngSanitize',
|
||||
'ngCookies',
|
||||
about.name,
|
||||
|
@ -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!',
|
||||
|
@ -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
829
npm-shrinkwrap.json
generated
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user