Mirroring/tailblocks
1
0
Fork 0
mirror of https://github.com/mertJF/tailblocks.git synced 2025-12-08 17:03:24 +00:00
Code Issues Projects Releases Wiki Activity

App :: fix, the sidebar hiding issue on Firefox

Browse Source
This commit is contained in:
mertJF
2020-05-25 14:26:54 +03:00
parent 3bdcb1513c
commit 710b1911af
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.js
View File

@@ -114,13 +114,18 @@ class App extends Component {
const iframe = document.querySelector('iframe'); const iframe = document.querySelector('iframe');
const sidebar = this.sidebarRef.current; const sidebar = this.sidebarRef.current;
const opener = this.openerRef.current; const opener = this.openerRef.current;
let iframeMouseOver = false;
window.focus();
window.addEventListener('blur', () => { window.addEventListener('blur', () => {
if (document.activeElement === iframe) { if (iframeMouseOver) {
this.setState({ sidebar: false }); this.setState({ sidebar: false });
} }
}); });
iframe.addEventListener('mouseover', () => iframeMouseOver = true);
iframe.addEventListener('mouseout', () => iframeMouseOver = false);
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
if (e.target === opener) { if (e.target === opener) {
return; return;
@@ -197,7 +202,7 @@ class App extends Component {
this.setState({ view, codeView: false }); this.setState({ view, codeView: false });
} }
toggleView(e) { toggleView() {
this.setState({ codeView: !this.state.codeView, view: 'desktop', markup: this.markupRef.current.innerHTML }) this.setState({ codeView: !this.state.codeView, view: 'desktop', markup: this.markupRef.current.innerHTML })
} }
@@ -225,7 +230,7 @@ class App extends Component {
return viewList.map((v, k) => <button key={k} className={`device${view === v.name ? ' is-active' : ''}`} data-view={v.name} onClick={this.changeView}>{v.icon}</button>); return viewList.map((v, k) => <button key={k} className={`device${view === v.name ? ' is-active' : ''}`} data-view={v.name} onClick={this.changeView}>{v.icon}</button>);
} }
toggleSidebar(e) { toggleSidebar() {
this.setState({ sidebar: !this.state.sidebar }); this.setState({ sidebar: !this.state.sidebar });
} }