Roo.form.Signature = function(config){
Roo.form.Signature.superclass.constructor.call(this, config);
this.addEvents({'confirm' : true,
'reset' : true
});
};
Roo.extend(Roo.form.Signature, Roo.form.Field, {
labels : {
clear : "Clear",
confirm : "Confirm"
},
width: 300,
height : 100,
allowBlank : false,
signPanel : {},
isMouseDown : false,
isConfirmed : false,
signatureTmp : '',
defaultAutoCreate : { tag: "input",
type:"hidden"
},
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", y1: (this.height*0.8), x2: this.width, y2: (this.height*0.8), '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;
},
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();
},
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, handler:handler||editor.relayBtnCmd,
clickEvent:'mousedown',
tooltip: etb.buttonTips[id] || undefined, 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, handler: this.reset,
clickEvent:'mousedown',
text: this.labels.clear
},
{
xtype : 'Fill',
xns: Roo.Toolbar
},
{
cls : ' x-signature-btn x-signature-'+id,
scope: editor, handler: this.confirmHandler,
clickEvent:'mousedown',
text: this.labels.confirm
}
);
},
getImageDataURI : function(){
var svg = this.svgEl.dom.parentNode.innerHTML;
var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
return src;
},
getConfirmed : function(){
return this.isConfirmed;
},
getWidth : function(){
return this.width;
},
getHeight : function(){
return this.height;
},
getSignature : function(){
return this.signatureTmp;
},
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(){
},
setConfirmed : function(){
},
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);
},
validateValue : function(value){
if(this.allowBlank){
return true;
}
if(this.isConfirmed){
return true;
}
return false;
}
});