fixed submit page items (issue #13) as well as jpeg support (issue #10)

README.md

@@ -7,6 +7,14 @@ APEX Signature allows you to draw smooth signatures into a HTML5 canvas and enab
 It is based on JS Framework Signature Pad (https://github.com/szimek/signature_pad).
 
 ## Changelog
+
+#### 1.2 - updates + fixes
+  - Updated signature_pad to v5.0.2
+  - Added Image Format support (JPEG / PNG for now)
+  - Upgraded to Apex 23.2.2
+  - Fixed the null problem in martindsouza's pull request which fixed issue #13
+  - Added the functionality to remove whitespace from the signature. Note that, for now, when using JPEG format only a white background is supported
+
 #### 1.1 - Added optional WaitSpinner when saving image into database
 
 #### 1.0.1 - Fixed character set issues with line minWidth/maxWidth decimal numbers
@@ -26,6 +34,7 @@ The plugin settings are highly customizable and you can change:
 - **Line maxWidth** - Maximum width of a line. Defaults to 2.5
 - **Background Color** - Background color of signature area. Defaults to "rgba(0,0,0,0)", can be RGB, Hex or color name like white or black
 - **Pen color** - Color used to draw the lines. Defaults to "black", can be RGB, Hex or color name like white or black
+- **Image Format** - Decide whether to use png or jpeg image format for the signature blob.
 - **PLSQL Code** - PLSQL code which saves the resulting image to database tables or collections, default APEX_COLLECTION: "APEX_SIGNATURE"
 - **Clear Button JQuery Selector** - JQuery Selector to identify the "Clear Button" to clear signature area (#MY_BUTTON_STATIC_ID or .my_button_class)
 - **Save Button JQuery Selector** - JQuery Selector to identify the "Save Button" to save signature into Database (#MY_BUTTON_STATIC_ID or .my_button_class)

server/js/apexsignature.js

@@ -1,6 +1,6 @@
 // APEX Signature functions
 // Author: Daniel Hochleitner
-// Version: 1.1
+// Version: 1.2
 
 // global namespace
 var apexSignature = {
@@ -32,21 +32,23 @@ var apexSignature = {
         return base64;
     },
     // save to DB function
-    save2Db: function(pAjaxIdentifier, pRegionId, pImg, callback) {
+    save2Db: function(pOptions, pRegionId, pImg, callback) {
         // img DataURI to base64
         var base64 = apexSignature.dataURI2base64(pImg);
         // split base64 clob string to f01 array length 30k
         var f01Array = [];
         f01Array = apexSignature.clob2Array(base64, 30000, f01Array);
         // Apex Ajax Call
-        apex.server.plugin(pAjaxIdentifier, {
-            f01: f01Array
+        apex.server.plugin(pOptions.ajaxIdentifier, {
+            f01: f01Array,
+            // #13: Allows for items to be submitted
+            pageItems: (typeof pOptions.ajaxItemsToSubmit != "undefined") ? pOptions.ajaxItemsToSubmit.split(',') : null
         }, {
             dataType: 'html',
             // SUCESS function
-            success: function() {
+            success: function(data) {
                 // add apex event
-                $('#' + pRegionId).trigger('apexsignature-saved-db');
+                $('#' + pRegionId).trigger('apexsignature-saved-db', JSON.parse(data ? data : '{}'));
                 // callback
                 callback();
             },
@@ -69,19 +71,25 @@ var apexSignature = {
         var vMaxWidth = parseInt(vOptions.lineMaxWidth);
         var vClearBtnSelector = vOptions.clearButton;
         var vSaveBtnSelector = vOptions.saveButton;
-        var vEmptyAlert = vOptions.emptyAlert;
+        var vEmptyAlert = vOptions.emptyAlert;										  
         var vShowSpinner = apexSignature.parseBoolean(vOptions.showSpinner);
         var vCanvasWidth = vCanvas$.width;
         var vCanvasHeight = vCanvas$.height;
         var vClientWidth = parseInt(document.documentElement.clientWidth);
         var vCientHeight = parseInt(document.documentElement.clientHeight);
+        var vTrimCanvas = apexSignature.parseBoolean(vOptions.trimCanvas);
+        var vImageFormat = vOptions.imageFormat;
+        // jpeg doesn't support transparent backgrounds. So we change it back to rgb if rgba is set.
+        var vBackgroundColor = (vImageFormat == "image/jpeg") ? vOptions.backgroundColor.replace("rgba","rgb").replace(/,(\d+(\.\d+)?\))$/, ')') : vOptions.backgroundColor;
+
         // Logging
         if (vLogging) {
             console.log('apexSignatureFnc: vOptions.ajaxIdentifier:', vOptions.ajaxIdentifier);
+            console.log('apexSignatureFnc: vOptions.ajaxItemsToSubmit:', vOptions.ajaxItemsToSubmit);
             console.log('apexSignatureFnc: vOptions.canvasId:', vOptions.canvasId);
             console.log('apexSignatureFnc: vOptions.lineMinWidth:', vOptions.lineMinWidth);
             console.log('apexSignatureFnc: vOptions.lineMaxWidth:', vOptions.lineMaxWidth);
-            console.log('apexSignatureFnc: vOptions.backgroundColor:', vOptions.backgroundColor);
+            console.log('apexSignatureFnc: vOptions.backgroundColor:', vBackgroundColor);
             console.log('apexSignatureFnc: vOptions.penColor:', vOptions.penColor);
             console.log('apexSignatureFnc: vOptions.saveButton:', vOptions.saveButton);
             console.log('apexSignatureFnc: vOptions.clearButton:', vOptions.clearButton);
@@ -92,6 +100,8 @@ var apexSignature = {
             console.log('apexSignatureFnc: vCanvasHeight:', vCanvasHeight);
             console.log('apexSignatureFnc: vClientWidth:', vClientWidth);
             console.log('apexSignatureFnc: vCientHeight:', vCanvasHeight);
+            console.log('apexSignatureFnc: vTrimCanvas:', vTrimCanvas);
+            console.log('apexSignatureFnc: vImageFormat:', vImageFormat);
         }
         // resize canvas if screen smaller than canvas
         if (vCanvasWidth > vClientWidth) {
@@ -105,7 +115,7 @@ var apexSignature = {
         var signaturePad = new SignaturePad(vCanvas$, {
             minWidth: vMinWidth,
             maxWidth: vMaxWidth,
-            backgroundColor: vOptions.backgroundColor,
+            backgroundColor: vBackgroundColor,
             penColor: vOptions.penColor
         });
         // clear signaturePad
@@ -117,15 +127,30 @@ var apexSignature = {
         // save signaturePad to DB
         $(vSaveBtnSelector).click(function() {
             var vIsEmpty = signaturePad.isEmpty();
+
             // only when signature is not empty
             if (vIsEmpty === false) {
                 // show wait spinner
                 if (vShowSpinner) {
                     var lSpinner$ = apex.util.showSpinner($('#' + pRegionId));
                 }
                 // save image
-                var vImg = signaturePad.toDataURL();
-                apexSignature.save2Db(vOptions.ajaxIdentifier, pRegionId, vImg, function() {
+                var vImg;
+                if (vTrimCanvas) {
+                    if (vImageFormat == "image/jpeg") {
+                        vImg = signaturePad.trimWhitespace(vImageFormat);
+                    } else {
+                        vImg = signaturePad.trimWhitespace();
+                    }
+                } else {
+                    if (vImageFormat == "image/jpeg") {
+                        vImg = signaturePad.toDataURL(vImageFormat);
+                    } else {
+                        vImg = signaturePad.toDataURL();
+                    }
+                }
+
+                apexSignature.save2Db(vOptions, pRegionId, vImg, function() {
                     // clear
                     signaturePad.clear();
                     // remove wait spinner