1
0
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:
lian
2015-03-02 15:12:10 +08:00
parent 921c6cebcf
commit 52d23ed46e

View File

@@ -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.