-<html><head><title>../roojs1/Roo/form/Signature.js</title><link rel="stylesheet" type="text/css" href="../../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
+<html><head><title>/home/alan/gitlive/roojs1/Roo/form/Signature.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* Fork - LGPL
* <script type="text/javascript">
*/
-
+
/**
* @class Roo.form.Signature
* @extends Roo.form.Field
</span><span class="jsdoc-var">Roo.form.Signature </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
</span><span class="jsdoc-var">Roo.form.Signature.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
-
+
</span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({</span><span class="jsdoc-comment">// not in used??
/**
* @event confirm
* confirm : "Confirm"
* }
*/
- </span><span class="jsdoc-var">labels </span><span class="jsdoc-syntax">: {
+ </span><span class="jsdoc-var">labels </span><span class="jsdoc-syntax">: {
</span><span class="jsdoc-var">clear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"Clear"</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-var">confirm </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"Confirm"
</span><span class="jsdoc-syntax">},
* @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
*/
</span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
-
+
</span><span class="jsdoc-comment">//private
// {Object} signPanel The signature SVG panel element (defaults to {})
</span><span class="jsdoc-var">signPanel </span><span class="jsdoc-syntax">: {},
</span><span class="jsdoc-var">isConfirmed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-comment">// {String} signatureTmp SVG mapping string (defaults to empty string)
</span><span class="jsdoc-var">signatureTmp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
-
-
+
+
</span><span class="jsdoc-var">defaultAutoCreate </span><span class="jsdoc-syntax">: { </span><span class="jsdoc-comment">// modified by initCompnoent..
</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"input"</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"hidden"
</span><span class="jsdoc-comment">// private
</span><span class="jsdoc-var">onRender </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">){
-
+
</span><span class="jsdoc-var">Roo.form.Signature.superclass.onRender.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ct</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">);
-
+
</span><span class="jsdoc-var">this.wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.wrap</span><span class="jsdoc-syntax">({
</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-form-signature-wrap'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'width: ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'x-form-signature'</span><span class="jsdoc-syntax">}
});
-
+
</span><span class="jsdoc-var">this.createToolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
</span><span class="jsdoc-var">this.signPanel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.wrap.createChild</span><span class="jsdoc-syntax">({
</span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'width: ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px; height: ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.height </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'px; border: 0;'
</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">this.el
</span><span class="jsdoc-syntax">);
-
+
</span><span class="jsdoc-var">this.svgID </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
</span><span class="jsdoc-var">this.svgEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.signPanel.createChild</span><span class="jsdoc-syntax">({
</span><span class="jsdoc-var">xmlns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'http://www.w3.org/2000/svg'</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-var">this.createSVG</span><span class="jsdoc-syntax">();
</span><span class="jsdoc-var">this.svgBox </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.svgEl.dom.getScreenCTM</span><span class="jsdoc-syntax">();
},
- </span><span class="jsdoc-var">createSVG </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+ </span><span class="jsdoc-var">createSVG </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">svg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.signPanel</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">svg.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#'</span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.svgID </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-svg-r'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.dom</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchstart'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t.down</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
</span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchmove'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t.move</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
</span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'touchend'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) { </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">t.up</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">); }, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
-
+
},
</span><span class="jsdoc-var">isTouchEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
</span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">e.type.match</span><span class="jsdoc-syntax">(/^touch/);
},
</span><span class="jsdoc-var">getCoords </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.svgEl.dom.createSVGPoint</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">pt.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.clientX</span><span class="jsdoc-syntax">;
+ </span><span class="jsdoc-var">pt.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.clientX</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-var">pt.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.clientY</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isTouchEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)) {
</span><span class="jsdoc-var">pt.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.targetTouches</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.clientX</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-var">down </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
</span><span class="jsdoc-var">this.signatureTmp </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">'M' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.getCoords</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-var">this.signPanel.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#'</span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.svgID </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-svg-p'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'d'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.signatureTmp</span><span class="jsdoc-syntax">);
-
+
</span><span class="jsdoc-var">this.isMouseDown </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
-
+
</span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
},
</span><span class="jsdoc-var">move </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
</span><span class="jsdoc-var">this.signatureTmp </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">'L' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.getCoords</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) + </span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-var">this.signPanel.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#'</span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.svgID </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-svg-p'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">( </span><span class="jsdoc-string">'d'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.signatureTmp</span><span class="jsdoc-syntax">);
}
-
+
</span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
},
</span><span class="jsdoc-var">up </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
</span><span class="jsdoc-var">this.isMouseDown </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.signatureTmp.split</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">);
-
+
</span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sp.length </span><span class="jsdoc-syntax">> 1){
</span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">sp</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">sp.length</span><span class="jsdoc-syntax">-2]</span><span class="jsdoc-var">.match</span><span class="jsdoc-syntax">(/^L/)){
</span><span class="jsdoc-var">sp.pop</span><span class="jsdoc-syntax">();
}
</span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
},
-
+
</span><span class="jsdoc-comment">/**
* Protected method that will not generally be called directly. It
* is called when the editor creates its toolbar. Override this method if you need to
</span><span class="jsdoc-var">tabIndex</span><span class="jsdoc-syntax">:-1
};
}
-
-
+
+
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">editor.wrap.dom.firstChild</span><span class="jsdoc-syntax">);
</span><span class="jsdoc-var">this.tb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tb</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-var">this.tb.add</span><span class="jsdoc-syntax">(
{
</span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Fill'</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-var">xns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.Toolbar
- </span><span class="jsdoc-syntax">},
+ </span><span class="jsdoc-syntax">},
{
</span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">' x-signature-btn x-signature-'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
</span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// was editor...
</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.labels.confirm
</span><span class="jsdoc-syntax">}
);
-
+
},
</span><span class="jsdoc-comment">//public
/**
</span><span class="jsdoc-var">getImageDataURI </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">svg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.svgEl.dom.parentNode.innerHTML</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'data:image/svg+xml;base64,'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">window.btoa</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">svg</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">;
+ </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">;
},
</span><span class="jsdoc-comment">/**
*
</span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
</span><span class="jsdoc-var">this.isConfirmed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
</span><span class="jsdoc-var">Roo.form.Signature.superclass.reset.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
- },
+ },
</span><span class="jsdoc-var">test </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
</span><span class="jsdoc-comment">// Roo.log(this.signPanel.dom.contentWindow.up())
</span><span class="jsdoc-syntax">},
</span><span class="jsdoc-comment">//private
</span><span class="jsdoc-var">setConfirmed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
-
-
-
+
+
+
</span><span class="jsdoc-comment">// Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
</span><span class="jsdoc-syntax">},
</span><span class="jsdoc-comment">// private
</span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.getSignature</span><span class="jsdoc-syntax">()){
</span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
}
-
+
</span><span class="jsdoc-var">this.signPanel.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'#'</span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.svgID </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-svg-r'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.attr</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'fill'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'#cfc'</span><span class="jsdoc-syntax">);
</span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getSignature</span><span class="jsdoc-syntax">());
</span><span class="jsdoc-var">this.isConfirmed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
-
+
</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'confirm'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
},
</span><span class="jsdoc-comment">// private
</span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allowBlank</span><span class="jsdoc-syntax">){
</span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
}
-
+
</span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isConfirmed</span><span class="jsdoc-syntax">){
</span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
}