mirror of https://github.com/xwiki-labs/cryptpad
Ability to import mediatags to the drive
This commit is contained in:
parent
2bb7e68792
commit
ee1027ceb9
|
@ -0,0 +1,19 @@
|
|||
@import (reference) "./colortheme-all.less";
|
||||
|
||||
.contextmenu_main() {
|
||||
--LessLoader_require: LessLoader_currentFile();
|
||||
};
|
||||
& {
|
||||
.cp-contextmenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50000;
|
||||
li {
|
||||
padding: 0;
|
||||
font-size: @colortheme_app-font-size;
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -3,6 +3,7 @@
|
|||
@import (reference) './fileupload.less';
|
||||
@import (reference) './alertify.less';
|
||||
@import (reference) './corner.less';
|
||||
@import (reference) './contextmenu.less';
|
||||
@import (reference) './tokenfield.less';
|
||||
@import (reference) './creation.less';
|
||||
@import (reference) './tippy.less';
|
||||
|
@ -29,6 +30,7 @@
|
|||
);
|
||||
.alertify_main();
|
||||
.corner_main();
|
||||
.contextmenu_main();
|
||||
.fileupload_main();
|
||||
.tokenfield_main();
|
||||
.tippy_main();
|
||||
|
@ -63,6 +65,7 @@
|
|||
.fileupload_main();
|
||||
.alertify_main();
|
||||
.corner_main();
|
||||
.contextmenu_main();
|
||||
.tippy_main();
|
||||
.checkmark_main(20px);
|
||||
.password_main();
|
||||
|
|
|
@ -252,6 +252,8 @@ define(function () {
|
|||
out.pad_mediatagRatio = "Keep ratio";
|
||||
out.pad_mediatagBorder = "Border width (px)";
|
||||
out.pad_mediatagPreview = "Preview";
|
||||
out.pad_mediatagImport = 'Save in CryptDrive';
|
||||
out.pad_mediatagOptions = 'Image properties';
|
||||
|
||||
// Kanban
|
||||
out.kanban_newBoard = "New board";
|
||||
|
|
|
@ -110,7 +110,7 @@ define([
|
|||
return;
|
||||
}
|
||||
$previewContainer.removeClass('cp-app-code-preview-isempty');
|
||||
DiffMd.apply(DiffMd.render(editor.getValue()), $preview);
|
||||
DiffMd.apply(DiffMd.render(editor.getValue()), $preview, framework._.sfCommon);
|
||||
} catch (e) { console.error(e); }
|
||||
};
|
||||
var drawPreview = Util.throttle(function () {
|
||||
|
|
|
@ -2361,5 +2361,96 @@ define([
|
|||
|
||||
};
|
||||
|
||||
var createContextMenu = function (menu) {
|
||||
var $menu = $(menu).appendTo($('body'));
|
||||
|
||||
var display = function (e) {
|
||||
$menu.css({ display: "block" });
|
||||
var h = $menu.outerHeight();
|
||||
var w = $menu.outerWidth();
|
||||
var wH = window.innerHeight;
|
||||
var wW = window.innerWidth;
|
||||
if (h > wH) {
|
||||
$menu.css({
|
||||
top: '0px',
|
||||
bottom: ''
|
||||
});
|
||||
} else if (e.pageY + h <= wH) {
|
||||
$menu.css({
|
||||
top: e.pageY+'px',
|
||||
bottom: ''
|
||||
});
|
||||
} else {
|
||||
$menu.css({
|
||||
bottom: '0px',
|
||||
top: ''
|
||||
});
|
||||
}
|
||||
if(w > wW) {
|
||||
$menu.css({
|
||||
left: '0px',
|
||||
right: ''
|
||||
});
|
||||
} else if (e.pageX + w <= wW) {
|
||||
$menu.css({
|
||||
left: e.pageX+'px',
|
||||
right: ''
|
||||
});
|
||||
} else {
|
||||
$menu.css({
|
||||
left: '',
|
||||
right: '0px',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var hide = function () {
|
||||
$menu.hide();
|
||||
};
|
||||
var remove = function () {
|
||||
$menu.remove();
|
||||
};
|
||||
|
||||
$('body').click(hide);
|
||||
|
||||
return {
|
||||
menu: menu,
|
||||
show: display,
|
||||
hide: hide,
|
||||
remove: remove
|
||||
};
|
||||
};
|
||||
|
||||
var mediatagContextMenu;
|
||||
UIElements.importMediaTagMenu = function (common) {
|
||||
if (mediatagContextMenu) { return mediatagContextMenu; }
|
||||
|
||||
// Create context menu
|
||||
var menu = h('div.cp-contextmenu.dropdown.cp-unselectable', [
|
||||
h('ul.dropdown-menu', {
|
||||
'role': 'menu',
|
||||
'aria-labelledBy': 'dropdownMenu',
|
||||
'style': 'display:block;position:static;margin-bottom:5px;'
|
||||
}, [
|
||||
h('li', h('a.dropdown-item', {
|
||||
'tabindex': '-1',
|
||||
}, Messages.pad_mediatagImport))
|
||||
])
|
||||
]);
|
||||
var m = createContextMenu(menu);
|
||||
|
||||
mediatagContextMenu = m;
|
||||
|
||||
var $menu = $(m.menu);
|
||||
$menu.on('click', 'a', function (e) {
|
||||
e.stopPropagation();
|
||||
m.hide();
|
||||
var $mt = $menu.data('mediatag');
|
||||
common.importMediaTag($mt);
|
||||
});
|
||||
|
||||
return m;
|
||||
};
|
||||
|
||||
return UIElements;
|
||||
});
|
||||
|
|
|
@ -166,7 +166,8 @@ define([
|
|||
return patch;
|
||||
};
|
||||
|
||||
DiffMd.apply = function (newHtml, $content) {
|
||||
DiffMd.apply = function (newHtml, $content, common) {
|
||||
var contextMenu = common.importMediaTagMenu();
|
||||
var id = $content.attr('id');
|
||||
if (!id) { throw new Error("The element must have a valid id"); }
|
||||
var pattern = /(<media-tag src="([^"]*)" data-crypto-key="([^"]*)">)<\/media-tag>/g;
|
||||
|
@ -192,6 +193,11 @@ define([
|
|||
DD.apply($content[0], patch);
|
||||
var $mts = $content.find('media-tag:not(:has(*))');
|
||||
$mts.each(function (i, el) {
|
||||
$(el).contextmenu(function (e) {
|
||||
e.preventDefault();
|
||||
$(contextMenu.menu).data('mediatag', $(el));
|
||||
contextMenu.show(e);
|
||||
});
|
||||
MediaTag(el);
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
|
|
|
@ -390,6 +390,7 @@
|
|||
var end = function (decrypted) {
|
||||
process(mediaObject, decrypted, cfg, function (err) {
|
||||
if (err) { return void emit('error', err); }
|
||||
mediaObject._blob = decrypted;
|
||||
emit('complete', decrypted);
|
||||
});
|
||||
};
|
||||
|
|
|
@ -18,6 +18,9 @@ var debug = function (msg) { console.log(msg); };
|
|||
|
||||
var init = function (client, cb) {
|
||||
debug('SharedW INIT');
|
||||
require.config({
|
||||
waitSeconds: 600
|
||||
});
|
||||
|
||||
require(['/api/config?cb=' + (+new Date()).toString(16)], function (ApiConfig) {
|
||||
if (ApiConfig.requireConf) { require.config(ApiConfig.requireConf); }
|
||||
|
|
|
@ -379,6 +379,29 @@ define([
|
|||
});
|
||||
});
|
||||
|
||||
sframeChan.on('Q_IMPORT_MEDIATAG', function (obj, cb) {
|
||||
var key = obj.key;
|
||||
var channel = obj.channel;
|
||||
var hash = Utils.Hash.getFileHashFromKeys({
|
||||
version: 1,
|
||||
channel: channel,
|
||||
keys: {
|
||||
fileKeyStr: key
|
||||
}
|
||||
});
|
||||
var href = '/file/#' + hash;
|
||||
var data = {
|
||||
title: obj.name,
|
||||
href: href,
|
||||
channel: channel,
|
||||
owners: obj.owners,
|
||||
forceSave: true,
|
||||
};
|
||||
Cryptpad.setPadTitle(data, function (err) {
|
||||
Cryptpad.setPadAttribute('fileType', obj.type, null, href);
|
||||
cb(err);
|
||||
});
|
||||
});
|
||||
|
||||
sframeChan.on('Q_SETTINGS_SET_DISPLAY_NAME', function (newName, cb) {
|
||||
Cryptpad.setDisplayName(newName, function (err) {
|
||||
|
|
|
@ -94,6 +94,7 @@ define([
|
|||
funcs.getPadCreationScreen = callWithCommon(UIElements.getPadCreationScreen);
|
||||
funcs.createNewPadModal = callWithCommon(UIElements.createNewPadModal);
|
||||
funcs.onServerError = callWithCommon(UIElements.onServerError);
|
||||
funcs.importMediaTagMenu = callWithCommon(UIElements.importMediaTagMenu);
|
||||
|
||||
// Thumb
|
||||
funcs.displayThumbnail = callWithCommon(Thumb.displayThumbnail);
|
||||
|
@ -130,6 +131,24 @@ define([
|
|||
}
|
||||
return;
|
||||
};
|
||||
funcs.importMediaTag = function ($mt) {
|
||||
if (!$mt || !$mt.is('media-tag')) { return; }
|
||||
var chanStr = $mt.attr('src');
|
||||
var keyStr = $mt.attr('data-crypto-key');
|
||||
var channel = chanStr.replace(/\/blob\/[0-9a-f]{2}\//i, '');
|
||||
var key = keyStr.replace(/cryptpad:/i, '');
|
||||
var metadata = $mt[0]._mediaObject._blob.metadata;
|
||||
ctx.sframeChan.query('Q_IMPORT_MEDIATAG', {
|
||||
channel: channel,
|
||||
key: key,
|
||||
name: metadata.name,
|
||||
type: metadata.type,
|
||||
owners: metadata.owners
|
||||
}, function () {
|
||||
UI.log(Messages.saved);
|
||||
});
|
||||
};
|
||||
|
||||
funcs.getFileSize = function (channelId, cb) {
|
||||
funcs.sendAnonRpcMsg("GET_FILE_SIZE", channelId, function (data) {
|
||||
if (!data) { return void cb("No response"); }
|
||||
|
|
|
@ -261,4 +261,7 @@ define({
|
|||
'EV_AUTOSTORE_DISPLAY_POPUP': true,
|
||||
'Q_AUTOSTORE_STORE': true,
|
||||
'Q_IS_PAD_STORED': true,
|
||||
|
||||
// Import mediatag from a pad
|
||||
'Q_IMPORT_MEDIATAG': true
|
||||
});
|
||||
|
|
|
@ -148,19 +148,6 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.cp-app-drive-context {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 500;
|
||||
li {
|
||||
padding: 0;
|
||||
font-size: @colortheme_app-font-size;
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cp-app-drive-element-droppable {
|
||||
background-color: #FE9A2E;
|
||||
color: #222;
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<style>
|
||||
.loading-hidden { display: none; }
|
||||
#editor1 { display: none; }
|
||||
.cp-app-drive-context { display: none; }
|
||||
.cp-contextmenu { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="cp-app-drive">
|
||||
|
|
|
@ -244,7 +244,7 @@ define([
|
|||
};
|
||||
|
||||
var createContextMenu = function () {
|
||||
var menu = h('div.cp-app-drive-context.dropdown.cp-unselectable', [
|
||||
var menu = h('div.cp-contextmenu.dropdown.cp-unselectable', [
|
||||
h('ul.dropdown-menu', {
|
||||
'role': 'menu',
|
||||
'aria-labelledby': 'dropdownMenu',
|
||||
|
@ -2594,12 +2594,12 @@ define([
|
|||
$li = findDataHolder($tree.find('.cp-app-drive-element-active'));
|
||||
}
|
||||
// Close if already opened
|
||||
if ($('.cp-app-drive-context:visible').length) {
|
||||
if ($('.cp-contextmenu:visible').length) {
|
||||
APP.hideMenu();
|
||||
return;
|
||||
}
|
||||
// Open the menu
|
||||
$('.cp-app-drive-context').css({
|
||||
$('.cp-contextmenu').css({
|
||||
top: ($context.offset().top + 32) + 'px',
|
||||
right: '0px',
|
||||
left: ''
|
||||
|
|
|
@ -43,6 +43,12 @@ body.cp-app-pad {
|
|||
}
|
||||
}
|
||||
|
||||
.cke_dialog {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.cke_wysiwyg_frame {
|
||||
min-width: 60%;
|
||||
}
|
||||
|
@ -55,4 +61,4 @@ body.cp-app-pad {
|
|||
display:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -777,8 +777,18 @@ define([
|
|||
'max-width: 50em; padding: 20px 30px; margin: 0 auto; min-height: 100%;'+
|
||||
'box-sizing: border-box; overflow: auto;'+
|
||||
'}' +
|
||||
'.cke_body_width body > *:first-child { margin-top: 0; }';
|
||||
'.cke_body_width body > *:first-child { margin-top: 0; }' +
|
||||
Ckeditor.addCss(newCss);
|
||||
Ckeditor._mediatagTranslations = {
|
||||
title: Messages.pad_mediatagTitle,
|
||||
width: Messages.pad_mediatagWidth,
|
||||
height: Messages.pad_mediatagHeight,
|
||||
ratio: Messages.pad_mediatagRatio,
|
||||
border: Messages.pad_mediatagBorder,
|
||||
preview: Messages.pad_mediatagPreview,
|
||||
'import': Messages.pad_mediatagImport,
|
||||
options: Messages.pad_mediatagOptions
|
||||
};
|
||||
Ckeditor.plugins.addExternal('mediatag','/pad/', 'mediatag-plugin.js');
|
||||
Ckeditor.plugins.addExternal('blockbase64','/pad/', 'disable-base64.js');
|
||||
module.ckeditor = editor = Ckeditor.replace('editor1', {
|
||||
|
@ -786,13 +796,8 @@ define([
|
|||
});
|
||||
editor.on('instanceReady', waitFor());
|
||||
}).nThen(function () {
|
||||
editor.plugins.mediatag.translations = {
|
||||
title: Messages.pad_mediatagTitle,
|
||||
width: Messages.pad_mediatagWidth,
|
||||
height: Messages.pad_mediatagHeight,
|
||||
ratio: Messages.pad_mediatagRatio,
|
||||
border: Messages.pad_mediatagBorder,
|
||||
preview: Messages.pad_mediatagPreview,
|
||||
editor.plugins.mediatag.import = function ($mt) {
|
||||
framework._.sfCommon.importMediaTag($mt);
|
||||
};
|
||||
Links.addSupportForOpeningLinksInNewTab(Ckeditor)({editor: editor});
|
||||
}).nThen(function () {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
CKEDITOR.dialog.add('mediatag', function (editor) {
|
||||
var Messages = editor.plugins.mediatag.translations;
|
||||
var Messages = CKEDITOR._mediatagTranslations;
|
||||
return {
|
||||
title: Messages.title,
|
||||
minWidth: 400,
|
||||
|
@ -51,6 +51,8 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
|
|||
},
|
||||
],
|
||||
onShow: function () {
|
||||
|
||||
var thiss = this;
|
||||
var sel = editor.getSelection();
|
||||
element = sel.getSelectedElement();
|
||||
if (!element) { return; }
|
||||
|
@ -82,6 +84,11 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
|
|||
});
|
||||
$preview.html('').append($clone);
|
||||
|
||||
var center = function () {
|
||||
var top = Math.max(($(document).height()/2) - (thiss.getSize().height/2), 0);
|
||||
thiss.move(thiss.getPosition().x, top);
|
||||
};
|
||||
|
||||
var update = function () {
|
||||
var w = $(wInput).val() || Math.round(rect.width);
|
||||
var h = $(hInput).val() || Math.round(rect.height);
|
||||
|
@ -91,6 +98,7 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
|
|||
height: h+'px',
|
||||
'border-width': b+'px'
|
||||
});
|
||||
center();
|
||||
};
|
||||
|
||||
$(wInput).on('keyup', function () {
|
||||
|
@ -116,6 +124,8 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
|
|||
$(borderInput).on('keyup', function () {
|
||||
update();
|
||||
});
|
||||
|
||||
setTimeout(center);
|
||||
},
|
||||
onOk: function() {
|
||||
var dialog = this;
|
||||
|
|
|
@ -28,6 +28,8 @@
|
|||
},
|
||||
init: function( editor ) {
|
||||
var pluginName = 'mediatag';
|
||||
var Messages = CKEDITOR._mediatagTranslations;
|
||||
var targetWidget;
|
||||
|
||||
// Register the dialog.
|
||||
CKEDITOR.dialog.add( pluginName, this.path + 'mediatag-plugin-dialog.js' );
|
||||
|
@ -42,6 +44,44 @@
|
|||
}
|
||||
|
||||
});
|
||||
|
||||
editor.addCommand('importMediatag', {
|
||||
exec: function (editor) {
|
||||
var w = targetWidget;
|
||||
targetWidget = undefined;
|
||||
var $mt = $(w.$).find('media-tag');
|
||||
editor.plugins.mediatag.import($mt);
|
||||
}
|
||||
});
|
||||
|
||||
if (editor.addMenuItems) {
|
||||
editor.addMenuGroup('mediatag');
|
||||
editor.addMenuItem('importMediatag', {
|
||||
label: Messages.import,
|
||||
icon: 'save',
|
||||
command: 'importMediatag',
|
||||
group: 'mediatag'
|
||||
});
|
||||
editor.addMenuItem('mediatag', {
|
||||
label: Messages.options,
|
||||
icon: 'image',
|
||||
command: 'mediatag',
|
||||
group: 'mediatag'
|
||||
});
|
||||
}
|
||||
if (editor.contextMenu) {
|
||||
editor.contextMenu.addListener(function (element) {
|
||||
if (element.is('.cke_widget_mediatag')
|
||||
|| element.getAttribute('data-cke-display-name') === 'media-tag') {
|
||||
targetWidget = element;
|
||||
return {
|
||||
mediatag: CKEDITOR.TRISTATE_OFF,
|
||||
importMediatag: CKEDITOR.TRISTATE_OFF,
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
} );
|
||||
|
||||
|
|
|
@ -645,7 +645,7 @@ define([
|
|||
|
||||
var updatePublishedDescription = function () {
|
||||
var v = APP.editor.getValue();
|
||||
DiffMd.apply(DiffMd.render(v || ''), APP.$descriptionPublished);
|
||||
DiffMd.apply(DiffMd.render(v || ''), APP.$descriptionPublished, common);
|
||||
};
|
||||
var updateDescription = function (old, n) {
|
||||
var o = APP.editor.getValue();
|
||||
|
|
|
@ -9,7 +9,6 @@ define([
|
|||
'/common/common-util.js',
|
||||
'/common/common-hash.js',
|
||||
'/common/common-interface.js',
|
||||
'/common/diffMarked.js',
|
||||
'/customize/messages.js',
|
||||
'cm/lib/codemirror',
|
||||
|
||||
|
@ -54,7 +53,6 @@ define([
|
|||
Util,
|
||||
Hash,
|
||||
UI,
|
||||
DiffMd,
|
||||
Messages,
|
||||
CMeditor)
|
||||
{
|
||||
|
|
|
@ -95,7 +95,7 @@ define([
|
|||
}
|
||||
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); }
|
||||
try { DiffMd.apply(m, $content, Common); } catch (e) { return console.error(e); }
|
||||
|
||||
var length = getNumberOfSlides();
|
||||
$modal.find('style.cp-app-slide-style').remove();
|
||||
|
|
Loading…
Reference in New Issue