haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-20 10:58:33 +00:00
Code Issues Releases Wiki Activity

[image-preivew] abort ajax request if mouse leave preview wrap

Browse Source
This commit is contained in:
lian
2015-03-02 15:12:10 +08:00
parent 921c6cebcf
commit 52d23ed46e
1 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
seahub/templates/repo.html
View File

@@ -2370,7 +2370,7 @@ function updateCmt() {
{% endif %} {% endif %}
{% if not repo.encrypted and ENABLE_THUMBNAIL %} {% if not repo.encrypted and ENABLE_THUMBNAIL %}
var timer, var timer, ajaxRequest = $.ajax(),
default_size = {{PREVIEW_DEFAULT_SIZE}}, 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>') 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") .appendTo("body")
@@ -2385,50 +2385,59 @@ $("#repo-file-list").on({
file_item = thumbnail.closest('.file-item'); file_item = thumbnail.closest('.file-item');
timer = setTimeout(function () { timer = setTimeout(function () {
$.ajax({ ajaxRequest = $.ajax({
url: '{% url 'thumbnail_create' repo.id %}?path=' + e(cur_path+file_item.attr('data-name')) + '&size=' + default_size, url: '{% url 'thumbnail_create' repo.id %}?path=' + e(cur_path+file_item.attr('data-name')) + '&size=' + default_size,
cache: false, cache: false,
dataType: 'json', dataType: 'json',
success: function(data) { success: function(data) {
image_preview.attr("src", data.thumbnail_src); image_preview.attr("src", data.thumbnail_src);
var file_item_offset = file_item.offset(), var file_item_offset = file_item.offset(),
thumbnail_offset = thumbnail.offset(), thumbnail_offset = thumbnail.offset(),
wrap_width = preview_wrap.outerWidth(), wrap_width = preview_wrap.outerWidth(),
wrap_padding = parseInt(preview_wrap.css('padding-top')), wrap_padding = parseInt(preview_wrap.css('padding-top')),
caret_width = parseInt(caret.css('border-top-width')), caret_width = parseInt(caret.css('border-top-width')),
caret_pos_x = (default_size)/2 + wrap_padding - caret_width, caret_pos_x = (default_size)/2 + wrap_padding - caret_width,
caret_pos_y = default_size + 2 * wrap_padding, 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) { if (wrap_left >= 0) {
caret.removeClass('bottom-outer-caret') caret.removeClass('bottom-outer-caret')
.addClass('right-outer-caret') .addClass('right-outer-caret')
.css({'top':caret_pos_x + 'px', 'left':caret_pos_y + 'px'}); .css({'top':caret_pos_x + 'px', 'left':caret_pos_y + 'px'});
preview_wrap.css({ preview_wrap.css({
'top' : (thumbnail_offset.top + (thumbnail.height() - wrap_width)/2) + 'px', 'top' : (thumbnail_offset.top + (thumbnail.height() - wrap_width)/2) + 'px',
'left' : wrap_left + 'px' 'left' : wrap_left + 'px'
}).fadeIn(); }).fadeIn();
} else { } else {
caret.removeClass("right-outer-caret") caret.removeClass("right-outer-caret")
.addClass("bottom-outer-caret") .addClass("bottom-outer-caret")
.css({'top':caret_pos_y + 'px', 'left':caret_pos_x + 'px'}); .css({'top':caret_pos_y + 'px', 'left':caret_pos_x + 'px'});
preview_wrap.css({ preview_wrap.css({
'top' : (file_item_offset.top - wrap_width) - caret_width + 'px', 'top' : (file_item_offset.top - wrap_width) - caret_width + 'px',
'left' : (thumbnail_offset.left + (thumbnail.width() - wrap_width)/2) + 'px' 'left' : (thumbnail_offset.left + (thumbnail.width() - wrap_width)/2) + 'px'
}).fadeIn(); }).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); }, 200);
}, },
mouseleave: function() { mouseleave: function() {
ajaxRequest.abort();
clearTimeout(timer); clearTimeout(timer);
preview_wrap.hide(); 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. image_preview.attr('src', ''); // for ff. In ff, when hover, the last preview image would be shown first, then the right one.