0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 03:22:38 +00:00

initial commit

This commit is contained in:
Víctor Losada Hernández
2024-11-28 00:21:35 +01:00
parent e28b4e8c20
commit 8c986bb97d

View File

@@ -1,6 +1,6 @@
require('./sharePage.less'); require('./sharePage.less');
const React = require('react'); const React = require('react');
const createClass = require('create-react-class'); const { useState, useEffect, useCallback } = React;
const { Meta } = require('vitreum/headtags'); const { Meta } = require('vitreum/headtags');
const Nav = require('naturalcrit/nav/nav.jsx'); const Nav = require('naturalcrit/nav/nav.jsx');
@@ -8,130 +8,124 @@ const Navbar = require('../../navbar/navbar.jsx');
const MetadataNav = require('../../navbar/metadata.navitem.jsx'); const MetadataNav = require('../../navbar/metadata.navitem.jsx');
const PrintNavItem = require('../../navbar/print.navitem.jsx'); const PrintNavItem = require('../../navbar/print.navitem.jsx');
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both; const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
const VaultNavItem = require('../../navbar/vault.navitem.jsx');
const Account = require('../../navbar/account.navitem.jsx'); const Account = require('../../navbar/account.navitem.jsx');
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js'); const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js'); const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
const SharePage = createClass({ const SharePage = (props)=>{
displayName : 'SharePage', const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;
getDefaultProps : function() {
return {
brew : DEFAULT_BREW_LOAD,
disableMeta : false
};
},
getInitialState : function() { const [state, setState] = useState({
return {
themeBundle : {}, themeBundle : {},
currentBrewRendererPageNum : 1 currentBrewRendererPageNum : 1,
}; });
},
componentDidMount : function() { const handleBrewRendererPageChange = useCallback((pageNumber)=>{
document.addEventListener('keydown', this.handleControlKeys); updateState({ currentBrewRendererPageNum: pageNumber });
}, []);
fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme); const handleControlKeys = useCallback((e)=>{
},
componentWillUnmount : function() {
document.removeEventListener('keydown', this.handleControlKeys);
},
handleBrewRendererPageChange : function(pageNumber){
this.setState({ currentBrewRendererPageNum: pageNumber });
},
handleControlKeys : function(e){
if(!(e.ctrlKey || e.metaKey)) return; if(!(e.ctrlKey || e.metaKey)) return;
const P_KEY = 80; const P_KEY = 80;
if(e.keyCode == P_KEY){ if(e.keyCode === P_KEY) {
if(e.keyCode == P_KEY) printCurrentBrew(); printCurrentBrew();
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} }
}, []);
useEffect(()=>{
document.addEventListener('keydown', handleControlKeys);
fetchThemeBundle(
{
setState,
}, },
brew.renderer,
brew.theme
);
processShareId : function() { return ()=>{
return this.props.brew.googleId && !this.props.brew.stubbed ? document.removeEventListener('keydown', handleControlKeys);
this.props.brew.googleId + this.props.brew.shareId : };
this.props.brew.shareId; }, [brew.renderer, brew.theme, handleControlKeys]);
},
renderEditLink : function(){ const processShareId = useCallback(()=>{
if(!this.props.brew.editId) return; return brew.googleId && !brew.stubbed ? brew.googleId + brew.shareId : brew.shareId;
}, [brew]);
let editLink = this.props.brew.editId; const renderEditLink = ()=>{
if(this.props.brew.googleId && !this.props.brew.stubbed) { if(!brew.editId) return null;
editLink = this.props.brew.googleId + editLink;
let editLink = brew.editId;
if(brew.googleId && !brew.stubbed) {
editLink = brew.googleId + editLink;
} }
return <Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}> return (
<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
edit edit
</Nav.item>; </Nav.item>
}, );
};
render : function(){ const titleStyle = disableMeta ? { cursor: 'default' } : {};
const titleStyle = this.props.disableMeta ? { cursor: 'default' } : {}; const titleEl = (
const titleEl = <Nav.item className='brewTitle' style={titleStyle}>{this.props.brew.title}</Nav.item>; <Nav.item className='brewTitle' style={titleStyle}>
{brew.title}
</Nav.item>
);
return <div className='sharePage sitePage'> return (
<div className='sharePage sitePage'>
<Meta name='robots' content='noindex, nofollow' /> <Meta name='robots' content='noindex, nofollow' />
<Navbar> <Navbar>
<Nav.section className='titleSection'> <Nav.section className='titleSection'>
{ {disableMeta ? titleEl : <MetadataNav brew={brew}>{titleEl}</MetadataNav>}
this.props.disableMeta ?
titleEl
:
<MetadataNav brew={this.props.brew}>
{titleEl}
</MetadataNav>
}
</Nav.section> </Nav.section>
<Nav.section> <Nav.section>
{this.props.brew.shareId && <> {brew.shareId && (
<PrintNavItem/> <>
<PrintNavItem />
<Nav.dropdown> <Nav.dropdown>
<Nav.item color='red' icon='fas fa-code'> <Nav.item color='red' icon='fas fa-code'>
source source
</Nav.item> </Nav.item>
<Nav.item color='blue' icon='fas fa-eye' href={`/source/${this.processShareId()}`}> <Nav.item color='blue' icon='fas fa-eye' href={`/source/${processShareId()}`}>
view view
</Nav.item> </Nav.item>
{this.renderEditLink()} {renderEditLink()}
<Nav.item color='blue' icon='fas fa-download' href={`/download/${this.processShareId()}`}> <Nav.item color='blue' icon='fas fa-download' href={`/download/${processShareId()}`}>
download download
</Nav.item> </Nav.item>
<Nav.item color='blue' icon='fas fa-clone' href={`/new/${this.processShareId()}`}> <Nav.item color='blue' icon='fas fa-clone' href={`/new/${processShareId()}`}>
clone to new clone to new
</Nav.item> </Nav.item>
</Nav.dropdown> </Nav.dropdown>
</>} </>
<VaultNavItem/> )}
<RecentNavItem brew={this.props.brew} storageKey='view' /> <RecentNavItem brew={brew} storageKey='view' />
<Account /> <Account />
</Nav.section> </Nav.section>
</Navbar> </Navbar>
<div className='content'> <div className='content'>
<BrewRenderer <BrewRenderer
text={this.props.brew.text} text={brew.text}
style={this.props.brew.style} style={brew.style}
lang={this.props.brew.lang} lang={brew.lang}
renderer={this.props.brew.renderer} renderer={brew.renderer}
theme={this.props.brew.theme} theme={brew.theme}
themeBundle={this.state.themeBundle} themeBundle={state.themeBundle}
onPageChange={this.handleBrewRendererPageChange} onPageChange={handleBrewRendererPageChange}
currentBrewRendererPageNum={this.state.currentBrewRendererPageNum} currentBrewRendererPageNum={state.currentBrewRendererPageNum}
allowPrint={true} allowPrint={true}
/> />
</div> </div>
</div>; </div>
} );
}); };
module.exports = SharePage; module.exports = SharePage;