web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add preview for mermaid graphs in code

Browse Source
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; justify-content: center;
.cp-mediatag-container { .cp-mediatag-container {
width: 100%; width: 100%;
flex: 1;
min-width: 0;
media-tag { media-tag {
& > * { & > * {
max-width: 100%; max-width: 100%;

82
www/common/diffMarked.js
View File

@ -289,7 +289,7 @@ define([
}; };
DiffMd.apply = function (newHtml, $content, common) { DiffMd.apply = function (newHtml, $content, common) {
var contextMenu = common.importMediaTagMenu($content); var contextMenu = common.importMediaTagMenu();
var id = $content.attr('id'); var id = $content.attr('id');
if (!id) { throw new Error("The element must have a valid id"); } if (!id) { throw new Error("The element must have a valid id"); }
var pattern = /(<media-tag src="([^"]*)" data-crypto-key="([^"]*)">)<\/media-tag>/g; var pattern = /(<media-tag src="([^"]*)" data-crypto-key="([^"]*)">)<\/media-tag>/g;
@ -349,6 +349,42 @@ define([
var oldDom = domFromHTML($content[0].outerHTML); 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); var patch = makeDiff(oldDom, Dom, id);
if (typeof(patch) === 'string') { if (typeof(patch) === 'string') {
throw new Error(patch); throw new Error(patch);
@ -359,6 +395,7 @@ define([
var $mt = $(el).contextmenu(function (e) { var $mt = $(el).contextmenu(function (e) {
e.preventDefault(); e.preventDefault();
$(contextMenu.menu).data('mediatag', $(el)); $(contextMenu.menu).data('mediatag', $(el));
$(contextMenu.menu).find('li').show();
contextMenu.show(e); contextMenu.show(e);
}); });
MediaTag(el); MediaTag(el);
@ -372,35 +409,11 @@ define([
observer.disconnect(); observer.disconnect();
} }
}); });
$mt.off('dblclick'); $mt.off('dblclick preview');
$mt.on('preview', onPreview($mt));
if ($mt.find('img').length) { if ($mt.find('img').length) {
$mt.on('dblclick', function () { $mt.on('dblclick', function () {
var mts = []; $mt.trigger('preview');
$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);
}); });
} }
}); });
@ -422,6 +435,19 @@ define([
// loop over mermaid elements in the rendered content // loop over mermaid elements in the rendered content
$content.find('pre.mermaid').each(function (index, el) { $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 // since you've simply drawn the content that was supplied via markdown
// you can assume that the index of your rendered charts matches that // you can assume that the index of your rendered charts matches that
// of those in the markdown source. // 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', { h('li', h('a.cp-app-drive-context-preview.dropdown-item', {
'tabindex': '-1', 'tabindex': '-1',
'data-icon': faPreview, 'data-icon': faPreview,
}, 'PREVIEW')), // XXX }, Messages.pad_mediatagPreview)),
h('li', h('a.cp-app-drive-context-open.dropdown-item', { h('li', h('a.cp-app-drive-context-open.dropdown-item', {
'tabindex': '-1', 'tabindex': '-1',
'data-icon': faFolderOpen, 'data-icon': faFolderOpen,

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

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