290 lines
8.3 KiB
JavaScript
290 lines
8.3 KiB
JavaScript
|
|
modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/location'], function (_, $, allsettings, resource, store, event, location) {
|
|
|
|
var settings = _.extend({
|
|
enabled: false,
|
|
types: ['bmp', 'gif', 'ico', 'image', 'jpg', 'png', 'tiff']
|
|
}, 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) {
|
|
|
|
var $img = $('<img/>')
|
|
.one('load', function () {
|
|
|
|
callback($img);
|
|
// setTimeout(function () { callback($img); }, 1000); // for testing
|
|
})
|
|
.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) {
|
|
|
|
$(window).on('keydown', onKeydown);
|
|
$('#pv-img-image').hide();
|
|
$('#pv-img-overlay').stop(true, true).fadeIn(200);
|
|
|
|
currentEntries = items;
|
|
adjustSize();
|
|
onIndexChange(idx);
|
|
},
|
|
|
|
onNext = function () {
|
|
|
|
onIndexChange(currentIdx + 1);
|
|
},
|
|
|
|
onPrevious = function () {
|
|
|
|
onIndexChange(currentIdx - 1);
|
|
},
|
|
|
|
onExit = function () {
|
|
|
|
$(window).off('keydown', onKeydown);
|
|
$('#pv-img-overlay').stop(true, true).fadeOut(200);
|
|
},
|
|
|
|
onFullscreen = function () {
|
|
|
|
isFullscreen = !isFullscreen;
|
|
store.put(storekey, isFullscreen);
|
|
|
|
adjustSize();
|
|
},
|
|
|
|
onKeydown = function (event) {
|
|
|
|
var key = event.which;
|
|
|
|
if (key === 27) { // esc
|
|
event.preventDefault();
|
|
event.stopImmediatePropagation();
|
|
onExit();
|
|
} else if (key === 8 || key === 37 || key === 40) { // backspace, left, down
|
|
event.preventDefault();
|
|
event.stopImmediatePropagation();
|
|
onPrevious();
|
|
} else if (key === 13 || key === 32 || key === 38 || key === 39) { // enter, space, up, right
|
|
event.preventDefault();
|
|
event.stopImmediatePropagation();
|
|
onNext();
|
|
} else if (key === 70) { // f
|
|
event.preventDefault();
|
|
event.stopImmediatePropagation();
|
|
onFullscreen();
|
|
}
|
|
},
|
|
|
|
initItem = function (item) {
|
|
|
|
if (item.$view && _.indexOf(settings.types, item.type) >= 0) {
|
|
item.$view.find('a').on('click', function (event) {
|
|
|
|
event.preventDefault();
|
|
|
|
var matchedEntries = _.compact(_.map($('#items .item'), function (item) {
|
|
|
|
item = $(item).data('item');
|
|
return _.indexOf(settings.types, item.type) >= 0 ? item : null;
|
|
}));
|
|
|
|
onEnter(matchedEntries, _.indexOf(matchedEntries, item));
|
|
});
|
|
}
|
|
},
|
|
|
|
onLocationChanged = function (item) {
|
|
|
|
_.each(item.content, initItem);
|
|
},
|
|
|
|
onLocationRefreshed = function (item, added, removed) {
|
|
|
|
_.each(added, initItem);
|
|
},
|
|
|
|
init = function () {
|
|
|
|
if (!settings.enabled) {
|
|
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.refreshed', onLocationRefreshed);
|
|
|
|
$(window).on('resize load', adjustSize);
|
|
};
|
|
|
|
init();
|
|
});
|