FIX: responsive version

[roojs1] / Roo / bootstrap / BezierSignature.js

diff --git a/Roo/bootstrap/BezierSignature.js b/Roo/bootstrap/BezierSignature.js
index 504e13b..b15c07b 100644 (file)
--- a/Roo/bootstrap/BezierSignature.js
+++ b/Roo/bootstrap/BezierSignature.js
@@ -17,6 +17,9 @@
 
 Roo.bootstrap.BezierSignature = function(config){
     Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
+    this.addEvents({
+        "resize" : true
+    });
 };
 
 Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
@@ -27,6 +30,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
     _mouseButtonDown: true,
     
+    /**
+     * @cfg(int) canvas height
+     */
+    canvas_height: '200px',
+    
     /**
      * @cfg(float or function) Radius of a single dot.
      */ 
@@ -79,12 +87,25 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
     
     getAutoCreate : function()
     {
-        var cls = 'roo-signature';
+        var cls = 'roo-signature column';
         
         if(this.cls){
             cls += ' ' + this.cls;
         }
         
+        var col_sizes = [
+            'lg',
+            'md',
+            'sm',
+            'xs'
+        ];
+        
+        for(var i = 0; i < col_sizes.length; i++) {
+            if(this[col_sizes[i]]) {
+                cls += " col-"+col_sizes[i]+"-"+this[col_sizes[i]];
+            }
+        }
+        
         var cfg = {
             tag: 'div',
             cls: cls,
@@ -95,7 +116,9 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
                     cn: [
                         {
                             tag: 'canvas',
-                            cls: 'roo-signature-body-canvas'
+                            cls: 'roo-signature-body-canvas',
+                            height: this.canvas_height,
+                            width: this.canvas_width
                         }
                     ]
                 }
@@ -126,7 +149,17 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,  {
             canvas.on('touchend', this._handleTouchEnd, this);
         }
         
+        if(this.resize_to_parent_width) {
+            Roo.EventManager.onWindowResize(this.resize, this, true);
+        }
+        
         this.clear();
+        
+        this.resize();
+    },
+    
+    resize: function(){
+        this.canvasEl().dom.width = this.el.dom.offsetWidth;
     },
     
     _handleMouseDown: function(e)