From 90c96bfb70987f8043f5370405f8dbecf0b1274d Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 29 Aug 2018 18:20:34 +0200 Subject: [PATCH] Prompt users to migrate base64 images to mediatags in the pad app --- customize.dist/translations/messages.js | 4 ++ www/common/common-util.js | 16 +++++ www/pad/inner.js | 35 +++++++++- www/pad/mediatag-plugin-dialog.js | 87 ++++++++++++++++++++++++- www/pad/mediatag-plugin.js | 15 +++++ 5 files changed, 154 insertions(+), 3 deletions(-) diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 8e57a665e..49351e012 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -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"; diff --git a/www/common/common-util.js b/www/common/common-util.js index 072bfb851..d54e92ca7 100644 --- a/www/common/common-util.js +++ b/www/common/common-util.js @@ -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 () { diff --git a/www/pad/inner.js b/www/pad/inner.js index 661a0ed05..0c896d3ca 100644 --- a/www/pad/inner.js +++ b/www/pad/inner.js @@ -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 = ''; // 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 () { diff --git a/www/pad/mediatag-plugin-dialog.js b/www/pad/mediatag-plugin-dialog.js index 45759bc9f..03dca1229 100644 --- a/www/pad/mediatag-plugin-dialog.js +++ b/www/pad/mediatag-plugin-dialog.js @@ -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: ''+ + '
' + }, ] }, ], @@ -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' ); }); } diff --git a/www/pad/mediatag-plugin.js b/www/pad/mediatag-plugin.js index 61d7ccdd5..c989ee725 100644 --- a/www/pad/mediatag-plugin.js +++ b/www/pad/mediatag-plugin.js @@ -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'); + } + }); + } )();