diff --git a/src/_h5ai/client/css/inc/preview-txt.less b/src/_h5ai/client/css/inc/preview-txt.less
index bff27626..85c76ad3 100644
--- a/src/_h5ai/client/css/inc/preview-txt.less
+++ b/src/_h5ai/client/css/inc/preview-txt.less
@@ -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);
-}
diff --git a/src/_h5ai/client/js/inc/ext/preview-txt.js b/src/_h5ai/client/js/inc/ext/preview-txt.js
index 508fd323..e93c77ed 100644
--- a/src/_h5ai/client/js/inc/ext/preview-txt.js
+++ b/src/_h5ai/client/js/inc/ext/preview-txt.js
@@ -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 = '' +
- '
' +
- '
' +
- '
' +
- '
 + ')
' +
- '
' +
- '
' +
- '
|
')
- .append($(' | ').addClass('nr').append(i + 1))
- .append($(' | ').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 = $('');
+
+ getHighlightedLines(sh, settings.types[currentItem.type], textContent).each(function (i) {
+ $('|
')
+ .append($(' | ').addClass('nr').append(i + 1))
+ .append($(' | ').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();