From 5aab7753cf21d62e2d51c9ac8926cf34853304c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20Jaussoin?= Date: Fri, 22 May 2020 11:00:33 +0200 Subject: [PATCH] Draw on pictures before uploading them + fix some Upload behaviors --- CHANGELOG.md | 1 + app/widgets/PublishBrief/publishbrief.css | 2 +- app/widgets/Upload/_upload.tpl | 9 ++- app/widgets/Upload/upload.css | 12 ++++ app/widgets/Upload/upload.js | 74 ++++++++++++++--------- 5 files changed, 66 insertions(+), 32 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 30e2d77c8..c299d4f35 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ v0.18 (trunk) * Use UNION ALL instead of OR for messages request (to prevent optimisations issues in SQL) * Better handling of Pictures in Posts and Messages * Show picture number when selecting one in a gallery when publishing a Post + * Draw on pictures before uploading them + fix some Upload behaviors v0.17.1 --------------------------- diff --git a/app/widgets/PublishBrief/publishbrief.css b/app/widgets/PublishBrief/publishbrief.css index 35c1655fd..ee639de6a 100644 --- a/app/widgets/PublishBrief/publishbrief.css +++ b/app/widgets/PublishBrief/publishbrief.css @@ -29,7 +29,7 @@ header#publishbrief form > div textarea { } #publishbrief span.privacy form > div .checkbox { - margin-top: calc(50% - 1.75rem); + margin-top: calc(50% - 2.25rem); width: 5rem; height: 3.5rem; } diff --git a/app/widgets/Upload/_upload.tpl b/app/widgets/Upload/_upload.tpl index 6aafb730c..22d069dc9 100644 --- a/app/widgets/Upload/_upload.tpl +++ b/app/widgets/Upload/_upload.tpl @@ -2,8 +2,8 @@

{$c->__('upload.title')}

@@ -43,7 +46,7 @@ - diff --git a/app/widgets/Upload/upload.css b/app/widgets/Upload/upload.css index 40b551728..405a7ccf2 100644 --- a/app/widgets/Upload/upload.css +++ b/app/widgets/Upload/upload.css @@ -33,4 +33,16 @@ #upload div.drop.dropped { border-color: gray; +} + +#upload li.file { + padding: 0; +} + +#upload li.file span.primary { + margin-right: 1.5rem; +} + +#upload li.file:not(.preview) span.primary { + display: none; } \ No newline at end of file diff --git a/app/widgets/Upload/upload.js b/app/widgets/Upload/upload.js index 4b755c780..8ffaedc9b 100644 --- a/app/widgets/Upload/upload.js +++ b/app/widgets/Upload/upload.js @@ -6,6 +6,8 @@ var Upload = { get : null, name : null, file : null, + canvas : null, + uploadButton : null, init : function() { if (Upload.file) { @@ -59,6 +61,9 @@ var Upload = { }, preview : function(file) { + Upload.canvas = null; + Upload.uploadButton = document.querySelector('#upload_button'); + var resolvedFile = file ? file : document.getElementById('file').files[0]; Upload.name = resolvedFile.name; Upload.check(resolvedFile); @@ -89,6 +94,31 @@ var Upload = { var width = image.naturalWidth; var height = image.naturalHeight; + Upload.canvas = document.createElement('canvas'); + + if ([5,6,7,8].indexOf(orientation) > -1) { + Upload.canvas.width = height; + Upload.canvas.height = width; + } else { + Upload.canvas.width = width; + Upload.canvas.height = height; + } + + ctx = Upload.canvas.getContext("2d"); + + switch (orientation) { + case 2: ctx.transform(-1, 0, 0, 1, width, 0); break; + case 3: ctx.transform(-1, 0, 0, -1, width, height ); break; + case 4: ctx.transform(1, 0, 0, -1, 0, height ); break; + case 5: ctx.transform(0, 1, 1, 0, 0, 0); break; + case 6: ctx.transform(0, 1, -1, 0, height , 0); break; + case 7: ctx.transform(0, -1, -1, 0, height , width); break; + case 8: ctx.transform(0, -1, 1, 0, 0, width); break; + default: ctx.transform(1, 0, 0, 1, 0, 0); + } + + ctx.drawImage(image, 0, 0, width, height); + if (file.size > SMALL_PICTURE_LIMIT) { var ratio = Math.min(limit / width, limit / height); @@ -97,37 +127,12 @@ var Upload = { height = Math.round(height*ratio); } - var canvas = document.createElement('canvas'); - - if ([5,6,7,8].indexOf(orientation) > -1) { - canvas.width = height; - canvas.height = width; - } else { - canvas.width = width; - canvas.height = height; - } - - ctx = canvas.getContext("2d"); - - switch (orientation) { - case 2: ctx.transform(-1, 0, 0, 1, width, 0); break; - case 3: ctx.transform(-1, 0, 0, -1, width, height ); break; - case 4: ctx.transform(1, 0, 0, -1, 0, height ); break; - case 5: ctx.transform(0, 1, 1, 0, 0, 0); break; - case 6: ctx.transform(0, 1, -1, 0, height , 0); break; - case 7: ctx.transform(0, -1, -1, 0, height , width); break; - case 8: ctx.transform(0, -1, 1, 0, 0, width); break; - default: ctx.transform(1, 0, 0, 1, 0, 0); - } - - ctx.drawImage(image, 0, 0, width, height); - - if (typeof canvas.toBlob == 'function') { + if (typeof Upload.canvas.toBlob == 'function') { if (file.type != 'image/jpeg') { Upload.name += '.jpg'; } - canvas.toBlob( + Upload.canvas.toBlob( function (blob) { Upload.prepare(blob); }, @@ -153,23 +158,34 @@ var Upload = { // If the preview system is there if (preview) { var fileInfo = document.querySelector('#upload li.file'); + var toDraw = fileInfo.querySelector('span.primary'); + fileInfo.classList.remove('preview'); fileInfo.querySelector('p.name').innerText = Upload.name; var type = file.type ? file.type + ' ยท ' : ''; fileInfo.querySelector('p.desc').innerText = type + MovimUtils.humanFileSize(file.size); if (Upload.file.type.match(/image.*/)) { preview.src = URL.createObjectURL(Upload.file); + toDraw.addEventListener('click', e => { + Draw.init(Upload.canvas); + Dialog_ajaxClear(); + Upload.abort(); + }); + fileInfo.classList.add('preview'); } else { preview.src = ''; } } + + Upload.uploadButton.classList.remove('disabled'); }, request : function(get, put) { Upload.get = get; - Upload.xhr = new XMLHttpRequest(); + Upload.uploadButton.classList.add('disabled'); + Upload.xhr.upload.addEventListener('progress', function(evt) { var percent = Math.floor(evt.loaded/evt.total*100); @@ -184,11 +200,13 @@ var Upload = { && (Upload.xhr.status >= 200 && Upload.xhr.status < 400)) { Dialog.clear(); Upload.launchAttached(); + Upload.uploadButton.classList.remove('disabled'); } else if (Upload.xhr.readyState == 4 && (Upload.xhr.status >= 400 || Upload.xhr.status == 0) && Upload.file != null) { Upload.launchFailed(); Upload_ajaxFailed(); + Upload.uploadButton.classList.remove('disabled'); } }