github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-24 03:00:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Attempt at fixing typeform mobile loading issue (#172)

Browse Source
This commit is contained in:
Dave Sayer
2020-11-29 20:30:53 +00:00
committed by GitHub
parent c311a1d354
commit be763cf9ad
1 changed files with 44 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/typeform.js
View File

@@ -1,57 +1,70 @@
import React, { useEffect, useState, useRef } from 'react';
import Head from '@docusaurus/Head';
import React, { useEffect, useState, useRef } from "react";
import Head from "@docusaurus/Head";
export function TypeformWidget(props) {
const [widgetLoaded, setWidgetLoaded] = useState(false);
const widgetStyle = {
width: '100%',
height: '500px',
transition: 'opacity 0.3s ease-in',
opacity: widgetLoaded ? '1' : '0',
width: "100%",
height: "500px",
transition: "opacity 0.3s ease-in",
opacity: widgetLoaded ? "1" : "0",
};
const typeformStyle = {
fontFamily: 'Sans-Serif',
fontSize: '12px',
color: '#999',
opacity: '0.5',
paddingTop: '5px',
fontFamily: "Sans-Serif",
fontSize: "12px",
color: "#999",
opacity: "0.5",
paddingTop: "5px",
};
const { campaign } = props;
function makeWidget(c) {
if (typeof document !== "undefined") {
const el = document.getElementById("mg-embedded-typeform");
const doWidget = setTimeout(() => {
window.typeformEmbed.makeWidget(
el,
"https://form.typeform.com/to/" + c,
{
hideFooter: true,
hideHeaders: true,
opacity: 0,
}
);
setWidgetLoaded(true);
}, 500);
return doWidget;
}
}
useEffect(() => {
// Typeforms widget JS
const el = document.getElementById('mg-embedded-typeform');
const doWidget = setTimeout(() => {
window.typeformEmbed.makeWidget(
el,
'https://form.typeform.com/to/' + campaign,
{
hideFooter: true,
hideHeaders: true,
opacity: 0,
},
);
setWidgetLoaded(true);
}, 300);
doWidget;
if (document.readyState !== "loading") {
makeWidget(campaign);
} else {
document.addEventListener("DOMContentLoaded", function () {
console.log(campaign);
makeWidget(campaign);
});
}
return () => {
clearTimeout(doWidget);
window.removeEventListener("DOMContentLoaded", makeWidget);
setWidgetLoaded(!widgetLoaded);
};
}, []);
}, [campaign]);
return (
<>
<Head>
<script
src='https://embed.typeform.com/embed.js'
src="https://embed.typeform.com/embed.js"
async
id='typef_orm'
id="typef_orm"
></script>
</Head>
<div id='mg-embedded-typeform' style={widgetStyle}></div>
<div id="mg-embedded-typeform" style={widgetStyle}></div>
</>
);
}