dnrops
/
cryptpad
mirror of https://github.com/xwiki-labs/cryptpad
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add preview for mermaid graphs in code

This commit is contained in:
yflory 2020-04-03 15:01:52 +02:00
parent 3bc32f6085
commit 7ca45eac72
4 changed files with 91 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/src/less2/include/modals-ui-elements.less
View File

@ -115,6 +115,8 @@
justify-content: center;
.cp-mediatag-container {
width: 100%;
flex: 1;
min-width: 0;
media-tag {
& > * {
max-width: 100%;

82
www/common/diffMarked.js
View File

@ -289,7 +289,7 @@ define([
};
DiffMd.apply = function (newHtml, $content, common) {
var contextMenu = common.importMediaTagMenu($content);
var contextMenu = common.importMediaTagMenu();
var id = $content.attr('id');
if (!id) { throw new Error("The element must have a valid id"); }
var pattern = /(<media-tag src="([^"]*)" data-crypto-key="([^"]*)">)<\/media-tag>/g;
@ -349,6 +349,42 @@ define([
var oldDom = domFromHTML($content[0].outerHTML);
var onPreview = function ($mt) {
return function () {
var mts = [];
$content.find('media-tag, pre.mermaid').each(function (i, el) {
if (el.nodeName.toLowerCase() === "pre") {
return void mts.push({
svg: el.cloneNode(true)
});
}
var $el = $(el);
mts.push({
src: $el.attr('src'),
key: $el.attr('data-crypto-key')
});
});
// Find initial position
var idx = -1;
mts.some(function (obj, i) {
if (obj.src === $mt.attr('src')) {
idx = i;
return true;
}
});
if (idx === -1) {
mts.unshift({
src: $mt.attr('src'),
key: $mt.attr('data-crypto-key')
});
idx = 0;
}
common.getMediaTagPreview(mts, idx);
};
};
var patch = makeDiff(oldDom, Dom, id);
if (typeof(patch) === 'string') {
throw new Error(patch);
@ -359,6 +395,7 @@ define([
var $mt = $(el).contextmenu(function (e) {
e.preventDefault();
$(contextMenu.menu).data('mediatag', $(el));
$(contextMenu.menu).find('li').show();
contextMenu.show(e);
});
MediaTag(el);
@ -372,35 +409,11 @@ define([
observer.disconnect();
}
});
$mt.off('dblclick');
$mt.off('dblclick preview');
$mt.on('preview', onPreview($mt));
if ($mt.find('img').length) {
$mt.on('dblclick', function () {
var mts = [];
$content.find('media-tag').each(function (i, el) {
var $el = $(el);
mts.push({
src: $el.attr('src'),
key: $el.attr('data-crypto-key')
});
});
// Find initial position
var idx = -1;
mts.some(function (obj, i) {
if (obj.src === $mt.attr('src')) {
idx = i;
return true;
}
});
if (idx === -1) {
mts.unshift({
src: $mt.attr('src'),
key: $mt.attr('data-crypto-key')
});
idx = 0;
}
common.getMediaTagPreview(mts, idx);
$mt.trigger('preview');
});
}
});
@ -422,6 +435,19 @@ define([
// loop over mermaid elements in the rendered content
$content.find('pre.mermaid').each(function (index, el) {
var $el = $(el);
$el.off('contextmenu').on('contextmenu', function (e) {
e.preventDefault();
$(contextMenu.menu).data('mediatag', $el);
$(contextMenu.menu).find('li:not(.cp-svg)').hide();
contextMenu.show(e);
});
$el.off('dblclick preview');
$el.on('preview', onPreview($el));
$el.on('dblclick', function () {
$el.trigger('preview');
});
// since you've simply drawn the content that was supplied via markdown
// you can assume that the index of your rendered charts matches that
// of those in the markdown source.

2
www/common/drive-ui.js
View File

@ -321,7 +321,7 @@ define([
h('li', h('a.cp-app-drive-context-preview.dropdown-item', {
'tabindex': '-1',
'data-icon': faPreview,
}, 'PREVIEW')), // XXX
}, Messages.pad_mediatagPreview)),
h('li', h('a.cp-app-drive-context-open.dropdown-item', {
'tabindex': '-1',
'data-icon': faFolderOpen,

68
www/common/inner/common-mediatag.js
View File

@ -216,9 +216,13 @@ define([
var priv = metadataMgr.getPrivateData();
var left, right;
var checkSize = function () {};
var $modal = UI.createModal({
id: 'cp-mediatag-preview-modal',
onClose: function () {
$(window).off('resize', checkSize);
},
$body: $('body')
}).show().focus();
var $container = $modal.find('.cp-modal').append(h('div.cp-mediatag-outer', [
@ -233,9 +237,18 @@ define([
var $inner = $container.find('.cp-mediatag-container');
var el;
var checkSize = function () {
checkSize = function () {
if (!el) { return; }
if (el.nodeName === 'BUTTON') {
return $container.find('.cp-mediatag-container').css('height', 'auto');
}
var size = el.naturalHeight || el.videoHeight;
if ($(el).find('svg').length) {
var h = $(el).find('svg').prop('height');
size = Number(h) || (h.baseVal && h.baseVal.value);
}
if (el.nodeName !== 'IMG' && el.nodeName !== 'VIDEO') {
$container.find('.cp-mediatag-container').css('height', '100%');
}
@ -247,6 +260,8 @@ define([
}
};
$(window).on('resize', checkSize);
var $spinner = $container.find('.cp-loading-spinner-container');
var locked = false;
@ -268,11 +283,21 @@ define([
}
// Reset modal
$inner.find('media-tag').remove();
$inner.find('media-tag, pre.mermaid').detach();
$spinner.show();
// Check src and cryptkey
var cfg = tags[i];
if (cfg.svg) {
$spinner.hide();
$inner.append(cfg.svg);
el = cfg.svg;
checkSize();
locked = false;
return;
}
var src = cfg.src;
var key = cfg.key;
if (cfg.href) {
@ -286,7 +311,6 @@ define([
if (!src || !key) {
locked = false;
$spinner.hide();
// XXX show error
return void UI.log(Messages.error);
}
@ -311,7 +335,9 @@ define([
el.onload = checkSize;
return;
}
setTimeout(checkSize);
setTimeout(function () {
checkSize();
});
}
});
});
@ -324,7 +350,6 @@ define([
locked = false;
$spinner.hide();
UI.log(Messages.error);
// XXX show error
});
};
@ -366,7 +391,7 @@ define([
};
var mediatagContextMenu;
MT.importMediaTagMenu = function (common, $container) {
MT.importMediaTagMenu = function (common) {
if (mediatagContextMenu) { return mediatagContextMenu; }
// Create context menu
@ -376,10 +401,10 @@ define([
'aria-labelledBy': 'dropdownMenu',
'style': 'display:block;position:static;margin-bottom:5px;'
}, [
h('li', h('a.cp-app-code-context-open.dropdown-item', {
h('li.cp-svg', h('a.cp-app-code-context-open.dropdown-item', {
'tabindex': '-1',
'data-icon': "fa-eye",
}, Messages.fc_open)), // XXX
}, Messages.pad_mediatagPreview)),
h('li', h('a.cp-app-code-context-saveindrive.dropdown-item', {
'tabindex': '-1',
'data-icon': "fa-cloud-upload",
@ -418,32 +443,7 @@ define([
window.saveAs(media._blob.content, media.name);
}
else if ($(this).hasClass("cp-app-code-context-open")) {
var mts = [];
$container.find('media-tag').each(function (i, el) {
var $el = $(el);
mts.push({
src: $el.attr('src'),
key: $el.attr('data-crypto-key')
});
});
// Find initial position
var idx = -1;
mts.some(function (obj, i) {
if (obj.src === $mt.attr('src')) {
idx = i;
return true;
}
});
if (idx === -1) {
mts.unshift({
src: $mt.attr('src'),
key: $mt.attr('data-crypto-key')
});
idx = 0;
}
common.getMediaTagPreview(mts, idx);
$mt.trigger('preview');
}
});