erp5_document_scanner: Clean up javascript to store cropper settings in preference instead of jIO

erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/Base_getPreferredCropperSettingsFromPreference.py

+import json
+
+portal = context.getPortalObject()
+
+active_preference = portal.portal_preferences.getActiveUserPreference()
+if not active_preference:
+  active_preference = portal.portal_preferences.getActivePreference()
+
+canvas_data = active_preference and \
+  active_preference.getPreferredCroppedCanvasData() or \
+  json.dumps({})
+return canvas_data

erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/Base_getPreferredCropperSettingsFromPreference.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="PythonScript" module="Products.PythonScripts.PythonScript"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>Script_magic</string> </key>
+            <value> <int>3</int> </value>
+        </item>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                </klass>
+                <tuple/>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_container</string> </key>
+                                <value> <string>container</string> </value>
+                            </item>
+                            <item>
+                                <key> <string>name_context</string> </key>
+                                <value> <string>context</string> </value>
+                            </item>
+                            <item>
+                                <key> <string>name_m_self</string> </key>
+                                <value> <string>script</string> </value>
+                            </item>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>_params</string> </key>
+            <value> <string></string> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>Base_getPreferredCropperSettingsFromPreference</string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/Base_storeDocumentFromCameraInActiveProcess.py

+import json
 from base64 import decodestring
 
+portal = context.getPortalObject()
+
+gadget_data = json.loads(document_scanner_gadget)
+image_str = decodestring(gadget_data["input_value"])
+preferred_cropped_canvas_data = json.dumps(gadget_data["preferred_cropped_canvas_data"])
+
+active_preference = portal.portal_preferences.getActiveUserPreference()
+if not active_preference:
+  active_preference = portal.portal_preferences.getActivePreference()
+
+if active_preference and preferred_cropped_canvas_data:
+  active_preference.setPreferredCroppedCanvasData(preferred_cropped_canvas_data)
+
 if not document_scanner_gadget:
   return context.Base_renderForm('Base_viewUploadDocumentFromCameraDialog',
                                message='Nothing to capture')
 
-portal = context.getPortalObject()
-
 if not active_process_url:
   active_process = portal.portal_activities.newActiveProcess()
   context.REQUEST.form["your_active_process_url"] = active_process.getRelativeUrl()
 else:
   active_process = portal.restrictedTraverse(active_process_url)
 
-active_process.postActiveResult(detail=decodestring(document_scanner_gadget))
+active_process.postActiveResult(detail=image_str)
 return context.Base_renderForm('Base_viewUploadDocumentFromCameraDialog',
                                message='Captured')

erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/Base_viewUploadDocumentFromCameraDialog/your_document_scanner_gadget.xml

@@ -152,7 +152,9 @@
                 </item>
                 <item>
                     <key> <string>renderjs_extra</string> </key>
-                    <value> <string></string> </value>
+                    <value>
+                      <persistent> <string encoding="base64">AAAAAAAAAAM=</string> </persistent>
+                    </value>
                 </item>
                 <item>
                     <key> <string>title</string> </key>
@@ -253,7 +255,20 @@
       <dictionary>
         <item>
             <key> <string>_text</string> </key>
-            <value> <string>python: field.restrictedTraverse(\'gadget_document_scanner.html\').absolute_url()</string> </value>
+            <value> <string>python: field.restrictedTraverse(\'gadget_document_scanner.html\').absolute_url() + "?v=0.10"</string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+  <record id="3" aka="AAAAAAAAAAM=">
+    <pickle>
+      <global name="TALESMethod" module="Products.Formulator.TALESField"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_text</string> </key>
+            <value> <string>python: [(\'preferred_cropped_canvas_data\', context.Base_getPreferredCropperSettingsFromPreference()),]</string> </value>
         </item>
       </dictionary>
     </pickle>

erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/gadget_document_scanner.js.js

 /*jslint indent: 2 */
-/*global rJS, RSVP, window, document, navigator, Cropper, console, FileReader, jIO, Promise*/
-(function (rJS, RSVP, window, document, navigator, Cropper, console, FileReader, jIO, Promise) {
+/*global rJS, RSVP, window, document, navigator, Cropper, console, FileReader, Promise, JSON*/
+(function (rJS, RSVP, window, document, navigator, Cropper, console, FileReader, Promise, JSON) {
   "use strict";
 
   var imageWidth,
+    preferredCroppedCanvasData,
     imageHeight,
     cropper,
     video,
     canvas,
     photo,
-    startbutton,
     photoInput,
-    storage,
     imageCapture;
 
+  function readBlobAsDataURL(blob) {
+    var fr = new FileReader();
+    return new RSVP.Promise(function waitFormDataURLRead(resolve, reject) {
+      fr.addEventListener("load", function handleDataURLRead(evt) {
+        resolve(evt.target.result);
+      });
+      fr.addEventListener("error", reject);
+      fr.readAsDataURL(blob);
+    }, function cancelReadBlobAsDataURL() {
+      fr.abort();
+    });
+  }
+
   function gotStream(mediaStream) {
     imageCapture = new window.ImageCapture(mediaStream.getVideoTracks()[0]);
     video.srcObject = mediaStream;
@@ -56,11 +68,9 @@
       cropper.destroy();
     }
     return RSVP.Queue()
-      .push(function () {
-        return storage.get("settings");
-      })
       .push(function (data) {
-        cropper = new Cropper(gadget.querySelector('.photo'), {data: data});
+        cropper = new Cropper(
+          gadget.querySelector('.photo'), {data: preferredCroppedCanvasData});
       });
   }
 
@@ -107,7 +117,6 @@
     canvas = gadget.querySelector(".canvas");
     photo = gadget.querySelector(".photo");
     photoInput = gadget.querySelector(".photoInput");
-    startbutton = gadget.querySelector(".startbutton");
 
     return RSVP.Queue()
       .push(function () {
@@ -117,6 +126,7 @@
       .push(function (photoCapabilities) {
         imageWidth = photoCapabilities.imageWidth.max;
         imageHeight = photoCapabilities.imageHeight.max;
+        // Hack used to debug. Use document.querySelector is forbidden
         document.querySelector("textarea[name='field_your_description']").value = "Max => " + imageWidth + "x" + imageHeight;
         video.play();
       });
@@ -131,23 +141,7 @@
   }
 
   rJS(window)
-    .ready(function () {
-      return RSVP.Queue()
-        .push(function () {
-          return jIO.createJIO({
-            "type": "indexeddb",
-            "database": "cropper_settings"
-          });
-        })
-        .push(function (proxy) {
-          storage = proxy;
-          return storage.get("settings");
-        })
-        .then(undefined, function () {
-          return storage.put("settings");
-        });
-    })
-    .declareMethod('render', function () {
+    .declareMethod('render', function (options) {
       var el,
         root,
         selector;
@@ -155,6 +149,8 @@
         .push(function (element) {
           root = element;
           selector = element.querySelector("select");
+          preferredCroppedCanvasData = preferredCroppedCanvasData || JSON.parse(
+            options.preferred_cropped_canvas_data);
           if (!selector.value && video) {
             video.pause();
           }
@@ -172,6 +168,9 @@
           var j,
             device,
             len = info_list.length;
+          if (root.querySelector("select").length > 1) {
+            return;
+          }
           for (j = 0; j < len; j += 1) {
             device = info_list[j];
             if (device.kind === 'videoinput') {
@@ -186,11 +185,14 @@
     .declareMethod('getContent', function () {
       var input = this.element.querySelector('.photoInput'),
         result = {};
-      result.field_your_document_scanner_gadget = input.value;
+      result.field_your_document_scanner_gadget = JSON.stringify({
+        "input_value": input.value,
+        "preferred_cropped_canvas_data": preferredCroppedCanvasData
+      });
       return result;
     })
     .onEvent("change", function (evt) {
-      if (evt.target.type == "select-one") {
+      if (evt.target.type === "select-one") {
         return this.getElement()
           .push(function (root) {
             if (!evt.target.value && video) {
@@ -206,16 +208,16 @@
 
     .onEvent("click", function (evt) {
       var gadget, canvasData;
-      if (evt.target.className == "startbutton") {
+      if (evt.target.className === "startbutton") {
         return this.getElement()
           .push(function (el) {
             el.querySelector(".camera-input").style.display = "none";
             return takePicture(el);
           });
       }
-      if (evt.target.className == "capture-button") {
+      if (evt.target.className === "capture-button") {
+        preferredCroppedCanvasData = cropper.getData();
         canvasData = cropper.getCanvasData();
-        storage.put("settings", cropper.getData());
         return this.getElement()
           .push(function (el) {
             gadget = el;
@@ -229,10 +231,10 @@
             });
           })
           .push(function (blob) {
-            return jIO.util.readBlobAsDataURL(blob);
+            return readBlobAsDataURL(blob);
           })
-          .push(function (evt) {
-            var base64data = evt.target.result,
+          .push(function (data_url) {
+            var base64data = data_url,
               block = base64data.split(";"),
               realData = block[1].split(",")[1];
 
@@ -247,4 +249,4 @@
       }
     }, false, true);
 
-}(rJS, RSVP, window, document, navigator, Cropper, console, FileReader, jIO, Promise));
+}(rJS, RSVP, window, document, navigator, Cropper, console, FileReader, Promise, JSON));
\ No newline at end of file