mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-07 03:22:38 +00:00
initial commit
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user