erp5_document_scanner: add an auto crop button

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.css

@@ -50,7 +50,8 @@ div[data-gadget-url$="gadget_document_scanner.html"] .capture-btn,
 div[data-gadget-url$="gadget_document_scanner.html"] .delete-btn,
 div[data-gadget-url$="gadget_document_scanner.html"] .retry-btn,
 div[data-gadget-url$="gadget_document_scanner.html"] .change-camera-btn,
-div[data-gadget-url$="gadget_document_scanner.html"] .confirm-btn {
+div[data-gadget-url$="gadget_document_scanner.html"] .confirm-btn,
+div[data-gadget-url$="gadget_document_scanner.html"] .auto-crop-btn {
   color: #212529;
   padding: 3pt;
   border: 1px solid rgba(0, 0, 0, 0.14);

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_css.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.60162.8290.29303</string> </value>
+                      <value> <string>982.61113.55569.43315</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585815950.8</float>
+                              <float>1585816780.79</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_html.html

@@ -6,6 +6,7 @@
      data-i18n=Delete
      data-i18n=Save
      data-i18n=Capture
+     data-i18n=Auto Crop
      data-i18n=Saving
      data-i18n=Error
      data-i18n=Page

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_html.xml

@@ -242,7 +242,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.60143.18861.24029</string> </value>
+                      <value> <string>982.60144.41254.34713</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585757797.7</float>
+                              <float>1585816677.02</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.js

@@ -407,7 +407,7 @@
         video.play();
         return RSVP.all([
           getVideoDeviceList(),
-          gadget.getTranslationList(["Capture", "Change Camera", "Page"]),
+          gadget.getTranslationList(["Capture", "Change Camera", "Page", "Auto Crop"]),
           buildPreviousThumbnailDom(gadget)
         ]);
       })
@@ -429,6 +429,15 @@
           text: result_list[1][0]
         }));
 
+        if (gadget.state.is_cropper_size_confirmed) {
+          button_list.push(
+            domsugar('button', {type: 'button',
+                                'class': 'auto-crop-btn ui-icon-fast-forward ui-btn-icon-left',
+                                text: result_list[1][3]
+                               })
+          );
+        }
+
         div = domsugar('div', {'class': 'camera'}, [
           domsugar('div', {'class': 'camera-header'}, [
             domsugar('h4', [
@@ -580,7 +589,7 @@
   }
 
   // Capture the media stream
-  function captureAndRenderPicture(gadget) {
+  function captureAndRenderPicture(gadget, is_auto_crop) {
     var settings = gadget.state.preferred_image_settings_data,
       btn = gadget.element.querySelector(".take-picture-btn"),
       image_capture = new window.ImageCapture(
@@ -625,7 +634,25 @@
 
         var img = result_list[1],
           div,
-          defer = RSVP.defer();
+          defer = RSVP.defer(),
+          edit_picture_element;
+
+        if (!is_auto_crop) {
+          edit_picture_element = domsugar('div', {'class': 'edit-picture'}, [
+            domsugar('button', {type: 'button',
+                                'class': 'reset-btn ui-btn-icon-left ui-icon-times',
+                                text: result_list[0][0]
+                               }),
+            domsugar('button', {type: 'button',
+                                'class': 'confirm-btn ui-btn-icon-left ui-icon-check',
+                                text: result_list[0][1]
+                               })
+          ]);
+        } else {
+          // Keep the previous disabled button list
+          // in order to reduce the flickering
+          edit_picture_element = gadget.element.querySelector('.edit-picture');
+        }
 
         // Prepare the cropper canvas
         div = domsugar('div', {'class': 'camera'}, [
@@ -639,16 +666,7 @@
           // DON'T remove img from a div img-container.
           // DON'T replace img by canvas.
           domsugar("div", {"class": "img-container"}, [img]),
-          domsugar('div', {'class': 'edit-picture'}, [
-            domsugar('button', {type: 'button',
-                                'class': 'reset-btn ui-btn-icon-left ui-icon-times',
-                                text: result_list[0][0]
-                               }),
-            domsugar('button', {type: 'button',
-                                'class': 'confirm-btn ui-btn-icon-left ui-icon-check',
-                                text: result_list[0][1]
-                               })
-          ]),
+          edit_picture_element,
           result_list[2]
         ]);
 
@@ -717,6 +735,32 @@
       });
   }
 
+  function cropPicture(gadget) {
+    var canvas = gadget.cropper.getCroppedCanvas(),
+      state_dict;
+    state_dict = {
+      preferred_cropped_canvas_data: gadget.cropper.getData(),
+      display_step: 'display_video',
+      page: gadget.state.page + 1,
+      page_count: gadget.state.page_count + 1,
+      is_cropper_size_confirmed: true
+    };
+    // Keep image date, as user may need to display it again
+    state_dict['blob_canvas_' + gadget.state.page_count] = canvas;
+    // state_dict['blob_url_' + gadget.state.page_count] = data_url;
+    state_dict['blob_state_' + gadget.state.page_count] = 'saving';
+    state_dict['blob_uuid_' + gadget.state.page_count] = null;
+
+    return gadget.changeState(state_dict)
+      .push(function () {
+        // XXX Ensure that you have the active process relative url
+        addDetachedPromise(gadget, 'ajax_' + (gadget.state.page_count - 1),
+                           handleAsyncStore(gadget, gadget.state.page_count - 1));
+
+        gadget.detached_promise_dict.cropper.cancel('Not needed anymore, as cropped');
+      });
+  }
+
   //////////////////////////////////////////////////
   // Gadget API
   //////////////////////////////////////////////////
@@ -745,7 +789,8 @@
       display_step: 'display_video',
       page: 1,
       page_count: 0,
-      camera_list: []
+      camera_list: [],
+      is_cropper_size_confirmed: false
     })
     .declareMethod('render', function (options) {
       // This method is called during the ERP5 form rendering
@@ -795,6 +840,9 @@
       if (display_step === 'crop_picture') {
         return captureAndRenderPicture(gadget);
       }
+      if (display_step === 'auto_crop_picture') {
+        return captureAndRenderPicture(gadget, true);
+      }
       if (display_step === 'show_picture') {
         return renderSubmittedPicture(gadget);
       }
@@ -839,12 +887,6 @@
         });
       }
 
-      if (evt.target.className.indexOf("take-picture-btn") !== -1) {
-        return gadget.changeState({
-          display_step: 'crop_picture'
-        });
-      }
-
       if (evt.target.className.indexOf("reset-btn") !== -1) {
         return gadget.changeState({
           display_step: 'display_video'
@@ -877,30 +919,22 @@
         return gadget.changeState(state_dict);
       }
 
+      if (evt.target.className.indexOf("take-picture-btn") !== -1) {
+        return gadget.changeState({
+          display_step: 'crop_picture'
+        });
+      }
+
       if (evt.target.className.indexOf("confirm-btn") !== -1) {
-        return new RSVP.Queue()
-          .push(function () {
-            var canvas = gadget.cropper.getCroppedCanvas();
-            state_dict = {
-              preferred_cropped_canvas_data: gadget.cropper.getData(),
-              display_step: 'display_video',
-              page: gadget.state.page + 1,
-              page_count: gadget.state.page_count + 1
-            };
-            // Keep image date, as user may need to display it again
-            state_dict['blob_canvas_' + gadget.state.page_count] = canvas;
-            // state_dict['blob_url_' + gadget.state.page_count] = data_url;
-            state_dict['blob_state_' + gadget.state.page_count] = 'saving';
-            state_dict['blob_uuid_' + gadget.state.page_count] = null;
+        return cropPicture(gadget);
+      }
 
-            return gadget.changeState(state_dict);
+      if (evt.target.className.indexOf("auto-crop-btn") !== -1) {
+        return gadget.changeState({
+          display_step: 'auto_crop_picture'
         })
           .push(function () {
-            // XXX Ensure that you have the active process relative url
-            addDetachedPromise(gadget, 'ajax_' + (gadget.state.page_count - 1),
-                               handleAsyncStore(gadget, gadget.state.page_count - 1));
-
-            gadget.detached_promise_dict.cropper.cancel('Not needed anymore, as cropped');
+            return cropPicture(gadget);
           });
       }
 

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.61109.60561.44919</string> </value>
+                      <value> <string>982.61167.12901.18585</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585815745.95</float>
+                              <float>1585819184.79</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/documentscannercss.less.txt

@@ -45,7 +45,7 @@ div[data-gadget-url$="gadget_document_scanner.html"] {
   }
 
   .reset-btn, .confirm-btn, .edit-btn, .take-picture-btn, .capture-btn,
-  .delete-btn, .retry-btn, .change-camera-btn, .confirm-btn {
+  .delete-btn, .retry-btn, .change-camera-btn, .confirm-btn, .auto-crop-btn {
     color: #212529;
     padding: 3pt;
     border: 1px solid rgba(0, 0, 0, 0.14);