Moving code between renderer and view

client/homebrew/pages/editPage/editPage.jsx

@@ -48,10 +48,10 @@ const SmartNav = Store.createSmartComponent(React.createClass({
 			<Nav.section>
 				<Items.ContinousSave />
 				<Items.Issue />
-				<Nav.item newTab={true} href={'/share/' + Store.getBrew().shareId} color='teal' icon='fa-share-alt'>
+				<Nav.item newTab={true} href={'/share/' + this.props.brew.shareId} color='teal' icon='fa-share-alt'>
 					Share
 				</Nav.item>
-				<Items.Print />
+				<Items.Print shareId={this.props.brew.shareId} />
 				<Items.Account />
 			</Nav.section>
 		</Navbar>

client/homebrew/pages/printPage/printPage.jsx

@@ -1,6 +1,10 @@
 const React = require('react');
 const _     = require('lodash');
 const cx    = require('classnames');
+
+
+const BrewRenderer = require('homebrewery/brewRenderer/brewRenderer.jsx');
+
 const Markdown = require('homebrewery/markdown.js');
 
 const Headtags = require('vitreum/headtags');
@@ -30,7 +34,7 @@ const PrintPage = React.createClass({
 				});
 			}catch(e){}
 		}
-		if(this.props.query.dialog) window.print();
+		//if(this.props.query.dialog) window.print();
 	},
 	//TODO: Print page shouldn't replicate functionality in brew renderer
 	renderStyle : function(){
@@ -58,8 +62,9 @@ const PrintPage = React.createClass({
 		return <div className='printPage'>
 			<Headtags.title>{this.state.brew.title}</Headtags.title>
 			{this.renderPrintInstructions()}
-			{this.renderStyle()}
+
-			{this.renderPages()}
+			<BrewRenderer text={this.state.brew.text} style={this.state.brew.style} />
+
 		</div>
 	}
 });

client/homebrew/pages/sharePage/sharePage.jsx

@@ -9,7 +9,7 @@ const ReportIssue = require('../../navbar/issue.navitem.jsx');
 //const RecentlyViewed = require('../../navbar/recent.navitem.jsx').viewed;
 const Account = require('../../navbar/account.navitem.jsx');
 
-const BrewRenderer = require('homebrewery/brewRenderer/brewRenderer.jsx');
+const BrewView = require('homebrewery/BrewView/BrewView.jsx');
 const Utils = require('homebrewery/utils.js');
 
 const Actions = require('homebrewery/brew.actions.js');
@@ -56,7 +56,7 @@ const SharePage = React.createClass({
 				</Nav.section>
 
 				<Nav.section>
-					<ReportIssue />
+					<ReportIssue collaspe={true} />
 					<PrintLink shareId={brew.shareId} />
 					<Nav.item href={'/source/' + brew.shareId} color='teal' icon='fa-code'>
 						source
@@ -65,7 +65,7 @@ const SharePage = React.createClass({
 				</Nav.section>
 			</Navbar>
 			<div className='content'>
-				<BrewRenderer brew={brew} />
+				<BrewView brew={brew}/>
 			</div>
 		</div>
 	}

shared/homebrewery/brewRenderer/brewRenderer.jsx

@@ -5,28 +5,21 @@ const cx = require('classnames');
 const OldBrewRenderer = require('depricated/brewRendererOld/brewRendererOld.jsx');
 
 const Markdown = require('homebrewery/markdown.js');
-const ErrorBar = require('./errorBar/errorBar.jsx');
 
-const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx')
+const PPR_RANGE = 0;
-const Store = require('homebrewery/brew.store.js');
-
-
-const PAGE_HEIGHT = 1056;
-const PPR_THRESHOLD = 50;
 
 const BrewRenderer = React.createClass({
 	getDefaultProps: function() {
 		return {
-			brew : {
 			text : '',
-				style : ''
+			style : '',
-			},
 
+			//usePPR : false // TODO: maybe make this into an page index to render
 
-			//TODO: maybe remove?
+			pprPage : false
-			errors : []
 		};
 	},
+	/*
 	getInitialState: function() {
 		const pages = this.props.brew.text.split('\\page');
 
@@ -40,8 +33,12 @@ const BrewRenderer = React.createClass({
 	},
 	height : 0,
 	pageHeight : PAGE_HEIGHT,
+
+	*/
 	lastRender : <div></div>,
 
+	/*
+
 	componentDidMount: function() {
 		this.updateSize();
 		window.addEventListener('resize', this.updateSize);
@@ -72,11 +69,8 @@ const BrewRenderer = React.createClass({
 		});
 	},
 
-	handleScroll : function(e){
+
-		this.setState({
+	*/
-			viewablePageNumber : Math.floor(e.target.scrollTop / this.pageHeight)
-		});
-	},
 
 	shouldRender : function(pageText, index){
 		if(!this.state.isMounted) return false;
@@ -92,12 +86,8 @@ const BrewRenderer = React.createClass({
 		return false;
 	},
 
-	renderPageInfo : function(){
-		return <div className='pageInfo'>
-			{this.state.viewablePageNumber + 1} / {this.state.pages.length}
-		</div>
-	},
 
+	/*
 	renderPPRmsg : function(){
 		if(!this.state.usePPR) return;
 
@@ -105,18 +95,25 @@ const BrewRenderer = React.createClass({
 			Partial Page Renderer enabled, because your brew is so large. May effect rendering.
 		</div>
 	},
+	*/
 
-	renderDummyPage : function(index){
-		return <div className='phb v2' id={`p${index + 1}`} key={index}>
-			<i className='fa fa-spinner fa-spin' />
-		</div>
-	},
 
 	renderPage : function(pageText, index){
-		return <div className='phb v2' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:Markdown.render(pageText)}} key={index} />
+		const html = Markdown.render(pageText);
+		return <div className='phb v2' id={`p${index + 1}`} dangerouslySetInnerHTML={{__html:html}} key={index} />
+	},
+
+	renderPPR : function(pages, pprPageIndex){
+		return _.map(pages, (page, index)=>{
+			if(_.inRange(index, pprPageIndex - PPR_RANGE, pprPageIndex + PPR_RANGE +1)){
+				this.renderPage(page, index);
+			}
+			return <div className='phb v2' id={`p${index + 1}`} key={index} />;
+		});
 	},
 
 	renderPages : function(){
+		/*
 		if(this.state.usePPR){
 			return _.map(this.state.pages, (page, index)=>{
 				if(this.shouldRender(page, index)){
@@ -126,39 +123,33 @@ const BrewRenderer = React.createClass({
 				}
 			});
 		}
-		if(this.props.errors && this.props.errors.length) return this.lastRender;
+		*/
-		this.lastRender = _.map(this.state.pages, (page, index)=>{
+		const pages = this.props.text.split('\\page');
-			return this.renderPage(page, index);
+
-		});
+		console.log(this.props.pprPage);
-		return this.lastRender;
+
+		if(this.props.pprPage !== false) return this.renderPPR(pages, this.props.pprPage);
+
+		return _.map(pages, (page, index)=>this.renderPage(page, index));
+
+		//TODO: See if you need error handling?
+		//if(this.props.errors && this.props.errors.length) return this.lastRender;
+
 	},
 
 	//TODO: This is pretty bad
 	renderStyle : function(){
-		return <style>{this.props.brew.style.replace(/;/g, ' !important;')}</style>
+		return <style>{this.props.style.replace(/;/g, ' !important;')}</style>
 	},
 
 	render : function(){
-		if(this.props.brew.version == 1) return <OldBrewRenderer value={this.props.brew.text} />;
+		//if(this.props.brew.version == 1) return <OldBrewRenderer value={this.props.brew.text} />;
-
-
-		return <div className='brewRenderer'
-			onScroll={this.handleScroll}
-			ref='main'
-			style={{height : this.state.height}}>
-
-			<ErrorBar errors={this.props.errors} />
-			<RenderWarnings />
 
 
+		return <div className='brewRenderer'>
 			{this.renderStyle()}
-
-			<div className='pages' ref='pages'>
 			{this.renderPages()}
 		</div>
-			{this.renderPageInfo()}
-			{this.renderPPRmsg()}
-		</div>
 	}
 });
 

shared/homebrewery/brewRenderer/brewRenderer.less

@@ -1,39 +1,2 @@
 
 @import (less) './shared/homebrewery/phb_style/phb.less';
-.pane{
-	position : relative;
-}
-.brewRenderer{
-	overflow-y : scroll;
-	.pageInfo{
-		position         : absolute;
-		right            : 17px;
-		bottom           : 0;
-		z-index          : 1000;
-		padding          : 8px 10px;
-		background-color : #333;
-		font-size        : 10px;
-		font-weight      : 800;
-		color            : white;
-	}
-	.ppr_msg{
-		position         : absolute;
-		left             : 0px;
-		bottom           : 0;
-		z-index          : 1000;
-		padding          : 8px 10px;
-		background-color : #333;
-		font-size        : 10px;
-		font-weight      : 800;
-		color            : white;
-	}
-	.pages{
-		margin : 30px 0px;
-		&>.phb{
-			margin-right  : auto;
-			margin-bottom : 30px;
-			margin-left   : auto;
-			box-shadow    : 1px 4px 14px #000;
-		}
-	}
-}

shared/homebrewery/brewView/brewView.jsx

@@ -0,0 +1,82 @@
+
+const React = require('react');
+const _     = require('lodash');
+const cx    = require('classnames');
+
+
+//const ErrorBar = require('./errorBar/errorBar.jsx');
+
+const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
+//const Store = require('homebrewery/brew.store.js');
+
+const PAGE_HEIGHT = 1056;
+
+
+const BrewRenderer = require('../brewRenderer/brewRenderer.jsx');
+
+
+const BrewView = React.createClass({
+	getDefaultProps: function() {
+		return {
+			brew : {
+				text : '',
+				style : ''
+			},
+
+
+		};
+	},
+	getInitialState: function() {
+		const pages = this.props.brew.text.split('\\page');
+
+		return {
+			viewablePageNumber: 0,
+			//height : 0,
+			//isMounted : false,
+			pages : pages,
+		};
+	},
+
+	//height : 0,
+	pageHeight : PAGE_HEIGHT,
+
+	componentWillReceiveProps: function(nextProps) {
+		//if(this.refs.pages && this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight;
+
+		const pages = nextProps.brew.text.split('\\page');
+		this.setState({
+			pages : pages,
+			//usePPR : pages.length >= PPR_THRESHOLD
+		})
+	},
+
+
+	handleScroll : function(e){
+		this.setState({
+			viewablePageNumber : Math.floor(e.target.scrollTop / PAGE_HEIGHT) //this.pageHeight)
+		});
+	},
+
+	renderPageInfo : function(){
+		return <div className='pageInfo'>
+			{this.state.viewablePageNumber + 1} / {this.state.pages.length}
+		</div>
+	},
+
+
+	render: function(){
+		return <div className='brewView' onScroll={this.handleScroll}>
+
+			<BrewRenderer
+				text={this.props.brew.text}
+				style={this.props.brew.style}
+				pprPage={2}
+				/>
+
+
+			{this.renderPageInfo()}
+		</div>
+	}
+});
+
+module.exports = BrewView;

shared/homebrewery/brewView/brewView.less

@@ -0,0 +1,42 @@
+.pane{
+	position : relative;
+}
+
+.brewView{
+	overflow-y : scroll;
+	height : 100%;
+
+	.pageInfo{
+		position         : absolute;
+		right            : 17px;
+		bottom           : 0;
+		z-index          : 1000;
+		padding          : 8px 10px;
+		background-color : #333;
+		font-size        : 10px;
+		font-weight      : 800;
+		color            : white;
+	}
+	/*
+	.ppr_msg{
+		position         : absolute;
+		left             : 0px;
+		bottom           : 0;
+		z-index          : 1000;
+		padding          : 8px 10px;
+		background-color : #333;
+		font-size        : 10px;
+		font-weight      : 800;
+		color            : white;
+	}
+	*/
+	.brewRenderer{
+		margin : 30px 0px;
+		&>.phb{
+			margin-right  : auto;
+			margin-bottom : 30px;
+			margin-left   : auto;
+			box-shadow    : 1px 4px 14px #000;
+		}
+	}
+}

shared/homebrewery/brewView/brewView.smart.jsx

@@ -0,0 +1,11 @@
+//const Actions = require('homebrewery/brew.actions.js');
+const Store = require('homebrewery/brew.store.js');
+
+const BrewView = require('./brewView.jsx')
+
+module.exports = Store.createSmartComponent(BrewView, ()=>{
+	return {
+		brew : Store.getBrew()
+
+	};
+});