diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less index 968fa6f70..a5869aa6a 100644 --- a/customize.dist/src/less2/include/modals-ui-elements.less +++ b/customize.dist/src/less2/include/modals-ui-elements.less @@ -115,6 +115,8 @@ justify-content: center; .cp-mediatag-container { width: 100%; + flex: 1; + min-width: 0; media-tag { & > * { max-width: 100%; diff --git a/www/common/diffMarked.js b/www/common/diffMarked.js index 852fa2599..ccf240685 100644 --- a/www/common/diffMarked.js +++ b/www/common/diffMarked.js @@ -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>/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. diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js index 4523c99f5..7c76d3255 100644 --- a/www/common/drive-ui.js +++ b/www/common/drive-ui.js @@ -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, diff --git a/www/common/inner/common-mediatag.js b/www/common/inner/common-mediatag.js index a97f05618..a4145c6f9 100644 --- a/www/common/inner/common-mediatag.js +++ b/www/common/inner/common-mediatag.js @@ -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'); } });