Skip to content

Commit

Permalink
add the fullscreen functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@CloudLun
CloudLun committed Mar 21, 2024
1 parent d739196 commit 1285e0c
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 30 deletions.
2 changes: 1 addition & 1 deletion components/infoPage/infoBox/InfoBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const InfoBox = () => {
</div>
</div>
</div>
<div className={`absolute top-6 left-4 lg:left-[calc(100%_-_4.5rem)] flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-30 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
<div className={`absolute top-6 left-4 lg:left-[calc(100%_-_3.5rem)] flex items-center justify-center w-10 h-10 bg-[rgba(255,255,255,.65)] z-30 shadow-2xl`} onClick={() => boxShown ? boxShownClickHandler(false) : boxShownClickHandler(true)}>
{
boxShown ? <XMarkIcon className='w-6 h-6 text-black' /> : <Bars3Icon className='w-5 h-5 text-black' />
}
Expand Down
79 changes: 50 additions & 29 deletions components/streetView/StreetView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { StreetViewContext, StreetViewType } from '@/contexts/StreetViewContext'
import { MarkerContext, MarkerContextType } from '@/contexts/MarkerContext'


import { ArrowsPointingOutIcon } from '@heroicons/react/20/solid'
import { ArrowsPointingOutIcon, ArrowsPointingInIcon } from '@heroicons/react/20/solid'

type floodingTypes = 'Street View' | 'Minor Flooding' | "Moderate Flooding" | "Major Flooding"

Expand Down Expand Up @@ -49,8 +49,9 @@ const StreetView = () => {
const { openStreetView, setOpenStreetView } = useContext(StreetViewContext) as StreetViewType
const { marker, direction, directionDegree, setDirectionDegree } = useContext(MarkerContext) as MarkerContextType
const { id } = useOnClickSites()
const { hovered, mouseEnterHandler, mouseLeaveHandler } = useHoverStatus(floodingBtnsData)

const urlID = id < 10 ? `0${id}`: `${id}`
const urlID = id < 10 ? `0${id}` : `${id}`

const [clicked, setClicked] = useState({
"Street View": false,
Expand All @@ -61,8 +62,11 @@ const StreetView = () => {

const [streetViewImgFloodHeight, setStreetViewImgFloodHeight] = useState(0)
const [streetViewImgAngle, setStreetViewImgAngle] = useState(1)
const [streetViewImgFullscreen, setstreetViewImgFullscreen] = useState(false)




const { hovered, mouseEnterHandler, mouseLeaveHandler } = useHoverStatus(floodingBtnsData)


const floodingButtonClickHandler = (title: floodingTypes) => {
Expand All @@ -77,7 +81,7 @@ const StreetView = () => {
(Object.keys(newClicked) as floodingTypes[]).forEach((c: floodingTypes) => c === title ? newClicked[c] = true : newClicked[c] = false)
setClicked(newClicked)

switch(title) {
switch (title) {
case "Street View":
setStreetViewImgFloodHeight(0)
break
Expand All @@ -100,10 +104,10 @@ const StreetView = () => {
case 'previous':
direction!.setRotation(directionDegree - degree)
setDirectionDegree(curr => curr - degree)
if(streetViewImgAngle === 1) {
if (streetViewImgAngle === 1) {
setStreetViewImgAngle(8)
} else {
setStreetViewImgAngle(prev => prev-1)
setStreetViewImgAngle(prev => prev - 1)
}
break
case 'next':
Expand All @@ -121,34 +125,51 @@ const StreetView = () => {

}

const fullScreenStreetViewClickHandler = () => {
console.log('success')
const fullScreenStreetViewClickHandler = (d: "open" | "close") => {
d === "open" ? setstreetViewImgFullscreen(true) : setstreetViewImgFullscreen(false)

}

return (
<div className={`absolute top-0 left-0 ${openStreetView ? "translate-y-0" : "translate-y-[-100%]"} w-full h-[50%] z-20 transition-all duration-[1500ms] ease-in-out`}>
<img src={`https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flood_image_output/${urlID}_F${streetViewImgFloodHeight}_V${streetViewImgAngle}.png`} alt="" className='w-full h-full object-cover' />
<div className={`pt-[1.75rem] lg:pl-8`}>
<div className='absolute top-6 left-8 flex gap-[1rem] ml-[4.5rem] lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
{
floodingBtnsData.map((f, i) => <FloodingButton key={f.title} clicked={clicked[f.title]} hovered={hovered[i]} title={f.title} src={clicked[f.title] || hovered[i] ? f.src_white : f.src} clickHandler={() => floodingButtonClickHandler(f.title)} mouseEnterHandler={() => mouseEnterHandler(i)} mouseLeaveHandler={mouseLeaveHandler} />)
}
<>
<div className={`absolute top-0 left-0 ${openStreetView ? "translate-y-0" : "translate-y-[-100%]"} w-full h-[50%] z-20 transition-all duration-[1500ms] ease-in-out`}>
<img src={`https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flood_image_output/${urlID}_F${streetViewImgFloodHeight}_V${streetViewImgAngle}.png`} alt="" className='w-full h-full object-cover' />
<div className={`pt-[1.75rem] lg:pl-8`}>
<div className='absolute top-6 left-8 flex gap-[1rem] ml-[4.5rem] lg:ml-[18.56rem] overflow-x-scroll [&::-webkit-scrollbar]:hidden'>
{
floodingBtnsData.map((f, i) => <FloodingButton key={f.title} clicked={clicked[f.title]} hovered={hovered[i]} title={f.title} src={clicked[f.title] || hovered[i] ? f.src_white : f.src} clickHandler={() => floodingButtonClickHandler(f.title)} mouseEnterHandler={() => mouseEnterHandler(i)} mouseLeaveHandler={mouseLeaveHandler} />)
}
</div>
<div className='absolute top-[calc(50%_-_2.5rem)] left-4 opacity-75'>
<Order order='previous' clickHandler={() => changeStreetViewClickHandler('previous')} />
</div>
<div className='absolute top-[calc(50%_-_2.5rem)] right-4 opacity-75'>
<Order order='next' clickHandler={() => changeStreetViewClickHandler('next')} />
</div>
<StreetInfo openStreetView={openStreetView} />
<div className='absolute right-4 bottom-10 flex justify-center items-center w-[2.5rem] h-[2.5rem] bg-[rgba(255,255,255,0.65)] rounded-full cursor-pointer shadow-2xl' onClick={() => fullScreenStreetViewClickHandler("open")}>
<ArrowsPointingOutIcon className=' w-5 h-5 text-black opacity-75 cursor-pointer' />
</div>

{/* <Image width={80} height={80} src="./icons/fullscreen.svg" alt="fullscreen" className='absolute right-4 bottom-0 opacity-75 cursor-pointer' /> */}
</div>
<div className='absolute top-[calc(50%_-_2.5rem)] left-4 lg:left-8 opacity-75'>
<Order order='previous' clickHandler={() => changeStreetViewClickHandler('previous')} />
</div>
<div className='absolute top-[calc(50%_-_2.5rem)] right-4 lg:right-8 opacity-75'>
<Order order='next' clickHandler={() => changeStreetViewClickHandler('next')} />
</div>
<StreetInfo openStreetView={openStreetView} />
<div className='absolute right-4 lg:right-8 bottom-10 flex justify-center items-center w-[2.5rem] h-[2.5rem] bg-[rgba(255,255,255,0.65)] rounded-full cursor-pointer shadow-2xl' onClick={fullScreenStreetViewClickHandler}>
<ArrowsPointingOutIcon className=' w-5 h-5 text-black opacity-75 cursor-pointer' />
</div>

{/* <Image width={80} height={80} src="./icons/fullscreen.svg" alt="fullscreen" className='absolute right-4 bottom-0 opacity-75 cursor-pointer' /> */}
</div>

</div>
{
streetViewImgFullscreen && (
<div className='absolute top-0 left-0 flex justify-center items-center w-full h-full bg-black bg-opacity-70 z-30'>
<div className='relative w-[1347px] h-[616px]'>
<img src={`https://raw.githubusercontent.com/BetaNYC/floodgen-images/main/flood_image_output/${urlID}_F${streetViewImgFloodHeight}_V${streetViewImgAngle}.png`} alt="" className='w-full h-full object-cover' />
<div className='absolute right-4 top-10 flex justify-center items-center w-[2.5rem] h-[2.5rem] bg-[rgba(255,255,255,0.65)] rounded-full cursor-pointer shadow-2xl z-40' onClick={() => fullScreenStreetViewClickHandler("close")}>
<ArrowsPointingInIcon className=' w-5 h-5 text-black opacity-75 cursor-pointer' />
</div>
</div>


</div>
)
}

</>
)
}

Expand Down

0 comments on commit 1285e0c

Please sign in to comment.