mirror of https://github.com/xwiki-labs/cryptpad
Add a file picker in the slide app
This commit is contained in:
yflory
parent
a4f45caebb
commit
a237eec41e
|
|
@ -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)";
|
||||
|
||||
|
|
|
|||
|
|
@ -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)";
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 = '';
|
||||
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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue