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

Cleans preview-img code.

Browse source
This commit is contained in:
Lars Jung 2012-08-04 15:41:42 +02:00
parent 2bcf6593a9
commit 974392d2eb
2 changed files with 38 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -36,6 +36,7 @@ It profits from these great projects:
* fixes duplicate tree entries and empty main views * fixes duplicate tree entries and empty main views
* adds Google Analytics support (async) * adds Google Analytics support (async)
* improves filter (now ignorecase, now only checks if chars in right order) * improves filter (now ignorecase, now only checks if chars in right order)
* adds keyboard support to image preview (space, enter, backspace, left, right, up, down, f, esc)
* changes language code `gr` to `el` * changes language code `gr` to `el`
* adds localization for filter placeholder * adds localization for filter placeholder
* adds `hu` translation by [Rodolffo](http://github.com/Rodolffo) * adds `hu` translation by [Rodolffo](http://github.com/Rodolffo)

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

@ -65,16 +65,16 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
rect = rect.relativeTo($('#preview-overlay').fracs('rect')); rect = rect.relativeTo($('#preview-overlay').fracs('rect'));
$('#preview-prev').css({ $('#preview-prev').css({
'left': rect.left, left: rect.left,
'top': rect.top, top: rect.top,
'width': rect.width / 2, width: rect.width / 2,
'height': rect.height height: rect.height
}); });
$('#preview-next').css({ $('#preview-next').css({
'left': rect.left + rect.width / 2, left: rect.left + rect.width / 2,
'top': rect.top, top: rect.top,
'width': rect.width / 2, width: rect.width / 2,
'height': rect.height height: rect.height
}); });
}, },
@ -97,6 +97,7 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
$hidden.remove(); $hidden.remove();
callback(width, height); callback(width, height);
// setTimeout(function () { callback(width, height); }, 1000); // for testing
}) })
.attr('src', src); .attr('src', src);
}, },
@ -119,9 +120,6 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
}); });
}, 200); }, 200);
$('#preview-overlay').stop(true, true).fadeIn(200);
$('#preview-bar-idx').text('' + (currentIdx + 1) + ' / ' + currentEntries.length);
preloadImg(src, function (width, height) { preloadImg(src, function (width, height) {
clearTimeout(spinnerTimeout); clearTimeout(spinnerTimeout);
@ -135,20 +133,21 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
setTimeout(function () { setTimeout(function () {
adjustSize(); adjustSize();
$('#preview-bar-percent').text('' + (100 * $img.width() / width).toFixed(0) + '%'); $('#preview-bar-percent').text('' + (100 * $img.width() / width).toFixed(0) + '%');
$('#preview-bar-label').text(currentEntries[currentIdx].label);
$('#preview-bar-size').text('' + width + 'x' + height);
$('#preview-bar-idx').text('' + (currentIdx + 1) + ' / ' + currentEntries.length);
$('#preview-bar-original').find('a').attr('href', currentEntries[currentIdx].absHref);
}, 1); }, 1);
}); });
$('#preview-bar-label').text(currentEntries[currentIdx].label);
$('#preview-bar-percent').text('···%');
$('#preview-bar-size').text('' + width + 'x' + height);
$('#preview-bar-idx').text('' + (currentIdx + 1) + ' / ' + currentEntries.length);
$('#preview-bar-original').find('a').attr('href', currentEntries[currentIdx].absHref);
}); });
}, },
onEnter = function (entries, idx) { onEnter = function (entries, idx) {
$(window).on('keydown', onKeydown); $(window).on('keydown', onKeydown);
$('#preview-overlay').stop(true, true).fadeIn(200);
currentEntries = entries; currentEntries = entries;
onIndexChange(idx); onIndexChange(idx);
}, },
@ -188,35 +187,25 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
onKeydown = function (event) { onKeydown = function (event) {
var key = event.which; var key = event.which;
if (key === 27) { // esc if (key === 27) { // esc
onExit(); onExit();
} else if (key === 37 || key === 40) { // left, down } else if (key === 8 || key === 37 || key === 40) { // backspace, left, down
onPrevious(); onPrevious();
} else if (key === 38 || key === 39) { // up, right } else if (key === 13 || key === 32 || key === 38 || key === 39) { // enter, space, up, right
onNext(); onNext();
} else if (key === 70) { // f } else if (key === 70) { // f
onFullscreen(); onFullscreen();
} }
}, },
initEntry = function (entry) { initEntry = function (entries, entry, idx) {
if (entry.$extended && $.inArray(entry.type, settings.types) >= 0) { if (entry.$extended) {
entry.$extended.find('a').on('click', function (event) {
var $a = entry.$extended.find('a');
$a.on('click', function (event) {
event.preventDefault(); event.preventDefault();
onEnter(entries, idx);
var entries = _.filter(_.map($('#extended .entry'), function (entry) {
return $(entry).data('entry');
}), function (entry) {
return _.indexOf(settings.types, entry.type) >= 0;
});
onEnter(entries, _.indexOf(entries, entry));
}); });
} }
}, },
@ -227,10 +216,16 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
return; return;
} }
var imageEntries = _.filter(entry.content, function (entry) {
return _.indexOf(settings.types, entry.type) >= 0;
});
_.each(imageEntries, function (e, idx) {
initEntry(imageEntries, e, idx);
});
$(template).appendTo('body'); $(template).appendTo('body');
_.each(entry.content, initEntry);
$('#preview-bar-prev, #preview-prev').on('click', onPrevious); $('#preview-bar-prev, #preview-prev').on('click', onPrevious);
$('#preview-bar-next, #preview-next').on('click', onNext); $('#preview-bar-next, #preview-next').on('click', onNext);
$('#preview-bar-close, #preview-close').on('click', onExit); $('#preview-bar-close, #preview-close').on('click', onExit);
@ -238,26 +233,26 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
$('#preview-overlay').on('keydown', onKeydown); $('#preview-overlay').on('keydown', onKeydown);
$('#preview-prev') $('#preview-prev')
.on('mouseenter', function (event) { .on('mouseenter', function () {
$('#preview-bar-prev').addClass('hover'); $('#preview-bar-prev').addClass('hover');
}) })
.on('mouseleave', function (event) { .on('mouseleave', function () {
$('#preview-bar-prev').removeClass('hover'); $('#preview-bar-prev').removeClass('hover');
}); });
$('#preview-next') $('#preview-next')
.on('mouseenter', function (event) { .on('mouseenter', function () {
$('#preview-bar-next').addClass('hover'); $('#preview-bar-next').addClass('hover');
}) })
.on('mouseleave', function (event) { .on('mouseleave', function () {
$('#preview-bar-next').removeClass('hover'); $('#preview-bar-next').removeClass('hover');
}); });
$('#preview-close') $('#preview-close')
.on('mouseenter', function (event) { .on('mouseenter', function () {
$('#preview-bar-close').addClass('hover'); $('#preview-bar-close').addClass('hover');
}) })
.on('mouseleave', function (event) { .on('mouseleave', function () {
$('#preview-bar-close').removeClass('hover'); $('#preview-bar-close').removeClass('hover');
}); });