mirror_html/h5ai
1
0
Fork 0
mirror of https://github.com/lrsjng/h5ai.git synced 2025-03-24 06:20:07 +01:00
Code Issues Projects Releases Wiki Activity

Updates image preview.

Browse Source
This commit is contained in:
Lars Jung 2013-07-16 01:41:12 +02:00
parent d588bb3563
commit 896c92e6a0
3 changed files with 90 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/_h5ai/client/css/inc/preview-img.less
View File

@ -14,9 +14,8 @@
text-align: center;
}
#pv-img-content {
#pv-img-content, #pv-spinner {
position: fixed;
}
@check-white: #f8f8f8;

67
src/_h5ai/client/images/spinner.svg Normal file
View File

@ -0,0 +1,67 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="36"
height="36"
viewBox="-18 -18 36 36"
>
<defs>
<circle id="c" cx="10" cy="10" r="4" style="fill:#ffffff;stroke:#cccccc;stroke-width:0.2;" />
</defs>
<g id="a">
<use
xlink:href="#c"
style="opacity:1;"
/>
<use
xlink:href="#c"
transform="rotate(45)"
style="opacity:0.3;"
/>
<use
xlink:href="#c"
transform="rotate(90)"
style="opacity:0.4;"
/>
<use
xlink:href="#c"
transform="rotate(135)"
style="opacity:0.5;"
/>
<use
xlink:href="#c"
transform="rotate(180)"
style="opacity:0.6;"
/>
<use
xlink:href="#c"
transform="rotate(225)"
style="opacity:0.7;"
/>
<use
xlink:href="#c"
transform="rotate(270)"
style="opacity:0.8;"
/>
<use
xlink:href="#c"
transform="rotate(315)"
style="opacity:0.9;"
/>
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
begin="0s"
dur="0.7s"
repeatCount="indefinite"
calcMode="discrete"
values="0; 45; 90; 135; 180; 225; 270; 315"
keyTimes="0.0; 0.1; 0.2; 0.3; 0.4; 0.5; 0.6; 0.7"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

54
src/_h5ai/client/js/inc/ext/preview-img.js
View File

@ -10,6 +10,9 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
'<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"/>' +
@ -38,11 +41,13 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
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.css({
$container.add($spinner).css({
width: rect.width - 2 * margin,
height: rect.height - 2 * margin - barheight,
left: margin,
@ -55,6 +60,9 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
$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) {
@ -75,6 +83,7 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
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'));
@ -88,22 +97,13 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
preloadImg = function (src, callback) {
var $hidden = $('<div><img/></div>')
.css({
position: 'absolute',
overflow: 'hidden',
width: 0,
height: 0
})
.appendTo('body'),
$img = $hidden.find('img')
.one('load', function () {
var $img = $('<img/>')
.one('load', function () {
$hidden.remove();
callback($img);
// setTimeout(function () { callback($img); }, 1000); // for testing
})
.attr('src', src);
callback($img);
// setTimeout(function () { callback($img); }, 1000); // for testing
})
.attr('src', src);
},
onIndexChange = function (idx) {
@ -113,36 +113,24 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
var $container = $('#pv-img-content'),
$img = $('#pv-img-image'),
src = currentEntries[currentIdx].absHref,
spinnerTimeout = setTimeout(function () {
$container.spin({
length: 12,
width: 4,
radius: 24,
color: '#ccc',
shadow: true
});
}, 200);
spinnerTimeout = setTimeout(function () { $('#pv-spinner').show(); }, 200);
preloadImg(src, function ($preloaded_img) {
clearTimeout(spinnerTimeout);
$container.spin(false);
$('#pv-spinner').hide();
$('#pv-img-image').fadeOut(100, function () {
var width = $preloaded_img.width(),
height = $preloaded_img.height();
$('#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-percent').text('' + (100 * $preloaded_img.width() / width).toFixed(0) + '%');
$('#pv-img-bar-label').text(currentEntries[currentIdx].label);
$('#pv-img-bar-size').text('' + width + 'x' + height);
$('#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);
@ -153,9 +141,11 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
onEnter = function (items, idx) {
$(window).on('keydown', onKeydown);
$('#pv-img-image').hide();
$('#pv-img-overlay').stop(true, true).fadeIn(200);
currentEntries = items;
adjustSize();
onIndexChange(idx);
},