[MAJOR] functional frappe.ui.Capture 💃

frappe/public/build.json

@@ -24,7 +24,7 @@
 	],
 	"js/control.min.js": [
 
-		"public/js/frappe/ui/camera.js",
+		"public/js/frappe/ui/capture.js",
 
 		"public/js/frappe/form/controls/base_control.js",
 		"public/js/frappe/form/controls/base_input.js",
@@ -67,7 +67,7 @@
 		"public/js/frappe/form/multi_select_dialog.js",
 		"public/js/frappe/ui/dialog.js",
 
-		"public/js/frappe/ui/camera.js",
+		"public/js/frappe/ui/capture.js",
 
 		"public/js/frappe/form/controls/base_control.js",
 		"public/js/frappe/form/controls/base_input.js",
@@ -179,7 +179,7 @@
 		"public/js/frappe/form/multi_select_dialog.js",
 		"public/js/frappe/ui/dialog.js",
 
-		"public/js/frappe/ui/camera.js",
+		"public/js/frappe/ui/capture.js",
 
 		"public/js/frappe/ui/app_icon.js",
 

frappe/public/js/frappe/form/controls/text_editor.js

@@ -13,8 +13,12 @@ frappe.ui.form.ControlTextEditor = frappe.ui.form.ControlCode.extend({
 			contents: '<i class="fa fa-camera"/>',
 			tooltip: 'Camera',
 			click: () => {
-				const camera = new frappe.ui.Camera();
-				camera.show();
+				const capture = new frappe.ui.Capture();
+				capture.open();
+
+				capture.click((data) => {
+					context.invoke('editor.insertImage', data);
+				});
 			}
 		});
 

frappe/public/js/frappe/ui/camera.js

@@ -1,67 +0,0 @@
-frappe.ui.Camera      = class
-{
-    constructor (options)
-    {
-        this.dialog   = new frappe.ui.Dialog();
-
-        this.template =
-        `
-            <div id="frappe-camera">
-
-            </div>
-        `
-
-        this.show     = this.show.bind(this);
-        this.hide     = this.hide.bind(this);
-        this.on       = this.on.bind(this);
-        this.attach   = this.attach.bind(this);
-
-        Webcam.set({
-            width: 320,
-            height: 240,
-            flip_horiz: true,
-        })
-    }
-
-    show ( )
-    {
-        this.attach((err) => {
-            if ( err )
-                throw Error('Unable to attach webcamera.');
-            
-            this.dialog.set_primary_action(__('Click'), () => {
-                this.click();
-            });
-            
-            this.dialog.show();
-        });
-    }
-
-    hide ( )
-    {
-        this.dialog.hide();
-    }
-
-    on (event, callback)
-    {
-        if ( event == 'attach' ) {
-            this.attach(callback);
-        }
-    }
-
-    click (callback)
-    {
-        Webcam.snap((data) => {
-            console.log(data);
-        });
-    }
-
-    attach (callback)
-    {
-        $(this.dialog.body).append(this.template);
-
-        Webcam.attach('#frappe-camera');
-
-        callback();
-    }
-};

frappe/public/js/frappe/ui/capture.js

@@ -0,0 +1,94 @@
+frappe.ui.Capture     = class
+{
+    constructor (options)
+    {
+        this.options  = 
+        {
+            width: 480, height: 320, flip_horiz: true
+        };
+
+        this.dialog   = new frappe.ui.Dialog();
+        this.template = 
+        `
+            <div class="text-center">
+                <div class="img-thumbnail" style="border: none;">
+                    <div id="frappe-capture"/>
+                </div>
+            </div>
+
+            <div id="frappe-capture-btn-toolbar" style="padding-top: 15px; padding-bottom: 15px;">
+                <div class="text-center">
+                    <div id="frappe-capture-btn-toolbar-snap">
+                        <a id="frappe-capture-btn-snap">
+                            <i class="fa fa-fw fa-2x fa-circle-o"/>
+                        </a>
+                    </div>
+                    <div class="btn-group" id="frappe-capture-btn-toolbar-knap">
+                        <button class="btn btn-default" id="frappe-capture-btn-discard">
+                            <i class="fa fa-fw fa-arrow-left"/>
+                        </button>
+                        <button class="btn btn-default" id="frappe-capture-btn-accept">
+                            <i class="fa fa-fw fa-arrow-right"/>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+        $(this.dialog.body).append(this.template);
+
+        this.$btnBarSnap = $(this.dialog.body).find('#frappe-capture-btn-toolbar-snap');
+        this.$btnBarKnap = $(this.dialog.body).find('#frappe-capture-btn-toolbar-knap');
+        this.$btnBarKnap.hide();
+
+        Webcam.set(this.options);
+    }
+
+    open ( )
+    {
+        this.dialog.show();
+
+        Webcam.attach('#frappe-capture');
+    }
+
+    freeze ( )
+    {
+        this.$btnBarSnap.hide();
+        this.$btnBarKnap.show();
+        
+        Webcam.freeze();
+    }
+
+    unfreeze ( )
+    {
+        this.$btnBarSnap.show();
+        this.$btnBarKnap.hide();
+
+        Webcam.unfreeze();
+    }
+
+    click (callback) 
+    {
+        $(this.dialog.body).find('#frappe-capture-btn-snap').click(() => {
+            this.freeze();
+
+            $(this.dialog.body).find('#frappe-capture-btn-discard').click(() => {
+                this.unfreeze();
+            });
+
+            $(this.dialog.body).find('#frappe-capture-btn-accept').click(() => {
+                Webcam.snap((data) => {
+                    callback(data);
+                });
+
+                this.hide();
+            });
+        });
+    }
+
+    hide ( )
+    {
+        Webcam.reset();
+
+        $(this.dialog.$wrapper).remove();
+    }
+};