Fijxu/h5ai
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updates text preview.

Browse source
This commit is contained in:
Lars Jung 2013-08-21 15:56:18 +02:00
parent 25c131f875
commit cdbf2e2104
2 changed files with 66 additions and 254 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
src/_h5ai/client/css/inc/preview-txt.less
View file

@ -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);
}

194
src/_h5ai/client/js/inc/ext/preview-txt.js
View file

@ -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();