/**
* @event confirm
* Fires when the 'confirm' icon is pressed (add a listener to enable add button)
- * @param {Roo.form.ComboBox} combo This combo box
+ * @param {Roo.form.Signature} combo This combo box
*/
'confirm' : true,
/**
}, 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: "svg-r",
+ 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.width*0.3), // start
+ y1: (this.height*0.8), // start set the line in 80% of height
x2: this.width, // end
- y2: (this.width*0.3), // end
+ y2: (this.height*0.8), // end set the line in 80% of height
'stroke': "#666",
'stroke-width': "1",
'stroke-dasharray': "3",
},
{
tag: "path",
- id: "svg-p",
+ id: this.svgID + "-svg-p",
'stroke': "navy",
'stroke-width': "3",
'fill': "none",
},
createSVG : function(){
var svg = this.signPanel;
- var r = svg.select('#svg-r', true).first().dom;
+ var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
var t = this;
r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
pt.x = e.clientX;
pt.y = e.clientY;
if (this.isTouchEvent(e)) {
- pt.x = e.targetTouches[0].clientX
+ pt.x = e.targetTouches[0].clientX;
pt.y = e.targetTouches[0].clientY;
}
var a = this.svgEl.dom.getScreenCTM();
//mouse event headler
down : function (e) {
this.signatureTmp += 'M' + this.getCoords(e) + ' ';
- this.signPanel.select('#svg-p', true).first().attr('d', this.signatureTmp);
+ this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
this.isMouseDown = true;
move : function (e) {
if (this.isMouseDown) {
this.signatureTmp += 'L' + this.getCoords(e) + ' ';
- this.signPanel.select('#svg-p', true).first().attr('d', this.signatureTmp);
+ this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
}
e.preventDefault();
}
}
if(this.getValue() != this.signatureTmp){
- this.signPanel.select('#svg-r', true).first().attr('fill', '#ffa');
+ this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
this.isConfirmed = false;
}
e.preventDefault();
{
cls : ' x-signature-btn x-signature-'+id,
scope: editor, // was editor...
- handler: this.setConfirmed,
+ 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('#svg-r', true).first().attr('fill', '#ffa');
- this.signPanel.select('#svg-p', true).first().attr('d', '');
+ 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())
},
- //public
+ //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('#svg-r', true).first().attr('fill', '#cfc');
+
+ this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
this.setValue(this.getSignature());
this.isConfirmed = true;
-// Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
+
+ this.fireEvent('confirm', this);
},
// private
// Subclasses should provide the validation implementation by overriding this