diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 58babab3f..a79cb382f 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -153,6 +153,11 @@ define(function () { out.printTitle = "Afficher le titre du pad"; out.printCSS = "Personnaliser l'apparence (CSS):"; out.printTransition = "Activer les animations de transition"; + out.printBackground = "Utiliser une image d'arrière-plan"; + out.printBackgroundButton = "Choisir une image"; + out.printBackgroundValue = "Arrière-plan actuel: {0}"; + out.printBackgroundNoValue = "Aucun arrière-plan affiché"; + out.printBackgroundRemove = "Supprimer cet arrière-plan"; out.filePickerButton = "Intégrer un fichier stocké dans CryptDrive"; out.filePicker_close = "Fermer"; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index ecc4060ec..1d7fd8b15 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -156,6 +156,11 @@ define(function () { out.printTitle = "Display the pad title"; out.printCSS = "Custom style rules (CSS):"; out.printTransition = "Enable transition animations"; + out.printBackground = "Use a background image"; + out.printBackgroundButton = "Pick an image"; + out.printBackgroundValue = "Current background: {0}"; + out.printBackgroundNoValue = "No background image displayed"; + out.printBackgroundRemove = "Remove this background image"; out.filePickerButton = "Embed a file stored in CryptDrive"; out.filePicker_close = "Close"; diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js index cfb3462c3..9c6f7e4c9 100644 --- a/www/common/sframe-app-framework.js +++ b/www/common/sframe-app-framework.js @@ -368,9 +368,9 @@ define([ if (data.type !== 'file') { console.log('unhandled embed type ' + data.type); return; } var privateDat = cpNfInner.metadataMgr.getPrivateData(); var origin = privateDat.fileHost || privateDat.origin; - var src = origin + data.src; + var src = data.src = origin + data.src; mediaTagEmbedder($('')); + '" data-crypto-key="cryptpad:' + data.key + '">'), data); } }); $embedButton = $('', { diff --git a/www/filepicker/inner.js b/www/filepicker/inner.js index a45ab6b65..1409ad556 100644 --- a/www/filepicker/inner.js +++ b/www/filepicker/inner.js @@ -45,6 +45,7 @@ define([ sframeChan.event("EV_FILE_PICKED", { type: parsed.type, src: src, + name: data.name, key: parsed.hashData.key }); return; @@ -52,6 +53,7 @@ define([ sframeChan.event("EV_FILE_PICKED", { type: parsed.type, href: data.url, + name: data.name }); }; @@ -66,8 +68,8 @@ define([ APP.FM = common.createFileManager(fmConfig); // Create file picker - var onSelect = function (url) { - onFilePicked({url: url}); + var onSelect = function (url, name) { + onFilePicked({url: url, name: name}); }; var data = { FM: APP.FM @@ -132,7 +134,7 @@ define([ $('', {'class': 'cp-filepicker-content-element-name'}).text(name) .appendTo($span); $span.click(function () { - if (typeof onSelect === "function") { onSelect(data.href); } + if (typeof onSelect === "function") { onSelect(data.href, name); } }); // Add thumbnail if it exists diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less index b79dbc49b..8926f52eb 100644 --- a/www/slide/app-slide.less +++ b/www/slide/app-slide.less @@ -79,6 +79,28 @@ h6 { font-size: 24px; } } } } +.cp-app-slide-shown { + .cp-app-slide-container { + position: relative; + &> media-tag { + position: absolute; + top:0; right: 0; bottom: 0; left: 0; + z-index: -1; + &> img { + width: 100vw; + height: 56.25vw; // height:width ratio = 9/16 = .5625 + max-height: 100vh; + max-width: 177.78vh; // 16/9 = 1.778 + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + } + } + } +} .cp-app-slide-preview { .cp-app-slide-viewer { width: 50vw; @@ -91,6 +113,26 @@ h6 { font-size: 24px; } display: block; height: 100%; #cp-app-slide-modal-content { + .cp-app-slide-container { + position: relative; + &> media-tag { + position: absolute; + top:0; right: 0; bottom: 0; left: 0; + z-index: -1; + &> img { + width: 50vw; + height: 28.125vw; + max-height: ~"calc(100vh - 96px)"; + max-width: ~"calc(16 / 9 * (100vh - 96px))"; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + } + } + } .cp-app-slide-container { width: 100%; } @@ -115,6 +157,11 @@ h6 { font-size: 24px; } /* Slide position (print mode) */ @ratio:0.9; +@media print { + #cp-app-slide-editor-container { + display: none; + } +} #cp-app-slide-print { position: relative; display: none; @@ -139,6 +186,24 @@ h6 { font-size: 24px; } } } + .cp-app-slide-container { + position: relative; + &> media-tag { + position: absolute; + top:0; right: 0; bottom: 0; left: 0; + z-index: -1; + &> img { + width: 90vw; + height: 50.625vw; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + } + } + } .cp-app-slide-container { width: 90vw; height: 100vh; diff --git a/www/slide/inner.js b/www/slide/inner.js index 9a8f39ebf..8b4610ca5 100644 --- a/www/slide/inner.js +++ b/www/slide/inner.js @@ -113,11 +113,16 @@ define([ $toolbarDrawer.append($printButton); }; + // 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, $toolbarDrawer) { var metadataMgr = framework._.cpNfInner.metadataMgr; var updateSlideOptions = function (newOpt) { if (JSONSortify(newOpt) !== JSONSortify(slideOptions)) { - $.extend(slideOptions, newOpt); + $.extend(true, slideOptions, newOpt); // TODO: manage realtime + cursor in the "options" modal ?? Slide.updateOptions(); } @@ -129,17 +134,19 @@ define([ metadataMgr.updateMetadata(metadata); framework.localChange(); }; + var common = framework._.sfCommon; var createPrintDialog = function (invalidStyle) { var slideOptionsTmp = { title: false, slide: false, date: false, + background: false, transition: true, style: '', styleLess: '' }; - $.extend(slideOptionsTmp, slideOptions); + $.extend(true, slideOptionsTmp, slideOptions); var $container = $(''); var $container2 = $('').appendTo($container); var $div = $('').appendTo($container2); @@ -194,6 +201,55 @@ define([ $('', {'for': 'cp-app-slide-options-transition'}).text(Messages.printTransition) .appendTo($p); $p.append($('')); + $p.append($('')); + // Background image + $('', {'for': 'cp-app-slide-options-bg'}).text(Messages.printBackground) + .appendTo($p); + if (common.isLoggedIn()) { + $p.append($('')); + $('', { + title: Messages.filePickerButton, + 'class': '', + style: 'font-size: 17px', + id: 'cp-app-slide-options-bg' + }).click(function () { + Background.isBackground = true; + var pickerCfg = { + types: ['file'], + where: ['root'], + filter: { + fileType: ['image/'] + } + }; + common.openFilePicker(pickerCfg); + }).text(Messages.printBackgroundButton).appendTo($p); + } + $p.append($('')); + var $bgValue = $('').appendTo($p); + var refreshValue = function () { + $bgValue.html(''); + if (slideOptionsTmp.background && slideOptionsTmp.background.name) { + $bgValue.append(Messages._getKey("printBackgroundValue", [slideOptionsTmp.background.name])); + $('', { + 'class': 'fa fa-times', + title: Messages.printBackgroundRemove + }).click(function () { + slideOptionsTmp.background = false; + refreshValue(); + }).appendTo($bgValue); + } else { + $bgValue.append(Messages.printBackgroundNoValue); + } + }; + refreshValue(); + if (common.isLoggedIn()) { + Background.todo = function (newData) { + slideOptionsTmp.background = newData; + refreshValue(); + }; + } + $p.append($('')); + $p.append($('')); // CSS $('', {'for': 'cp-app-slide-options-css'}).text(Messages.printCSS).appendTo($p); $p.append($('')); @@ -348,7 +404,15 @@ define([ }; var mkFilePicker = function (framework, editor) { - framework.setMediaTagEmbedder(function (mt) { + 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); }); }; diff --git a/www/slide/slide.js b/www/slide/slide.js index f0ef35fe0..adc0a808b 100644 --- a/www/slide/slide.js +++ b/www/slide/slide.js @@ -75,7 +75,11 @@ define([ if (typeof(Slide.content) !== 'string') { return; } var c = Slide.content; - var m = ''+DiffMd.render(c).replace(separatorReg, '')+''; + var mediatagBg = ''; + if (options.background && options.background.mt) { + mediatagBg = options.background.mt; + } + var m = '' + mediatagBg + ''+DiffMd.render(c).replace(separatorReg, '' + mediatagBg + '')+''; try { DiffMd.apply(m, $content); } catch (e) { return console.error(e); }