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

Ability to pick a background image in slides

This commit is contained in:
yflory 2018-01-04 17:22:01 +01:00
parent 8469119cb1
commit 1ec41f4e09
7 changed files with 154 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
customize.dist/translations/messages.fr.js
View File

@ -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 = "<b>Arrière-plan actuel:</b> <em>{0}</em>";
out.printBackgroundNoValue = "<em>Aucun arrière-plan affiché</em>";
out.printBackgroundRemove = "Supprimer cet arrière-plan";
out.filePickerButton = "Intégrer un fichier stocké dans CryptDrive";
out.filePicker_close = "Fermer";

5
customize.dist/translations/messages.js
View File

@ -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 = "<b>Current background:</b> <em>{0}</em>";
out.printBackgroundNoValue = "<em>No background image displayed</em>";
out.printBackgroundRemove = "Remove this background image";
out.filePickerButton = "Embed a file stored in CryptDrive";
out.filePicker_close = "Close";

4
www/common/sframe-app-framework.js
View File

@ -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($('<media-tag src="' + src +
'" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'));
'" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'), data);
}
});
$embedButton = $('<button>', {

8
www/filepicker/inner.js
View File

@ -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([
$('<span>', {'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

65
www/slide/app-slide.less
View File

@ -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;

70
www/slide/inner.js
View File

@ -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 = $('<div class="alertify">');
var $container2 = $('<div class="dialog">').appendTo($container);
var $div = $('<div id="printOptions">').appendTo($container2);
@ -194,6 +201,55 @@ define([
$('<label>', {'for': 'cp-app-slide-options-transition'}).text(Messages.printTransition)
.appendTo($p);
$p.append($('<br>'));
$p.append($('<br>'));
// Background image
$('<label>', {'for': 'cp-app-slide-options-bg'}).text(Messages.printBackground)
.appendTo($p);
if (common.isLoggedIn()) {
$p.append($('<br>'));
$('<button>', {
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($('<br>'));
var $bgValue = $('<div>').appendTo($p);
var refreshValue = function () {
$bgValue.html('');
if (slideOptionsTmp.background && slideOptionsTmp.background.name) {
$bgValue.append(Messages._getKey("printBackgroundValue", [slideOptionsTmp.background.name]));
$('<button>', {
'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($('<br>'));
$p.append($('<br>'));
// CSS
$('<label>', {'for': 'cp-app-slide-options-css'}).text(Messages.printCSS).appendTo($p);
$p.append($('<br>'));
@ -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);
});
};

6
www/slide/slide.js
View File

@ -75,7 +75,11 @@ define([
if (typeof(Slide.content) !== 'string') { return; }
var c = Slide.content;
var m = '<span class="cp-app-slide-container"><span class="'+slideClass+'">'+DiffMd.render(c).replace(separatorReg, '</span></span><span class="cp-app-slide-container"><span class="'+slideClass+'">')+'</span></span>';
var mediatagBg = '';
if (options.background && options.background.mt) {
mediatagBg = options.background.mt;
}
var m = '<span class="cp-app-slide-container">' + mediatagBg + '<span class="'+slideClass+'">'+DiffMd.render(c).replace(separatorReg, '</span></span><span class="cp-app-slide-container">' + mediatagBg + '<span class="'+slideClass+'">')+'</span></span>';
try { DiffMd.apply(m, $content); } catch (e) { return console.error(e); }