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';
|
'use strict';
|
||||||
var module = ng.module('lrInfiniteScroll', []);
|
var module = ng.module('lrInfiniteScroll', []);
|
||||||
|
|
||||||
module.directive('lrInfiniteScroll', ['$log', '$timeout', function ($log, timeout) {
|
module.directive('lrInfiniteScroll', ['$timeout', function (timeout) {
|
||||||
return{
|
return{
|
||||||
link: function (scope, element, attr) {
|
link: function (scope, element, attr) {
|
||||||
var
|
var
|
||||||
lengthThreshold = attr.scrollThreshold || 50,
|
lengthThreshold = attr.scrollThreshold || 50,
|
||||||
timeThreshold = attr.timeThreshold || 400,
|
timeThreshold = attr.timeThreshold || 400,
|
||||||
direction = attr.direction || 'down',
|
|
||||||
handler = scope.$eval(attr.lrInfiniteScroll),
|
handler = scope.$eval(attr.lrInfiniteScroll),
|
||||||
promise = null,
|
promise = null,
|
||||||
lastRemaining = 9999;
|
lastRemaining = 9999;
|
||||||
@ -20,14 +19,14 @@
|
|||||||
handler = ng.noop;
|
handler = ng.noop;
|
||||||
}
|
}
|
||||||
|
|
||||||
$log.debug('lrInfiniteScroll: ' + attr.lrInfiniteScroll);
|
|
||||||
|
|
||||||
element.bind('scroll', function () {
|
element.bind('scroll', function () {
|
||||||
var remaining = (direction === 'down') ? element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop) : element[0].scrollTop;
|
var
|
||||||
// if we have reached the threshold and we scroll down
|
remaining = element[0].scrollHeight - (element[0].clientHeight + element[0].scrollTop);
|
||||||
if ((direction === 'down' && remaining < lengthThreshold && (remaining - lastRemaining) < 0) ||
|
|
||||||
direction === 'up' && remaining < lengthThreshold) {
|
//if we have reached the threshold and we scroll down
|
||||||
//if there is already a timer running which has not expired yet we have to cancel it and restart the timer
|
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) {
|
if (promise !== null) {
|
||||||
timeout.cancel(promise);
|
timeout.cancel(promise);
|
||||||
}
|
}
|
||||||
|
@ -79,6 +79,7 @@ __deferLoadIfEnabled();
|
|||||||
|
|
||||||
var tower = angular.module('Tower', [
|
var tower = angular.module('Tower', [
|
||||||
//'ngAnimate',
|
//'ngAnimate',
|
||||||
|
'lrInfiniteScroll',
|
||||||
'ngSanitize',
|
'ngSanitize',
|
||||||
'ngCookies',
|
'ngCookies',
|
||||||
about.name,
|
about.name,
|
||||||
|
@ -87,7 +87,7 @@ export default ['$log', '$rootScope', '$scope', '$state', '$stateParams', 'Proce
|
|||||||
});
|
});
|
||||||
|
|
||||||
function loadStdout() {
|
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()
|
Rest.get()
|
||||||
.success(function(data) {
|
.success(function(data) {
|
||||||
Wait('stop');
|
Wait('stop');
|
||||||
@ -145,38 +145,17 @@ export default ['$log', '$rootScope', '$scope', '$state', '$stateParams', 'Proce
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
$scope.stdOutScrollToTop = function() {
|
// lrInfiniteScroll handler
|
||||||
// scroll up or back in time toward the beginning of the file
|
// grabs the next stdout section
|
||||||
var start, end, url;
|
$scope.stdOutGetNextSection = function(){
|
||||||
if (loaded_sections.length > 0 && loaded_sections[0].start > 0) {
|
if (current_range.absolute_end > current_range.end){
|
||||||
start = (loaded_sections[0].start - page_size > 0) ? loaded_sections[0].start - page_size : 0;
|
var url = $scope.stdoutEndpoint + '?format=json&start_line=' + current_range.end +
|
||||||
end = loaded_sections[0].start - 1;
|
'&end_line=' + (current_range.end + page_size);
|
||||||
}
|
|
||||||
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;
|
|
||||||
Rest.setUrl(url);
|
Rest.setUrl(url);
|
||||||
Rest.get()
|
Rest.get()
|
||||||
.success( function(data) {
|
.success(function(data){
|
||||||
//var currentPos = $('#pre-container').scrollTop();
|
$('#pre-container-content').append(data.content);
|
||||||
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
|
|
||||||
});
|
|
||||||
current_range = data.range;
|
current_range = data.range;
|
||||||
$('#stdoutMoreRowsTop').fadeOut(400);
|
|
||||||
})
|
})
|
||||||
.error(function(data, status) {
|
.error(function(data, status) {
|
||||||
ProcessErrors($scope, data, status, null, { hdr: 'Error!',
|
ProcessErrors($scope, data, status, null, { hdr: 'Error!',
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
<div class="StandardOut-consoleOutput">
|
<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" class="body_background body_foreground pre mono-space StandardOut-preContainer">
|
||||||
lr-infinite-scroll="stdOutScrollToTop" scroll-threshold="300" data-direction="up" time-threshold="500">
|
|
||||||
<div id="pre-container-content" class="StandardOut-preContent"></div>
|
<div id="pre-container-content" class="StandardOut-preContent"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="scroll-spinner" id="stdoutMoreRowsBottom">
|
<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