infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

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

Browse Source
pull/1/head
yflory 6 years ago
parent b1f2d287b4
commit 90c96bfb70
5 changed files with 154 additions and 3 deletions
Show Stats Download Patch File Download Diff File

4
customize.dist/translations/messages.js
Unescape Escape View File

@ -248,6 +248,9 @@ define(function () {
out.pad_mediatagTitle = "Media-Tag settings";
out.pad_mediatagWidth = "Width (px)";
out.pad_mediatagHeight = "Height (px)";
out.pad_mediatagRatio = "Keep ratio";
out.pad_mediatagBorder = "Border width (px)";
out.pad_mediatagPreview = "Preview";
// Kanban
out.kanban_newBoard = "New board";
@ -655,6 +658,7 @@ define(function () {
// pad
out.pad_showToolbar = "Show toolbar";
out.pad_hideToolbar = "Hide toolbar";
out.pad_base64 = "This pad contains images stored in an inefficient way. These images will increase significantly the size of the pad in your CryptDrive, and they will make it slower to load. Do you want to migrate these images to a better format (they will be stored separately in your drive)?"; // XXX
// markdown toolbar
out.mdToolbar_button = "Show or hide the Markdown toolbar";

16
www/common/common-util.js
Unescape Escape View File

@ -154,6 +154,22 @@ define([], function () {
xhr.send(null);
};
Util.dataURIToBlob = function (dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
var bb = new Blob([ab], {type: mimeString});
return bb;
};
Util.throttle = function (f, ms) {
var to;
var g = function () {

33
www/pad/inner.js
Unescape Escape 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);
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 () {

85
www/pad/mediatag-plugin-dialog.js
Unescape Escape 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
Unescape Escape 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');
}
});
} )();

Write Preview
Loading…
Cancel
Save