mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2024-09-20 04:38:51 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor preview extension.

Browse source
This commit is contained in:
Lars Jung 2015-04-11 23:01:24 +02:00
parent 96db9677c6
commit 1623d0f60a
3 changed files with 53 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/_h5ai/client/css/inc/preview.less
View file

@ -25,7 +25,16 @@
#pv-spinner {
position: absolute;
img {
.back {
width: 240px;
height: 240px;
margin: -120px -120px;
border-radius: 120px;
background: #f00;
opacity: 0.5;
overflow: hidden;
}
.spinner {
width: 100px;
height: 100px;
margin: -50px -50px;
@ -137,7 +146,7 @@
}
@media only screen and (max-width: 700px) {
#pv-prev-area, #pv-next-area, #pv-close-area {
#pv-prev-area, #pv-next-area {
display: none !important;
}
}

47
src/_h5ai/client/js/inc/ext/preview-img.js
View file

@ -7,6 +7,7 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/event', 'co
}, allsettings['preview-img']);
var templateLoading = '<img id="pv-img-image" class="loading"/>';
var spinnerThreshold = 200;
var spinnerTimeoutId;
var currentItems, currentIdx, currentItem;
@ -29,47 +30,17 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/event', 'co
});
}
function showSpinner(item) {
var timeoutId;
function start() {
$('#pv-content')
.empty()
.append($(templateLoading).attr('src', item.thumbSquare))
.show();
onAdjustSize();
preview.setLabels([item.label]);
preview.showSpinner(true);
}
function stop() {
clearTimeout(timeoutId);
preview.showSpinner(false);
}
timeoutId = setTimeout(start, spinnerThreshold);
return stop;
}
function preloadImg(item, callback) {
var hide = showSpinner(item);
requestSample(item.absHref, function (src) {
$('<img/>')
.one('load', function (ev) {
hide();
callback(item, ev.target);
// for testing
// setTimeout(function () { hide(); callback(item, ev.target); }, 1000);
// setTimeout(function () { callback(item, ev.target); }, 1000);
})
.attr('src', src);
});
@ -102,15 +73,29 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/event', 'co
currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
currentItem = currentItems[currentIdx];
preview.setLabels([currentItem.label]);
preview.setIndex(currentIdx + 1, currentItems.length);
preview.setRawLink(currentItem.absHref);
$('#pv-content').hide();
if (preview.isSpinnerVisible()) {
preview.showSpinner(true, currentItem.thumbSquare);
} else {
clearTimeout(spinnerTimeoutId);
spinnerTimeoutId = setTimeout(function () {
preview.showSpinner(true, currentItem.thumbSquare);
}, spinnerThreshold);
}
preloadImg(currentItem, function (item, preloaded_img) {
if (item !== currentItem) {
return;
}
clearTimeout(spinnerTimeoutId);
preview.showSpinner(false);
$('#pv-content')
.empty()
.append($(preloaded_img).attr('id', 'pv-img-image'))

35
src/_h5ai/client/js/inc/ext/preview.js
View file

@ -7,7 +7,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
var template =
'<div id="pv-overlay">' +
'<div id="pv-content"/>' +
'<div id="pv-spinner"><img src="' + resource.image('spinner') + '"/></div>' +
'<div id="pv-spinner"><img class="back"/><img class="spinner" src="' + resource.image('spinner') + '"/></div>' +
'<div id="pv-prev-area" class="hof"><img src="' + resource.image('preview-prev') + '"/></div>' +
'<div id="pv-next-area" class="hof"><img src="' + resource.image('preview-next') + '"/></div>' +
'<div id="pv-bottombar" class="clearfix hof">' +
@ -28,6 +28,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
var userAliveTimeoutId = null;
var onIndexChange = null;
var onAdjustSize = null;
var spinnerVisible = false;
function adjustSize() {
@ -182,17 +183,32 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
onAdjustSize = fn;
}
function showSpinner(show, millis) {
function showSpinner(show, src, millis) {
if (!_.isNumber(millis)) {
millis = 400;
millis = 300;
}
var $spinner = $('#pv-spinner').stop(true, true);
var $back = $spinner.find('.back');
if (show) {
$('#pv-spinner').stop(true, true).fadeIn(millis);
if (src) {
$back.attr('src', src).show();
} else {
$('#pv-spinner').stop(true, true).fadeOut(millis);
$back.hide();
}
spinnerVisible = true;
$spinner.fadeIn(millis);
} else {
spinnerVisible = false;
$spinner.fadeOut(millis);
}
}
function isSpinnerVisible() {
return spinnerVisible;
}
function init() {
@ -206,7 +222,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
$('#pv-spinner').hide();
$('#pv-bar-prev, #pv-prev-area').on('click', onPrevious);
$('#pv-bar-next, #pv-next-area').on('click', onNext);
$('#pv-bar-close, #pv-close-area').on('click', onExit);
$('#pv-bar-close').on('click', onExit);
$('#pv-bar-fullscreen').on('click', onFullscreen);
$('#pv-overlay')
@ -214,11 +230,9 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
.on('mousemove mousedown', userAlive)
.on('click mousedown mousemove keydown keypress', function (ev) {
if (ev.type === 'click') {
if (ev.target.id === 'pv-overlay' || ev.target.id === 'pv-content') {
if (ev.type === 'click' && (ev.target.id === 'pv-overlay' || ev.target.id === 'pv-content')) {
onExit();
}
}
ev.stopImmediatePropagation();
});
@ -236,6 +250,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
setLabels: setLabels,
setOnIndexChange: setOnIndexChange,
setOnAdjustSize: setOnAdjustSize,
showSpinner: showSpinner
showSpinner: showSpinner,
isSpinnerVisible: isSpinnerVisible
};
});