mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-20 02:48:51 +00:00
[image-preivew] abort ajax request if mouse leave preview wrap
This commit is contained in:
@@ -2370,7 +2370,7 @@ function updateCmt() {
|
||||
{% endif %}
|
||||
|
||||
{% if not repo.encrypted and ENABLE_THUMBNAIL %}
|
||||
var timer,
|
||||
var timer, ajaxRequest = $.ajax(),
|
||||
default_size = {{PREVIEW_DEFAULT_SIZE}},
|
||||
preview_wrap = $('<div id="preview-wrap"><img id="image-preview" src="" alt=""/><div class="outer-caret right-outer-caret"><div class="inner-caret"></div></div></div>')
|
||||
.appendTo("body")
|
||||
@@ -2385,50 +2385,59 @@ $("#repo-file-list").on({
|
||||
file_item = thumbnail.closest('.file-item');
|
||||
|
||||
timer = setTimeout(function () {
|
||||
$.ajax({
|
||||
url: '{% url 'thumbnail_create' repo.id %}?path=' + e(cur_path+file_item.attr('data-name')) + '&size=' + default_size,
|
||||
cache: false,
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
image_preview.attr("src", data.thumbnail_src);
|
||||
ajaxRequest = $.ajax({
|
||||
url: '{% url 'thumbnail_create' repo.id %}?path=' + e(cur_path+file_item.attr('data-name')) + '&size=' + default_size,
|
||||
cache: false,
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
image_preview.attr("src", data.thumbnail_src);
|
||||
|
||||
var file_item_offset = file_item.offset(),
|
||||
thumbnail_offset = thumbnail.offset(),
|
||||
var file_item_offset = file_item.offset(),
|
||||
thumbnail_offset = thumbnail.offset(),
|
||||
|
||||
wrap_width = preview_wrap.outerWidth(),
|
||||
wrap_padding = parseInt(preview_wrap.css('padding-top')),
|
||||
wrap_width = preview_wrap.outerWidth(),
|
||||
wrap_padding = parseInt(preview_wrap.css('padding-top')),
|
||||
|
||||
caret_width = parseInt(caret.css('border-top-width')),
|
||||
caret_pos_x = (default_size)/2 + wrap_padding - caret_width,
|
||||
caret_pos_y = default_size + 2 * wrap_padding,
|
||||
caret_width = parseInt(caret.css('border-top-width')),
|
||||
caret_pos_x = (default_size)/2 + wrap_padding - caret_width,
|
||||
caret_pos_y = default_size + 2 * wrap_padding,
|
||||
|
||||
wrap_left = file_item_offset.left - wrap_width - caret_width;
|
||||
wrap_left = file_item_offset.left - wrap_width - caret_width;
|
||||
|
||||
if (wrap_left >= 0) {
|
||||
caret.removeClass('bottom-outer-caret')
|
||||
.addClass('right-outer-caret')
|
||||
.css({'top':caret_pos_x + 'px', 'left':caret_pos_y + 'px'});
|
||||
if (wrap_left >= 0) {
|
||||
caret.removeClass('bottom-outer-caret')
|
||||
.addClass('right-outer-caret')
|
||||
.css({'top':caret_pos_x + 'px', 'left':caret_pos_y + 'px'});
|
||||
|
||||
preview_wrap.css({
|
||||
'top' : (thumbnail_offset.top + (thumbnail.height() - wrap_width)/2) + 'px',
|
||||
'left' : wrap_left + 'px'
|
||||
}).fadeIn();
|
||||
} else {
|
||||
caret.removeClass("right-outer-caret")
|
||||
.addClass("bottom-outer-caret")
|
||||
.css({'top':caret_pos_y + 'px', 'left':caret_pos_x + 'px'});
|
||||
preview_wrap.css({
|
||||
'top' : (thumbnail_offset.top + (thumbnail.height() - wrap_width)/2) + 'px',
|
||||
'left' : wrap_left + 'px'
|
||||
}).fadeIn();
|
||||
} else {
|
||||
caret.removeClass("right-outer-caret")
|
||||
.addClass("bottom-outer-caret")
|
||||
.css({'top':caret_pos_y + 'px', 'left':caret_pos_x + 'px'});
|
||||
|
||||
preview_wrap.css({
|
||||
'top' : (file_item_offset.top - wrap_width) - caret_width + 'px',
|
||||
'left' : (thumbnail_offset.left + (thumbnail.width() - wrap_width)/2) + 'px'
|
||||
}).fadeIn();
|
||||
preview_wrap.css({
|
||||
'top' : (file_item_offset.top - wrap_width) - caret_width + 'px',
|
||||
'left' : (thumbnail_offset.left + (thumbnail.width() - wrap_width)/2) + 'px'
|
||||
}).fadeIn();
|
||||
}
|
||||
},
|
||||
error: function(xhr, textStatus, errorThrown) {
|
||||
if (textStatus != "abort") {
|
||||
if (xhr.responseText) {
|
||||
feedback($.parseJSON(xhr.responseText).error, 'error');
|
||||
} else {
|
||||
feedback("{% trans "Failed. Please check the network." %}", 'error');
|
||||
};
|
||||
};
|
||||
}
|
||||
},
|
||||
error: ajaxErrorHandler
|
||||
});
|
||||
}, 200);
|
||||
},
|
||||
mouseleave: function() {
|
||||
ajaxRequest.abort();
|
||||
clearTimeout(timer);
|
||||
preview_wrap.hide();
|
||||
image_preview.attr('src', ''); // for ff. In ff, when hover, the last preview image would be shown first, then the right one.
|
||||
|
Reference in New Issue
Block a user