/**
* @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,
/**
Roo.extend(Roo.form.Signature, Roo.form.Field, {
/**
- * @cfg {Object} fieldLabel Label to use when rendering a form.
+ * @cfg {Object} labels Label to use when rendering a form.
* defaults to
* labels : {
* clear : "Clear",
* @cfg {Number} height The signature panel height (defaults to 100)
*/
height : 100,
- /**
- * @cfg {Object} signPanel The signature SVG panel element (defaults to {})
- */
- signPanel : {},
/**
* @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
*/
allowBlank : false,
- /**
- * @cfg {Boolean} isMouseDown False to validate that the mouse down event (defaults to 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,
- /**
- * @cfg {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
- */
+ // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
isConfirmed : false,
- /**
- * @cfg {String} signatureTmp SVG mapping string (defaults to empty string)
- */
+ // {String} signatureTmp SVG mapping string (defaults to empty string)
signatureTmp : '',
+
defaultAutoCreate : { // modified by initCompnoent..
tag: "input",
type:"hidden"
}, 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",
- x1: "0",
- y1: "80",
- x2: "300",
- y2: "80",
+ 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",
},
{
tag: "path",
- id: "svg-p",
+ id: this.svgID + "-svg-p",
'stroke': "navy",
'stroke-width': "3",
'fill': "none",
'pointer-events': 'none'
- },
+ }
]
});
this.createSVG();
},
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);
},
//mouse event headler
down : function (e) {
- var sp = this.signatureTmp.split(' ');
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();
},
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.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