diff --git a/src/_h5ai/public/css/lib/ext/preview.less b/src/_h5ai/public/css/lib/ext/preview.less
index 930ca5cf..aa4fd1e6 100644
--- a/src/_h5ai/public/css/lib/ext/preview.less
+++ b/src/_h5ai/public/css/lib/ext/preview.less
@@ -1,5 +1,4 @@
#pv-overlay {
- display: none;
position: fixed;
left: 0;
top: 0;
diff --git a/src/_h5ai/public/js/lib/ext/preview-aud.js b/src/_h5ai/public/js/lib/ext/preview-aud.js
index 3878fa9d..5d76b9f1 100644
--- a/src/_h5ai/public/js/lib/ext/preview-aud.js
+++ b/src/_h5ai/public/js/lib/ext/preview-aud.js
@@ -1,5 +1,5 @@
-const {each, map, includes, compact} = require('../util');
-const {win, jq} = require('../globals');
+const {each, includes, compact, dom} = require('../util');
+const {win} = require('../globals');
const event = require('../core/event');
const format = require('../core/format');
const allsettings = require('../core/settings');
@@ -10,30 +10,32 @@ const settings = Object.assign({
types: []
}, allsettings['preview-aud']);
-function preloadAudio(src, callback) {
- const $audio = jq('')
- .one('loadedmetadata', () => {
- callback($audio);
- // win.setTimeout(function () { callback($img); }, 1000); // for testing
- })
+const preloadAudio = (src, callback) => {
+ const $audio = dom('')
+ .on('loadedmetadata', () => callback($audio))
.attr('autoplay', 'autoplay')
.attr('controls', 'controls')
.attr('src', src);
-}
+};
-function onEnter(items, idx) {
+const onEnter = (items, idx) => {
const currentItems = items;
let currentIdx = idx;
let currentItem = items[idx];
- function onAdjustSize() {
- const $content = jq('#pv-content');
- const $audio = jq('#pv-aud-audio');
+ const onAdjustSize = () => {
+ const $content = dom('#pv-content');
+ const $audio = dom('#pv-aud-audio');
if ($audio.length) {
+ const contentW = $content[0].offsetWidth;
+ const contentH = $content[0].offsetHeight;
+ const audioW = $audio[0].offsetWidth;
+ const audioH = $audio[0].offsetHeight;
+
$audio.css({
- left: String(($content.width() - $audio.width()) * 0.5) + 'px',
- top: String(($content.height() - $audio.height()) * 0.5) + 'px'
+ left: (contentW - audioW) * 0.5 + 'px',
+ top: (contentH - audioH) * 0.5 + 'px'
});
preview.setLabels([
@@ -41,52 +43,52 @@ function onEnter(items, idx) {
format.formatDate($audio[0].duration * 1000, 'm:ss')
]);
}
- }
+ };
- function onIdxChange(rel) {
+ const onIdxChange = rel => {
currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
currentItem = currentItems[currentIdx];
const spinnerTimeout = win.setTimeout(() => preview.showSpinner(true), 200);
- if (jq('#pv-aud-audio').length) {
- jq('#pv-aud-audio')[0].pause();
+ if (dom('#pv-aud-audio').length) {
+ dom('#pv-aud-audio')[0].pause();
}
- function updateMeta() {
+ const updateMeta = () => {
onAdjustSize();
preview.setIndex(currentIdx + 1, currentItems.length);
preview.setRawLink(currentItem.absHref);
- }
+ };
- function swap(nuContent) {
- jq('#pv-content').empty().append(nuContent.attr('id', 'pv-vid-audio')).fadeIn(200);
- // small timeout, so nuContent is visible and therefore its width is available
- win.setTimeout(updateMeta, 10);
- }
+ const swap = nuContent => {
+ dom('#pv-content').clr().app(nuContent.attr('id', 'pv-aud-audio')).show();
+ updateMeta();
+ };
- function onReady($preloadedContent) {
+ const onReady = $preloadedContent => {
win.clearTimeout(spinnerTimeout);
preview.showSpinner(false);
- jq('#pv-content').fadeOut(100, () => swap($preloadedContent));
- }
+ dom('#pv-content').hide();
+ swap($preloadedContent);
+ };
preloadAudio(currentItem.absHref, onReady);
- }
+ };
onIdxChange(0);
preview.setOnIndexChange(onIdxChange);
preview.setOnAdjustSize(onAdjustSize);
preview.enter();
-}
+};
-function initItem(item) {
+const initItem = item => {
if (item.$view && includes(settings.types, item.type)) {
item.$view.find('a').on('click', ev => {
ev.preventDefault();
- const matchedItems = compact(map(jq('#items .item'), el => {
+ const matchedItems = compact(dom('#items .item').map(el => {
const matchedItem = el._item;
return includes(settings.types, matchedItem.type) ? matchedItem : null;
}));
@@ -94,18 +96,16 @@ function initItem(item) {
onEnter(matchedItems, matchedItems.indexOf(item));
});
}
-}
+};
-function onViewChanged(added) {
- each(added, initItem);
-}
+const onViewChanged = added => each(added, initItem);
-function init() {
+const init = () => {
if (!settings.enabled) {
return;
}
event.sub('view.changed', onViewChanged);
-}
+};
init();
diff --git a/src/_h5ai/public/js/lib/ext/preview-img.js b/src/_h5ai/public/js/lib/ext/preview-img.js
index ff42ec8e..d2b8f748 100644
--- a/src/_h5ai/public/js/lib/ext/preview-img.js
+++ b/src/_h5ai/public/js/lib/ext/preview-img.js
@@ -1,5 +1,5 @@
-const {each, map, includes, compact} = require('../util');
-const {win, jq} = require('../globals');
+const {each, includes, compact, dom} = require('../util');
+const {win} = require('../globals');
const server = require('../server');
const event = require('../core/event');
const allsettings = require('../core/settings');
@@ -17,7 +17,7 @@ let currentIdx;
let currentItem;
-function requestSample(href, callback) {
+const requestSample = (href, callback) => {
if (!settings.size) {
callback(href);
return;
@@ -34,43 +34,50 @@ function requestSample(href, callback) {
}).then(json => {
callback(json && json.thumbs && json.thumbs[0] ? json.thumbs[0] : null);
});
-}
+};
-function preloadImage(item, callback) {
+const preloadImage = (item, callback) => {
requestSample(item.absHref, src => {
- jq('')
- .one('load', ev => {
- callback(item, ev.target);
+ const $img = dom('
')
+ .on('load', () => {
+ callback(item, $img);
// for testing
- // win.setTimeout(function () { callback(item, ev.target); }, 1000);
+ // win.setTimeout(() => callback(item, $img), 1000);
})
.attr('src', src);
});
-}
+};
-function onAdjustSize() {
- const $content = jq('#pv-content');
- const $img = jq('#pv-img-image');
+const onAdjustSize = () => {
+ const $content = dom('#pv-content');
+ const $img = dom('#pv-img-image');
+
+ const contentW = $content[0].offsetWidth;
+ const contentH = $content[0].offsetHeight;
+ const imgW = ($img[0] || {}).offsetWidth;
+ const imgH = ($img[0] || {}).offsetHeight;
if ($img.length === 0) {
return;
}
$img.css({
- left: ($content.width() - $img.width()) * 0.5,
- top: ($content.height() - $img.height()) * 0.5
+ left: (contentW - imgW) * 0.5 + 'px',
+ top: (contentH - imgH) * 0.5 + 'px'
});
const labels = [currentItem.label];
if (!settings.size) {
- labels.push(String($img[0].naturalWidth) + 'x' + String($img[0].naturalHeight));
- labels.push(String((100 * $img.width() / $img[0].naturalWidth).toFixed(0)) + '%');
+ const imgNW = $img[0].naturalWidth;
+ const imgNH = $img[0].naturalHeight;
+ labels.push(String(imgNW) + 'x' + String(imgNH));
+ labels.push(String((100 * imgW / imgNW).toFixed(0)) + '%');
}
preview.setLabels(labels);
-}
+};
-function onIdxChange(rel) {
+const onIdxChange = rel => {
currentIdx = (currentIdx + rel + currentItems.length) % currentItems.length;
currentItem = currentItems[currentIdx];
@@ -78,7 +85,7 @@ function onIdxChange(rel) {
preview.setIndex(currentIdx + 1, currentItems.length);
preview.setRawLink(currentItem.absHref);
- jq('#pv-content').hide();
+ dom('#pv-content').hide();
if (preview.isSpinnerVisible()) {
preview.showSpinner(true, currentItem.thumbSquare);
} else {
@@ -95,29 +102,29 @@ function onIdxChange(rel) {
win.clearTimeout(spinnerTimeoutId);
preview.showSpinner(false);
- jq('#pv-content')
- .empty()
- .append(jq(preloadedImage).attr('id', 'pv-img-image'))
+ dom('#pv-content')
+ .clr()
+ .app(dom(preloadedImage).attr('id', 'pv-img-image'))
.show();
onAdjustSize();
});
-}
+};
-function onEnter(items, idx) {
+const onEnter = (items, idx) => {
currentItems = items;
currentIdx = idx;
preview.setOnIndexChange(onIdxChange);
preview.setOnAdjustSize(onAdjustSize);
preview.enter();
onIdxChange(0);
-}
+};
-function initItem(item) {
+const initItem = item => {
if (item.$view && includes(settings.types, item.type)) {
item.$view.find('a').on('click', ev => {
ev.preventDefault();
- const matchedItems = compact(map(jq('#items .item'), el => {
+ const matchedItems = compact(dom('#items .item').map(el => {
const matchedItem = el._item;
return includes(settings.types, matchedItem.type) ? matchedItem : null;
}));
@@ -125,19 +132,19 @@ function initItem(item) {
onEnter(matchedItems, matchedItems.indexOf(item));
});
}
-}
+};
-function onViewChanged(added) {
+const onViewChanged = added => {
each(added, initItem);
-}
+};
-function init() {
+const init = () => {
if (!settings.enabled) {
return;
}
event.sub('view.changed', onViewChanged);
-}
+};
init();
diff --git a/src/_h5ai/public/js/lib/ext/preview-txt.js b/src/_h5ai/public/js/lib/ext/preview-txt.js
index 97e44a70..b52e70aa 100644
--- a/src/_h5ai/public/js/lib/ext/preview-txt.js
+++ b/src/_h5ai/public/js/lib/ext/preview-txt.js
@@ -1,10 +1,11 @@
-const {each, map, keys, includes, compact} = require('../util');
-const {win, jq, marked, prism} = require('../globals');
+const {each, keys, includes, compact, dom} = require('../util');
+const {win, marked, prism} = require('../globals');
const event = require('../core/event');
const allsettings = require('../core/settings');
const preview = require('./preview');
+const XHR = win.XMLHttpRequest;
const settings = Object.assign({
enabled: false,
types: {}
@@ -12,38 +13,53 @@ const settings = Object.assign({
const tplText = '
').appendTo($text);
+ $text = dom(tplText);
+ $code = dom('
').appTo($text);
if (textContent.length < 20000) {
- $code.empty().html(prism.highlight(textContent, prism.languages[type]));
+ $code.clr().html(prism.highlight(textContent, prism.languages[type]));
} else {
- $code.empty().text(textContent);
+ $code.clr().text(textContent);
win.setTimeout(() => {
- $code.empty().html(prism.highlight(textContent, prism.languages[type]));
+ $code.clr().html(prism.highlight(textContent, prism.languages[type]));
}, 300);
}
}
win.clearTimeout(spinnerTimeoutId);
preview.showSpinner(false);
- jq('#pv-content')
- .empty()
- .append($text)
+ dom('#pv-content')
+ .clr()
+ .app($text)
.show();
onAdjustSize();
});
-}
+};
-function onEnter(items, idx) {
+const onEnter = (items, idx) => {
currentItems = items;
currentIdx = idx;
currentItem = items[idx];
@@ -111,14 +127,14 @@ function onEnter(items, idx) {
preview.setOnAdjustSize(onAdjustSize);
preview.enter();
onIdxChange(0);
-}
+};
-function initItem(item) {
+const initItem = item => {
if (item.$view && includes(keys(settings.types), item.type)) {
item.$view.find('a').on('click', ev => {
ev.preventDefault();
- const matchedItems = compact(map(jq('#items .item'), el => {
+ const matchedItems = compact(dom('#items .item').map(el => {
const matchedItem = el._item;
return includes(keys(settings.types), matchedItem.type) ? matchedItem : null;
}));
@@ -126,19 +142,17 @@ function initItem(item) {
onEnter(matchedItems, matchedItems.indexOf(item));
});
}
-}
+};
-function onViewChanged(added) {
- each(added, initItem);
-}
+const onViewChanged = added => each(added, initItem);
-function init() {
+const init = () => {
if (!settings.enabled) {
return;
}
event.sub('view.changed', onViewChanged);
-}
+};
init();
diff --git a/src/_h5ai/public/js/lib/ext/preview.js b/src/_h5ai/public/js/lib/ext/preview.js
index bda7b36b..a43fd8b3 100644
--- a/src/_h5ai/public/js/lib/ext/preview.js
+++ b/src/_h5ai/public/js/lib/ext/preview.js
@@ -1,5 +1,5 @@
-const {each, isFn, isNum} = require('../util');
-const {win, jq} = require('../globals');
+const {each, isFn, isNum, dom} = require('../util');
+const {win} = require('../globals');
const resource = require('../core/resource');
const allsettings = require('../core/settings');
const store = require('../core/store');
@@ -8,10 +8,9 @@ const store = require('../core/store');
const settings = Object.assign({
enabled: true
}, allsettings.preview);
-const $window = jq(win);
const tplOverlay =
`