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

Thumbnails and image preview.

Browse source
This commit is contained in:
Lars Jung 2012-05-11 18:54:52 +02:00
parent ce3ef3a195
commit 4cb9967b39
65 changed files with 1510 additions and 806 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_h5ai/js/inc/ext/crumb.js
View file

@ -2,7 +2,7 @@
module.define('ext/crumb', [jQuery, 'core/settings', 'core/resource', 'core/entry'], function ($, allsettings, resource, entry) {
var defaults = {
enabled: true
enabled: false
},
settings = _.extend({}, defaults, allsettings.crumb),

2
src/_h5ai/js/inc/ext/download.js
View file

@ -9,7 +9,7 @@ module.define('ext/download', [jQuery, 'core/settings', 'core/resource', 'core/e
settings = _.extend({}, defaults, allsettings.download),
formats = ['tar', 'zip'],
// formats = ['tar', 'zip'],
downloadBtnTemplate = '<li id="download">' +
'<a href="#">' +

2
src/_h5ai/js/inc/ext/folderstatus.js
View file

@ -2,7 +2,7 @@
module.define('ext/folderstatus', [jQuery, 'core/settings'], function ($, allsettings) {
var defaults = {
enabled: true,
enabled: false,
folders: {}
},

13
src/_h5ai/js/inc/ext/l10n.js
View file

@ -1,5 +1,5 @@
module.define('ext/l10n', [jQuery, 'core/settings', 'core/langs', 'core/format', 'core/store'], function ($, allsettings, langs, format, store) {
module.define('ext/l10n', [jQuery, 'core/settings', 'core/langs', 'core/format', 'core/store', 'core/event'], function ($, allsettings, langs, format, store, event) {
var defaults = {
enabled: true,
@ -21,13 +21,12 @@ module.define('ext/l10n', [jQuery, 'core/settings', 'core/langs', 'core/format',
localize = function (langs, lang, useBrowserLang) {
var storedLang = store.get(storekey),
browserLang, key;
var storedLang = store.get(storekey);
if (langs[storedLang]) {
lang = storedLang;
} else if (useBrowserLang) {
browserLang = navigator.language || navigator.browserLanguage;
var browserLang = navigator.language || navigator.browserLanguage;
if (browserLang) {
if (langs[browserLang]) {
lang = browserLang;
@ -110,7 +109,11 @@ module.define('ext/l10n', [jQuery, 'core/settings', 'core/langs', 'core/format',
}
initLangSelector(langs);
localize(langs, settings.lang, settings.useBrowserLang);
event.sub('ready', function () {
localize(langs, settings.lang, settings.useBrowserLang);
});
};
init();

35
src/_h5ai/js/inc/ext/mode.js Normal file
View file

@ -0,0 +1,35 @@
module.define('ext/mode', [jQuery, 'core/settings', 'core/parser'], function ($, allsettings, parser) {
var defaults = {
enabled: false,
display: 0
},
settings = _.extend({}, defaults, allsettings.mode),
init = function () {
if (!settings.enabled) {
return;
}
var info = '';
if (parser.mode) {
info += parser.mode;
}
if (settings.display > 0 && parser.server.name) {
info += (info ? ' on ' : '') + parser.server.name;
}
if (settings.display > 1 && parser.server.version) {
info += (info ? '-' : '') + parser.server.version;
}
if (info) {
$('#h5ai-reference').append(' (' + info + ')');
}
};
init();
});

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

@ -0,0 +1,248 @@
module.define('ext/preview-img', [jQuery, 'core/settings', 'core/resource', 'core/store', 'core/entry'], function ($, allsettings, resource, store, entry) {
var defaults = {
enabled: false,
types: ['bmp', 'gif', 'ico', 'image', 'jpg', 'png', 'tiff']
},
settings = _.extend({}, defaults, allsettings['preview-img']),
template = '<div id="preview-overlay" class="noSelection">' +
'<div id="preview-content">' +
'<img id="preview-img" />' +
'</div>' +
'<div id="preview-close" />' +
'<div id="preview-prev" />' +
'<div id="preview-next" />' +
'<div id="preview-bottombar" class="clearfix">' +
'<ul id="preview-buttons">' +
'<li id="preview-bar-size" class="bar-left bar-label"></li>' +
'<li id="preview-bar-percent" class="bar-left bar-label"></li>' +
'<li id="preview-bar-label" class="bar-left bar-label"></li>' +
'<li id="preview-bar-close" class="bar-right bar-button"><img src="' + resource.image('preview/close') + '" /></li>' +
'<li id="preview-bar-original" class="bar-right"><a class="bar-button" target="_blank"><img src="' + resource.image('preview/image') + '" /></a></li>' +
'<li id="preview-bar-fullscreen" class="bar-right bar-button"><img src="' + resource.image('preview/fullscreen') + '" /></li>' +
'<li id="preview-bar-next" class="bar-right bar-button"><img src="' + resource.image('preview/next') + '" /></li>' +
'<li id="preview-bar-idx" class="bar-right bar-label"></li>' +
'<li id="preview-bar-prev" class="bar-right bar-button"><img src="' + resource.image('preview/prev') + '" /></li>' +
'</ul>' +
'</div>' +
'</div>',
storekey = 'h5ai.preview-img.isFullscreen',
currentEntries = [],
currentIdx = 0,
isFullscreen = store.get(storekey) || false,
adjustSize = function () {
var rect = $(window).fracs('viewport'),
$container = $('#preview-content'),
$img = $('#preview-img'),
margin = isFullscreen ? 0 : 20,
barheight = isFullscreen ? 0 : 31;
$container.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'
});
rect = $img.fracs('rect');
if (!rect) {
// console.log('RECT FAILED!');
return;
}
rect = rect.relativeTo($('#preview-overlay').fracs('rect'));
$('#preview-prev').css({
'left': rect.left,
'top': rect.top,
'width': rect.width / 2,
'height': rect.height
});
$('#preview-next').css({
'left': rect.left + rect.width / 2,
'top': rect.top,
'width': rect.width / 2,
'height': rect.height
});
},
preload = 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 width = $img.width(),
height = $img.height();
$hidden.remove();
callback(width, height);
})
.attr('src', src);
},
showImg = function (entries, idx) {
currentEntries = entries;
currentIdx = (idx + currentEntries.length) % currentEntries.length;
var $container = $('#preview-content'),
$img = $('#preview-img'),
src = currentEntries[currentIdx].absHref,
spinnerTimeout = setTimeout(function () {
$container.spin({
length: 12,
width: 4,
radius: 24,
color: '#ccc',
shadow: true
});
}, 200);
$('#preview-overlay').stop(true, true).fadeIn(200);
$('#preview-bar-idx').text('' + (currentIdx + 1) + ' / ' + currentEntries.length);
preload(src, function (width, height) {
clearTimeout(spinnerTimeout);
$container.spin(false);
$img.attr('src', src).show();
adjustSize();
$('#preview-bar-label').text(currentEntries[currentIdx].label);
$('#preview-bar-percent').text('' + (100 * $img.width() / width).toFixed(0) + '%');
$('#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);
});
},
checkEntry = function (entry) {
if (entry.$extended && $.inArray(entry.type, settings.types) >= 0) {
var $a = entry.$extended.find('a');
$a.on('click', function (event) {
event.preventDefault();
var entries = _.filter(_.map($('#extended .entry'), function (entry) {
return $(entry).data('entry');
}), function (entry) {
return _.indexOf(settings.types, entry.type) >= 0;
});
showImg(entries, _.indexOf(entries, entry));
});
}
},
init = function (entry) {
if (!settings.enabled) {
return;
}
$(template).appendTo('body');
_.each(entry.content, checkEntry);
$('#preview-bar-prev, #preview-prev').on('click', function (event) {
// event.stopPropagation();
showImg(currentEntries, currentIdx - 1);
});
$('#preview-prev')
.on('mouseenter', function (event) {
// event.stopPropagation();
$('#preview-bar-prev').addClass('hover');
})
.on('mouseleave', function (event) {
// event.stopPropagation();
$('#preview-bar-prev').removeClass('hover');
});
$('#preview-bar-next, #preview-next').on('click', function (event) {
// event.stopPropagation();
showImg(currentEntries, currentIdx + 1);
});
$('#preview-next')
.on('mouseenter', function (event) {
// event.stopPropagation();
$('#preview-bar-next').addClass('hover');
})
.on('mouseleave', function (event) {
// event.stopPropagation();
$('#preview-bar-next').removeClass('hover');
});
$('#preview-bar-close, #preview-close').on('click', function () {
// event.stopPropagation();
$('#preview-overlay').stop(true, true).fadeOut(200);
});
$('#preview-close')
.on('mouseenter', function (event) {
// event.stopPropagation();
$('#preview-bar-close').addClass('hover');
})
.on('mouseleave', function (event) {
// event.stopPropagation();
$('#preview-bar-close').removeClass('hover');
});
$('#preview-bar-fullscreen').on('click', function (event) {
// event.stopPropagation();
isFullscreen = !isFullscreen;
store.put(storekey, isFullscreen);
$('#preview-bar-fullscreen').find('img').attr('src', isFullscreen ? resource.image('preview/no-fullscreen') : resource.image('preview/fullscreen'));
adjustSize();
});
$('#preview-overlay')
.on('mousedown', function (event) {
event.stopPropagation();
})
.on('mousemove', function (event) {
if (isFullscreen) {
var rect = $('#preview-overlay').fracs('rect');
if (rect.bottom - event.pageY < 64) {
$('#preview-bottombar').fadeIn(200);
} else {
$('#preview-bottombar').fadeOut(400);
}
}
});
$(window).on('resize load', adjustSize);
};
init(entry);
});

14
src/_h5ai/js/inc/ext/select.js
View file

@ -57,7 +57,19 @@ module.define('ext/select', [jQuery, 'core/settings', 'core/event'], function ($
$selectionRect
.stop(true, true)
.animate({left: l + w * 0.5 * shrink, top: t + h * 0.5 * shrink, width: w * (1 - shrink), height: h * (1 - shrink), opacity: 0}, 300);
.animate(
{
left: l + w * 0.5 * shrink,
top: t + h * 0.5 * shrink,
width: w * (1 - shrink),
height: h * (1 - shrink),
opacity: 0
},
300,
function () {
$selectionRect.hide();
}
);
},
selectionStart = function (event) {

11
src/_h5ai/js/inc/ext/statusbar.js
View file

@ -57,9 +57,16 @@ module.define('ext/statusbar', [jQuery, 'core/settings', 'core/format', 'core/ev
event.sub('entry.mouseenter', function (entry) {
var $span = $('<span/>').append(entry.label).append(sepTemplate).append(format.formatDate(entry.time));
if (entry.isParentFolder) {
return;
}
if (!entry.isFolder()) {
var $span = $('<span/>').append(entry.label);
if (_.isNumber(entry.time)) {
$span.append(sepTemplate).append(format.formatDate(entry.time));
}
if (_.isNumber(entry.size)) {
$span.append(sepTemplate).append(format.formatSize(entry.size));
}

49
src/_h5ai/js/inc/ext/thumbnails.js
View file

@ -3,7 +3,9 @@ module.define('ext/thumbnails', [jQuery, 'core/settings', 'core/resource', 'core
var defaults = {
enabled: false,
types: ["bmp", "gif", "ico", "image", "jpg", "png", "tiff"],
img: ['bmp', 'gif', 'ico', 'image', 'jpg', 'png', 'tiff'],
mov: ['video'],
doc: ['pdf', 'ps'],
delay: 1000
},
@ -21,25 +23,36 @@ module.define('ext/thumbnails', [jQuery, 'core/settings', 'core/resource', 'core
checkEntry = function (entry) {
if (entry.$extended && $.inArray(entry.type, settings.types) >= 0) {
if (entry.$extended) {
var $imgSmall = entry.$extended.find('.icon.small img');
var $imgBig = entry.$extended.find('.icon.big img');
var type = null;
requestThumb($imgSmall, {
action: 'getthumbsrc',
href: entry.absHref,
width: 16,
height: 16,
mode: 'square'
});
requestThumb($imgBig, {
action: 'getthumbsrc',
href: entry.absHref,
width: 100,
height: 48,
mode: 'rational'
});
if ($.inArray(entry.type, settings.img) >= 0) {
type = 'img';
} else if ($.inArray(entry.type, settings.mov) >= 0) {
type = 'mov';
} else if ($.inArray(entry.type, settings.doc) >= 0) {
type = 'doc';
}
if (type) {
requestThumb(entry.$extended.find('.icon.small img'), {
action: 'getthumbsrc',
type: type,
href: entry.absHref,
mode: 'square',
width: 16,
height: 16
});
requestThumb(entry.$extended.find('.icon.big img'), {
action: 'getthumbsrc',
type: type,
href: entry.absHref,
mode: 'rational',
width: 100,
height: 48
});
}
}
},