X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=docs%2Fsrc%2FRoo_form_Signature.js.html;fp=docs%2Fsrc%2FRoo_form_Signature.js.html;h=652576bbe6f5d69cec6ad674dbcbe0fb247897e7;hb=9ff8ded6bbbd258ecd646184ba26020874e2c085;hp=0000000000000000000000000000000000000000;hpb=2542b67d1a0768025056f2f330bfe50b64d1ad38;p=roojs1 diff --git a/docs/src/Roo_form_Signature.js.html b/docs/src/Roo_form_Signature.js.html new file mode 100644 index 0000000000..652576bbe6 --- /dev/null +++ b/docs/src/Roo_form_Signature.js.html @@ -0,0 +1,340 @@ +/home/alan/gitlive/roojs1/Roo/form/Signature.js/* + * Based on: + * Ext JS Library 1.1.1 + * Copyright(c) 2006-2007, Ext JS, LLC. + * + * Originally Released Under LGPL - original licence link has changed is not relivant. + * + * Fork - LGPL + * <script type="text/javascript"> + */ + +/** + * @class Roo.form.Signature + * @extends Roo.form.Field + * Signature field. + * @constructor + * + * @param {Object} config Configuration options + */ + +Roo.form.Signature = function(config){ + Roo.form.Signature.superclass.constructor.call(this, config); + + this.addEvents({// not in used?? + /** + * @event confirm + * Fires when the 'confirm' icon is pressed (add a listener to enable add button) + * @param {Roo.form.Signature} combo This combo box + */ + 'confirm' : true, + /** + * @event reset + * Fires when the 'edit' icon is pressed (add a listener to enable add button) + * @param {Roo.form.ComboBox} combo This combo box + * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected) + */ + 'reset' : true + }); +}; + +Roo.extend(Roo.form.Signature, Roo.form.Field, { + /** + * @cfg {Object} labels Label to use when rendering a form. + * defaults to + * labels : { + * clear : "Clear", + * confirm : "Confirm" + * } + */ + labels : { + clear : "Clear", + confirm : "Confirm" + }, + /** + * @cfg {Number} width The signature panel width (defaults to 300) + */ + width: 300, + /** + * @cfg {Number} height The signature panel height (defaults to 100) + */ + height : 100, + /** + * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false) + */ + allowBlank : false, + + //private + // {Object} signPanel The signature SVG panel element (defaults to {}) + signPanel : {}, + // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false) + isMouseDown : false, + // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false) + isConfirmed : false, + // {String} signatureTmp SVG mapping string (defaults to empty string) + signatureTmp : '', + + + defaultAutoCreate : { // modified by initCompnoent.. + tag: "input", + type:"hidden" + }, + + // private + onRender : function(ct, position){ + + Roo.form.Signature.superclass.onRender.call(this, ct, position); + + this.wrap = this.el.wrap({ + cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'} + }); + + this.createToolbar(this); + this.signPanel = this.wrap.createChild({ + tag: 'div', + style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;' + }, 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: 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 + y2: (this.height*0.8), // end set the line in 80% of height + 'stroke': "#666", + 'stroke-width': "1", + 'stroke-dasharray': "3", + 'shape-rendering': "crispEdges", + 'pointer-events': "none" + }, + { + tag: "path", + id: this.svgID + "-svg-p", + 'stroke': "navy", + 'stroke-width': "3", + 'fill': "none", + 'pointer-events': 'none' + } + ] + }); + this.createSVG(); + this.svgBox = this.svgEl.dom.getScreenCTM(); + }, + createSVG : function(){ + var svg = this.signPanel; + var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom; + var t = this; + + r.addEventListener('mousedown', function(e) { return t.down(e); }, false); + r.addEventListener('mousemove', function(e) { return t.move(e); }, false); + r.addEventListener('mouseup', function(e) { return t.up(e); }, false); + r.addEventListener('mouseout', function(e) { return t.up(e); }, false); + r.addEventListener('touchstart', function(e) { return t.down(e); }, false); + r.addEventListener('touchmove', function(e) { return t.move(e); }, false); + r.addEventListener('touchend', function(e) { return t.up(e); }, false); + + }, + isTouchEvent : function(e){ + return e.type.match(/^touch/); + }, + getCoords : function (e) { + var pt = this.svgEl.dom.createSVGPoint(); + pt.x = e.clientX; + pt.y = e.clientY; + if (this.isTouchEvent(e)) { + pt.x = e.targetTouches[0].clientX; + pt.y = e.targetTouches[0].clientY; + } + var a = this.svgEl.dom.getScreenCTM(); + var b = a.inverse(); + var mx = pt.matrixTransform(b); + return mx.x + ',' + mx.y; + }, + //mouse event headler + down : function (e) { + this.signatureTmp += 'M' + this.getCoords(e) + ' '; + this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp); + + this.isMouseDown = true; + + e.preventDefault(); + }, + move : function (e) { + if (this.isMouseDown) { + this.signatureTmp += 'L' + this.getCoords(e) + ' '; + this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp); + } + + e.preventDefault(); + }, + up : function (e) { + this.isMouseDown = false; + var sp = this.signatureTmp.split(' '); + + if(sp.length > 1){ + if(!sp[sp.length-2].match(/^L/)){ + sp.pop(); + sp.pop(); + sp.push(""); + this.signatureTmp = sp.join(" "); + } + } + if(this.getValue() != this.signatureTmp){ + this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa'); + this.isConfirmed = false; + } + e.preventDefault(); + }, + + /** + * 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 + * add custom toolbar buttons. + * @param {HtmlEditor} editor + */ + createToolbar : function(editor){ + function btn(id, toggle, handler){ + var xid = fid + '-'+ id ; + return { + id : xid, + cmd : id, + cls : 'x-btn-icon x-edit-'+id, + enableToggle:toggle !== false, + scope: editor, // was editor... + handler:handler||editor.relayBtnCmd, + clickEvent:'mousedown', + tooltip: etb.buttonTips[id] || undefined, ///tips ??? + tabIndex:-1 + }; + } + + + var tb = new Roo.Toolbar(editor.wrap.dom.firstChild); + this.tb = tb; + this.tb.add( + { + cls : ' x-signature-btn x-signature-'+id, + scope: editor, // was editor... + handler: this.reset, + clickEvent:'mousedown', + text: this.labels.clear + }, + { + xtype : 'Fill', + xns: Roo.Toolbar + }, + { + cls : ' x-signature-btn x-signature-'+id, + scope: editor, // was editor... + 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; + }, + // private + reset : function(){ + this.signatureTmp = ''; + 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('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc'); + this.setValue(this.getSignature()); + this.isConfirmed = true; + + this.fireEvent('confirm', this); + }, + // private + // Subclasses should provide the validation implementation by overriding this + validateValue : function(value){ + if(this.allowBlank){ + return true; + } + + if(this.isConfirmed){ + return true; + } + return false; + } +}); \ No newline at end of file