Ability to pick a background image in slides
This commit is contained in:
yflory
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
};
|
||||
|
||||
@@ -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); }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user