mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-25 20:44:53 -04:00
Updates text preview.
This commit is contained in:
Lars Jung
parent
25c131f875
commit
cdbf2e2104
2 changed files with 66 additions and 254 deletions
|
|
@ -1,35 +1,14 @@
|
||||||
|
|
||||||
#pv-txt-overlay {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
background-color: rgba(0,0,0,0.5);
|
|
||||||
.transition(background-color 0.3s ease-in-out);
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pv-txt-content {
|
|
||||||
max-width: 960px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
text-align: left;
|
|
||||||
overflow: auto;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pv-txt-spinner {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pv-txt-text {
|
#pv-txt-text {
|
||||||
|
// position: absolute;
|
||||||
|
max-width: 800px;
|
||||||
|
max-height: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: left;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 8px;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
&.highlighted {
|
&.highlighted {
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
|
@ -143,90 +122,3 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#pv-txt-close {
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pv-txt-prev {
|
|
||||||
position: fixed;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pv-txt-next {
|
|
||||||
position: fixed;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pv-txt-buttons, #pv-txt-topbuttons {
|
|
||||||
list-style: none;
|
|
||||||
list-style-image: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
position: relative;
|
|
||||||
top: -2px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
img + span, img + input {
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
background-color: rgba(255,255,255,0.1);
|
|
||||||
border: none;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-label {
|
|
||||||
display: block;
|
|
||||||
color: #ccc;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 0 10px;
|
|
||||||
opacity: 0.7;
|
|
||||||
.transition(all 0.2s ease-in-out);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-highlight {
|
|
||||||
background-color: rgba(255,255,255,0.1);
|
|
||||||
opacity: 1.0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@bar-sep-border: 1px solid rgba(255,255,255,0.05);
|
|
||||||
|
|
||||||
.bar-button {
|
|
||||||
.bar-label;
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover, &.hover {
|
|
||||||
.bar-highlight;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-left {
|
|
||||||
float: left;
|
|
||||||
border-right: @bar-sep-border;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-right {
|
|
||||||
float: right;
|
|
||||||
border-left: @bar-sep-border;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#pv-txt-bottombar {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 5;
|
|
||||||
width: 100%;
|
|
||||||
height: 32px;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: rgb(27,27,27);
|
|
||||||
border-top: 1px solid rgb(45,45,45);
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
|
|
||||||
modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource', 'core/store', 'core/event', 'core/location'], function (_, $, allsettings, resource, store, event, location) {
|
modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/store', 'core/event', 'ext/preview'], function (_, $, allsettings, store, event, preview) {
|
||||||
|
|
||||||
var settings = _.extend({
|
var settings = _.extend({
|
||||||
enabled: false,
|
enabled: false,
|
||||||
|
|
@ -28,33 +28,9 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource',
|
||||||
}
|
}
|
||||||
}, allsettings['preview-txt']),
|
}, allsettings['preview-txt']),
|
||||||
|
|
||||||
template = '<div id="pv-txt-overlay" class="noSelection">' +
|
|
||||||
'<div id="pv-txt-close"/>' +
|
|
||||||
'<div id="pv-txt-content">' +
|
|
||||||
'<div id="pv-txt-text"/>' +
|
|
||||||
'</div>' +
|
|
||||||
'<div id="pv-txt-spinner">' +
|
|
||||||
'<img src="' + resource.image('spinner') + '"/>' +
|
|
||||||
'</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 id="pv-txt-bar-label" class="bar-left bar-label"/>' +
|
|
||||||
'<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 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" class="highlighted"/>',
|
templateText = '<pre id="pv-txt-text" class="highlighted"/>',
|
||||||
templateMarkdown = '<div id="pv-txt-text" class="markdown"/>',
|
templateMarkdown = '<div id="pv-txt-text" class="markdown"/>',
|
||||||
|
|
||||||
currentEntries = [],
|
|
||||||
currentIdx = 0,
|
|
||||||
|
|
||||||
// adapted from SyntaxHighlighter
|
// adapted from SyntaxHighlighter
|
||||||
getHighlightedLines = function (sh, alias, content) {
|
getHighlightedLines = function (sh, alias, content) {
|
||||||
|
|
||||||
|
|
@ -159,107 +135,74 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource',
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
onIndexChange = function (idx) {
|
|
||||||
|
|
||||||
currentIdx = (idx + currentEntries.length) % currentEntries.length;
|
|
||||||
|
|
||||||
var $container = $('#pv-txt-content'),
|
|
||||||
$text = $('#pv-txt-text'),
|
|
||||||
current = currentEntries[currentIdx],
|
|
||||||
spinnerTimeout = setTimeout(function () { $('#pv-txt-spinner').show(); }, 200);
|
|
||||||
|
|
||||||
preloadText(current.absHref, function (content) {
|
|
||||||
|
|
||||||
clearTimeout(spinnerTimeout);
|
|
||||||
$('#pv-txt-spinner').hide();
|
|
||||||
|
|
||||||
$text.fadeOut(100, function () {
|
|
||||||
|
|
||||||
var $nText;
|
|
||||||
|
|
||||||
if (current.type === 'markdown') {
|
|
||||||
$nText = $(templateMarkdown).hide().text(content);
|
|
||||||
$text.replaceWith($nText);
|
|
||||||
|
|
||||||
loadMarkdown(function (md) {
|
|
||||||
|
|
||||||
if (md) {
|
|
||||||
$nText.html(md.toHTML(content));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
$nText = $(templateText).hide().text(content);
|
|
||||||
$text.replaceWith($nText);
|
|
||||||
|
|
||||||
loadSyntaxhighlighter(function (sh) {
|
|
||||||
|
|
||||||
if (sh) {
|
|
||||||
var $table = $('<table/>');
|
|
||||||
|
|
||||||
getHighlightedLines(sh, settings.types[current.type], content).each(function (i) {
|
|
||||||
$('<tr/>')
|
|
||||||
.append($('<td/>').addClass('nr').append(i + 1))
|
|
||||||
.append($('<td/>').addClass('line').append(this))
|
|
||||||
.appendTo($table);
|
|
||||||
});
|
|
||||||
|
|
||||||
$nText.empty().append($table);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
$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 (items, idx) {
|
onEnter = function (items, idx) {
|
||||||
|
|
||||||
$(window).on('keydown', onKeydown);
|
var currentItems = items,
|
||||||
$('#pv-txt-overlay').stop(true, true).fadeIn(200);
|
currentIdx = idx,
|
||||||
|
currentItem = items[idx],
|
||||||
|
|
||||||
currentEntries = items;
|
onIdxChange = function (rel) {
|
||||||
onIndexChange(idx);
|
|
||||||
},
|
|
||||||
|
|
||||||
onNext = function () {
|
currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
|
||||||
|
currentItem = currentItems[currentIdx];
|
||||||
|
|
||||||
onIndexChange(currentIdx + 1);
|
var spinnerTimeout = setTimeout(function () { preview.showSpinner(true); }, 200);
|
||||||
},
|
|
||||||
|
|
||||||
onPrevious = function () {
|
preloadText(currentItem.absHref, function (textContent) {
|
||||||
|
|
||||||
onIndexChange(currentIdx - 1);
|
clearTimeout(spinnerTimeout);
|
||||||
},
|
preview.showSpinner(false);
|
||||||
|
|
||||||
onExit = function () {
|
$('#pv-content').fadeOut(100, function () {
|
||||||
|
|
||||||
$(window).off('keydown', onKeydown);
|
var $text;
|
||||||
$('#pv-txt-overlay').stop(true, true).fadeOut(200);
|
|
||||||
},
|
|
||||||
|
|
||||||
onKeydown = function (event) {
|
if (currentItem.type === 'markdown') {
|
||||||
|
$text = $(templateMarkdown).text(textContent);
|
||||||
|
$text.replaceWith($text);
|
||||||
|
|
||||||
var key = event.which;
|
loadMarkdown(function (md) {
|
||||||
|
|
||||||
if (key === 27) { // esc
|
if (md) {
|
||||||
event.preventDefault();
|
$text.html(md.toHTML(textContent));
|
||||||
event.stopImmediatePropagation();
|
}
|
||||||
onExit();
|
});
|
||||||
} else if (key === 8 || key === 37 || key === 40) { // backspace, left, down
|
} else {
|
||||||
event.preventDefault();
|
$text = $(templateText).text(textContent);
|
||||||
event.stopImmediatePropagation();
|
$text.replaceWith($text);
|
||||||
onPrevious();
|
|
||||||
} else if (key === 13 || key === 32 || key === 38 || key === 39) { // enter, space, up, right
|
loadSyntaxhighlighter(function (sh) {
|
||||||
event.preventDefault();
|
|
||||||
event.stopImmediatePropagation();
|
if (sh) {
|
||||||
onNext();
|
var $table = $('<table/>');
|
||||||
}
|
|
||||||
|
getHighlightedLines(sh, settings.types[currentItem.type], textContent).each(function (i) {
|
||||||
|
$('<tr/>')
|
||||||
|
.append($('<td/>').addClass('nr').append(i + 1))
|
||||||
|
.append($('<td/>').addClass('line').append(this))
|
||||||
|
.appendTo($table);
|
||||||
|
});
|
||||||
|
|
||||||
|
$text.empty().append($table);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#pv-content').empty().append($text).fadeIn(200);
|
||||||
|
|
||||||
|
preview.setIndex(currentIdx + 1, currentItems.length);
|
||||||
|
preview.setLabels([
|
||||||
|
currentItem.label,
|
||||||
|
'' + currentItem.size + ' bytes'
|
||||||
|
]);
|
||||||
|
preview.setRawLink(currentItem.absHref);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onIdxChange(0);
|
||||||
|
preview.setOnIndexChange(onIdxChange);
|
||||||
|
preview.enter();
|
||||||
},
|
},
|
||||||
|
|
||||||
initItem = function (item) {
|
initItem = function (item) {
|
||||||
|
|
@ -296,31 +239,8 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource',
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$(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-close')
|
|
||||||
.on('mouseenter', function () {
|
|
||||||
$('#pv-txt-bar-close').addClass('hover');
|
|
||||||
})
|
|
||||||
.on('mouseleave', function () {
|
|
||||||
$('#pv-txt-bar-close').removeClass('hover');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
$('#pv-txt-overlay')
|
|
||||||
.on('keydown', onKeydown)
|
|
||||||
.on('click mousedown mousemove keydown keypress', function (event) {
|
|
||||||
|
|
||||||
event.stopImmediatePropagation();
|
|
||||||
});
|
|
||||||
|
|
||||||
event.sub('location.changed', onLocationChanged);
|
event.sub('location.changed', onLocationChanged);
|
||||||
event.sub('location.refreshed', onLocationRefreshed);
|
event.sub('location.refreshed', onLocationRefreshed);
|
||||||
|
|
||||||
$(window).on('resize load', adjustSize);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue