Skip to content

Commit 7cf10fd

Browse files
JamesMcIntoshJamesMcIntosh
committed
Add timeout to wait for document dimensions
1 parent b13627b commit 7cf10fd

File tree

3 files changed

+115
-49
lines changed

3 files changed

+115
-49
lines changed

‎index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ class SignaturePad extends Component {
2828
useFont: PropTypes.bool,
2929
name: PropTypes.string,
3030
fontStyle: PropTypes.string,
31+
initTimeout: PropTypes.number
3132
};
3233

3334
static defaultProps = {
@@ -56,7 +57,8 @@ class SignaturePad extends Component {
5657
props.useFont,
5758
escapedName,
5859
props.height,
59-
props.width
60+
props.width,
61+
props.initTimeout
6062
);
6163
var html = htmlContent(injectedJavaScript, props.fontStyle);
6264
this.source = {html};
@@ -84,7 +86,8 @@ class SignaturePad extends Component {
8486
this.props.useFont,
8587
escapedName,
8688
this.props.height,
87-
this.props.width
89+
this.props.width,
90+
this.props.initTimeout
8891
);
8992
var html = htmlContent(injectedJavaScript, this.props.fontStyle);
9093
this.source = {html};
@@ -183,6 +186,7 @@ class SignaturePad extends Component {
183186
render = () => {
184187
return (
185188
<WebView
189+
ref={(ref) => { this._webview = ref }}
186190
automaticallyAdjustContentInsets={false}
187191
onNavigationStateChange={this._onNavigationChange}
188192
onMessage={this._onMessage}

‎injectedHtml/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ var content = (script, fontStyle) =>
2525
</style>
2626
2727
<style type="text/css">
28-
${fontStyle}
28+
${fontStyle || ''}
2929
</style>
3030
3131
<body>

‎injectedJavaScript/application.js‎

Lines changed: 108 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,69 @@
1-
var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, useFont, name, height, width) => `
2-
3-
var showSignaturePad = function (signaturePadCanvas, bodyWidth, bodyHeight) {
4-
var width = bodyWidth;
5-
var height = bodyHeight;
6-
7-
var sizeSignaturePad = function () {
8-
var devicePixelRatio = window.devicePixelRatio || 1;
9-
var canvasWidth = width * devicePixelRatio;
10-
var canvasHeight = height * devicePixelRatio;
11-
signaturePadCanvas.width = canvasWidth;
12-
signaturePadCanvas.height = canvasHeight;
13-
signaturePadCanvas.getContext("2d").scale(devicePixelRatio, devicePixelRatio);
14-
};
1+
var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, useFont, name, height, width, initTimeout) => `
152
16-
var enableSignaturePadFunctionality = function () {
17-
var signaturePad = new SignaturePad(signaturePadCanvas, {
18-
penColor: "${penColor || "black"}",
19-
backgroundColor: "${backgroundColor || "white"}",
20-
onEnd: function() { finishedStroke(signaturePad.toDataURL()); }
21-
});
22-
signaturePad.minWidth = ${penMinWidth || 1};
23-
signaturePad.maxWidth = ${penMaxWidth || 4};
24-
if ("${dataURL}") {
25-
signaturePad.fromDataURL("${dataURL}");
26-
}
27-
};
3+
var showSignaturePad = function (signaturePadCanvas, bodyWidth, bodyHeight) {
4+
var width = bodyWidth;
5+
var height = bodyHeight;
286
29-
reportSize(width, height);
30-
sizeSignaturePad();
31-
enableSignaturePadFunctionality();
7+
var sizeSignaturePad = function () {
8+
var devicePixelRatio = window.devicePixelRatio || 1;
9+
var canvasWidth = width * devicePixelRatio;
10+
var canvasHeight = height * devicePixelRatio;
11+
signaturePadCanvas.width = canvasWidth;
12+
signaturePadCanvas.height = canvasHeight;
13+
signaturePadCanvas.getContext("2d").scale(devicePixelRatio, devicePixelRatio);
3214
};
3315
34-
var bodyWidth = document.body.clientWidth * 2;
35-
var bodyHeight = document.body.clientHeight * 2;
36-
if(!bodyWidth) {
37-
bodyWidth = window.innerWidth ? window.innerWidth : ${width};
16+
var enableSignaturePadFunctionality = function () {
17+
var signaturePad = new SignaturePad(signaturePadCanvas, {
18+
penColor: "${penColor || "black"}",
19+
backgroundColor: "${backgroundColor || "white"}",
20+
onEnd: function() { finishedStroke(signaturePad.toDataURL()); }
21+
});
22+
signaturePad.minWidth = ${penMinWidth || 1};
23+
signaturePad.maxWidth = ${penMaxWidth || 4};
24+
if ("${dataURL}") {
25+
signaturePad.fromDataURL("${dataURL}");
26+
}
27+
};
28+
29+
reportSize(width, height);
30+
sizeSignaturePad();
31+
enableSignaturePadFunctionality();
32+
};
33+
34+
var canvasElement = document.querySelector("canvas");
35+
36+
var reportSize = function(width, height) {
37+
if (postMessage.length === 1) {
38+
window.postMessage(JSON.stringify({ width: width, height: height }));
39+
} else {
40+
setTimeout(function() { reportSize(width, height) }, 100);
3841
}
39-
if(!bodyHeight) {
40-
bodyHeight = window.innerHeight ? window.innerHeight : ${height};
42+
}
43+
44+
var finishedStroke = function(base64DataUrl) {
45+
window.postMessage(JSON.stringify({ base64DataUrl: base64DataUrl }));
46+
};
47+
48+
var getBodyWidth = function() {
49+
var bodyWidth = document && document.body && document.body.clientWidth ? document.body.clientWidth * 2 : 0;
50+
if(!bodyWidth) {
51+
bodyWidth = window && window.innerWidth ? window.innerWidth : ${width || 0};
4152
}
4253
43-
var canvasElement = document.querySelector("canvas");
54+
return bodyWidth;
55+
};
4456
45-
var reportSize = function(width, height) {
46-
if (postMessage.length === 1) {
47-
window.postMessage(JSON.stringify({ width: width, height: height }));
48-
} else {
49-
setTimeout(function() { reportSize(width, height) }, 100);
50-
}
57+
var getBodyHeight = function() {
58+
var bodyHeight = document && document.body && document.body.clientHeight ? document.body.clientHeight * 2 : 0;
59+
if(!bodyHeight) {
60+
bodyHeight = window && window.innerHeight ? window.innerHeight : ${height || 0};
5161
}
5262
53-
var finishedStroke = function(base64DataUrl) {
54-
window.postMessage(JSON.stringify({ base64DataUrl: base64DataUrl }));
55-
};
63+
return bodyHeight;
64+
};
5665
66+
var initSignaturePad = function(bodyWidth, bodyHeight) {
5767
if (${useFont}) {
5868
var context = canvasElement.getContext("2d");
5969
var devicePixelRatio = 1; /* window.devicePixelRatio || 1; */
@@ -88,8 +98,60 @@ var content = (penColor, backgroundColor, dataURL, penMinWidth, penMaxWidth, use
8898
finishedStroke(canvasElement.toDataURL());
8999
}, 75);
90100
} else {
91-
showSignaturePad(canvasElement, bodyWidth / 2, bodyHeight / 2);
101+
showSignaturePad(canvasElement, bodyWidth / 2, bodyHeight / 2);
92102
}
103+
};
104+
105+
var whileDocumentSizeNotSet = function(timeout, maximumWaitTime) {
106+
try {
107+
if ( typeof whileDocumentSizeNotSet.counter == 'undefined' ) {
108+
whileDocumentSizeNotSet.counter = 0;
109+
whileDocumentSizeNotSet.bodyHeight = 0;
110+
whileDocumentSizeNotSet.bodyWidth = 0;
111+
} else {
112+
whileDocumentSizeNotSet.counter++;
113+
}
114+
115+
116+
const maxAttemts = Math.floor(maximumWaitTime / timeout);
117+
const attempt = whileDocumentSizeNotSet.counter;
118+
119+
const previousBodyHeight = whileDocumentSizeNotSet.bodyHeight;
120+
const previousBodyWidth = whileDocumentSizeNotSet.bodyWidth;
121+
122+
const bodyHeight = getBodyHeight();
123+
const bodyWidth = getBodyWidth();
124+
125+
whileDocumentSizeNotSet.bodyHeight = bodyHeight;
126+
whileDocumentSizeNotSet.bodyWidth = bodyWidth;
127+
128+
if (bodyHeight === 0 || bodyWidth === 0 || previousBodyWidth !== bodyWidth || previousBodyHeight !== bodyHeight) {
129+
if (attempt <= maxAttemts) {
130+
setTimeout(whileDocumentSizeNotSet, timeout, timeout, maximumWaitTime);
131+
132+
return false;
133+
} else {
134+
window.alert('Timed out trying to load SignaturePad, tried ' + attempt + ' times in ' + maximumWaitTime + 'ms.');
135+
// of maximumWaitTime:' + maximumWaitTime + ', timeout:' + timeout + ', maxAttemts' + maxAttemts + ' times');
136+
137+
initSignaturePad(700, 700);
138+
}
139+
} else {
140+
initSignaturePad(bodyWidth, bodyHeight);
141+
142+
// window.alert('Had to wait ' + attempt + ' times, width: ' + bodyWidth + ', height: ' + bodyHeight);
143+
}
144+
} catch (e) {
145+
if (window) {
146+
window.alert(e.message);
147+
}
148+
}
149+
150+
return true;
151+
};
152+
153+
whileDocumentSizeNotSet(250, ${initTimeout || 3000});
154+
93155
`;
94156

95157
export default content;

0 commit comments

Comments
 (0)