mirrors/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2025-05-25 04:24:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updates image preview.

Browse source
This commit is contained in:
Lars Jung 2013-08-21 14:04:20 +02:00
parent 8dbd7dd2a7
commit 25c131f875
4 changed files with 180 additions and 408 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/_h5ai/client/css/inc/preview-img.less
View file

@ -1,29 +1,11 @@
#pv-img-overlay {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
background-color: rgba(0,0,0,0.5);
.transition(background-color 0.3s ease-in-out);
text-align: center;
}
#pv-img-content, #pv-spinner {
position: fixed;
}
@check-white: #f8f8f8; @check-white: #f8f8f8;
@check-black: #e8e8e8; @check-black: #e8e8e8;
#pv-img-image { #pv-img-image {
position: absolute;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
border: 1px solid #fff;
background-color: @check-white; background-color: @check-white;
background-image: background-image:
@ -32,98 +14,3 @@
background-size: 60px 60px; background-size: 60px 60px;
background-position: 0 0, 30px 30px background-position: 0 0, 30px 30px
} }
#pv-img-overlay.fullscreen {
background-color: #111;
#pv-img-image {
border: 0;
}
}
#pv-img-close {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
#pv-img-prev {
position: fixed;
cursor: pointer;
}
#pv-img-next {
position: fixed;
cursor: pointer;
}
#pv-img-buttons, #pv-img-topbuttons {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
img {
position: relative;
top: -2px;
width: 16px;
height: 16px;
}
img + span, img + input {
margin-left: 6px;
}
input {
background-color: rgba(255,255,255,0.1);
border: none;
color: #ccc;
}
.bar-label {
display: block;
color: #ccc;
height: 30px;
line-height: 30px;
padding: 0 10px;
opacity: 0.7;
.transition(all 0.2s ease-in-out);
}
.bar-highlight {
background-color: rgba(255,255,255,0.1);
opacity: 1.0;
}
@bar-sep-border: 1px solid rgba(255,255,255,0.08);
.bar-button {
.bar-label;
cursor: pointer;
&:hover, &.hover {
.bar-highlight;
}
}
.bar-left {
float: left;
border-right: @bar-sep-border;
}
.bar-right {
float: right;
border-left: @bar-sep-border;
}
}
#pv-img-bottombar {
position: fixed;
z-index: 5;
width: 100%;
height: 32px;
left: 0;
bottom: 0;
background-color: rgb(27,27,27);
border-top: 1px solid rgb(45,45,45);
}

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

@ -18,12 +18,23 @@
background-color: #111; background-color: #111;
} }
#pv-spinner { #pv-content {
position: fixed; position: absolute;
overflow: hidden;
} }
#pv-close { #pv-spinner {
position: fixed; position: absolute;
img {
width: 100px;
height: 100px;
margin: -50px -50px;
}
}
#pv-close-area {
position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
@ -31,14 +42,32 @@
cursor: pointer; cursor: pointer;
} }
#pv-prev { #pv-prev-area, #pv-next-area {
position: fixed; position: absolute;
top: 50%;
cursor: pointer; cursor: pointer;
opacity: 0.5;
.transition(all 0.2s ease-in-out);
img {
background-color: rgba(0,0,0,0.5);
border-radius: 8px;
width: 48px;
height: 48px;
margin: -24px 0;
}
&:hover {
opacity: 1;
}
} }
#pv-next { #pv-prev-area {
position: fixed; left: 8px;
cursor: pointer; }
#pv-next-area {
right: 8px;
} }
#pv-buttons { #pv-buttons {

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

@ -1,100 +1,11 @@
modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/location'], function (_, $, allsettings, resource, store, event, location) { modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/store', 'core/event', 'ext/preview'], function (_, $, allsettings, store, event, preview) {
var settings = _.extend({ var settings = _.extend({
enabled: false, enabled: false,
types: ['bmp', 'gif', 'ico', 'image', 'jpg', 'png', 'tiff'] types: ['bmp', 'gif', 'ico', 'image', 'jpg', 'png', 'tiff']
}, allsettings['preview-img']), }, allsettings['preview-img']),
template = '<div id="pv-img-overlay" class="noSelection">' +
'<div id="pv-img-content">' +
'<img id="pv-img-image"/>' +
'</div>' +
'<div id="pv-spinner">' +
'<img src="' + resource.image('spinner') + '"/>' +
'</div>' +
'<div id="pv-img-close"/>' +
'<div id="pv-img-prev"/>' +
'<div id="pv-img-next"/>' +
'<div id="pv-img-bottombar" class="clearfix">' +
'<ul id="pv-img-buttons">' +
'<li id="pv-img-bar-size" class="bar-left bar-label"/>' +
'<li id="pv-img-bar-percent" class="bar-left bar-label"/>' +
'<li id="pv-img-bar-label" class="bar-left bar-label"/>' +
'<li id="pv-img-bar-close" class="bar-right bar-button"><img src="' + resource.image('preview/close') + '"/></li>' +
'<li id="pv-img-bar-original" class="bar-right"><a class="bar-button" target="_blank"><img src="' + resource.image('preview/raw') + '"/></a></li>' +
'<li id="pv-img-bar-fullscreen" class="bar-right bar-button"><img src="' + resource.image('preview/fullscreen') + '"/></li>' +
'<li id="pv-img-bar-next" class="bar-right bar-button"><img src="' + resource.image('preview/next') + '"/></li>' +
'<li id="pv-img-bar-idx" class="bar-right bar-label"/>' +
'<li id="pv-img-bar-prev" class="bar-right bar-button"><img src="' + resource.image('preview/prev') + '"/></li>' +
'</ul>' +
'</div>' +
'</div>',
storekey = 'preview-img.isFullscreen',
currentEntries = [],
currentIdx = 0,
isFullscreen = store.get(storekey) || false,
adjustSize = function () {
var rect = $(window).fracs('viewport'),
$container = $('#pv-img-content'),
$spinner = $('#pv-spinner'),
$spinnerimg = $spinner.find('img').width(100).height(100),
$img = $('#pv-img-image'),
margin = isFullscreen ? 0 : 20,
barheight = isFullscreen ? 0 : 31;
$container.add($spinner).css({
width: rect.width - 2 * margin,
height: rect.height - 2 * margin - barheight,
left: margin,
top: margin
});
var lr = ($container.width() - $img.width()) / 2,
tb = ($container.height() - $img.height()) / 2;
$img.css({
margin: '' + tb + 'px ' + lr + 'px'
});
$spinnerimg.css({
margin: '' + (($spinner.height() - $spinnerimg.height()) / 2) + 'px ' + (($spinner.width() - $spinnerimg.height()) / 2) + 'px'
});
rect = $img.fracs('rect');
if (!rect) {
return;
}
rect = rect.relativeTo($('#pv-img-overlay').fracs('rect'));
$('#pv-img-prev').css({
left: rect.left,
top: rect.top,
width: rect.width / 2,
height: rect.height
});
$('#pv-img-next').css({
left: rect.left + rect.width / 2,
top: rect.top,
width: rect.width / 2,
height: rect.height
});
$('#pv-img-bar-percent').text('' + (100 * $img.width() / $img[0].naturalWidth).toFixed(0) + '%');
if (isFullscreen) {
$('#pv-img-overlay').addClass('fullscreen');
$('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen'));
$('#pv-img-bottombar').fadeOut(400);
} else {
$('#pv-img-overlay').removeClass('fullscreen');
$('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen'));
$('#pv-img-bottombar').fadeIn(200);
}
},
preloadImg = function (src, callback) { preloadImg = function (src, callback) {
var $img = $('<img/>') var $img = $('<img/>')
@ -106,94 +17,69 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
.attr('src', src); .attr('src', src);
}, },
onIndexChange = function (idx) {
currentIdx = (idx + currentEntries.length) % currentEntries.length;
var $container = $('#pv-img-content'),
$img = $('#pv-img-image'),
src = currentEntries[currentIdx].absHref,
spinnerTimeout = setTimeout(function () { $('#pv-spinner').show(); }, 200);
preloadImg(src, function ($preloaded_img) {
clearTimeout(spinnerTimeout);
$('#pv-spinner').hide();
$('#pv-img-image').fadeOut(100, function () {
$('#pv-img-image').replaceWith($preloaded_img.hide());
$preloaded_img.attr('id', 'pv-img-image').fadeIn(200);
// small timeout, so $preloaded_img is visible and therefore $preloaded_img.width is available
setTimeout(function () {
adjustSize();
$('#pv-img-bar-label').text(currentEntries[currentIdx].label);
$('#pv-img-bar-size').text('' + $preloaded_img[0].naturalWidth + 'x' + $preloaded_img[0].naturalHeight);
$('#pv-img-bar-idx').text('' + (currentIdx + 1) + ' / ' + currentEntries.length);
$('#pv-img-bar-original').find('a').attr('href', currentEntries[currentIdx].absHref);
}, 10);
});
});
},
onEnter = function (items, idx) { onEnter = function (items, idx) {
$(window).on('keydown', onKeydown); var currentItems = items,
$('#pv-img-image').hide(); currentIdx = idx,
$('#pv-img-overlay').stop(true, true).fadeIn(200); currentItem = items[idx],
currentEntries = items; onAdjustSize = function () {
adjustSize();
onIndexChange(idx);
},
onNext = function () { var $content = $('#pv-content'),
$img = $('#pv-img-image');
onIndexChange(currentIdx + 1); if ($img.length) {
},
onPrevious = function () { $img.css({
'left': '' + (($content.width()-$img.width())*0.5) + 'px',
'top': '' + (($content.height()-$img.height())*0.5) + 'px'
});
onIndexChange(currentIdx - 1); preview.setLabels([
}, currentItem.label,
'' + $img[0].naturalWidth + 'x' + $img[0].naturalHeight,
'' + (100 * $img.width() / $img[0].naturalWidth).toFixed(0) + '%'
]);
}
},
onExit = function () { onIdxChange = function (rel) {
$(window).off('keydown', onKeydown); currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
$('#pv-img-overlay').stop(true, true).fadeOut(200); currentItem = currentItems[currentIdx];
},
onFullscreen = function () { var spinnerTimeout = setTimeout(function () { preview.showSpinner(true); }, 200);
isFullscreen = !isFullscreen; preloadImg(currentItem.absHref, function ($preloaded_img) {
store.put(storekey, isFullscreen);
adjustSize(); clearTimeout(spinnerTimeout);
}, preview.showSpinner(false);
onKeydown = function (event) { $('#pv-content').fadeOut(100, function () {
var key = event.which; $('#pv-content').empty().append($preloaded_img.attr('id', 'pv-img-image')).fadeIn(200);
if (key === 27) { // esc // small timeout, so $preloaded_img is visible and therefore $preloaded_img.width is available
event.preventDefault(); setTimeout(function () {
event.stopImmediatePropagation();
onExit(); onAdjustSize();
} else if (key === 8 || key === 37 || key === 40) { // backspace, left, down
event.preventDefault(); preview.setIndex(currentIdx + 1, currentItems.length);
event.stopImmediatePropagation(); preview.setLabels([
onPrevious(); currentItem.label,
} else if (key === 13 || key === 32 || key === 38 || key === 39) { // enter, space, up, right '' + $preloaded_img[0].naturalWidth + 'x' + $preloaded_img[0].naturalHeight,
event.preventDefault(); '' + (100 * $preloaded_img.width() / $preloaded_img[0].naturalWidth).toFixed(0) + '%'
event.stopImmediatePropagation(); ]);
onNext(); preview.setRawLink(currentItem.absHref);
} else if (key === 70) { // f }, 10);
event.preventDefault(); });
event.stopImmediatePropagation(); });
onFullscreen(); };
}
onIdxChange(0);
preview.setOnIndexChange(onIdxChange);
preview.setOnAdjustSize(onAdjustSize);
preview.enter();
}, },
initItem = function (item) { initItem = function (item) {
@ -230,59 +116,8 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
return; return;
} }
$(template).appendTo('body');
$('#pv-img-bar-prev, #pv-img-prev').on('click', onPrevious);
$('#pv-img-bar-next, #pv-img-next').on('click', onNext);
$('#pv-img-bar-close, #pv-img-close').on('click', onExit);
$('#pv-img-bar-fullscreen').on('click', onFullscreen);
$('#pv-img-prev')
.on('mouseenter', function () {
$('#pv-img-bar-prev').addClass('hover');
})
.on('mouseleave', function () {
$('#pv-img-bar-prev').removeClass('hover');
});
$('#pv-img-next')
.on('mouseenter', function () {
$('#pv-img-bar-next').addClass('hover');
})
.on('mouseleave', function () {
$('#pv-img-bar-next').removeClass('hover');
});
$('#pv-img-close')
.on('mouseenter', function () {
$('#pv-img-bar-close').addClass('hover');
})
.on('mouseleave', function () {
$('#pv-img-bar-close').removeClass('hover');
});
$('#pv-img-overlay')
.on('keydown', onKeydown)
.on('mousemove', function (event) {
if (isFullscreen) {
var rect = $('#pv-img-overlay').fracs('rect');
if (rect.bottom - event.pageY < 64) {
$('#pv-img-bottombar').fadeIn(200);
} else {
$('#pv-img-bottombar').fadeOut(400);
}
}
})
.on('click mousedown mousemove keydown keypress', function (event) {
event.stopImmediatePropagation();
});
event.sub('location.changed', onLocationChanged); event.sub('location.changed', onLocationChanged);
event.sub('location.refreshed', onLocationRefreshed); event.sub('location.refreshed', onLocationRefreshed);
$(window).on('resize load', adjustSize);
}; };
init(); init();

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

@ -6,19 +6,15 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
}, allsettings['preview']), }, allsettings['preview']),
template = '<div id="pv-overlay" class="noSelection">' + template = '<div id="pv-overlay" class="noSelection">' +
'<div id="pv-content">' + '<div id="pv-close-area"/>' +
'<img id="pv-image"/>' + '<div id="pv-content"/>' +
'</div>' + '<div id="pv-spinner"><img src="' + resource.image('spinner') + '"/></div>' +
'<div id="pv-spinner">' + '<div id="pv-prev-area"><img src="' + resource.image('preview/prev') + '"/></div>' +
'<img src="' + resource.image('spinner') + '"/>' + '<div id="pv-next-area"><img src="' + resource.image('preview/next') + '"/></div>' +
'</div>' +
'<div id="pv-close"/>' +
'<div id="pv-prev"/>' +
'<div id="pv-next"/>' +
'<div id="pv-bottombar" class="clearfix">' + '<div id="pv-bottombar" class="clearfix">' +
'<ul id="pv-buttons">' + '<ul id="pv-buttons">' +
'<li id="pv-bar-close" class="bar-right bar-button"><img src="' + resource.image('preview/close') + '"/></li>' + '<li id="pv-bar-close" class="bar-right bar-button"><img src="' + resource.image('preview/close') + '"/></li>' +
'<li id="pv-bar-original" class="bar-right"><a class="bar-button" target="_blank"><img src="' + resource.image('preview/raw') + '"/></a></li>' + '<li id="pv-bar-raw" class="bar-right"><a class="bar-button" target="_blank"><img src="' + resource.image('preview/raw') + '"/></a></li>' +
'<li id="pv-bar-fullscreen" class="bar-right bar-button"><img src="' + resource.image('preview/fullscreen') + '"/></li>' + '<li id="pv-bar-fullscreen" class="bar-right bar-button"><img src="' + resource.image('preview/fullscreen') + '"/></li>' +
'<li id="pv-bar-next" class="bar-right bar-button"><img src="' + resource.image('preview/next') + '"/></li>' + '<li id="pv-bar-next" class="bar-right bar-button"><img src="' + resource.image('preview/next') + '"/></li>' +
'<li id="pv-bar-idx" class="bar-right bar-label"/>' + '<li id="pv-bar-idx" class="bar-right bar-label"/>' +
@ -38,69 +34,49 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
var rect = $(window).fracs('viewport'), var rect = $(window).fracs('viewport'),
$container = $('#pv-content'), $container = $('#pv-content'),
$spinner = $('#pv-spinner'), $spinner = $('#pv-spinner'),
$spinnerimg = $spinner.find('img').width(100).height(100),
$img = $('#pv-image'),
margin = isFullscreen ? 0 : 20, margin = isFullscreen ? 0 : 20,
barheight = isFullscreen ? 0 : 31; barheight = isFullscreen ? 0 : 31;
$container.add($spinner).css({ $container.css({
width: rect.width - 2 * margin, width: rect.width - 2 * margin,
height: rect.height - 2 * margin - barheight, height: rect.height - 2 * margin - barheight,
left: margin, left: margin,
top: margin top: margin
}); });
var lr = ($container.width() - $img.width()) / 2, $spinner.css({
tb = ($container.height() - $img.height()) / 2; left: rect.width * 0.5,
top: rect.height * 0.5
$img.css({
margin: '' + tb + 'px ' + lr + 'px'
});
$spinnerimg.css({
margin: '' + (($spinner.height() - $spinnerimg.height()) / 2) + 'px ' + (($spinner.width() - $spinnerimg.height()) / 2) + 'px'
}); });
rect = $img.fracs('rect');
if (!rect) {
return;
}
rect = rect.relativeTo($('#pv-overlay').fracs('rect'));
$('#pv-prev').css({
left: rect.left,
top: rect.top,
width: rect.width / 2,
height: rect.height
});
$('#pv-next').css({
left: rect.left + rect.width / 2,
top: rect.top,
width: rect.width / 2,
height: rect.height
});
$('#pv-bar-percent').text('' + (100 * $img.width() / $img[0].naturalWidth).toFixed(0) + '%');
if (isFullscreen) { if (isFullscreen) {
$('#pv-overlay').addClass('fullscreen'); $('#pv-overlay').addClass('fullscreen');
$('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen')); $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen'));
$('#pv-bottombar').fadeOut(400);
} else { } else {
$('#pv-overlay').removeClass('fullscreen'); $('#pv-overlay').removeClass('fullscreen');
$('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen')); $('#pv-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen'));
$('#pv-bottombar').fadeIn(200); }
if (_.isFunction(onAdjustSize)) {
onAdjustSize(1);
} }
}, },
onEnter = function (items, idx) { onEnter = function () {
$(window).on('keydown', onKeydown); $(window).on('keydown', onKeydown);
$('#pv-image').hide(); $('#pv-content').empty();
$('#pv-overlay').stop(true, true).fadeIn(200); $('#pv-overlay').stop(true, true).fadeIn(200);
currentEntries = items;
adjustSize(); adjustSize();
}, },
onExit = function () {
$(window).off('keydown', onKeydown);
$('#pv-overlay').stop(true, true).fadeOut(200);
},
onNext = function () { onNext = function () {
if (_.isFunction(onIndexChange)) { if (_.isFunction(onIndexChange)) {
@ -115,10 +91,19 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
} }
}, },
onExit = function () { fsTimer = null,
onMouseMove = function () {
$(window).off('keydown', onKeydown); clearTimeout(fsTimer);
$('#pv-overlay').stop(true, true).fadeOut(200); $('#pv-bottombar, #pv-prev-area, #pv-next-area').fadeIn(200);
if (isFullscreen) {
fsTimer = setTimeout(function () {
$('#pv-bottombar, #pv-prev-area, #pv-next-area').fadeOut(400);
}, 2000);
}
}, },
onFullscreen = function () { onFullscreen = function () {
@ -126,6 +111,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
isFullscreen = !isFullscreen; isFullscreen = !isFullscreen;
store.put(storekey, isFullscreen); store.put(storekey, isFullscreen);
onMouseMove();
adjustSize(); adjustSize();
}, },
@ -152,12 +138,31 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
} }
}, },
enter = function () {
onEnter();
},
exit = function () {
onExit();
},
setIndex = function (idx, total) { setIndex = function (idx, total) {
if (_.isNumber(idx)) { if (_.isNumber(idx)) {
$('#pv-bar-idx').show().text('' + idx + (_.isNumber(total) ? '/' + total : '')); $('#pv-bar-idx').text('' + idx + (_.isNumber(total) ? '/' + total : '')).show();
} else { } else {
$('#pv-bar-idx').hide(); $('#pv-bar-idx').text('').hide();
}
},
setRawLink = function (href) {
if (href) {
$('#pv-bar-raw').find('a').attr('href', href).end().show();
} else {
$('#pv-bar-raw').find('a').attr('href', '#').end().hide();
} }
}, },
@ -179,6 +184,25 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
onIndexChange = fn; onIndexChange = fn;
}, },
onAdjustSize = null,
setOnAdjustSize = function (fn) {
onAdjustSize = fn;
},
showSpinner = function (show, millis) {
if (!_.isNumber(millis)) {
millis = 400;
}
if (show) {
$('#pv-spinner').stop(true, true).fadeIn(millis);
} else {
$('#pv-spinner').stop(true, true).fadeOut(millis);
}
},
init = function () { init = function () {
if (!settings.enabled) { if (!settings.enabled) {
@ -186,12 +210,14 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
} }
$(template).appendTo('body'); $(template).appendTo('body');
$('#pv-bar-prev, #pv-prev').on('click', onPrevious);
$('#pv-bar-next, #pv-next').on('click', onNext); $('#pv-spinner').hide();
$('#pv-bar-close, #pv-close').on('click', onExit); $('#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-fullscreen').on('click', onFullscreen); $('#pv-bar-fullscreen').on('click', onFullscreen);
$('#pv-prev') $('#pv-prev-area')
.on('mouseenter', function () { .on('mouseenter', function () {
$('#pv-bar-prev').addClass('hover'); $('#pv-bar-prev').addClass('hover');
}) })
@ -199,7 +225,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
$('#pv-bar-prev').removeClass('hover'); $('#pv-bar-prev').removeClass('hover');
}); });
$('#pv-next') $('#pv-next-area')
.on('mouseenter', function () { .on('mouseenter', function () {
$('#pv-bar-next').addClass('hover'); $('#pv-bar-next').addClass('hover');
}) })
@ -207,7 +233,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
$('#pv-bar-next').removeClass('hover'); $('#pv-bar-next').removeClass('hover');
}); });
$('#pv-close') $('#pv-close-area')
.on('mouseenter', function () { .on('mouseenter', function () {
$('#pv-bar-close').addClass('hover'); $('#pv-bar-close').addClass('hover');
}) })
@ -215,20 +241,10 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
$('#pv-bar-close').removeClass('hover'); $('#pv-bar-close').removeClass('hover');
}); });
var fsTimer = null;
$('#pv-overlay') $('#pv-overlay')
.on('keydown', onKeydown) .on('keydown', onKeydown)
.on('mousemove', function (event) { .on('mousemove', onMouseMove)
if (isFullscreen) {
var rect = $('#pv-overlay').fracs('rect');
if (rect.bottom - event.pageY < 64) {
$('#pv-bottombar').fadeIn(200);
} else {
$('#pv-bottombar').fadeOut(400);
}
}
})
.on('click mousedown mousemove keydown keypress', function (event) { .on('click mousedown mousemove keydown keypress', function (event) {
event.stopImmediatePropagation(); event.stopImmediatePropagation();
@ -240,8 +256,13 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
init(); init();
return { return {
enter: enter,
exit: exit,
setIndex: setIndex, setIndex: setIndex,
setRawLink: setRawLink,
setLabels: setLabels, setLabels: setLabels,
setOnIndexChange: setOnIndexChange setOnIndexChange: setOnIndexChange,
setOnAdjustSize: setOnAdjustSize,
showSpinner: showSpinner
}; };
}); });