This commit is contained in:
386
source/sigtest/index.html
Normal file
386
source/sigtest/index.html
Normal file
@@ -0,0 +1,386 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset=""utf-8"">
|
||||
<meta name=""viewport"" content=""width=device-width, initial-scale=1, shrink-to-fit=no"">
|
||||
<title>AyaNova server</title>
|
||||
<script src=jquery-1.9.1.js></script>
|
||||
<!-- <script
|
||||
src="https://code.jquery.com/jquery-3.4.1.js"
|
||||
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
|
||||
crossorigin="anonymous"></script> -->
|
||||
</head>
|
||||
<body>
|
||||
<h2>sigtest</h2>
|
||||
|
||||
<canvas id="sigpad" width="600" height="200" style="border: 1px dotted;">
|
||||
<p>
|
||||
Your browser does not support signing<br />
|
||||
The following browsers are supported:<br />
|
||||
IE 9.0+, FIREFOX 3.0+, SAFARI 3.0+, CHROME 3.0+, OPERA 10.0+, IPAD 1.0+,
|
||||
IPHONE 1.0+, ANDROID 1.0+
|
||||
</p>
|
||||
</canvas>
|
||||
<h4>@AyaBizUtils.GlobalSettings.SignatureFooter</h4>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(document).ready(function() {
|
||||
$("#sigpad").sigpad();
|
||||
});
|
||||
|
||||
(function($) {
|
||||
$.fn.extend({
|
||||
sigpad: function(options) {
|
||||
// Default options
|
||||
var defaults = {
|
||||
lineWidth: 3.0,
|
||||
lineCap: "round",
|
||||
lineJoin: "round",
|
||||
miterLimit: 10,
|
||||
strokeStyle: "black",
|
||||
fillStyle: "none",
|
||||
showClear: false,
|
||||
clearLabel: "Clear",
|
||||
clearStyle: "button"
|
||||
};
|
||||
|
||||
options = $.extend(defaults, options);
|
||||
|
||||
return this.each(function() {
|
||||
if (this.nodeName === "CANVAS") {
|
||||
$(this).css("cursor", "pointer");
|
||||
//$(this).attr('onclick', 'function onclick(event) { void 1; }');
|
||||
$(this).click("function onclick(event) { void 1; }");
|
||||
|
||||
if (this.getContext) {
|
||||
var canvas = this;
|
||||
var context = this.getContext("2d");
|
||||
var id = $(this).attr("id");
|
||||
|
||||
$(this).after(
|
||||
'<div id="' +
|
||||
id +
|
||||
'-controls" style="width:' +
|
||||
$(this).width() +
|
||||
'px"></div>'
|
||||
);
|
||||
|
||||
context.underInteractionEnabled = true;
|
||||
|
||||
// Overrides with passed options
|
||||
context.lineWidth = options.lineWidth;
|
||||
context.lineCap = options.lineCap;
|
||||
context.lineJoin = options.lineJoin;
|
||||
context.miterLimit = options.miterLimit;
|
||||
context.strokeStyle = options.strokeStyle;
|
||||
context.fillStyle = options.fillStyle;
|
||||
|
||||
var data_input = id + "-data";
|
||||
$(this).after(
|
||||
'<input type="hidden" id="' +
|
||||
data_input +
|
||||
'" name="' +
|
||||
data_input +
|
||||
'" />'
|
||||
);
|
||||
|
||||
//case 1975
|
||||
//add hidden to form dirty tracking
|
||||
$("form").trigger("rescan.areYouSure");
|
||||
|
||||
// Defines all our tracking variables
|
||||
var drawing = false;
|
||||
var height = $("#" + id).height();
|
||||
var width = $("#" + id).width();
|
||||
var svg_path = "";
|
||||
var scrollLeft = 0;
|
||||
var scrollTop = 0;
|
||||
|
||||
// var offsetX = $(this).attr('offsetLeft');
|
||||
// var offsetY = $(this).attr('offsetTop');
|
||||
|
||||
var offsetX = 0;
|
||||
var offsetY = 0;
|
||||
|
||||
var inside = false;
|
||||
var prevX = false;
|
||||
var prevY = false;
|
||||
var x = false;
|
||||
var y = false;
|
||||
|
||||
//case 3678
|
||||
//New update from apple broke the page scroll blocking functionality
|
||||
//// Mouse events
|
||||
//$(document).mousedown(function (e) { drawingStart(e); });
|
||||
//$(document).mousemove(function (e) { drawingMove(e); });
|
||||
//$(document).mouseup(function () { drawingStop(); });
|
||||
|
||||
//// Touch events
|
||||
//$(document).bind('touchstart', function (e) { drawingStart(e); });
|
||||
//$(document).bind('touchmove', function (e) { drawingMove(e); });
|
||||
//$(document).bind('touchend', function () { drawingStop(); });
|
||||
//$(document).bind('touchcancel', function () { drawingStop(); });
|
||||
|
||||
//case 3678
|
||||
var spad = $("#sigpad");
|
||||
// Mouse events
|
||||
spad.mousedown(function(e) {
|
||||
drawingStart(e);
|
||||
});
|
||||
spad.mousemove(function(e) {
|
||||
drawingMove(e);
|
||||
});
|
||||
spad.mouseup(function() {
|
||||
drawingStop();
|
||||
});
|
||||
|
||||
// Touch events
|
||||
spad.bind("touchstart", function(e) {
|
||||
drawingStart(e);
|
||||
});
|
||||
spad.bind("touchmove", function(e) {
|
||||
drawingMove(e);
|
||||
});
|
||||
spad.bind("touchend", function() {
|
||||
drawingStop();
|
||||
});
|
||||
spad.bind("touchcancel", function() {
|
||||
drawingStop();
|
||||
});
|
||||
|
||||
// Adds the clear button / link
|
||||
if (options.showClear === true) {
|
||||
// var clear_tag = (options.clearStyle == 'link' ? 'div' : 'button');
|
||||
|
||||
// $('#' + id + '-controls').append('<' + clear_tag + ' id="' + id + '-clear" style="float:left">' + options.clearLabel + '</' + clear_tag + '><br style="clear:both" />');
|
||||
$("#" + id + "-controls").append(
|
||||
"<div " +
|
||||
' id="' +
|
||||
id +
|
||||
'-clear" >' +
|
||||
'<span class="btn btn-sm btn-danger icon-Delete ay-icon-large"></span></div>'
|
||||
);
|
||||
|
||||
clear = true;
|
||||
}
|
||||
|
||||
// Clearing the canvas
|
||||
$("#" + id + "-clear").click(function(e) {
|
||||
context.save();
|
||||
context.beginPath();
|
||||
context.closePath();
|
||||
context.restore();
|
||||
context.clearRect(0, 0, $(canvas).width(), $(canvas).height());
|
||||
|
||||
$("#" + data_input).val("");
|
||||
});
|
||||
|
||||
function getTouch(e) {
|
||||
//console.log(e);
|
||||
// iPhone/iPad/iPod uses event.touches and not the passed event
|
||||
if (
|
||||
typeof event != "undefined" &&
|
||||
typeof event.touches != "undefined"
|
||||
) {
|
||||
e = event.touches.item(0);
|
||||
|
||||
scrollLeft = document.body.scrollLeft;
|
||||
scrollTop = document.body.scrollTop;
|
||||
} else {
|
||||
scrollLeft = $(document).scrollLeft();
|
||||
scrollTop = $(document).scrollTop();
|
||||
}
|
||||
|
||||
//console.log("scrollLeft:" + scrollLeft.toString());
|
||||
//console.log("scrollTop:" + scrollTop.toString());
|
||||
|
||||
// Tracks last position to handle dots (as opposed to lines)
|
||||
if (x != false) {
|
||||
prevX = x;
|
||||
prevY = y;
|
||||
}
|
||||
|
||||
// Calculates the X and Y values
|
||||
x = e.clientX - (offsetX - scrollLeft);
|
||||
y = e.clientY - (offsetY - scrollTop);
|
||||
return e;
|
||||
}
|
||||
|
||||
function draw(type) {
|
||||
if (type != "stop") {
|
||||
if (type == "start") {
|
||||
inside = false;
|
||||
prevX = false;
|
||||
prevY = false;
|
||||
|
||||
context.beginPath();
|
||||
context.moveTo(x, y);
|
||||
|
||||
if (svg_path == "") {
|
||||
//timestamp and dimentions
|
||||
var currentDate = new Date();
|
||||
var captured =
|
||||
currentDate.getFullYear() +
|
||||
":" +
|
||||
(currentDate.getMonth() + 1) +
|
||||
":" +
|
||||
currentDate.getDate() +
|
||||
":" +
|
||||
currentDate.getHours() +
|
||||
":" +
|
||||
currentDate.getMinutes() +
|
||||
":" +
|
||||
currentDate.getSeconds();
|
||||
svg_path =
|
||||
"{version=1 width=" +
|
||||
width +
|
||||
" height=" +
|
||||
height +
|
||||
" captured=" +
|
||||
captured +
|
||||
"}";
|
||||
}
|
||||
|
||||
if (svg_path != "") {
|
||||
svg_path += "X";
|
||||
}
|
||||
//svg_path = '{polyline points="';
|
||||
} else {
|
||||
// If there's no previous increment since it's a .
|
||||
if (prevX == false) {
|
||||
x = x + 1;
|
||||
y = y + 1;
|
||||
}
|
||||
|
||||
context.lineTo(x, y);
|
||||
}
|
||||
|
||||
context.stroke();
|
||||
|
||||
if (
|
||||
svg_path.length > 0 &&
|
||||
svg_path.substring(svg_path.length - 1) != '"'
|
||||
) {
|
||||
svg_path = svg_path + " ";
|
||||
}
|
||||
|
||||
svg_path = svg_path + x + "," + y;
|
||||
|
||||
if (x > 0 && x <= width && y > 0 && y <= height) {
|
||||
inside = true;
|
||||
//console.log("INSIDE");
|
||||
} else {
|
||||
//console.log("OUTSIDE X=" + x.toString() + ", Y=" + y.toString() + ", WIDTH=" + width.toString() + ", HEIGHT=" + height.toString());
|
||||
}
|
||||
} else {
|
||||
draw("move");
|
||||
|
||||
if (inside == true) {
|
||||
// Closes the polyline (with style info) and adds the closing svg tag
|
||||
//svg_path = svg_path + '" style="fill:' + options.fillStyle + ';stroke:' + context.strokeStyle + ';stroke-width:' + context.lineWidth + '" /}{/svg}';
|
||||
|
||||
var element = $("#" + data_input);
|
||||
|
||||
var svg_data = element.val();
|
||||
|
||||
// Adds the opening and closing SVG tags
|
||||
// if (svg_data == '')
|
||||
// {
|
||||
// svg_data = '{?xml version="1.0" standalone="no"?}{!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"}{svg width="' + width + '" height="' + height + '" version="1.1" xmlns="http://www.w3.org/2000/svg"}{/svg}';
|
||||
// }
|
||||
|
||||
// Appends the recorded path
|
||||
//element.val(svg_data.substring(0, svg_data.length - 6) + svg_path);
|
||||
element.val(svg_path);
|
||||
|
||||
//rescan hidden field form changed
|
||||
//case 1975
|
||||
$("form").trigger("checkform.areYouSure");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawingStart(e) {
|
||||
//console.log("drawing start");
|
||||
setCanvasOffset();
|
||||
// Prevent the default action (scrolling) from occurring
|
||||
if (inside == true) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
drawing = true;
|
||||
|
||||
e = getTouch(e);
|
||||
|
||||
context.strokeStyle = $("#" + id + "-colors div.selected").css(
|
||||
"backgroundColor"
|
||||
);
|
||||
|
||||
draw("start");
|
||||
}
|
||||
|
||||
function drawingMove(e) {
|
||||
//console.log("drawing move");
|
||||
// Prevent the default action (scrolling) from occurring
|
||||
if (inside == true) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
if (drawing == true) {
|
||||
e = getTouch(e);
|
||||
|
||||
draw("move");
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function drawingStop() {
|
||||
//console.log("drawing STOP");
|
||||
drawing = false;
|
||||
|
||||
// Draws one last line so we can draw dots (e.g. i)
|
||||
draw("stop");
|
||||
}
|
||||
|
||||
//===========================
|
||||
|
||||
function setCanvasOffset() {
|
||||
canvasOffset = Offset(document.getElementById(id));
|
||||
offsetX = canvasOffset.left;
|
||||
offsetY = canvasOffset.top;
|
||||
}
|
||||
|
||||
function Offset(element) {
|
||||
if (element === undefined) return null;
|
||||
var obj = element.getBoundingClientRect();
|
||||
return {
|
||||
left: obj.left + window.pageXOffset,
|
||||
top: obj.top + window.pageYOffset
|
||||
};
|
||||
}
|
||||
|
||||
//===============
|
||||
}
|
||||
// else {
|
||||
// alert('Your browser does not support the CANVAS element required for signing. The following browsers will work: IE 9.0+, FIREFOX 3.0+, SAFARI 3.0+, CHROME 3.0+, OPERA 10.0+, IPAD 1.0+, IPHONE 1.0+, ANDROID 1.0+');
|
||||
// }
|
||||
} else {
|
||||
alert("Not a CANVAS element");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
var ayKCounter = 0;
|
||||
var ayTimer;
|
||||
function ayKeepAlive() {
|
||||
ayKCounter++;
|
||||
clearTimeout(ayTimer);
|
||||
$.get(baseSiteURL + "Home/AyKeepSessionAlive?c=" + ayKCounter, {}, { cache: false }, function (result) { });
|
||||
ayTimer = setInterval(ayKeepAlive, 300000);
|
||||
}
|
||||
</script>
|
||||
9597
source/sigtest/jquery-1.9.1.js
vendored
Normal file
9597
source/sigtest/jquery-1.9.1.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user