web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Prompt users to migrate base64 images to mediatags in the pad app

Browse Source
This commit is contained in:
yflory
2018-08-29 18:20:34 +02:00
parent b1f2d287b4
commit 90c96bfb70
5 changed files with 154 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
www/pad/inner.js
View File

@@ -30,6 +30,7 @@ define([
'/api/config',
'/common/common-hash.js',
'/common/common-util.js',
'/common/common-interface.js',
'/bower_components/chainpad/chainpad.dist.js',
'/customize/application_config.js',
'/common/test.js',
@@ -52,6 +53,7 @@ define([
ApiConfig,
Hash,
Util,
UI,
ChainPad,
AppConfig,
Test
@@ -569,7 +571,11 @@ define([
var mt = '<media-tag contenteditable="false" src="' + src + '" data-crypto-key="cryptpad:' + key + '"></media-tag>';
// MEDIATAG
var element = window.CKEDITOR.dom.element.createFromHtml(mt);
editor.insertElement(element);
if (ev && ev.insertElement) {
ev.insertElement(element);
} else {
editor.insertElement(element);
}
editor.widgets.initOn( element, 'mediatag' );
}
};
@@ -581,6 +587,28 @@ define([
$iframe.find('html').addClass('cke_body_width');
}
});
var b64images = $(inner).find('img[src^="data:image"]:not(.cke_reset)');
if (b64images.length) {
UI.confirm(Messages.pad_base64, function (yes) {
if (!yes) { return; }
b64images.each(function (i, el) {
var src = $(el).attr('src');
var blob = Util.dataURIToBlob(src);
var ext = '.' + (blob.type.split('/')[1] || 'png');
var name = framework._.title.getTitle()+'_image' || 'Pad_image';
blob.name = name + ext;
var ev = {
insertElement: function (newEl) {
var element = new window.CKEDITOR.dom.element(el);
newEl.replace(element);
setTimeout(framework.localChange);
}
};
window.APP.FM.handleFile(blob, ev);
});
});
}
/*setTimeout(function () {
$('iframe.cke_wysiwyg_frame').focus();
editor.focus();
@@ -749,7 +777,10 @@ define([
editor.plugins.mediatag.translations = {
title: Messages.pad_mediatagTitle,
width: Messages.pad_mediatagWidth,
height: Messages.pad_mediatagHeight
height: Messages.pad_mediatagHeight,
ratio: Messages.pad_mediatagRatio,
border: Messages.pad_mediatagBorder,
preview: Messages.pad_mediatagPreview,
};
Links.addSupportForOpeningLinksInNewTab(Ckeditor)({editor: editor});
}).nThen(function () {

87
www/pad/mediatag-plugin-dialog.js
View File

@@ -13,12 +13,40 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
type: 'text',
id: 'width',
label: Messages.width,
validate: function () {
if (isNaN(this.getValue())) { return false; }
}
},
{
type: 'text',
id: 'height',
label: Messages.height,
}
validate: function () {
if (isNaN(this.getValue())) { return false; }
}
},
{
type: 'checkbox',
id: 'lock',
'default': 'checked',
label: Messages.ratio,
},
{
type: 'text',
id: 'border',
label: Messages.border,
validate: function () {
if (isNaN(this.getValue())) { return false; }
}
},
{
type: 'html',
id: 'preview',
html: '<label>'+Messages.preview+'</label>'+
'<div id="ck-mediatag-preview"'+
'style="margin:auto;resize:both;max-width:300px;max-height:300px;overflow:auto"'+
'></div>'
},
]
},
],
@@ -37,6 +65,57 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
var hInput = inputs[1];
wInput.value = Math.round(rect.width);
hInput.value = Math.round(rect.height);
var keepRatio = inputs[2];
var ratio = wInput.value/hInput.value;
var borderInput = inputs[3];
var bValue = el.getStyle('border-width').replace('px', '') || 0;
borderInput.value = bValue;
var $preview = $(dialog).find('#ck-mediatag-preview');
var $clone = $(el.$).clone();
$clone.css({
display: 'flex',
'border-style': 'solid',
'border-color': 'black'
});
$preview.html('').append($clone);
var update = function () {
var w = $(wInput).val() || Math.round(rect.width);
var h = $(hInput).val() || Math.round(rect.height);
var b = $(borderInput).val() || bValue;
$clone.css({
width: w+'px',
height: h+'px',
'border-width': b+'px'
});
};
$(wInput).on('keyup', function () {
if (!$(keepRatio).is(':checked')) { return; }
var w = $(wInput).val();
if (isNaN(w)) { return; }
var newVal = w/ratio;
$(hInput).val(Math.round(newVal));
update();
});
$(hInput).on('keyup', function () {
if (!$(keepRatio).is(':checked')) { return; }
var h = $(hInput).val();
if (isNaN(h)) { return; }
var newVal = h*ratio;
$(wInput).val(Math.round(newVal));
update();
});
$(keepRatio).on('change', function () {
ratio = $(wInput).val()/$(hInput).val();
});
$(borderInput).on('keyup', function () {
update();
});
},
onOk: function() {
var dialog = this;
@@ -52,6 +131,7 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
var inputs = dialog.querySelectorAll('input');
var wInput = inputs[0];
var hInput = inputs[1];
var bInput = inputs[3];
window.setTimeout(function () {
if (wInput.value === "") {
@@ -66,6 +146,11 @@ CKEDITOR.dialog.add('mediatag', function (editor) {
} else {
el.setSize('height', parseInt(hInput.value));
}
if (bInput.value === "") {
el.removeStyle('border-width');
} else {
el.setStyle('border-width', parseInt(bInput.value)+'px');
}
editor.fire( 'change' );
});
}

15
www/pad/mediatag-plugin.js
View File

@@ -9,6 +9,9 @@
CKEDITOR.addCss(
'media-tag{' +
'display:inline-block;' +
'border-style: solid;' +
'border-color: black;' +
'border-width: 0;' +
'}' +
'media-tag.selected{' +
'border: 1px solid black;' +
@@ -41,5 +44,17 @@
});
},
} );
CKEDITOR.on('dialogDefinition', function (ev) {
var dialog = ev.data.definition;
if (ev.data.name === 'image') {
dialog.removeContents('Link');
dialog.removeContents('advanced');
//var info = dialog.getContents('info');
//info.remove('cmbAlign');
}
});
} )();