Fijxu/h5ai
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updates preview.

Browse source
This commit is contained in:
Lars Jung 2013-08-23 00:12:34 +02:00
parent 72c7b32a94
commit 797d5bbc47
2 changed files with 44 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -34,11 +34,21 @@
#pv-close-area {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
right: 8px;
top: 8px;
cursor: pointer;
opacity: 0.5;
img {
background-color: rgba(0,0,0,0.5);
border-radius: 8px;
width: 48px;
height: 48px;
}
&:hover {
opacity: 1;
}
}
#pv-prev-area, #pv-next-area {
@ -46,14 +56,14 @@
top: 50%;
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;
margin: -72px 0;
padding: 48px 0;
}
&:hover {
@ -135,4 +145,18 @@
bottom: 0;
background-color: rgb(27,27,27);
border-top: 1px solid rgb(45,45,45);
}
#pv-overlay.fullscreen {
#pv-bottombar {
opacity: 0.5;
}
}
@media only screen and (max-width: 700px) {
#pv-prev-area, #pv-next-area, #pv-close-area {
display: none !important;
}
}

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

@ -6,12 +6,12 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
}, allsettings['preview']),
template = '<div id="pv-overlay" class="noSelection">' +
'<div id="pv-close-area"/>' +
'<div id="pv-content"/>' +
'<div id="pv-spinner"><img src="' + resource.image('spinner') + '"/></div>' +
'<div id="pv-prev-area"><img src="' + resource.image('preview/prev') + '"/></div>' +
'<div id="pv-next-area"><img src="' + resource.image('preview/next') + '"/></div>' +
'<div id="pv-bottombar" class="clearfix">' +
'<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-close-area" class="hof"><img src="' + resource.image('preview/close') + '"/></div>' +
'<div id="pv-bottombar" class="clearfix hof">' +
'<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-raw" class="bar-right"><a class="bar-button" target="_blank"><img src="' + resource.image('preview/raw') + '"/></a></li>' +
@ -91,17 +91,17 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
}
},
fsTimer = null,
onMouseMove = function () {
userAliveTimeoutId = null,
userAlive = function () {
clearTimeout(fsTimer);
$('#pv-bottombar, #pv-prev-area, #pv-next-area').fadeIn(200);
clearTimeout(userAliveTimeoutId);
$('#pv-overlay .hof').stop(true, true).fadeIn(200);
if (isFullscreen) {
fsTimer = setTimeout(function () {
userAliveTimeoutId = setTimeout(function () {
$('#pv-bottombar, #pv-prev-area, #pv-next-area').fadeOut(400);
$('#pv-overlay .hof').stop(true, true).fadeOut(2000);
}, 2000);
}
},
@ -111,7 +111,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
isFullscreen = !isFullscreen;
store.put(storekey, isFullscreen);
onMouseMove();
userAlive();
adjustSize();
},
@ -123,11 +123,11 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
event.preventDefault();
event.stopImmediatePropagation();
onExit();
} else if (key === 8 || key === 37 || key === 40) { // backspace, left, down
} else if (key === 8 || key === 37) { // backspace, left
event.preventDefault();
event.stopImmediatePropagation();
onPrevious();
} else if (key === 13 || key === 32 || key === 38 || key === 39) { // enter, space, up, right
} else if (key === 13 || key === 32 || key === 39) { // enter, space, right
event.preventDefault();
event.stopImmediatePropagation();
onNext();
@ -217,34 +217,9 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
$('#pv-bar-close, #pv-close-area').on('click', onExit);
$('#pv-bar-fullscreen').on('click', onFullscreen);
$('#pv-prev-area')
.on('mouseenter', function () {
$('#pv-bar-prev').addClass('hover');
})
.on('mouseleave', function () {
$('#pv-bar-prev').removeClass('hover');
});
$('#pv-next-area')
.on('mouseenter', function () {
$('#pv-bar-next').addClass('hover');
})
.on('mouseleave', function () {
$('#pv-bar-next').removeClass('hover');
});
$('#pv-close-area')
.on('mouseenter', function () {
$('#pv-bar-close').addClass('hover');
})
.on('mouseleave', function () {
$('#pv-bar-close').removeClass('hover');
});
var fsTimer = null;
$('#pv-overlay')
.on('keydown', onKeydown)
.on('mousemove click mousedown', onMouseMove)
.on('mousemove mousedown', userAlive)
.on('click mousedown mousemove keydown keypress', function (event) {
event.stopImmediatePropagation();