mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-05-09 20:38:40 +00:00
I feel like there is a cleaner way to handle this, but this embeds as desired and it doesn't blink
This commit is contained in:
David Bolack
@@ -340,15 +340,15 @@ const BrewRenderer = (props)=>{
|
|||||||
|
|
||||||
const brewRenderDivWrapper = (
|
const brewRenderDivWrapper = (
|
||||||
<>
|
<>
|
||||||
<div id='BrewRenderer'
|
<div id='BrewRendererFlat'
|
||||||
style={{ width: '100%', height: '100%', visibility: state.visibility }}
|
style={{ width: '100%', height: '100%', visibility: state.visibility }}
|
||||||
onLoad={frameDidMount}
|
|
||||||
>
|
>
|
||||||
{brewRenderFrameContents}
|
{brewRenderFrameContents}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (!props.showToolbar && state.visibility != 'visible') { frameDidMount(); }
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/*render dummy page while iFrame is mounting.*/}
|
{/*render dummy page while iFrame is mounting.*/}
|
||||||
@@ -369,7 +369,7 @@ const BrewRenderer = (props)=>{
|
|||||||
{props.showToolbar ? toolbarEl : ''}
|
{props.showToolbar ? toolbarEl : ''}
|
||||||
|
|
||||||
{/*render in iFrame so broken code doesn't crash the site.*/}
|
{/*render in iFrame so broken code doesn't crash the site.*/}
|
||||||
{brewRenderDivWrapper}
|
{props.showToolbar ? brewRenderFrameWrapper:brewRenderDivWrapper}
|
||||||
{state.isMounted &&
|
{state.isMounted &&
|
||||||
<div id='brewRendered'></div>
|
<div id='brewRendered'></div>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ import HomePage from './pages/homePage/homePage.jsx';
|
|||||||
import EditPage from './pages/editPage/editPage.jsx';
|
import EditPage from './pages/editPage/editPage.jsx';
|
||||||
import UserPage from './pages/userPage/userPage.jsx';
|
import UserPage from './pages/userPage/userPage.jsx';
|
||||||
import SharePage from './pages/sharePage/sharePage.jsx';
|
import SharePage from './pages/sharePage/sharePage.jsx';
|
||||||
import EmbedPage from './pages/embedPage/embedPage.jsx';
|
|
||||||
import NewPage from './pages/newPage/newPage.jsx';
|
import NewPage from './pages/newPage/newPage.jsx';
|
||||||
import ErrorPage from './pages/errorPage/errorPage.jsx';
|
import ErrorPage from './pages/errorPage/errorPage.jsx';
|
||||||
import VaultPage from './pages/vaultPage/vaultPage.jsx';
|
import VaultPage from './pages/vaultPage/vaultPage.jsx';
|
||||||
@@ -72,7 +71,7 @@ const Homebrew = (props)=>{
|
|||||||
<Routes>
|
<Routes>
|
||||||
<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={brew} userThemes={userThemes}/>} />
|
<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={brew} userThemes={userThemes}/>} />
|
||||||
<Route path='/share/:id' element={<WithRoute el={SharePage} brew={brew} share={true} />} />
|
<Route path='/share/:id' element={<WithRoute el={SharePage} brew={brew} share={true} />} />
|
||||||
<Route path='/embed/:id' element={<WithRoute el={EmbedPage} brew={brew} share={false} />} />
|
<Route path='/embed/:id' element={<WithRoute el={SharePage} brew={brew} share={false} />} />
|
||||||
<Route path='/new/:id' element={<WithRoute el={NewPage} brew={brew} userThemes={userThemes}/>} />
|
<Route path='/new/:id' element={<WithRoute el={NewPage} brew={brew} userThemes={userThemes}/>} />
|
||||||
<Route path='/new' element={<WithRoute el={NewPage} userThemes={userThemes}/> } />
|
<Route path='/new' element={<WithRoute el={NewPage} userThemes={userThemes}/> } />
|
||||||
<Route path='/user/:username' element={<WithRoute el={UserPage} brews={brews} />} />
|
<Route path='/user/:username' element={<WithRoute el={UserPage} brews={brews} />} />
|
||||||
|
|||||||
@@ -1,124 +0,0 @@
|
|||||||
import './embedPage.less';
|
|
||||||
import React, { useState, useEffect, useCallback } from 'react';
|
|
||||||
import Headtags from '../../../../vitreum/headtags.js';
|
|
||||||
const Meta = Headtags.Meta;
|
|
||||||
|
|
||||||
import Nav from '@navbar/nav.jsx';
|
|
||||||
import Navbar from '@navbar/navbar.jsx';
|
|
||||||
import MetadataNav from '@navbar/metadata.navitem.jsx';
|
|
||||||
import PrintNavItem from '@navbar/print.navitem.jsx';
|
|
||||||
import RecentNavItems from '@navbar/recent.navitem.jsx';
|
|
||||||
const { both: RecentNavItem } = RecentNavItems;
|
|
||||||
import Account from '@navbar/account.navitem.jsx';
|
|
||||||
import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
|
|
||||||
|
|
||||||
import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
|
|
||||||
import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
|
|
||||||
|
|
||||||
const SharePage = (props)=>{
|
|
||||||
const { brew = DEFAULT_BREW_LOAD, disableMeta = false, share = true } = props;
|
|
||||||
|
|
||||||
const [themeBundle, setThemeBundle] = useState({});
|
|
||||||
const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
|
|
||||||
|
|
||||||
const handleBrewRendererPageChange = useCallback((pageNumber)=>{
|
|
||||||
setCurrentBrewRendererPageNum(pageNumber);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleControlKeys = (e)=>{
|
|
||||||
if(!(e.ctrlKey || e.metaKey)) return;
|
|
||||||
const P_KEY = 80;
|
|
||||||
if(e.keyCode === P_KEY) {
|
|
||||||
printCurrentBrew();
|
|
||||||
e.stopPropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(()=>{
|
|
||||||
document.addEventListener('keydown', handleControlKeys);
|
|
||||||
fetchThemeBundle(undefined, setThemeBundle, brew.renderer, brew.theme);
|
|
||||||
|
|
||||||
return ()=>{
|
|
||||||
document.removeEventListener('keydown', handleControlKeys);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const processShareId = ()=>{
|
|
||||||
return brew.googleId && !brew.stubbed ? brew.googleId + brew.shareId : brew.shareId;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderEditLink = ()=>{
|
|
||||||
if(!brew.editId) return null;
|
|
||||||
|
|
||||||
const editLink = brew.googleId && ! brew.stubbed ? brew.googleId + brew.editId : brew.editId;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
|
|
||||||
edit
|
|
||||||
</Nav.item>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleEl = (
|
|
||||||
<Nav.item className='brewTitle' style={disableMeta ? { cursor: 'default' } : {}}>
|
|
||||||
{brew.title}
|
|
||||||
</Nav.item>
|
|
||||||
);
|
|
||||||
|
|
||||||
const showNav = (
|
|
||||||
<Navbar>
|
|
||||||
<Nav.section className='titleSection'>
|
|
||||||
{disableMeta ? titleEl : <MetadataNav brew={brew}>{titleEl}</MetadataNav>}
|
|
||||||
</Nav.section>
|
|
||||||
|
|
||||||
<Nav.section>
|
|
||||||
{brew.shareId && (
|
|
||||||
<>
|
|
||||||
<PrintNavItem brew={brew}/>
|
|
||||||
<Nav.dropdown>
|
|
||||||
<Nav.item color='red' icon='fas fa-code'>
|
|
||||||
source
|
|
||||||
</Nav.item>
|
|
||||||
<Nav.item color='blue' icon='fas fa-eye' href={`/source/${processShareId()}`}>
|
|
||||||
view
|
|
||||||
</Nav.item>
|
|
||||||
{renderEditLink()}
|
|
||||||
<Nav.item color='blue' icon='fas fa-download' href={`/download/${processShareId()}`}>
|
|
||||||
download
|
|
||||||
</Nav.item>
|
|
||||||
<Nav.item color='blue' icon='fas fa-clone' href={`/new/${processShareId()}`}>
|
|
||||||
clone to new
|
|
||||||
</Nav.item>
|
|
||||||
</Nav.dropdown>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<RecentNavItem brew={brew} storageKey='view' />
|
|
||||||
<Account />
|
|
||||||
</Nav.section>
|
|
||||||
</Navbar>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='sharePage sitePage'>
|
|
||||||
<Meta name='robots' content='noindex, nofollow' />
|
|
||||||
{share ? showNav : ''}
|
|
||||||
<div className='content'>
|
|
||||||
<BrewRenderer
|
|
||||||
text={brew.text}
|
|
||||||
style={brew.style}
|
|
||||||
lang={brew.lang}
|
|
||||||
renderer={brew.renderer}
|
|
||||||
theme={brew.theme}
|
|
||||||
themeBundle={themeBundle}
|
|
||||||
onPageChange={handleBrewRendererPageChange}
|
|
||||||
currentBrewRendererPageNum={currentBrewRendererPageNum}
|
|
||||||
allowPrint={true}
|
|
||||||
showToolbar={share}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SharePage;
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
.sharePage {
|
|
||||||
nav .navSection.titleSection {
|
|
||||||
flex-grow : 1;
|
|
||||||
justify-content : center;
|
|
||||||
}
|
|
||||||
.content { overflow-y : hidden; }
|
|
||||||
}
|
|
||||||
@@ -1,124 +0,0 @@
|
|||||||
import './sharePage.less';
|
|
||||||
import React, { useState, useEffect, useCallback } from 'react';
|
|
||||||
import Headtags from '../../../../vitreum/headtags.js';
|
|
||||||
const Meta = Headtags.Meta;
|
|
||||||
|
|
||||||
import Nav from '@navbar/nav.jsx';
|
|
||||||
import Navbar from '@navbar/navbar.jsx';
|
|
||||||
import MetadataNav from '@navbar/metadata.navitem.jsx';
|
|
||||||
import PrintNavItem from '@navbar/print.navitem.jsx';
|
|
||||||
import RecentNavItems from '@navbar/recent.navitem.jsx';
|
|
||||||
const { both: RecentNavItem } = RecentNavItems;
|
|
||||||
import Account from '@navbar/account.navitem.jsx';
|
|
||||||
import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
|
|
||||||
|
|
||||||
import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
|
|
||||||
import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
|
|
||||||
|
|
||||||
const SharePage = (props)=>{
|
|
||||||
const { brew = DEFAULT_BREW_LOAD, disableMeta = false, share = true } = props;
|
|
||||||
|
|
||||||
const [themeBundle, setThemeBundle] = useState({});
|
|
||||||
const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
|
|
||||||
|
|
||||||
const handleBrewRendererPageChange = useCallback((pageNumber)=>{
|
|
||||||
setCurrentBrewRendererPageNum(pageNumber);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const handleControlKeys = (e)=>{
|
|
||||||
if(!(e.ctrlKey || e.metaKey)) return;
|
|
||||||
const P_KEY = 80;
|
|
||||||
if(e.keyCode === P_KEY) {
|
|
||||||
printCurrentBrew();
|
|
||||||
e.stopPropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(()=>{
|
|
||||||
document.addEventListener('keydown', handleControlKeys);
|
|
||||||
fetchThemeBundle(undefined, setThemeBundle, brew.renderer, brew.theme);
|
|
||||||
|
|
||||||
return ()=>{
|
|
||||||
document.removeEventListener('keydown', handleControlKeys);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const processShareId = ()=>{
|
|
||||||
return brew.googleId && !brew.stubbed ? brew.googleId + brew.shareId : brew.shareId;
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderEditLink = ()=>{
|
|
||||||
if(!brew.editId) return null;
|
|
||||||
|
|
||||||
const editLink = brew.googleId && ! brew.stubbed ? brew.googleId + brew.editId : brew.editId;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
|
|
||||||
edit
|
|
||||||
</Nav.item>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const titleEl = (
|
|
||||||
<Nav.item className='brewTitle' style={disableMeta ? { cursor: 'default' } : {}}>
|
|
||||||
{brew.title}
|
|
||||||
</Nav.item>
|
|
||||||
);
|
|
||||||
|
|
||||||
const showNav = (
|
|
||||||
<Navbar>
|
|
||||||
<Nav.section className='titleSection'>
|
|
||||||
{disableMeta ? titleEl : <MetadataNav brew={brew}>{titleEl}</MetadataNav>}
|
|
||||||
</Nav.section>
|
|
||||||
|
|
||||||
<Nav.section>
|
|
||||||
{brew.shareId && (
|
|
||||||
<>
|
|
||||||
<PrintNavItem brew={brew}/>
|
|
||||||
<Nav.dropdown>
|
|
||||||
<Nav.item color='red' icon='fas fa-code'>
|
|
||||||
source
|
|
||||||
</Nav.item>
|
|
||||||
<Nav.item color='blue' icon='fas fa-eye' href={`/source/${processShareId()}`}>
|
|
||||||
view
|
|
||||||
</Nav.item>
|
|
||||||
{renderEditLink()}
|
|
||||||
<Nav.item color='blue' icon='fas fa-download' href={`/download/${processShareId()}`}>
|
|
||||||
download
|
|
||||||
</Nav.item>
|
|
||||||
<Nav.item color='blue' icon='fas fa-clone' href={`/new/${processShareId()}`}>
|
|
||||||
clone to new
|
|
||||||
</Nav.item>
|
|
||||||
</Nav.dropdown>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<RecentNavItem brew={brew} storageKey='view' />
|
|
||||||
<Account />
|
|
||||||
</Nav.section>
|
|
||||||
</Navbar>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='sharePage sitePage'>
|
|
||||||
<Meta name='robots' content='noindex, nofollow' />
|
|
||||||
{share ? showNav : ''}
|
|
||||||
<div className='content'>
|
|
||||||
<BrewRenderer
|
|
||||||
text={brew.text}
|
|
||||||
style={brew.style}
|
|
||||||
lang={brew.lang}
|
|
||||||
renderer={brew.renderer}
|
|
||||||
theme={brew.theme}
|
|
||||||
themeBundle={themeBundle}
|
|
||||||
onPageChange={handleBrewRendererPageChange}
|
|
||||||
currentBrewRendererPageNum={currentBrewRendererPageNum}
|
|
||||||
allowPrint={true}
|
|
||||||
showToolbar={share}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SharePage;
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
.sharePage {
|
|
||||||
nav .navSection.titleSection {
|
|
||||||
flex-grow : 1;
|
|
||||||
justify-content : center;
|
|
||||||
}
|
|
||||||
.content { overflow-y : hidden; }
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user