Move the file picker in common

pull/1/head
yflory 8 years ago
parent 09793e0d7d
commit a80b00a765

@ -138,3 +138,56 @@
background: white; background: white;
} }
} }
.fileIcon {
li {
display: inline-block;
margin: 10px 10px;
width: 140px;
height: 140px;
text-align: center;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 5px;
padding-bottom: 5px;
&:not(.selected):not(.selectedTmp) {
border: 1px solid #CCC;
}
.name {
width: 100%;
height: 48px;
margin: 8px 0;
display: inline-block;
//align-items: center;
//justify-content: center;
overflow: hidden;
//text-overflow: ellipsis;
word-wrap: break-word;
}
.truncated {
display: block;
position: absolute;
bottom: 0px;
left: 0; right: 0;
text-align: center;
}
img.icon {
height: 48px;
max-height: none;
max-width: none;
margin: 8px 0;
}
.fa {
display: block;
margin: auto;
font-size: 48px;
margin: 8px 0;
text-align: center;
&.listonly {
display: none;
}
}
}
}

@ -1098,6 +1098,7 @@ define([
} }
break; break;
case 'upload': case 'upload':
console.log('UPLOAD');
button = $('<button>', { button = $('<button>', {
'class': 'btn btn-primary new', 'class': 'btn btn-primary new',
title: Messages.uploadButtonTitle, title: Messages.uploadButtonTitle,
@ -1403,6 +1404,67 @@ define([
} }
}; };
common.createFileDialog = function (cfg) {
var $body = cfg.$body || $('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 = common.getUserFilesList();
var fo = common.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 () {
if (typeof cfg.onSelect === "function") { cfg.onSelect(data.href); }
$block.hide();
});
});
};
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);
});
//$filter.append(' '+Messages.or+' ');
var data = {FM: cfg.data.FM};
$filter.append(common.createButton('upload', false, data, function () {
$block.hide();
}));
updateContainer();
$body.keydown(function (e) {
if (e.which === 27) { $block.hide(); }
});
$block.show();
};
// Create a button with a dropdown menu // Create a button with a dropdown menu
// input is a config object with parameters: // input is a config object with parameters:
// - container (optional): the dropdown container (span) // - container (optional): the dropdown container (span)

@ -164,7 +164,6 @@ define([
var $mts = $content.find('media-tag:not(:has(*))'); var $mts = $content.find('media-tag:not(:has(*))');
$mts.each(function (i, el) { $mts.each(function (i, el) {
MediaTag(el); MediaTag(el);
console.log(el.outerHTML);
var observer = new MutationObserver(function(mutations) { var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) { mutations.forEach(function(mutation) {
if (mutation.type === 'childList') { if (mutation.type === 'childList') {

@ -468,62 +468,15 @@ span {
} }
div.grid { div.grid {
padding: 20px; padding: 20px;
.fileIcon;
li { li {
display: inline-block;
margin: 10px 10px;
width: 140px;
height: 140px;
text-align: center;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
padding-top: 5px;
padding-bottom: 5px;
&:not(.selected):not(.selectedTmp) {
border: 1px solid #CCC;
}
.name {
width: 100%;
height: 48px;
margin: 8px 0;
display: inline-block;
//align-items: center;
//justify-content: center;
overflow: hidden;
//text-overflow: ellipsis;
word-wrap: break-word;
}
&.element { &.element {
position: relative; position: relative;
} }
.truncated {
display: block;
position: absolute;
bottom: 0px;
left: 0; right: 0;
text-align: center;
}
input { input {
width: 100%; width: 100%;
margin-top: 5px; margin-top: 5px;
} }
img.icon {
height: 48px;
max-height: none;
max-width: none;
margin: 8px 0;
}
.fa {
display: block;
margin: auto;
font-size: 48px;
margin: 8px 0;
text-align: center;
&.listonly {
display: none;
}
}
} }
.listElement { .listElement {
display: none; display: none;

@ -199,70 +199,6 @@ 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 parsed = Cryptpad.parsePadUrl(data.href);
var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
editor.replaceSelection(mt);
//var cleanName = name.replace(/[\[\]]/g, '');
//var text = '!['+cleanName+']('+data.href+')';
//editor.replaceSelection(text);
$block.hide();
});
});
};
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);
});
$filter.append(' '+Messages.or+' ');
var data = {FM: APP.FM};
$filter.append(Cryptpad.createButton('upload', false, data, function () {
$block.hide();
}));
updateContainer();
$body.keydown(function (e) {
if (e.which === 27) { $block.hide(); }
});
$block.show();
};
var createPrintDialog = function () { var createPrintDialog = function () {
var slideOptionsTmp = { var slideOptionsTmp = {
title: false, title: false,
@ -427,12 +363,23 @@ define([
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb); var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad); $rightside.append($forgetPad);
var fileDialogCfg = {
$body: $iframe.find('body'),
onSelect: function (href) {
var parsed = Cryptpad.parsePadUrl(href);
var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel);
var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName;
var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>';
editor.replaceSelection(mt);
},
data: APP
};
$('<button>', { $('<button>', {
title: Messages.filePickerButton, title: Messages.filePickerButton,
'class': 'rightside-button fa fa-picture-o', 'class': 'rightside-button fa fa-picture-o',
style: 'font-size: 17px' style: 'font-size: 17px'
}).click(function () { }).click(function () {
$('body').append(createFileDialog()); Cryptpad.createFileDialog(fileDialogCfg);
}).appendTo($rightside); }).appendTo($rightside);
var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true); var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true);

Loading…
Cancel
Save