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
-
-
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.
-
+