Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add timeout to wait for document dimensions #1

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add timeout to wait for document dimensions #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cef6523
Upgrade to version 2.3.2 of Szimek's Signature Pad
JamesMcIntosh Aug 15, 2018
b13627b
Added ES6 export
JamesMcIntosh Aug 15, 2018
7cf10fd
Add timeout to wait for document dimensions
JamesMcIntosh Aug 11, 2018
b4f08f3
Add method to clear signature
JamesMcIntosh Aug 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ class SignaturePad extends Component {
useFont: PropTypes.bool,
name: PropTypes.string,
fontStyle: PropTypes.string,
initTimeout: PropTypes.number
};

static defaultProps = {
Expand Down Expand Up @@ -56,7 +57,8 @@ class SignaturePad extends Component {
props.useFont,
escapedName,
props.height,
props.width
props.width,
props.initTimeout
);
var html = htmlContent(injectedJavaScript, props.fontStyle);
this.source = {html};
Expand Down Expand Up @@ -84,7 +86,8 @@ class SignaturePad extends Component {
this.props.useFont,
escapedName,
this.props.height,
this.props.width
this.props.width,
this.props.initTimeout
);
var html = htmlContent(injectedJavaScript, this.props.fontStyle);
this.source = {html};
Expand Down Expand Up @@ -180,9 +183,14 @@ class SignaturePad extends Component {
}
}

clear = () => {
this._webview.postMessage(JSON.stringify({ action: 'clear' }));
}

render = () => {
return (
<WebView
ref={(ref) => { this._webview = ref }}
automaticallyAdjustContentInsets={false}
onNavigationStateChange={this._onNavigationChange}
onMessage={this._onMessage}
Expand All @@ -197,4 +205,4 @@ class SignaturePad extends Component {
};
}

module.exports = SignaturePad;
export { SignaturePad as default }
2 changes: 1 addition & 1 deletion injectedHtml/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ var content = (script, fontStyle) =>
</style>

<style type="text/css">
${fontStyle}
${fontStyle || ''}
</style>

<body>
Expand Down
171 changes: 126 additions & 45 deletions injectedJavaScript/application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,88 @@
var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, useFont, name, height, width) => `

var showSignaturePad = function (signaturePadCanvas, bodyWidth, bodyHeight) {
var width = bodyWidth;
var height = bodyHeight;

var sizeSignaturePad = function () {
var devicePixelRatio = window.devicePixelRatio || 1;
var canvasWidth = width * devicePixelRatio;
var canvasHeight = height * devicePixelRatio;
signaturePadCanvas.width = canvasWidth;
signaturePadCanvas.height = canvasHeight;
signaturePadCanvas.getContext("2d").scale(devicePixelRatio, devicePixelRatio);
};
var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, useFont, name, height, width, initTimeout) => `

var showSignaturePad = function (signaturePadCanvas, bodyWidth, bodyHeight) {
var width = bodyWidth;
var height = bodyHeight;

var sizeSignaturePad = function () {
var devicePixelRatio = window.devicePixelRatio || 1;
var canvasWidth = width * devicePixelRatio;
var canvasHeight = height * devicePixelRatio;
signaturePadCanvas.width = canvasWidth;
signaturePadCanvas.height = canvasHeight;
signaturePadCanvas.getContext("2d").scale(devicePixelRatio, devicePixelRatio);
};

var enableSignaturePadFunctionality = function () {
var signaturePad = new SignaturePad(signaturePadCanvas, {
penColor: "${penColor || "black"}",
backgroundColor: "${backgroundColor || "white"}",
onEnd: function() { finishedStroke(signaturePad.toDataURL()); }
});
signaturePad.minWidth = ${penMinWidth || 1};
signaturePad.maxWidth = ${penMaxWidth || 4};
if ("${dataURL}") {
signaturePad.fromDataURL("${dataURL}");
var enableSignaturePadFunctionality = function () {
var signaturePad = new SignaturePad(signaturePadCanvas, {
penColor: "${penColor || "black"}",
backgroundColor: "${backgroundColor || "white"}",
onEnd: function() { finishedStroke(signaturePad.toDataURL()); }
});
signaturePad.minWidth = ${penMinWidth || 1};
signaturePad.maxWidth = ${penMaxWidth || 4};
if ("${dataURL}") {
signaturePad.fromDataURL("${dataURL}");
}
document.addEventListener('message', function (event) {
var data;
try {
data = JSON.parse(event.data);
} catch (err) {
return;
}
};

reportSize(width, height);
sizeSignaturePad();
enableSignaturePadFunctionality();
if (!data) return;

var action = data['action'];
if (!action) return;

if (action === 'clear') {
signaturePad && signaturePad.clear();

return;
}
});
};

var bodyWidth = document.body.clientWidth * 2;
var bodyHeight = document.body.clientHeight * 2;
if(!bodyWidth) {
bodyWidth = window.innerWidth ? window.innerWidth : ${width};
reportSize(width, height);
sizeSignaturePad();
enableSignaturePadFunctionality();
};

var canvasElement = document.querySelector("canvas");

var reportSize = function(width, height) {
if (postMessage.length === 1) {
window.postMessage(JSON.stringify({ width: width, height: height }));
} else {
setTimeout(function() { reportSize(width, height) }, 100);
}
if(!bodyHeight) {
bodyHeight = window.innerHeight ? window.innerHeight : ${height};
}

var finishedStroke = function(base64DataUrl) {
window.postMessage(JSON.stringify({ base64DataUrl: base64DataUrl }));
};

var getBodyWidth = function() {
var bodyWidth = document && document.body && document.body.clientWidth ? document.body.clientWidth * 2 : 0;
if(!bodyWidth) {
bodyWidth = window && window.innerWidth ? window.innerWidth : ${width || 0};
}

var canvasElement = document.querySelector("canvas");
return bodyWidth;
};

var reportSize = function(width, height) {
if (postMessage.length === 1) {
window.postMessage(JSON.stringify({ width: width, height: height }));
} else {
setTimeout(function() { reportSize(width, height) }, 100);
}
var getBodyHeight = function() {
var bodyHeight = document && document.body && document.body.clientHeight ? document.body.clientHeight * 2 : 0;
if(!bodyHeight) {
bodyHeight = window && window.innerHeight ? window.innerHeight : ${height || 0};
}

var finishedStroke = function(base64DataUrl) {
window.postMessage(JSON.stringify({ base64DataUrl: base64DataUrl }));
};
return bodyHeight;
};

var initSignaturePad = function(bodyWidth, bodyHeight) {
if (${useFont}) {
var context = canvasElement.getContext("2d");
var devicePixelRatio = 1; /* window.devicePixelRatio || 1; */
Expand Down Expand Up @@ -88,8 +117,60 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
finishedStroke(canvasElement.toDataURL());
}, 75);
} else {
showSignaturePad(canvasElement, bodyWidth / 2, bodyHeight / 2);
showSignaturePad(canvasElement, bodyWidth / 2, bodyHeight / 2);
}
};

var whileDocumentSizeNotSet = function(timeout, maximumWaitTime) {
try {
if ( typeof whileDocumentSizeNotSet.counter == 'undefined' ) {
whileDocumentSizeNotSet.counter = 0;
whileDocumentSizeNotSet.bodyHeight = 0;
whileDocumentSizeNotSet.bodyWidth = 0;
} else {
whileDocumentSizeNotSet.counter++;
}


const maxAttemts = Math.floor(maximumWaitTime / timeout);
const attempt = whileDocumentSizeNotSet.counter;

const previousBodyHeight = whileDocumentSizeNotSet.bodyHeight;
const previousBodyWidth = whileDocumentSizeNotSet.bodyWidth;

const bodyHeight = getBodyHeight();
const bodyWidth = getBodyWidth();

whileDocumentSizeNotSet.bodyHeight = bodyHeight;
whileDocumentSizeNotSet.bodyWidth = bodyWidth;

if (bodyHeight === 0 || bodyWidth === 0 || previousBodyWidth !== bodyWidth || previousBodyHeight !== bodyHeight) {
if (attempt <= maxAttemts) {
setTimeout(whileDocumentSizeNotSet, timeout, timeout, maximumWaitTime);

return false;
} else {
window.alert('Timed out trying to load SignaturePad, tried ' + attempt + ' times in ' + maximumWaitTime + 'ms.');
// of maximumWaitTime:' + maximumWaitTime + ', timeout:' + timeout + ', maxAttemts' + maxAttemts + ' times');

initSignaturePad(700, 700);
}
} else {
initSignaturePad(bodyWidth, bodyHeight);

// window.alert('Had to wait ' + attempt + ' times, width: ' + bodyWidth + ', height: ' + bodyHeight);
}
} catch (e) {
if (window) {
window.alert(e.message);
}
}

return true;
};

whileDocumentSizeNotSet(250, ${initTimeout || 3000});

`;

export default content;
Loading