Prompt users to migrate base64 images to mediatags in the pad app
yflory
parent
b1f2d287b4
commit
90c96bfb70
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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' );
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
});
|
||||
|
||||
} )();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue