|
@@ -5,7 +5,7 @@ function appendFilesToHead(files, script) {
|
5
|
5
|
return script;
|
6
|
6
|
}
|
7
|
7
|
return files.reduceRight((file, combinedScript) => {
|
8
|
|
- const { rel, type, href } = file;
|
|
8
|
+ const { rel, type, href } = file;
|
9
|
9
|
return `
|
10
|
10
|
var link = document.createElement('link');
|
11
|
11
|
link.rel = '${rel}';
|
|
@@ -17,12 +17,29 @@ function appendFilesToHead(files, script) {
|
17
|
17
|
}, script);
|
18
|
18
|
}
|
19
|
19
|
|
20
|
|
-function appendStylesToHead(styles, script) {
|
21
|
|
- if (!styles) {
|
22
|
|
- return script;
|
23
|
|
- }
|
|
20
|
+function appendStylesToHead(styles, script, shouldResizeWidth) {
|
|
21
|
+ var bodyStyle;
|
|
22
|
+ if (shouldResizeWidth) {
|
|
23
|
+ bodyStyle = `
|
|
24
|
+ body {
|
|
25
|
+ display: flex;
|
|
26
|
+ justify-content: center;
|
|
27
|
+ align-items: center;
|
|
28
|
+ }`;
|
|
29
|
+ }
|
|
30
|
+ else {
|
|
31
|
+ bodyStyle = '';
|
|
32
|
+ }
|
|
33
|
+
|
|
34
|
+ if (!styles) {
|
|
35
|
+ styles = bodyStyle;
|
|
36
|
+ }
|
|
37
|
+ else {
|
|
38
|
+ styles += bodyStyle;
|
|
39
|
+ }
|
24
|
40
|
// Escape any single quotes or newlines in the CSS with .replace()
|
25
|
|
- const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
|
|
41
|
+ const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
|
|
42
|
+
|
26
|
43
|
return `
|
27
|
44
|
var styleElement = document.createElement('style');
|
28
|
45
|
var styleText = document.createTextNode('${escaped}');
|
|
@@ -33,10 +50,10 @@ function appendStylesToHead(styles, script) {
|
33
|
50
|
}
|
34
|
51
|
|
35
|
52
|
function getScript(props, baseScript, iframeBaseScript) {
|
36
|
|
- const { hasIframe, files, customStyle } = props;
|
|
53
|
+ const { hasIframe, files, customStyle, shouldResizeWidth } = props;
|
37
|
54
|
let script = hasIframe ? iframeBaseScript : baseScript;
|
38
|
55
|
script = files ? appendFilesToHead(files, baseScript) : baseScript;
|
39
|
|
- script = customStyle ? appendStylesToHead(customStyle, script) : script;
|
|
56
|
+ script = appendStylesToHead(customStyle, script, shouldResizeWidth);
|
40
|
57
|
return script;
|
41
|
58
|
}
|
42
|
59
|
|
|
@@ -44,6 +61,16 @@ function onHeightUpdated(height, props) {
|
44
|
61
|
props.onHeightUpdated && props.onHeightUpdated(height);
|
45
|
62
|
}
|
46
|
63
|
|
|
64
|
+function onWidthUpdated(width, props) {
|
|
65
|
+ props.onWidthUpdated && props.onWidthUpdated(width);
|
|
66
|
+}
|
|
67
|
+
|
|
68
|
+function onHeightWidthUpdated(height, width, props) {
|
|
69
|
+ onHeightUpdated(height, props);
|
|
70
|
+ onWidthUpdated(width, props);
|
|
71
|
+ props.onHeightWidthUpdated && props.onHeightWidthUpdated(height, width);
|
|
72
|
+}
|
|
73
|
+
|
47
|
74
|
const domMutationObserveScript =
|
48
|
75
|
`
|
49
|
76
|
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
|
|
@@ -54,4 +81,4 @@ observer.observe(document, {
|
54
|
81
|
});
|
55
|
82
|
`;
|
56
|
83
|
|
57
|
|
-export { getScript, onHeightUpdated, domMutationObserveScript };
|
|
84
|
+export { getScript, onHeightUpdated, onWidthUpdated, onHeightWidthUpdated, domMutationObserveScript };
|