Merge pull request #1368 from germanbisurgi/feature/fix-issue-1367

Feature/fix issue 1367

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Unreleased
 
+- fixed issue #1367: Signature editor not returning base64 data
 - fixed issue #1237: more coherent ui for Base64 editor
 - fixed issue #1364: getValue() with dependencies
 

docs/signature.html

@@ -10,24 +10,25 @@
     <h1>JSON Editor: signature editor</h1>
 
     <div>Using this editor a signature (or any other simple drawing) can be made using the mouse or touchpad. The result is saved in base64 format. The editor will span the full width of the container, so no columns/grids are possible. With big thank you to <a href='https://github.com/szimek'>Szimek</a> for creating SignaturePad. <a href='https://github.com/szimek/signature_pad'>SignaturePad</a> must be included before the json-editor to load the signature editor properly. Set the type of the property to 'string' and the format to 'signature' to use the editor. The canvas is set to a default height of 300px, but this can be easily overriden by adding for example 'canvas_height': 500 in the properties.</div>
-    
+
     <div id='editor_holder'></div>
     <button id='submit'>Submit (console.log)</button>
-    
+
     <script>
       // Initialize the editor with a JSON schema
       var editor = new JSONEditor(document.getElementById('editor_holder'),{
         "schema": {
-          "type": "object",
-          "title": "Document",
-          "properties": {
-              "signature": {
-                  "type": "signature",
-                  "title": "Signature",
-                  "options": {
-                      "canvas_height": 500
-                  }
+          'type': 'object',
+          'title': 'Document',
+          'properties': {
+            'signature': {
+              'type': 'string',
+              'format': 'signature',
+              'title': 'Signature',
+              'options': {
+                'canvas_height': 500
               }
+            }
           }
         }
       });

src/editors/signature.js

@@ -26,23 +26,23 @@ export class SignatureEditor extends StringEditor {
       canvas.classList.add('signature')
       signatureContainer.appendChild(canvas)
 
-      this.signaturePad = new window.SignaturePad(canvas, {
-        onEnd () {
-          /* check if the signature is not empty before setting a value */
-          if (!this.signaturePad.isEmpty()) {
-            this.input.value = this.signaturePad.toDataURL()
-          } else {
-            this.input.value = ''
-          }
-
-          this.is_dirty = true
-          this.refreshValue()
-          this.watch_listener()
-          this.jsoneditor.notifyWatchers(this.path)
-          if (this.parent) this.parent.onChildEditorChange(this)
-          else this.jsoneditor.onChange()
+      this.signaturePad = new window.SignaturePad(canvas)
+
+      this.signaturePad.onEnd = () => {
+        /* check if the signature is not empty before setting a value */
+        if (!this.signaturePad.isEmpty()) {
+          this.input.value = this.signaturePad.toDataURL()
+        } else {
+          this.input.value = ''
         }
-      })
+
+        this.is_dirty = true
+        this.refreshValue()
+        this.watch_listener()
+        this.jsoneditor.notifyWatchers(this.path)
+        if (this.parent) this.parent.onChildEditorChange(this)
+        else this.jsoneditor.onChange()
+      }
 
       /* create button containers and add clear signature button */
       const buttons = document.createElement('div')

tests/codeceptjs/issues/issue-gh-1338_test.js

@@ -7,10 +7,12 @@ Scenario('GitHub issue 1338 should remain fixed @issue-1338', async ({ I }) => {
   I.waitForText('Value required')
   I.fillField('[id="root[field_a]"]', 'test')
   I.pressKey('Tab')
+  I.waitForElement('.invalid-feedback')
   I.dontSee('Value required')
   I.refreshPage()
   I.waitForText('Value required')
   I.fillField('[id="root[field_b]"]', 'test')
   I.pressKey('Tab')
+  I.waitForElement('.invalid-feedback')
   I.dontSee('Value required')
 })

tests/codeceptjs/issues/issue-gh-1367_test.js

@@ -0,0 +1,11 @@
+/* global Feature Scenario */
+const assert = require('assert')
+
+Feature('GitHub issue 1367')
+
+Scenario('GitHub issue 1367 should remain fixed @issue-1367', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-1367.html')
+  I.waitForElement('.je-ready')
+  I.click('canvas')
+  assert.match(await I.grabValueFrom('#value'), /base64/)
+})

tests/pages/issues/issue-gh-1367.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>GitHub Issue 1367</title>
+    <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+    <script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.js"></script>
+    <script src="../../../dist/jsoneditor.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <a href="https://github.com/json-editor/json-editor/issues/1158">GitHub Issue 1367</a>
+      <label for="value">Value</label>
+      <textarea class="form-control" id="value" rows="6" style="font-size: 12px; font-family: monospace;"></textarea>
+      <div id='editor_holder'></div>
+    </div>
+
+    <script>
+      var defaultSchema = {
+        'type': 'object',
+        'title': 'Document',
+        'properties': {
+          'signature': {
+            'type': 'string',
+            'format': 'signature',
+            'title': 'Signature',
+            'options': {
+              'canvas_height': 500
+            }
+          }
+        }
+      }
+
+      var value = document.querySelector('#value')
+      var editor = new JSONEditor(document.getElementById('editor_holder'),{
+        iconlib: 'fontawesome5',
+        object_layout: 'normal',
+        schema: defaultSchema,
+        show_errors: 'always',
+        theme: 'bootstrap4'
+      });
+
+      editor.on('change', function () {
+        value.value = JSON.stringify(editor.getValue())
+      })
+    </script>
+  </body>
+</html>