-
-
Save ittp/db52e653a6c1631ddc680c92d6761822 to your computer and use it in GitHub Desktop.
VK App web fullscreen button
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { PanelHeader, HeaderButton } from '@vkontakte/vkui'; | |
import Icon24Fullscreen from '@vkontakte/icons/dist/24/fullscreen'; | |
import Icon24FullscreenExit from '@vkontakte/icons/dist/24/fullscreen_exit'; | |
class PanelHeaderInternal extends PanelHeader { | |
get webviewType () { | |
return window.isWeb ? 'internal' : 'vkapps'; | |
} | |
} | |
class PanelHeaderWithFullScreen extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
fullScreenEnabled: false, | |
listener: null | |
}; | |
} | |
fullScreenUpdate() { | |
const fullScreenEnabled = !!document.fullscreenElement; | |
this.setState({ fullScreenEnabled }); | |
} | |
fullScreenToggle() { | |
const self = PanelHeaderWithFullScreen; | |
if (!document.fullscreenElement) { | |
self.openFullscreen(document.documentElement); | |
} else { | |
self.closeFullscreen(); | |
} | |
this.fullScreenUpdate(); | |
} | |
static openFullscreen() { | |
var elem = document.body; | |
if (elem.requestFullscreen) { | |
elem.requestFullscreen(); | |
} else if (elem.mozRequestFullScreen) { /* Firefox */ | |
elem.mozRequestFullScreen(); | |
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ | |
elem.webkitRequestFullscreen(); | |
} else if (elem.msRequestFullscreen) { /* IE/Edge */ | |
elem.msRequestFullscreen(); | |
} | |
} | |
static closeFullscreen() { | |
if (document.exitFullscreen) { | |
document.exitFullscreen(); | |
} else if (document.mozCancelFullScreen) { /* Firefox */ | |
document.mozCancelFullScreen(); | |
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */ | |
document.webkitExitFullscreen(); | |
} else if (document.msExitFullscreen) { /* IE/Edge */ | |
document.msExitFullscreen(); | |
} | |
} | |
componentDidMount() { | |
const listener = () => this.fullScreenUpdate(); | |
this.setState({ listener }); | |
window.addEventListener('fullscreenchange', listener); | |
} | |
componentWillUnmount() { | |
window.removeEventListener('fullscreenchange', this.state.listener); | |
delete this.state.listener; | |
} | |
render() { | |
const props = this.props; | |
return ( | |
<PanelHeaderInternal | |
right={ | |
<HeaderButton onClick={() => this.fullScreenToggle()}> | |
{ this.state.fullScreenEnabled ? ( | |
<Icon24FullscreenExit/> | |
) : ( | |
<Icon24Fullscreen/> | |
)} | |
</HeaderButton> | |
} | |
{...props} | |
/> | |
) | |
} | |
} | |
export default PanelHeaderWithFullScreen; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment