(function($){
'use strict';
var signatureOverrides={
/** Be notified when a signature changes.
@callback SignatureChange
@global
@this Signature
@example change: function(){
console.log('Signature changed');
} */
options: {
distance: 0,
background: '#fff',
background1: '#',
color: '#000',
thickness: 2,
guideline: false,
guidelineColor: '#a0a0a0',
guidelineOffset: 50,
guidelineIndent: 10,
notAvailable: 'Your browser doesn\'t support signing',
syncField: null,
syncFormat: 'JSON',
name: false,
svgStyles: false,
change: null
},
_create: function(){
this.element.addClass(this.widgetFullName||this.widgetBaseClass);
try {
this.canvas=$('<canvas width="' + this.element.width() + '" height="' +
this.element.height() + '">' + this.options.notAvailable + '</canvas>')[0];
this.element.append(this.canvas);
}
catch (e){
$(this.canvas).remove();
this.resize=true;
this.canvas=document.createElement('canvas');
this.canvas.setAttribute('width', this.element.width());
this.canvas.setAttribute('height', this.element.height());
this.canvas.innerHTML=this.options.notAvailable;
this.element.append(this.canvas);
if(G_vmlCanvasManager){
G_vmlCanvasManager.initElement(this.canvas);
}
}
this.ctx=this.canvas.getContext('2d');
this._refresh(true);
this._mouseInit();
},
_refresh: function(init){
if(this.resize){
var parent=$(this.canvas);
$('div', this.canvas).css({width: parent.width(), height: parent.height()});
}
this.ctx.fillStyle=this.options.background;
this.ctx.strokeStyle=this.options.color;
this.ctx.lineWidth=this.options.thickness;
this.ctx.lineCap='round';
this.ctx.lineJoin='round';
this.clear(init);
},
clear: function(init){
if(this.options.disabled){
return;
}
this.ctx.fillRect(0, 0, this.element.width(), this.element.height());
if(this.options.guideline){
this.ctx.save();
this.ctx.strokeStyle=this.options.guidelineColor;
this.ctx.lineWidth=1;
this.ctx.beginPath();
this.ctx.moveTo(this.options.guidelineIndent,
this.element.height() - this.options.guidelineOffset);
this.ctx.lineTo(this.element.width() - this.options.guidelineIndent,
this.element.height() - this.options.guidelineOffset);
this.ctx.stroke();
this.ctx.restore();
}
if(this.options.name){
this.ctx.save();
this.ctx.font="20px Arial";
this.ctx.fillStyle=this.options.color;
this.ctx.textAlign="center";
this.ctx.fillText(this.element.closest('.elementor-field-type-signature').find(".elementor_signature_name").val(), this.element.width()/2, this.element.height() - 15);
this.ctx.restore();
}
if(this.options.background1){
this.ctx.save();
var background1=new Image();
background1.src=this.options.background1;
const self_CV=this;
background1.onload=function(){
self_CV.ctx.drawImage(background1,0,0);
}}
this.lines=[];
if(!init){
this._changed();
}},
setname: function(init){
if(this.options.disabled){
return;
}
if(this.options.name){
this.ctx.fillRect(0, this.element.height() - 45, this.element.width(), this.element.height());
this.ctx.save();
this.ctx.font="20px Arial";
this.ctx.fillStyle=this.options.color;
this.ctx.textAlign="center";
this.ctx.fillText(this.element.closest('.elementor-field-type-signature').find(".elementor_signature_name").val(), this.element.width()/2, this.element.height() - 15);
this.ctx.restore();
}
this.lines=[];
if(!init){
this._changed();
}},
_changed: function(event){
if(this.options.syncField){
var output='';
switch (this.options.syncFormat){
case 'PNG':
output=this.toDataURL();
break;
case 'JPEG':
output=this.toDataURL('image/jpeg');
break;
case 'SVG':
output=this.toSVG();
break;
default:
output=this.toJSON();
}
$(this.options.syncField).val(output);
}
this._trigger('change', event, {});
},
_setOptions: function(){
if(this._superApply){
this._superApply(arguments);
}else{
$.Widget.prototype._setOptions.apply(this, arguments);
}
var count=0;
var onlyDisable=true;
for (var name in arguments[0]){
if(arguments[0].hasOwnProperty(name)){
count++;
onlyDisable=onlyDisable&&name==='disabled';
}}
if(count > 1||!onlyDisable){
this._refresh();
}},
_mouseCapture: function(){
return !this.options.disabled;
},
_mouseStart: function(event){
this.offset=this.element.offset();
this.offset.left -=document.documentElement.scrollLeft||document.body.scrollLeft;
this.offset.top -=document.documentElement.scrollTop||document.body.scrollTop;
this.lastPoint=[this._round(event.clientX - this.offset.left),
this._round(event.clientY - this.offset.top)];
this.curLine=[this.lastPoint];
this.lines.push(this.curLine);
},
_mouseDrag: function(event){
var point=[this._round(event.clientX - this.offset.left),
this._round(event.clientY - this.offset.top)];
this.curLine.push(point);
this.ctx.beginPath();
this.ctx.moveTo(this.lastPoint[0], this.lastPoint[1]);
this.ctx.lineTo(point[0], point[1]);
this.ctx.stroke();
this.lastPoint=point;
},
_mouseStop: function(event){
if(this.curLine.length===1){
event.clientY +=this.options.thickness;
this._mouseDrag(event);
}
this.lastPoint=null;
this.curLine=null;
this._changed(event);
},
_round: function(value){
return Math.round(value * 100) / 100;
},
toJSON: function(){
return '{"lines":[' + $.map(this.lines, function(line){
return '[' + $.map(line, function(point){
return '[' + point + ']';
}) + ']';
}) + ']}';
},
toSVG: function(){
var attrs1=(this.options.svgStyles ? 'style="fill: ' + this.options.background + ';"' :
'fill="' + this.options.background + '"');
var attrs2=(this.options.svgStyles ?
'style="fill: none; stroke: ' + this.options.color + '; stroke-width: ' + this.options.thickness + ';"' :
'fill="none" stroke="' + this.options.color + '" stroke-width="' + this.options.thickness + '"');
return '<?xml version="1.0"?>\n<!DOCTYPE svg PUBLIC ' +
'"-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n' +
'<svg xmlns="http://www.w3.org/2000/svg" width="15cm" height="15cm">\n' +
'	<g ' + attrs1 + '>\n' +
'		<rect x="0" y="0" width="' + this.canvas.width + '" height="' + this.canvas.height + '"/>\n' +
'		<g ' + attrs2 +	'>\n'+
$.map(this.lines, function(line){
return '			<polyline points="' +
$.map(line, function(point){ return point + ''; }).join(' ') + '"/>\n';
}).join('') +
'		</g>\n	</g>\n</svg>\n';
},
toDataURL: function(type, quality){
return this.canvas.toDataURL(type, quality);
},
draw: function(sig){
if(this.options.disabled){
return;
}
this.clear(true);
if(typeof sig==='string'&&sig.indexOf('data:')===0){
this._drawDataURL(sig);
}else if(typeof sig==='string'&&sig.indexOf('<svg') > -1){
this._drawSVG(sig);
}else{
this._drawJSON(sig);
}
this._changed();
},
_drawJSON: function(sig){
if(typeof sig==='string'){
sig=$.parseJSON(sig);
}
this.lines=sig.lines||[];
var ctx=this.ctx;
$.each(this.lines, function(){
ctx.beginPath();
$.each(this, function(i){
ctx[i===0 ? 'moveTo':'lineTo'](this[0], this[1]);
});
ctx.stroke();
});
},
_drawSVG: function(sig){
var lines=this.lines=[];
$(sig).find('polyline').each(function(){
var line=[];
$.each($(this).attr('points').split(' '), function(i, point){
var xy=point.split(',');
line.push([parseFloat(xy[0]), parseFloat(xy[1])]);
});
lines.push(line);
});
var ctx=this.ctx;
$.each(this.lines, function(){
ctx.beginPath();
$.each(this, function(i){
ctx[i===0 ? 'moveTo':'lineTo'](this[0], this[1]);
});
ctx.stroke();
});
},
_drawDataURL: function(sig){
var image=new Image();
var context=this.ctx;
image.onload=function(){
context.drawImage(this, 0, 0);
};
image.src=sig;
},
isEmpty: function(){
return this.lines.length===0;
},
_destroy: function(){
this.element.removeClass(this.widgetFullName||this.widgetBaseClass);
$(this.canvas).remove();
this.canvas=this.ctx=this.lines=null;
this._mouseDestroy();
}};
if(!$.Widget.prototype._destroy){
$.extend(signatureOverrides, {
destroy: function(){
this._destroy();
$.Widget.prototype.destroy.call(this);
}});
}
if($.Widget.prototype._getCreateOptions===$.noop){
$.extend(signatureOverrides, {
_getCreateOptions: function(){
return $.metadata&&$.metadata.get(this.element[0])[this.widgetName];
}});
}
$.widget('kbw.signature', $.ui.mouse, signatureOverrides);
$.kbw.signature.options=$.kbw.signature.prototype.options;
})(jQuery);