mirror of
https://github.com/lrsjng/h5ai.git
synced 2024-09-20 04:38:51 -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 {
|
||||
// position: absolute;
|
||||
max-width: 800px;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
padding: 8px;
|
||||
overflow: auto;
|
||||
|
||||
&.highlighted {
|
||||
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({
|
||||
enabled: false,
|
||||
|
|
@ -28,33 +28,9 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource',
|
|||
}
|
||||
}, 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"/>',
|
||||
templateMarkdown = '<div id="pv-txt-text" class="markdown"/>',
|
||||
|
||||
currentEntries = [],
|
||||
currentIdx = 0,
|
||||
|
||||
// adapted from SyntaxHighlighter
|
||||
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) {
|
||||
|
||||
$(window).on('keydown', onKeydown);
|
||||
$('#pv-txt-overlay').stop(true, true).fadeIn(200);
|
||||
var currentItems = items,
|
||||
currentIdx = idx,
|
||||
currentItem = items[idx],
|
||||
|
||||
currentEntries = items;
|
||||
onIndexChange(idx);
|
||||
},
|
||||
onIdxChange = function (rel) {
|
||||
|
||||
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);
|
||||
$('#pv-txt-overlay').stop(true, true).fadeOut(200);
|
||||
},
|
||||
var $text;
|
||||
|
||||
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
|
||||
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();
|
||||
}
|
||||
if (md) {
|
||||
$text.html(md.toHTML(textContent));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$text = $(templateText).text(textContent);
|
||||
$text.replaceWith($text);
|
||||
|
||||
loadSyntaxhighlighter(function (sh) {
|
||||
|
||||
if (sh) {
|
||||
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) {
|
||||
|
|
@ -296,31 +239,8 @@ modulejs.define('ext/preview-txt', ['_', '$', 'core/settings', 'core/resource',
|
|||
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.refreshed', onLocationRefreshed);
|
||||
|
||||
$(window).on('resize load', adjustSize);
|
||||
};
|
||||
|
||||
init();
|
||||
|
|
|
|||
Loading…
Reference in a new issue