add text input as focus placeholder to easily integrate with other in…

…puts on the form for mobile/web
zyzbroker · Jul 12, 2017 · 9ecf260 · 9ecf260
1 parent 5f1330c
commit 9ecf260
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/src/aura/ESignature/ESignature.cmp b/src/aura/ESignature/ESignature.cmp
@@ -11,12 +11,15 @@
     <aura:method name="capture" action="{!c.onCapture}" 
         description="call this method to capture signature"/>
     <aura:method name="clear" action="{!c.onClear}" description="clear the signature"/>
-    <div class="mb-signature-container" ontouchmove="{!c.handleTouchMove}">
+    <div class="mb-signature-container" 
+        ontouchmove="{!c.handleTouchMove}"
+        ontouchstart="{!c.onTouch}">
         <aura:if isTrue="{!v.readOnly}">
             <div class="mb-signature-pad-readonly">
                 <img alt="User Signature" src="{!v.signatureData}"/>
             </div>
             <aura:set attribute="else">
+                <input type="text" readonly="true" class="esignature-hide"/>
                 <div class="mb-signature-pad" id="signatureWrapper">
                     <div class="mb-signature-pad-body">
                         <canvas></canvas>

diff --git a/src/aura/ESignature/ESignature.css b/src/aura/ESignature/ESignature.css
@@ -3,7 +3,16 @@
   width: 100%;
 }
 
-.THIS.mb-signature-container {}
+.THIS .esignature-hide {
+  border: 0;
+  padding: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: transparent;
+}
 
 .THIS .mb-signature-pad,
 .THIS .mb-signature-pad-readonly {
@@ -75,4 +84,4 @@
     min-width: 250px;
     min-height: 140px;
   }
-}
+}
diff --git a/src/aura/ESignature/ESignatureController.js b/src/aura/ESignature/ESignatureController.js
@@ -11,7 +11,11 @@
     evt.stopPropagation();
   },
 
+  onTouch: function(cmp, evt, h) {
+    h.touch(cmp);
+  },
+
   onClear: function(cmp, evt, h) {
     h.clear(cmp);
   }
-})
+})
diff --git a/src/aura/ESignature/ESignatureHelper.js b/src/aura/ESignature/ESignatureHelper.js
@@ -22,8 +22,6 @@
     resizeCanvas();
   },
 
-  afterRender: function(cmp) {},
-
   capture: function(cmp) {
     var dataUrl, pad = cmp.get('v.signaturePad');
     pad.trimCanvas();
@@ -33,5 +31,10 @@
 
   clear: function(cmp) {
     cmp.get('v.signaturePad').clear();
+  },
+
+  touch: function(cmp) {
+    var e = document.querySelector('input.esignature-hide');
+    e.focus();
   }
 })