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

Adds text file preview and highlighting.

Browse source
This commit is contained in:
Lars Jung 2012-08-04 21:47:22 +02:00
parent 974392d2eb
commit 90b0b97e22
57 changed files with 5924 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,24 +8,24 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
settings = _.extend({}, defaults, allsettings['preview-img']),
template = '<div id="preview-overlay" class="noSelection">' +
'<div id="preview-content">' +
'<img id="preview-img" />' +
template = '<div id="pv-img-overlay" class="noSelection">' +
'<div id="pv-img-content">' +
'<img id="pv-img-image" />' +
'</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>' +
'<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>' +
'<li id="pv-img-bar-percent" class="bar-left bar-label"></li>' +
'<li id="pv-img-bar-label" class="bar-left bar-label"></li>' +
'<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>' +
'<li id="pv-img-bar-prev" class="bar-right bar-button"><img src="' + resource.image('preview/prev') + '" /></li>' +
'</ul>' +
'</div>' +
'</div>',
@ -39,8 +39,8 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
adjustSize = function () {
var rect = $(window).fracs('viewport'),
$container = $('#preview-content'),
$img = $('#preview-img'),
$container = $('#pv-img-content'),
$img = $('#pv-img-image'),
margin = isFullscreen ? 0 : 20,
barheight = isFullscreen ? 0 : 31;
@ -62,15 +62,15 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
if (!rect) {
return;
}
rect = rect.relativeTo($('#preview-overlay').fracs('rect'));
rect = rect.relativeTo($('#pv-img-overlay').fracs('rect'));
$('#preview-prev').css({
$('#pv-img-prev').css({
left: rect.left,
top: rect.top,
width: rect.width / 2,
height: rect.height
});
$('#preview-next').css({
$('#pv-img-next').css({
left: rect.left + rect.width / 2,
top: rect.top,
width: rect.width / 2,
@ -106,8 +106,8 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
currentIdx = (idx + currentEntries.length) % currentEntries.length;
var $container = $('#preview-content'),
$img = $('#preview-img'),
var $container = $('#pv-img-content'),
$img = $('#pv-img-image'),
src = currentEntries[currentIdx].absHref,
spinnerTimeout = setTimeout(function () {
@ -129,14 +129,14 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
$img.attr('src', src).fadeIn(200);
// small timeout, so $img is visible
// small timeout, so $img is visible and therefor $img.width is available
setTimeout(function () {
adjustSize();
$('#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);
$('#pv-img-bar-percent').text('' + (100 * $img.width() / width).toFixed(0) + '%');
$('#pv-img-bar-label').text(currentEntries[currentIdx].label);
$('#pv-img-bar-size').text('' + width + 'x' + height);
$('#pv-img-bar-idx').text('' + (currentIdx + 1) + ' / ' + currentEntries.length);
$('#pv-img-bar-original').find('a').attr('href', currentEntries[currentIdx].absHref);
}, 1);
});
@ -146,7 +146,7 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
onEnter = function (entries, idx) {
$(window).on('keydown', onKeydown);
$('#preview-overlay').stop(true, true).fadeIn(200);
$('#pv-img-overlay').stop(true, true).fadeIn(200);
currentEntries = entries;
onIndexChange(idx);
@ -165,7 +165,7 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
onExit = function () {
$(window).off('keydown', onKeydown);
$('#preview-overlay').stop(true, true).fadeOut(200);
$('#pv-img-overlay').stop(true, true).fadeOut(200);
},
onFullscreen = function () {
@ -176,11 +176,11 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
adjustSize();
if (isFullscreen) {
$('#preview-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen'));
$('#preview-bottombar').fadeOut(400);
$('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/no-fullscreen'));
$('#pv-img-bottombar').fadeOut(400);
} else {
$('#preview-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen'));
$('#preview-bottombar').fadeIn(200);
$('#pv-img-bar-fullscreen').find('img').attr('src', resource.image('preview/fullscreen'));
$('#pv-img-bottombar').fadeIn(200);
}
},
@ -226,38 +226,38 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
});
$(template).appendTo('body');
$('#preview-bar-prev, #preview-prev').on('click', onPrevious);
$('#preview-bar-next, #preview-next').on('click', onNext);
$('#preview-bar-close, #preview-close').on('click', onExit);
$('#preview-bar-fullscreen').on('click', onFullscreen);
$('#preview-overlay').on('keydown', onKeydown);
$('#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-overlay').on('keydown', onKeydown);
$('#preview-prev')
$('#pv-img-prev')
.on('mouseenter', function () {
$('#preview-bar-prev').addClass('hover');
$('#pv-img-bar-prev').addClass('hover');
})
.on('mouseleave', function () {
$('#preview-bar-prev').removeClass('hover');
$('#pv-img-bar-prev').removeClass('hover');
});
$('#preview-next')
$('#pv-img-next')
.on('mouseenter', function () {
$('#preview-bar-next').addClass('hover');
$('#pv-img-bar-next').addClass('hover');
})
.on('mouseleave', function () {
$('#preview-bar-next').removeClass('hover');
$('#pv-img-bar-next').removeClass('hover');
});
$('#preview-close')
$('#pv-img-close')
.on('mouseenter', function () {
$('#preview-bar-close').addClass('hover');
$('#pv-img-bar-close').addClass('hover');
})
.on('mouseleave', function () {
$('#preview-bar-close').removeClass('hover');
$('#pv-img-bar-close').removeClass('hover');
});
$('#preview-overlay')
$('#pv-img-overlay')
.on('click mousedown mousemove keydown keypress', function (event) {
event.stopPropagation();
@ -265,12 +265,12 @@ modulejs.define('ext/preview-img', ['_', '$', 'core/settings', 'core/resource',
.on('mousemove', function (event) {
if (isFullscreen) {
var rect = $('#preview-overlay').fracs('rect');
var rect = $('#pv-img-overlay').fracs('rect');
if (rect.bottom - event.pageY < 64) {
$('#preview-bottombar').fadeIn(200);
$('#pv-img-bottombar').fadeIn(200);
} else {
$('#preview-bottombar').fadeOut(400);
$('#pv-img-bottombar').fadeOut(400);
}
}
});

198
src/_h5ai/js/inc/ext/preview-txt.js Normal file
View file

@ -0,0 +1,198 @@
modulejs.define('ext/preview-txt', ['_', '$', 'sh', 'core/settings', 'core/resource', 'core/store', 'core/entry'], function (_, $, SH, allsettings, resource, store, entry) {
var defaults = {
enabled: false,
types: {
text: 'plain',
js: 'js'
}
},
settings = _.extend({}, defaults, allsettings['preview-txt']),
template = '<div id="pv-txt-overlay" class="noSelection">' +
'<div id="pv-txt-close" />' +
'<div id="pv-txt-content">' +
'<pre id="pv-txt-text" class="brush: js" />' +
'</div>' +
'<div id="pv-txt-bottombar" class="clearfix">' +
'<ul id="pv-txt-buttons">' +
'<li id="pv-txt-bar-size" class="bar-left bar-label"></li>' +
'<li id="pv-txt-bar-label" class="bar-left bar-label"></li>' +
'<li id="pv-txt-bar-close" class="bar-right bar-button"><img src="' + resource.image('preview/close') + '" /></li>' +
'<li id="pv-txt-bar-original" class="bar-right"><a class="bar-button" target="_blank"><img src="' + resource.image('preview/raw') + '" /></a></li>' +
'<li id="pv-txt-bar-next" class="bar-right bar-button"><img src="' + resource.image('preview/next') + '" /></li>' +
'<li id="pv-txt-bar-idx" class="bar-right bar-label"></li>' +
'<li id="pv-txt-bar-prev" class="bar-right bar-button"><img src="' + resource.image('preview/prev') + '" /></li>' +
'</ul>' +
'</div>' +
'</div>',
templateText = '<pre id="pv-txt-text" />',
currentEntries = [],
currentIdx = 0,
adjustSize = function () {
var rect = $(window).fracs('viewport'),
$container = $('#pv-txt-content'),
margin = 20,
barheight = 31;
$container.css({
width: rect.width - 2 * margin,
height: rect.height - 2 * margin - barheight - 32,
left: margin,
top: margin
});
},
preloadText = function (absHref, callback) {
$.ajax({
url: absHref,
dataType: 'text',
success: function (content) {
callback(content);
// setTimeout(function () { callback(content); }, 1000); // for testing
},
error: function (jqXHR, textStatus, errorThrown) {
callback('[ajax error] ' + textStatus);
}
});
},
onIndexChange = function (idx) {
currentIdx = (idx + currentEntries.length) % currentEntries.length;
var $container = $('#pv-txt-content'),
$text = $('#pv-txt-text'),
current = currentEntries[currentIdx],
spinnerTimeout = setTimeout(function () {
$container.spin({
length: 12,
width: 4,
radius: 24,
color: '#ccc',
shadow: true
});
}, 200);
preloadText(current.absHref, function (content) {
clearTimeout(spinnerTimeout);
$container.spin(false);
$text.fadeOut(100, function () {
var $nText = $(templateText).hide().addClass('toolbar: false; brush:').addClass(settings.types[current.type] || 'plain').text(content);
$text.replaceWith($nText);
SH.highlight({}, $nText[0]);
$nText.fadeIn(200);
adjustSize();
$('#pv-txt-bar-label').text(current.label);
$('#pv-txt-bar-size').text('' + current.size + ' bytes');
$('#pv-txt-bar-idx').text('' + (currentIdx + 1) + ' / ' + currentEntries.length);
$('#pv-txt-bar-original').find('a').attr('href', current.absHref);
});
});
},
onEnter = function (entries, idx) {
$(window).on('keydown', onKeydown);
$('#pv-txt-overlay').stop(true, true).fadeIn(200);
currentEntries = entries;
onIndexChange(idx);
},
onNext = function () {
onIndexChange(currentIdx + 1);
},
onPrevious = function () {
onIndexChange(currentIdx - 1);
},
onExit = function () {
$(window).off('keydown', onKeydown);
$('#pv-txt-overlay').stop(true, true).fadeOut(200);
},
onKeydown = function (event) {
var key = event.which;
if (key === 27) { // esc
onExit();
} else if (key === 37) { // left
onPrevious();
} else if (key === 39) { // right
onNext();
}
},
initEntry = function (entries, entry, idx) {
if (entry.$extended) {
entry.$extended.find('a').on('click', function (event) {
event.preventDefault();
onEnter(entries, idx);
});
}
},
init = function (entry) {
if (!settings.enabled) {
return;
}
var imageEntries = _.filter(entry.content, function (entry) {
return _.indexOf(_.keys(settings.types), entry.type) >= 0;
});
_.each(imageEntries, function (e, idx) {
initEntry(imageEntries, e, idx);
});
$(template).appendTo('body');
$('#pv-txt-bar-prev').on('click', onPrevious);
$('#pv-txt-bar-next').on('click', onNext);
$('#pv-txt-bar-close, #pv-txt-close').on('click', onExit);
$('#pv-txt-overlay').on('keydown', onKeydown);
$('#pv-txt-close')
.on('mouseenter', function () {
$('#pv-txt-bar-close').addClass('hover');
})
.on('mouseleave', function () {
$('#pv-txt-bar-close').removeClass('hover');
});
$('#pv-txt-overlay')
.on('click mousedown mousemove keydown keypress', function (event) {
event.stopPropagation();
});
$(window).on('resize load', adjustSize);
};
init(entry);
});