From 03e6c8dacc91098f181c19f3a9778c941ddc0971 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 4 Jun 2020 11:47:15 +0200 Subject: [PATCH] Fix background image in slides --- www/common/inner/common-mediatag.js | 11 +++++++++++ www/common/sframe-common.js | 1 + www/slide/app-slide.less | 5 +++-- www/slide/inner.js | 25 +++++++++++-------------- www/slide/slide.js | 6 +++++- 5 files changed, 31 insertions(+), 17 deletions(-) diff --git a/www/common/inner/common-mediatag.js b/www/common/inner/common-mediatag.js index 295d8b6b5..3c1f340af 100644 --- a/www/common/inner/common-mediatag.js +++ b/www/common/inner/common-mediatag.js @@ -26,6 +26,17 @@ define([ // Cache of the avatars outer html (including ) var avatars = {}; + MT.getMediaTag = function (common, data) { + var metadataMgr = common.getMetadataMgr(); + var privateDat = metadataMgr.getPrivateData(); + var origin = privateDat.fileHost || privateDat.origin; + var src = data.src = data.src.slice(0,1) === '/' ? origin + data.src : data.src; + return h('media-tag', { + src: src, + 'data-crypto-key': 'cryptpad:'+data.key + }); + }; + MT.getCursorAvatar = function (cursor) { var html = ''; html += (cursor.avatar && avatars[cursor.avatar]) || ''; diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index 3d5df4f03..48e6782ef 100644 --- a/www/common/sframe-common.js +++ b/www/common/sframe-common.js @@ -106,6 +106,7 @@ define([ funcs.addMentions = callWithCommon(UIElements.addMentions); funcs.importMediaTagMenu = callWithCommon(MT.importMediaTagMenu); funcs.getMediaTagPreview = callWithCommon(MT.getMediaTagPreview); + funcs.getMediaTag = callWithCommon(MT.getMediaTag); // Thumb funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail); diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less index 6cf4915ab..09abe9fb2 100644 --- a/www/slide/app-slide.less +++ b/www/slide/app-slide.less @@ -12,12 +12,13 @@ @color: @colortheme_slide-color ); + @slide-default-bg: #e3e3e3; + // body font-size: unset; display: flex; flex-flow: column; - @slide-default-bg: #000; .size (@n) { // font-size: @n * 1vmin; // line-height: @n * 1.1vmin; @@ -124,7 +125,7 @@ &> img { width: 50vw; height: 28.125vw; - max-height: ~"calc(100vh - 96px)"; + max-height: ~"calc(100vh - 96px)" !important; max-width: ~"calc(16 / 9 * (100vh - 96px))"; position: absolute; left: 0; diff --git a/www/slide/inner.js b/www/slide/inner.js index 8dcbe0654..f071ef2b9 100644 --- a/www/slide/inner.js +++ b/www/slide/inner.js @@ -130,7 +130,6 @@ define([ // Flag to check if a file from the filepicker is a mediatag for the slides or a background image var Background = { - isBackground: false }; var mkSlideOptionsButton = function (framework, slideOptions) { @@ -208,7 +207,6 @@ define([ style: 'font-size: 17px', id: 'cp-app-slide-options-bg' }).click(function () { - Background.isBackground = true; var pickerCfg = { types: ['file'], where: ['root'], @@ -216,7 +214,12 @@ define([ fileType: ['image/'] } }; - common.openFilePicker(pickerCfg); + common.openFilePicker(pickerCfg, function (data) { + if (data.type === 'file') { + data.mt = common.getMediaTag(data).outerHTML; + Background.todo(data); + } + }); }).text(Messages.printBackgroundButton).appendTo($p); } $p.append($('
')); @@ -330,7 +333,7 @@ define([ }); }; - var mkColorConfiguration = function (framework, $modal) { + var mkColorConfiguration = function (framework, $modal, slideOptions) { var textColor; var backColor; var metadataMgr = framework._.cpNfInner.metadataMgr; @@ -341,11 +344,13 @@ define([ $modal.css('color', text); $modal.css('border-color', text); $('#' + SLIDE_COLOR_ID).find('i').css('color', text); + slideOptions.textColor = text; } if (back) { backColor = back; - $modal.css('background-color', back); + //$modal.css('background-color', back); $('#' + SLIDE_BACKCOLOR_ID).find('i').css('color', back); + slideOptions.bgColor = back; } }; var updateLocalColors = function (text, back) { @@ -411,14 +416,6 @@ define([ var mkFilePicker = function (framework, editor) { framework.setMediaTagEmbedder(function (mt, data) { - if (Background.isBackground) { - if (data.type === 'file') { - data.mt = mt[0].outerHTML; - Background.todo(data); - } - Background.isBackground = false; - return; - } editor.replaceSelection($(mt)[0].outerHTML); }); }; @@ -477,7 +474,7 @@ define([ mkThemeButton(framework); mkPrintButton(framework, editor, $content, $print); mkSlideOptionsButton(framework, slideOptions, $toolbarDrawer); - var colors = mkColorConfiguration(framework, $modal); + var colors = mkColorConfiguration(framework, $modal, slideOptions); mkFilePicker(framework, editor); mkSlidePreviewPane(framework, $contentContainer); diff --git a/www/slide/slide.js b/www/slide/slide.js index 88ef757ac..64c0910d2 100644 --- a/www/slide/slide.js +++ b/www/slide/slide.js @@ -93,7 +93,11 @@ define([ if (options.background && options.background.mt) { mediatagBg = options.background.mt; } - var m = '' + mediatagBg + ''+DiffMd.render(c).replace(separatorReg, '' + mediatagBg + '')+''; + var bgColor = ''; + if (options.bgColor && !mediatagBg) { + bgColor = 'style="background-color:'+options.bgColor+';"'; + } + var m = '' + mediatagBg + ''+DiffMd.render(c).replace(separatorReg, '' + mediatagBg + '')+''; try { DiffMd.apply(m, $content, Common); } catch (e) { return console.error(e); }