Draw on pictures before uploading them + fix some Upload behaviors

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
 ---------------------------

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;
 }

app/widgets/Upload/_upload.tpl

@@ -2,8 +2,8 @@
     <h3>{$c->__('upload.title')}</h3>
     <ul class="list thick">
         <li>
-            <span class="primary icon bubble color green">
-                <i class="material-icons">cloud_upload</i>
+            <span class="primary icon">
+                <i class="material-icons">attach_file</i>
             </span>
             <div>
                 <p>{$c->__('upload.choose')}</p>
@@ -35,6 +35,9 @@
                     <p class="name line center"></p>
                     <p class="desc line center"></p>
                 </div>
+                <span class="primary active bubble color icon green">
+                    <i class="material-icons">gesture</i>
+                </span>
             </li>
         </div>
     </ul>
@@ -43,7 +46,7 @@
     <button onclick="Dialog_ajaxClear(); Upload.abort();" class="button flat">
         {$c->__('button.close')}
     </button>
-    <button onclick="Upload.init();" class="button flat">
+    <button id="upload_button" onclick="Upload.init();" class="button flat disabled">
         {$c->__('button.upload')}
     </button>
 </div>

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;
 }

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');
             }
         }