|
|
@ -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 { Tabs, Tab } from "react-tabs-scrollable"; |
|
|
import "react-tabs-scrollable/dist/rts.css"; |
|
|
import "react-tabs-scrollable/dist/rts.css"; |
|
|
|
|
|
import { Modal } from "@geist-ui/core"; |
|
|
|
|
|
import PopupModal from "./PopupModal"; |
|
|
|
|
|
|
|
|
var amountTabs = 0; |
|
|
var amountTabs = 0; |
|
|
var reachedEndValue = false; |
|
|
var reachedEndValue = false; |
|
|
var rightSideEnd = true; |
|
|
var rightSideEnd = true; |
|
|
var endElement = amountTabs; |
|
|
var endElement = amountTabs; |
|
|
|
|
|
|
|
|
export default class ScrollableTab extends React.Component { |
|
|
|
|
|
//extends AudioPlayer { |
|
|
|
|
|
|
|
|
function ScrollableTab({ children }) { |
|
|
|
|
|
const [activeTab, setActiveTab] = useState(1); |
|
|
|
|
|
const [modalVisible, setModalVisible] = useState(false); |
|
|
|
|
|
|
|
|
constructor(props) { |
|
|
|
|
|
super(props); |
|
|
|
|
|
this.state = { |
|
|
|
|
|
activeTab: 1, |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
// define a onClick function to bind the value on tab click |
|
|
|
|
|
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); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
// define a onClick function to bind the value on tab click |
|
|
|
|
|
onTabClick(e, index) { |
|
|
|
|
|
this.setState({ activeTab: index }); |
|
|
|
|
|
|
|
|
/* |
|
|
|
|
|
const onTabClick = (index, type, action) => { |
|
|
|
|
|
if (type === "button" && action) { |
|
|
|
|
|
action(); |
|
|
|
|
|
} else if (type === "modal") { |
|
|
|
|
|
setModalVisible(true); |
|
|
} |
|
|
} |
|
|
|
|
|
setActiveTab(index); |
|
|
|
|
|
}; |
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
|
|
const closeModal = () => { |
|
|
|
|
|
setModalVisible(false); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
onHoverElement() {} |
|
|
|
|
|
|
|
|
const onHoverElement = () => {}; |
|
|
|
|
|
|
|
|
onHoverTab(key) { |
|
|
|
|
|
|
|
|
const onHoverTab = (key) => { |
|
|
const clamp = (num, min, max) => Math.min(Math.max(num, min), max); |
|
|
const clamp = (num, min, max) => Math.min(Math.max(num, min), max); |
|
|
const panVal = rightSideEnd |
|
|
const panVal = rightSideEnd |
|
|
? clamp(3 * ((-1 / amountTabs) * key + 1) - 2, -1, 1) |
|
|
? clamp(3 * ((-1 / amountTabs) * key + 1) - 2, -1, 1) |
|
|
@ -33,7 +61,7 @@ export default class ScrollableTab extends React.Component { |
|
|
const frequencyVal = rightSideEnd |
|
|
const frequencyVal = rightSideEnd |
|
|
? Math.round((key / amountTabs) * key + 6) |
|
|
? Math.round((key / amountTabs) * key + 6) |
|
|
: Math.round(((key - amountTabs) / amountTabs) * (key - amountTabs) + 6); |
|
|
: Math.round(((key - amountTabs) / amountTabs) * (key - amountTabs) + 6); |
|
|
var endValueVisible = this.isVisible(document.getElementById(endElement)); |
|
|
|
|
|
|
|
|
var endValueVisible = isVisible(document.getElementById(endElement)); |
|
|
|
|
|
|
|
|
if (endValueVisible) { |
|
|
if (endValueVisible) { |
|
|
reachedEndValue = true; |
|
|
reachedEndValue = true; |
|
|
@ -52,13 +80,13 @@ export default class ScrollableTab extends React.Component { |
|
|
//this.playChordSound(panVal, frequencyVal); |
|
|
//this.playChordSound(panVal, frequencyVal); |
|
|
//this.playPitchSound(panVal, 200 + 10*key); |
|
|
//this.playPitchSound(panVal, 200 + 10*key); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
// didReachEnd is bad... That is why, I have my own function... :) |
|
|
// 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... |
|
|
// 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... |
|
|
// 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... |
|
|
// Not really necessary, since the user already "knows", that this is the end... |
|
|
isVisible(el) { |
|
|
|
|
|
|
|
|
const isVisible = (el) => { |
|
|
var rect = el.getBoundingClientRect(); |
|
|
var rect = el.getBoundingClientRect(); |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
@ -67,25 +95,27 @@ export default class ScrollableTab extends React.Component { |
|
|
rect.left < (window.innerWidth || document.documentElement.clientWidth) && |
|
|
rect.left < (window.innerWidth || document.documentElement.clientWidth) && |
|
|
rect.top < (window.innerHeight || document.documentElement.clientHeight) |
|
|
rect.top < (window.innerHeight || document.documentElement.clientHeight) |
|
|
); |
|
|
); |
|
|
} |
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
|
//var keys = Array.from({ length: amountTabs }, (_, i) => i + 1); |
|
|
//var keys = Array.from({ length: amountTabs }, (_, i) => i + 1); |
|
|
// onFocus as an additional thingy? |
|
|
// onFocus as an additional thingy? |
|
|
var tabId = 0; |
|
|
var tabId = 0; |
|
|
amountTabs = this.props.children.length; |
|
|
|
|
|
|
|
|
amountTabs = children.length; |
|
|
endElement = amountTabs; |
|
|
endElement = amountTabs; |
|
|
|
|
|
|
|
|
var tabs = this.props.children.map((k) => { |
|
|
|
|
|
|
|
|
var tabs = children.map((k) => { |
|
|
tabId += 1; |
|
|
tabId += 1; |
|
|
return ( |
|
|
return ( |
|
|
<Tab |
|
|
<Tab |
|
|
id={tabId} |
|
|
id={tabId} |
|
|
onTouchStart={() => this.onHoverTab(k)} |
|
|
|
|
|
onMouseOver={() => this.onHoverTab(k)} |
|
|
|
|
|
|
|
|
onTouchStart={() => onHoverTab(k)} |
|
|
|
|
|
onMouseOver={() => onHoverTab(k)} |
|
|
key={tabId} |
|
|
key={tabId} |
|
|
|
|
|
actionType={k.props.actionType} |
|
|
|
|
|
redirectLoc={k.props.redirectLoc} |
|
|
> |
|
|
> |
|
|
{k.props.children} |
|
|
{k.props.children} |
|
|
|
|
|
<PopupModal visible={modalVisible} closeHandler={closeModal} /> |
|
|
</Tab> |
|
|
</Tab> |
|
|
); |
|
|
); |
|
|
}); |
|
|
}); |
|
|
@ -95,13 +125,14 @@ export default class ScrollableTab extends React.Component { |
|
|
return ( |
|
|
return ( |
|
|
<div style={tabsStyle}> |
|
|
<div style={tabsStyle}> |
|
|
<Tabs |
|
|
<Tabs |
|
|
onMouseOver={() => this.onHoverElement()} |
|
|
|
|
|
activeTab={this.state.activeTab} |
|
|
|
|
|
onTabClick={(e, index) => this.onTabClick(e, index)} |
|
|
|
|
|
|
|
|
onMouseOver={() => onHoverElement()} |
|
|
|
|
|
activeTab={activeTab} |
|
|
|
|
|
onTabClick={(e, index) => onTabClick(e, index)} |
|
|
> |
|
|
> |
|
|
{tabs} |
|
|
{tabs} |
|
|
</Tabs> |
|
|
</Tabs> |
|
|
</div> |
|
|
</div> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default ScrollableTab; |
