From 3303c4c28200c00814cfd6f1d1518d898474c664 Mon Sep 17 00:00:00 2001 From: Denis Thiessen Date: Wed, 29 May 2024 23:28:59 +0200 Subject: [PATCH] feat: Added Button/Modal functionality. --- src/components/PopupModal.jsx | 18 +++ src/components/ScrollableTab.jsx | 135 ++++++++++++++--------- src/pages/study_site_2/StartPage2.jsx | 60 +++++----- src/pages/study_site_2/TourOperators.jsx | 45 +++++--- 4 files changed, 162 insertions(+), 96 deletions(-) create mode 100644 src/components/PopupModal.jsx diff --git a/src/components/PopupModal.jsx b/src/components/PopupModal.jsx new file mode 100644 index 0000000..4231e5a --- /dev/null +++ b/src/components/PopupModal.jsx @@ -0,0 +1,18 @@ +import React from "react"; +import { Modal } from "@geist-ui/core"; + +function PopupModal({ visible, closeHandler }) { + return ( + + Modal + +

Some content contained within the modal.

+ + + Close + + + ); +} + +export default PopupModal; diff --git a/src/components/ScrollableTab.jsx b/src/components/ScrollableTab.jsx index fc7414d..7804124 100644 --- a/src/components/ScrollableTab.jsx +++ b/src/components/ScrollableTab.jsx @@ -1,30 +1,58 @@ -import React from "react"; +import React, { useState } from "react"; +import ReactDOM from "react-dom"; import { Tabs, Tab } from "react-tabs-scrollable"; import "react-tabs-scrollable/dist/rts.css"; +import { Modal } from "@geist-ui/core"; +import PopupModal from "./PopupModal"; var amountTabs = 0; var reachedEndValue = false; var rightSideEnd = true; var endElement = amountTabs; -export default class ScrollableTab extends React.Component { - //extends AudioPlayer { - - constructor(props) { - super(props); - this.state = { - activeTab: 1, - }; - } +function ScrollableTab({ children }) { + const [activeTab, setActiveTab] = useState(1); + const [modalVisible, setModalVisible] = useState(false); // define a onClick function to bind the value on tab click - onTabClick(e, index) { - this.setState({ activeTab: index }); - } + const onTabClick = (e, index) => { + const buttonAttributes = e.target.attributes; + console.log(buttonAttributes); + const actionType = buttonAttributes["actionType"] + ? buttonAttributes.getNamedItem("actionType").value + : ""; + const redirectLoc = buttonAttributes["redirectLoc"] + ? buttonAttributes.getNamedItem("redirectLoc").value + : ""; + console.log(actionType); + console.log(redirectLoc); + + if (actionType === "button") { + window.location.href = redirectLoc; + } else if (actionType === "modal") { + setModalVisible(true); + } + setActiveTab(index); + }; + + /* + const onTabClick = (index, type, action) => { + if (type === "button" && action) { + action(); + } else if (type === "modal") { + setModalVisible(true); + } + setActiveTab(index); +}; +*/ - onHoverElement() {} + const closeModal = () => { + setModalVisible(false); + }; - onHoverTab(key) { + const onHoverElement = () => {}; + + const onHoverTab = (key) => { const clamp = (num, min, max) => Math.min(Math.max(num, min), max); const panVal = rightSideEnd ? clamp(3 * ((-1 / amountTabs) * key + 1) - 2, -1, 1) @@ -33,7 +61,7 @@ export default class ScrollableTab extends React.Component { const frequencyVal = rightSideEnd ? Math.round((key / amountTabs) * key + 6) : Math.round(((key - amountTabs) / amountTabs) * (key - amountTabs) + 6); - var endValueVisible = this.isVisible(document.getElementById(endElement)); + var endValueVisible = isVisible(document.getElementById(endElement)); if (endValueVisible) { reachedEndValue = true; @@ -52,13 +80,13 @@ export default class ScrollableTab extends React.Component { //this.playChordSound(panVal, frequencyVal); //this.playPitchSound(panVal, 200 + 10*key); } - } + }; // didReachEnd is bad... That is why, I have my own function... :) // This sets it to "visible", if at least some part is visible... But maybe I want to have a percentage-based thing... // If whole viewport is necessary, this makes it also bad, since a scroll all the way is required... // Not really necessary, since the user already "knows", that this is the end... - isVisible(el) { + const isVisible = (el) => { var rect = el.getBoundingClientRect(); return ( @@ -67,41 +95,44 @@ export default class ScrollableTab extends React.Component { rect.left < (window.innerWidth || document.documentElement.clientWidth) && rect.top < (window.innerHeight || document.documentElement.clientHeight) ); - } - - render() { - //var keys = Array.from({ length: amountTabs }, (_, i) => i + 1); - // onFocus as an additional thingy? - var tabId = 0; - amountTabs = this.props.children.length; - endElement = amountTabs; - - var tabs = this.props.children.map((k) => { - tabId += 1; - return ( - this.onHoverTab(k)} - onMouseOver={() => this.onHoverTab(k)} - key={tabId} - > - {k.props.children} - - ); - }); - - const tabsStyle = {};//{position: "fixed", bottom: "0"}; + }; + + //var keys = Array.from({ length: amountTabs }, (_, i) => i + 1); + // onFocus as an additional thingy? + var tabId = 0; + amountTabs = children.length; + endElement = amountTabs; + var tabs = children.map((k) => { + tabId += 1; return ( -
- this.onHoverElement()} - activeTab={this.state.activeTab} - onTabClick={(e, index) => this.onTabClick(e, index)} - > - {tabs} - -
+ onHoverTab(k)} + onMouseOver={() => onHoverTab(k)} + key={tabId} + actionType={k.props.actionType} + redirectLoc={k.props.redirectLoc} + > + {k.props.children} + + ); - } + }); + + const tabsStyle = {}; //{position: "fixed", bottom: "0"}; + + return ( +
+ onHoverElement()} + activeTab={activeTab} + onTabClick={(e, index) => onTabClick(e, index)} + > + {tabs} + +
+ ); } + +export default ScrollableTab; diff --git a/src/pages/study_site_2/StartPage2.jsx b/src/pages/study_site_2/StartPage2.jsx index 5d3405f..72e2f0a 100644 --- a/src/pages/study_site_2/StartPage2.jsx +++ b/src/pages/study_site_2/StartPage2.jsx @@ -44,54 +44,54 @@ function StartPage2({ redirectLoc }) {

Hotel Le Laboratoire

- - - + + + Features - - - + + + Facilities - - - + + + Location - - - + + + Flights - - - + + + Rooms - - - + + + Catering - - - + + + Tour Operators - - - + + + Map - - - + + + Ratings - - - + + + Useful Information diff --git a/src/pages/study_site_2/TourOperators.jsx b/src/pages/study_site_2/TourOperators.jsx index 9f68af8..f21f5a9 100644 --- a/src/pages/study_site_2/TourOperators.jsx +++ b/src/pages/study_site_2/TourOperators.jsx @@ -46,53 +46,70 @@ function TourOperators({ redirectLoc }) { - Haphazard Holidays + Haphazard Holidays - Ever thought, how the best experiences in life happen, when you just stumble upon them? That is the goal with Haphazard Holidays. + Ever thought, how the best experiences in life happen, when you just + stumble upon them? That is the goal with Haphazard Holidays. - Misguided Getaways + Misguided Getaways - We at Misguided Getaways are specialized in hotels and tours, not captured by conventional tour operators to "mis"guide you into your perfect vacation. + We at Misguided Getaways are specialized in hotels and tours, not + captured by conventional tour operators to "mis"guide you into your + perfect vacation. - Lost & Found Excursions + Lost & Found Excursions - Here at Lost & Found Excursions try to capture the same feeling, when you find something precious again by chance but we don't let luck decide upon your perfect holiday or trip. + Here at Lost & Found Excursions try to capture the same feeling, + when you find something precious again by chance but we don't let + luck decide upon your perfect holiday or trip. - +