1 <html><head><title>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">/*
4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @class Roo.form.Signature
14 * @extends Roo.form.Field
18 * @param {Object} config Configuration options
21 </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">){
22 </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">);
24 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({</span><span class="jsdoc-comment">// not in used??
27 * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
28 * @param {Roo.form.Signature} combo This combo box
30 </span><span class="jsdoc-string">'confirm' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
31 </span><span class="jsdoc-comment">/**
33 * Fires when the 'edit' icon is pressed (add a listener to enable add button)
34 * @param {Roo.form.ComboBox} combo This combo box
35 * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
37 </span><span class="jsdoc-string">'reset' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
38 </span><span class="jsdoc-syntax">});
41 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.form.Signature</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.form.Field</span><span class="jsdoc-syntax">, {
42 </span><span class="jsdoc-comment">/**
43 * @cfg {Object} labels Label to use when rendering a form.
46 * clear : "Clear",
47 * confirm : "Confirm"
50 </span><span class="jsdoc-var">labels </span><span class="jsdoc-syntax">: {
51 </span><span class="jsdoc-var">clear </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"Clear"</span><span class="jsdoc-syntax">,
52 </span><span class="jsdoc-var">confirm </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"Confirm"
53 </span><span class="jsdoc-syntax">},
54 </span><span class="jsdoc-comment">/**
55 * @cfg {Number} width The signature panel width (defaults to 300)
57 </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 300,
58 </span><span class="jsdoc-comment">/**
59 * @cfg {Number} height The signature panel height (defaults to 100)
61 </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: 100,
62 </span><span class="jsdoc-comment">/**
63 * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
65 </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
67 </span><span class="jsdoc-comment">//private
68 // {Object} signPanel The signature SVG panel element (defaults to {})
69 </span><span class="jsdoc-var">signPanel </span><span class="jsdoc-syntax">: {},
70 </span><span class="jsdoc-comment">// {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
71 </span><span class="jsdoc-var">isMouseDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
72 </span><span class="jsdoc-comment">// {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
73 </span><span class="jsdoc-var">isConfirmed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
74 </span><span class="jsdoc-comment">// {String} signatureTmp SVG mapping string (defaults to empty string)
75 </span><span class="jsdoc-var">signatureTmp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
78 </span><span class="jsdoc-var">defaultAutoCreate </span><span class="jsdoc-syntax">: { </span><span class="jsdoc-comment">// modified by initCompnoent..
79 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"input"</span><span class="jsdoc-syntax">,
80 </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"hidden"
81 </span><span class="jsdoc-syntax">},
83 </span><span class="jsdoc-comment">// private
84 </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">){
86 </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">);
88 </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">({
89 </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">}
92 </span><span class="jsdoc-var">this.createToolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
93 </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">({
94 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
95 </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;'
96 </span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">this.el
97 </span><span class="jsdoc-syntax">);
99 </span><span class="jsdoc-var">this.svgID </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">();
100 </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">({
101 </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">,
102 </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'svg'</span><span class="jsdoc-syntax">,
103 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.svgID </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">"-svg"</span><span class="jsdoc-syntax">,
104 </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
105 </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">,
106 </span><span class="jsdoc-var">viewBox</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0 0 '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">+</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">,
107 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
109 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"rect"</span><span class="jsdoc-syntax">,
110 </span><span class="jsdoc-var">id</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">,
111 </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
112 </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">,
113 </span><span class="jsdoc-var">fill</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"#ffa"
114 </span><span class="jsdoc-syntax">},
116 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"line"</span><span class="jsdoc-syntax">,
117 </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.svgID </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">"-svg-l"</span><span class="jsdoc-syntax">,
118 </span><span class="jsdoc-var">x1</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// start
119 </span><span class="jsdoc-var">y1</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">*0.8), </span><span class="jsdoc-comment">// start set the line in 80% of height
120 </span><span class="jsdoc-var">x2</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// end
121 </span><span class="jsdoc-var">y2</span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">*0.8), </span><span class="jsdoc-comment">// end set the line in 80% of height
122 </span><span class="jsdoc-string">'stroke'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"#666"</span><span class="jsdoc-syntax">,
123 </span><span class="jsdoc-string">'stroke-width'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"1"</span><span class="jsdoc-syntax">,
124 </span><span class="jsdoc-string">'stroke-dasharray'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"3"</span><span class="jsdoc-syntax">,
125 </span><span class="jsdoc-string">'shape-rendering'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"crispEdges"</span><span class="jsdoc-syntax">,
126 </span><span class="jsdoc-string">'pointer-events'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"none"
127 </span><span class="jsdoc-syntax">},
129 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"path"</span><span class="jsdoc-syntax">,
130 </span><span class="jsdoc-var">id</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">,
131 </span><span class="jsdoc-string">'stroke'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"navy"</span><span class="jsdoc-syntax">,
132 </span><span class="jsdoc-string">'stroke-width'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"3"</span><span class="jsdoc-syntax">,
133 </span><span class="jsdoc-string">'fill'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"none"</span><span class="jsdoc-syntax">,
134 </span><span class="jsdoc-string">'pointer-events'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'none'
135 </span><span class="jsdoc-syntax">}
138 </span><span class="jsdoc-var">this.createSVG</span><span class="jsdoc-syntax">();
139 </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">();
141 </span><span class="jsdoc-var">createSVG </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
142 </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">;
143 </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">;
144 </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">;
146 </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousedown'</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">);
147 </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mousemove'</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">);
148 </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseup'</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">);
149 </span><span class="jsdoc-var">r.addEventListener</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'mouseout'</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">);
150 </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">);
151 </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">);
152 </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">);
155 </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">){
156 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">e.type.match</span><span class="jsdoc-syntax">(/^touch/);
158 </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">) {
159 </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">();
160 </span><span class="jsdoc-var">pt.x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.clientX</span><span class="jsdoc-syntax">;
161 </span><span class="jsdoc-var">pt.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.clientY</span><span class="jsdoc-syntax">;
162 </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">)) {
163 </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">;
164 </span><span class="jsdoc-var">pt.y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.targetTouches</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.clientY</span><span class="jsdoc-syntax">;
166 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.svgEl.dom.getScreenCTM</span><span class="jsdoc-syntax">();
167 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a.inverse</span><span class="jsdoc-syntax">();
168 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">pt.matrixTransform</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
169 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">mx.x </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">',' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">mx.y</span><span class="jsdoc-syntax">;
171 </span><span class="jsdoc-comment">//mouse event headler
172 </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">) {
173 </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">;
174 </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">);
176 </span><span class="jsdoc-var">this.isMouseDown </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
178 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
180 </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">) {
181 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isMouseDown</span><span class="jsdoc-syntax">) {
182 </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">;
183 </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">);
186 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
188 </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">) {
189 </span><span class="jsdoc-var">this.isMouseDown </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
190 </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">);
192 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sp.length </span><span class="jsdoc-syntax">> 1){
193 </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/)){
194 </span><span class="jsdoc-var">sp.pop</span><span class="jsdoc-syntax">();
195 </span><span class="jsdoc-var">sp.pop</span><span class="jsdoc-syntax">();
196 </span><span class="jsdoc-var">sp.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">""</span><span class="jsdoc-syntax">);
197 </span><span class="jsdoc-var">this.signatureTmp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sp.join</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">" "</span><span class="jsdoc-syntax">);
200 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">() != </span><span class="jsdoc-var">this.signatureTmp</span><span class="jsdoc-syntax">){
201 </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">'#ffa'</span><span class="jsdoc-syntax">);
202 </span><span class="jsdoc-var">this.isConfirmed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
204 </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
207 </span><span class="jsdoc-comment">/**
208 * Protected method that will not generally be called directly. It
209 * is called when the editor creates its toolbar. Override this method if you need to
210 * add custom toolbar buttons.
211 * @param {HtmlEditor} editor
213 </span><span class="jsdoc-var">createToolbar </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">editor</span><span class="jsdoc-syntax">){
214 </span><span class="jsdoc-keyword">function </span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">toggle</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">){
215 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">xid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">fid </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-'</span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">;
216 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
217 </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">xid</span><span class="jsdoc-syntax">,
218 </span><span class="jsdoc-var">cmd </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
219 </span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'x-btn-icon x-edit-'</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">,
220 </span><span class="jsdoc-var">enableToggle</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">toggle </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
221 </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...
222 </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">||</span><span class="jsdoc-var">editor.relayBtnCmd</span><span class="jsdoc-syntax">,
223 </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">,
224 </span><span class="jsdoc-var">tooltip</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">etb.buttonTips</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">] || </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">///tips ???
225 </span><span class="jsdoc-var">tabIndex</span><span class="jsdoc-syntax">:-1
230 </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">);
231 </span><span class="jsdoc-var">this.tb </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tb</span><span class="jsdoc-syntax">;
232 </span><span class="jsdoc-var">this.tb.add</span><span class="jsdoc-syntax">(
234 </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">,
235 </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...
236 </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.reset</span><span class="jsdoc-syntax">,
237 </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">,
238 </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.labels.clear
239 </span><span class="jsdoc-syntax">},
241 </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Fill'</span><span class="jsdoc-syntax">,
242 </span><span class="jsdoc-var">xns</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.Toolbar
243 </span><span class="jsdoc-syntax">},
245 </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">,
246 </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...
247 </span><span class="jsdoc-var">handler</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.confirmHandler</span><span class="jsdoc-syntax">,
248 </span><span class="jsdoc-var">clickEvent</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">'mousedown'</span><span class="jsdoc-syntax">,
249 </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.labels.confirm
250 </span><span class="jsdoc-syntax">}
254 </span><span class="jsdoc-comment">//public
256 * when user is clicked confirm then show this image.....
258 * @return {String} Image Data URI
260 </span><span class="jsdoc-var">getImageDataURI </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
261 </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">;
262 </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">);
263 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">src</span><span class="jsdoc-syntax">;
265 </span><span class="jsdoc-comment">/**
267 * @return {Boolean} this.isConfirmed
269 </span><span class="jsdoc-var">getConfirmed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
270 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.isConfirmed</span><span class="jsdoc-syntax">;
272 </span><span class="jsdoc-comment">/**
274 * @return {Number} this.width
276 </span><span class="jsdoc-var">getWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
277 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">;
279 </span><span class="jsdoc-comment">/**
281 * @return {Number} this.height
283 </span><span class="jsdoc-var">getHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
284 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">;
286 </span><span class="jsdoc-comment">// private
287 </span><span class="jsdoc-var">getSignature </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
288 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.signatureTmp</span><span class="jsdoc-syntax">;
290 </span><span class="jsdoc-comment">// private
291 </span><span class="jsdoc-var">reset </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
292 </span><span class="jsdoc-var">this.signatureTmp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
293 </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">'#ffa'</span><span class="jsdoc-syntax">);
294 </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-string">''</span><span class="jsdoc-syntax">);
295 </span><span class="jsdoc-var">this.isConfirmed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
296 </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">);
298 </span><span class="jsdoc-var">setSignature </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">){
299 </span><span class="jsdoc-var">this.signatureTmp </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
300 </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">'#ffa'</span><span class="jsdoc-syntax">);
301 </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">s</span><span class="jsdoc-syntax">);
302 </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">);
303 </span><span class="jsdoc-var">this.isConfirmed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
304 </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">);
306 </span><span class="jsdoc-var">test </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
307 </span><span class="jsdoc-comment">// Roo.log(this.signPanel.dom.contentWindow.up())
308 </span><span class="jsdoc-syntax">},
309 </span><span class="jsdoc-comment">//private
310 </span><span class="jsdoc-var">setConfirmed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
314 </span><span class="jsdoc-comment">// Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
315 </span><span class="jsdoc-syntax">},
316 </span><span class="jsdoc-comment">// private
317 </span><span class="jsdoc-var">confirmHandler </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
318 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.getSignature</span><span class="jsdoc-syntax">()){
319 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
322 </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">);
323 </span><span class="jsdoc-var">this.setValue</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getSignature</span><span class="jsdoc-syntax">());
324 </span><span class="jsdoc-var">this.isConfirmed </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
326 </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">);
328 </span><span class="jsdoc-comment">// private
329 // Subclasses should provide the validation implementation by overriding this
330 </span><span class="jsdoc-var">validateValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
331 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.allowBlank</span><span class="jsdoc-syntax">){
332 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
335 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.isConfirmed</span><span class="jsdoc-syntax">){
336 </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
338 </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
340 });</span></code></body></html>