allow string based values for comboboxarray

[roojs1] / Roo / form / Signature.js

diff --git a/Roo/form/Signature.js b/Roo/form/Signature.js
index 5840c91..579d0ea 100644 (file)
--- a/Roo/form/Signature.js
+++ b/Roo/form/Signature.js
@@ -25,7 +25,7 @@ Roo.form.Signature = function(config){
          /**
          * @event confirm
          * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
-            * @param {Roo.form.ComboBox} combo This combo box
+            * @param {Roo.form.Signature} combo This combo box
             */
         'confirm' : true,
         /**
@@ -58,7 +58,7 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
     /**
      * @cfg {Number} height The signature panel height (defaults to 100)
      */
-    height : 400,
+    height : 100,
     /**
      * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
      */
@@ -96,22 +96,25 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
             }, this.el
         );
             
+        this.svgID = Roo.id();
         this.svgEl = this.signPanel.createChild({
               xmlns : 'http://www.w3.org/2000/svg',
               tag : 'svg',
+              id : this.svgID + "-svg",
               width: this.width,
               height: this.height,
               viewBox: '0 0 '+this.width+' '+this.height,
               cn : [
                 {
                     tag: "rect",
-                    id: "svg-r",
+                    id: this.svgID + "-svg-r",
                     width: this.width,
                     height: this.height,
                     fill: "#ffa"
                 },
                 {
                     tag: "line",
+                    id: this.svgID + "-svg-l",
                     x1: "0", // start
                     y1: (this.height*0.8), // start set the line in 80% of height
                     x2: this.width, // end
@@ -124,7 +127,7 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
                 },
                 {
                     tag: "path",
-                    id: "svg-p",
+                    id: this.svgID + "-svg-p",
                     'stroke': "navy",
                     'stroke-width': "3",
                     'fill': "none",
@@ -137,7 +140,7 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
     },
     createSVG : function(){ 
         var svg = this.signPanel;
-        var r = svg.select('#svg-r', true).first().dom;
+        var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
         var t = this;
 
         r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
@@ -157,7 +160,7 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
         pt.x = e.clientX; 
         pt.y = e.clientY;
         if (this.isTouchEvent(e)) {
-            pt.x =  e.targetTouches[0].clientX 
+            pt.x =  e.targetTouches[0].clientX;
             pt.y = e.targetTouches[0].clientY;
         }
         var a = this.svgEl.dom.getScreenCTM();
@@ -168,7 +171,7 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
     //mouse event headler 
     down : function (e) {
         this.signatureTmp += 'M' + this.getCoords(e) + ' ';
-        this.signPanel.select('#svg-p', true).first().attr('d', this.signatureTmp);
+        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
         
         this.isMouseDown = true;
         
@@ -177,7 +180,7 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
     move : function (e) {
         if (this.isMouseDown) {
             this.signatureTmp += 'L' + this.getCoords(e) + ' ';
-            this.signPanel.select('#svg-p', true).first().attr('d', this.signatureTmp);
+            this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
         }
         
         e.preventDefault();
@@ -195,7 +198,7 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
             }
         }
         if(this.getValue() != this.signatureTmp){
-            this.signPanel.select('#svg-r', true).first().attr('fill', '#ffa');
+            this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
             this.isConfirmed = false;
         }
         e.preventDefault();
@@ -241,15 +244,45 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
             {
                 cls : '  x-signature-btn x-signature-'+id,
                 scope: editor, // was editor...
-                handler: this.setConfirmed,
+                handler: this.confirmHandler,
                 clickEvent:'mousedown',
                 text: this.labels.confirm
             }
         );
     
     },
-    
-    
+    //public
+    /**
+     * when user is clicked confirm then show this image.....
+     * 
+     * @return {String} Image Data URI
+     */
+    getImageDataURI : function(){
+        var svg = this.svgEl.dom.parentNode.innerHTML;
+        var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
+        return src; 
+    },
+    /**
+     * 
+     * @return {Boolean} this.isConfirmed
+     */
+    getConfirmed : function(){
+        return this.isConfirmed;
+    },
+    /**
+     * 
+     * @return {Number} this.width
+     */
+    getWidth : function(){
+        return this.width;
+    },
+    /**
+     * 
+     * @return {Number} this.height
+     */
+    getHeight : function(){
+        return this.height;
+    },
     // private
     getSignature : function(){
         return this.signatureTmp;
@@ -257,23 +290,40 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
     // private
     reset : function(){
         this.signatureTmp = '';
-        this.signPanel.select('#svg-r', true).first().attr('fill', '#ffa');
-        this.signPanel.select('#svg-p', true).first().attr('d', '');
+        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
         this.isConfirmed = false;
         Roo.form.Signature.superclass.reset.call(this);
     },
+    setSignature : function(s){
+        this.signatureTmp = s;
+        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
+        this.setValue(s);
+        this.isConfirmed = false;
+        Roo.form.Signature.superclass.reset.call(this);
+    }, 
     test : function(){
 //        Roo.log(this.signPanel.dom.contentWindow.up())
     },
     //private
     setConfirmed : function(){
+        
+        
+        
+//        Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
+    },
+    // private
+    confirmHandler : function(){
         if(!this.getSignature()){
             return;
         }
-        this.signPanel.select('#svg-r', true).first().attr('fill', '#cfc');
+        
+        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
         this.setValue(this.getSignature());
         this.isConfirmed = true;
-//        Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
+        
+        this.fireEvent('confirm', this);
     },
     // private
     // Subclasses should provide the validation implementation by overriding this