diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 9c2ca1312..da16f0a08 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -272,7 +272,7 @@ const BrewRenderer = (props)=>{ const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount" scrollToHash(window.location.hash); - + console.log('Frame'); setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame renderPages(); //Make sure page is renderable before showing setState((prevState)=>({ @@ -326,6 +326,29 @@ const BrewRenderer = (props)=>{ ); + const brewRenderFrameWrapper = ( + <> + {emitClick();}} + > + {brewRenderFrameContents} + + + ); + + const brewRenderDivWrapper = ( + <> +
+ {brewRenderFrameContents} +
+ + ); + return ( <> {/*render dummy page while iFrame is mounting.*/} @@ -346,13 +369,7 @@ const BrewRenderer = (props)=>{ {props.showToolbar ? toolbarEl : ''} {/*render in iFrame so broken code doesn't crash the site.*/} - {emitClick();}} - > - {brewRenderFrameContents} - + {brewRenderDivWrapper} {state.isMounted &&
} diff --git a/client/homebrew/homebrew.jsx b/client/homebrew/homebrew.jsx index 99b3e8fb4..afe0f2b16 100644 --- a/client/homebrew/homebrew.jsx +++ b/client/homebrew/homebrew.jsx @@ -9,6 +9,7 @@ import HomePage from './pages/homePage/homePage.jsx'; import EditPage from './pages/editPage/editPage.jsx'; import UserPage from './pages/userPage/userPage.jsx'; import SharePage from './pages/sharePage/sharePage.jsx'; +import EmbedPage from './pages/embedPage/embedPage.jsx'; import NewPage from './pages/newPage/newPage.jsx'; import ErrorPage from './pages/errorPage/errorPage.jsx'; import VaultPage from './pages/vaultPage/vaultPage.jsx'; @@ -71,7 +72,7 @@ const Homebrew = (props)=>{ } /> } /> - } /> + } /> } /> } /> } /> diff --git a/client/homebrew/pages/embedPage/embedPage.jsx b/client/homebrew/pages/embedPage/embedPage.jsx new file mode 100644 index 000000000..9aed04df4 --- /dev/null +++ b/client/homebrew/pages/embedPage/embedPage.jsx @@ -0,0 +1,124 @@ +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 ( + + edit + + ); + }; + + const titleEl = ( + + {brew.title} + + ); + + const showNav = ( + + + {disableMeta ? titleEl : {titleEl}} + + + + {brew.shareId && ( + <> + + + + source + + + view + + {renderEditLink()} + + download + + + clone to new + + + + )} + + + + + ); + + return ( +
+ + {share ? showNav : ''} +
+ +
+
+ ); +}; + +export default SharePage; diff --git a/client/homebrew/pages/embedPage/embedPage.less b/client/homebrew/pages/embedPage/embedPage.less new file mode 100644 index 000000000..b76dc50f9 --- /dev/null +++ b/client/homebrew/pages/embedPage/embedPage.less @@ -0,0 +1,7 @@ +.sharePage { + nav .navSection.titleSection { + flex-grow : 1; + justify-content : center; + } + .content { overflow-y : hidden; } +} diff --git a/client/homebrew/pages/embedPage/sharePage.jsx b/client/homebrew/pages/embedPage/sharePage.jsx new file mode 100644 index 000000000..c0838f42b --- /dev/null +++ b/client/homebrew/pages/embedPage/sharePage.jsx @@ -0,0 +1,124 @@ +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 ( + + edit + + ); + }; + + const titleEl = ( + + {brew.title} + + ); + + const showNav = ( + + + {disableMeta ? titleEl : {titleEl}} + + + + {brew.shareId && ( + <> + + + + source + + + view + + {renderEditLink()} + + download + + + clone to new + + + + )} + + + + + ); + + return ( +
+ + {share ? showNav : ''} +
+ +
+
+ ); +}; + +export default SharePage; diff --git a/client/homebrew/pages/embedPage/sharePage.less b/client/homebrew/pages/embedPage/sharePage.less new file mode 100644 index 000000000..b76dc50f9 --- /dev/null +++ b/client/homebrew/pages/embedPage/sharePage.less @@ -0,0 +1,7 @@ +.sharePage { + nav .navSection.titleSection { + flex-grow : 1; + justify-content : center; + } + .content { overflow-y : hidden; } +} diff --git a/server/app.js b/server/app.js index 95ec132b0..6910b386f 100644 --- a/server/app.js +++ b/server/app.js @@ -475,13 +475,13 @@ export default async function createApp(vite) { //Share Page app.get('/share/:id', dbCheck, asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{ - shareEmbedCommon(req,res); + await shareEmbedCommon(req,res); return next(); })); //Embed Page - More work will be done on this later... app.get('/embed/:id', dbCheck, asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{ - shareEmbedCommon(req,res); + await shareEmbedCommon(req,res); return next(); }));