Add a file picker in the slide app

This commit is contained in:
yflory 2017-06-15 11:04:55 +02:00
parent a4f45caebb
commit a237eec41e
6 changed files with 173 additions and 0 deletions

View File

@ -132,6 +132,11 @@ define(function () {
out.printCSS = "Personnaliser l'apparence (CSS):";
out.printTransition = "Activer les animations de transition";
out.filePickerButton = "Intégrer un fichier";
out.filePicker_close = "Fermer";
out.filePicker_description = "Choisissez un fichier de votre CryptDrive pour l'intégrer";
out.filePicker_filter = "Filtrez les fichiers par leur nom";
out.slideOptionsTitle = "Personnaliser la présentation";
out.slideOptionsButton = "Enregistrer (Entrée)";

View File

@ -134,6 +134,11 @@ define(function () {
out.printCSS = "Custom style rules (CSS):";
out.printTransition = "Enable transition animations";
out.filePickerButton = "Embed a file";
out.filePicker_close = "Close";
out.filePicker_description = "Choose a file from your CryptDrive to embed it";
out.filePicker_filter = "Filter files by name";
out.slideOptionsTitle = "Customize your slides";
out.slideOptionsButton = "Save (enter)";

View File

@ -131,6 +131,11 @@ define([
return store.getProxy().proxy;
}
};
common.getFO = function () {
if (store && store.getProxy()) {
return store.getProxy().fo;
}
};
var getNetwork = common.getNetwork = function () {
if (store) {
if (store.getProxy() && store.getProxy().info) {
@ -644,6 +649,23 @@ define([
});
};
common.getUserFilesList = function () {
var store = common.getStore();
var proxy = store.getProxy();
var fo = proxy.fo;
var hashes = [];
var list = fo.getFiles().filter(function (id) {
var href = fo.getFileData(id).href;
var parsed = parsePadUrl(href);
if ((parsed.type === 'file' || parsed.type === 'media')
&& hashes.indexOf(parsed.hash) === -1) {
hashes.push(parsed.hash);
return true;
}
});
return list;
};
var getUserChannelList = common.getUserChannelList = function () {
var store = common.getStore();
var proxy = store.getProxy();

View File

@ -196,6 +196,61 @@ define([
}
};
var createFileDialog = function () {
var $body = $iframe.find('body');
var $block = $body.find('#fileDialog');
if (!$block.length) {
$block = $('<div>', {id: "fileDialog"}).appendTo($body);
}
$block.html('');
$('<span>', {
'class': 'close fa fa-times',
'title': Messages.filePicker_close
}).click(function () {
$block.hide();
}).appendTo($block);
var $description = $('<p>').text(Messages.filePicker_description);
$block.append($description);
var $filter = $('<p>').appendTo($block);
var $container = $('<span>', {'class': 'fileContainer'}).appendTo($block);
var updateContainer = function () {
$container.html('');
var filter = $filter.find('.filter').val().trim();
var list = Cryptpad.getUserFilesList();
var fo = Cryptpad.getFO();
list.forEach(function (id) {
var data = fo.getFileData(id);
var name = fo.getTitle(id);
if (filter && name.toLowerCase().indexOf(filter.toLowerCase()) === -1) {
return;
}
var $span = $('<span>', {'class': 'element'}).appendTo($container);
var $inner = $('<span>').text(name);
$span.append($inner).click(function () {
var cleanName = name.replace(/[\[\]]/g, '');
var text = '!['+cleanName+']('+data.href+')';
editor.replaceSelection(text);
$block.hide();
console.log(data.href);
});
});
};
var to;
$('<input>', {
type: 'text',
'class': 'filter',
'placeholder': Messages.filePicker_filter
}).appendTo($filter).on('keypress', function () {
if (to) { window.clearTimeout(to); }
to = window.setTimeout(updateContainer, 300);
});
updateContainer();
$body.keydown(function (e) {
if (e.which === 27) { $block.hide(); }
});
$block.show();
};
var createPrintDialog = function () {
var slideOptionsTmp = {
title: false,
@ -357,6 +412,14 @@ define([
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad);
$('<button>', {
title: Messages.filePickerButton,
'class': 'rightside-button fa fa-picture-o',
style: 'font-size: 17px'
}).click(function () {
$('body').append(createFileDialog());
}).appendTo($rightside);
var $printButton = $('<button>', {
title: Messages.printButtonTitle,
'class': 'rightside-button fa fa-print',

View File

@ -345,3 +345,42 @@ body .CodeMirror-focused .cm-matchhighlight {
font-size: 10%;
line-height: 110%;
}
#fileDialog {
position: absolute;
background-color: rgba(200, 200, 200, 0.8);
top: 15vh;
bottom: 15vh;
left: 10vw;
right: 10vw;
border: 1px solid black;
z-index: 10;
overflow: auto;
display: none;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
text-align: center;
}
#fileDialog .close {
position: absolute;
top: 0;
right: 0;
padding: 5px;
cursor: pointer;
}
#fileDialog .element {
cursor: pointer;
display: inline-flex;
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 5px;
overflow: hidden;
word-wrap: break-word;
background-color: white;
padding: 5px;
align-items: center;
}
#fileDialog .element span {
width: 100px;
text-align: center;
}

View File

@ -308,3 +308,42 @@ div#modal #content, #print {
}
}
}
#fileDialog {
position: absolute;
background-color: rgba(200, 200, 200, 0.8);
top: 15vh; bottom: 15vh;
left: 10vw; right: 10vw;
border: 1px solid black;
z-index: 10;
overflow: auto;
display: none;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
text-align: center;
.close {
position: absolute;
top: 0;
right: 0;
padding: 5px;
cursor: pointer;
}
.element {
cursor: pointer;
display: inline-flex;
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 5px;
overflow: hidden;
word-wrap: break-word;
background-color: white;
padding: 5px;
align-items: center;
span {
width: 100px;
text-align: center;
}
}
}