Browse Source

fix: Not sure what I did, but fixed some of the mouse tracking issues.

master
Denis Thiessen 5 months ago
parent
commit
264dd0e22a
  1. 2
      src/App.js
  2. 2
      src/components/ScrollableTab.jsx
  3. 27
      src/components/webpage_container/StudySite.jsx
  4. 5
      src/index.css
  5. 9
      src/pages/study_site_2/StartPage2.jsx

2
src/App.js

@ -180,7 +180,7 @@ function App() {
path="/study-page-2"
element={
<React.Suspense fallback={<>...</>}>
<StartPage2 redirectLoc={latinSquareOrder[2]} />
<StartPage2 />
</React.Suspense>
}
/>

2
src/components/ScrollableTab.jsx

@ -114,7 +114,7 @@ function ScrollableTab({ onActiveTabChange, children }) {
);
});
const tabsStyle = {}; //{position: "fixed", bottom: "0"};
const tabsStyle = { position: "absolute", bottom: "0", width: "100vw" };
return (
<div style={tabsStyle}>

27
src/components/webpage_container/StudySite.jsx

@ -35,6 +35,7 @@ export function StudySite(props) {
document.documentElement.style.height = height;
if (heatmapInstance === undefined) {
document.getElementById("studySiteContainer").style.height = height;
heatmapInstance = h337.create({
container: document.getElementById("studySiteContainer"),
radius: 40,
@ -50,6 +51,10 @@ export function StudySite(props) {
heatmapInstance.addData({ x: x, y: y, value: 1 });
});
document.addEventListener("scroll", function (event) {
updateHeatmapSize();
});
// Function to capture clicks
document.addEventListener("click", function (event) {
var x = event.pageX;
@ -57,13 +62,31 @@ export function StudySite(props) {
// Add more value for clicks
heatmapInstance.addData({ x: x, y: y, value: 5 });
updateHeatmapSize();
});
// Function to update heatmap container size on resize
function updateHeatmapSize() {
var container = document.getElementById("heatmapOverlay");
container.style.width = document.body.scrollWidth + "px";
container.style.width =
document.getElementById("root").style.width + "px";
container.style.height = document.body.scrollHeight + "px";
document.getElementById("studySiteContainer").style.width =
document.getElementById("root").style.width + "px";
document.getElementById("studySiteContainer").style.height =
document.body.scrollHeight + "px";
const heatmapData = heatmapInstance.getData();
for (var el of document.getElementsByTagName("canvas")) {
el.remove();
}
heatmapInstance = h337.create({
container: document.getElementById("studySiteContainer"),
radius: 40,
});
heatmapInstance.setData(heatmapData);
heatmapInstance.setDataMax(HEATMAP_MAX);
}
const handleStart = (evt) => {
@ -162,5 +185,5 @@ export function StudySite(props) {
}
export function getHeatmapData() {
return (heatmapInstance !== undefined) ? heatmapInstance.getData() : {};
return heatmapInstance !== undefined ? heatmapInstance.getData() : {};
}

5
src/index.css

@ -31,6 +31,11 @@ canvas {
opacity: 0;
}
#studySiteContainer {
min-height: 100vh;
width: 95%;
}
.centeredLogo {
display: block;
margin: 0 auto;

9
src/pages/study_site_2/StartPage2.jsx

@ -42,14 +42,10 @@ const tabContent = [
(<HotelInformation />),
];
function StartPage2({ redirectLoc }) {
function StartPage2() {
const [activeTabIndex, setActiveTabIndex] = useState(0);
var saveMouseLog = function () {
pushToMouseLog(getHeatmapData());
};
var onActiveTabChange = (index) => {
const onActiveTabChange = (index) => {
setActiveTabIndex(index);
};
@ -68,7 +64,6 @@ function StartPage2({ redirectLoc }) {
/>
<Spacer h={3} />
<h4>Hotel Le Laboratoire</h4>
<Spacer h={3} />
{tabContent[activeTabIndex]}
<ScrollableTab onActiveTabChange={onActiveTabChange}>
<Tab actionType="text">

Loading…
Cancel
Save