Added conditional partial page rendering

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,13 +1,14 @@
-var React = require('react');
-var _ = require('lodash');
-var cx = require('classnames');
+const React = require('react');
+const _ = require('lodash');
+const cx = require('classnames');
 
-var Markdown = require('naturalcrit/markdown.js');
-var ErrorBar = require('./errorBar/errorBar.jsx');
+const Markdown = require('naturalcrit/markdown.js');
+const ErrorBar = require('./errorBar/errorBar.jsx');
 
-var PAGE_HEIGHT = 1056 + 30;
+const PAGE_HEIGHT = 1056;
+const PPR_THRESHOLD = 50;
 
-var BrewRenderer = React.createClass({
+const BrewRenderer = React.createClass({
 	getDefaultProps: function() {
 		return {
 			text : '',
@@ -20,11 +21,15 @@ var BrewRenderer = React.createClass({
 			height : 0,
 			isMounted : false,
 
+			usePPR : true,
+
+			pages : [],
+
 			errors : []
 		};
 	},
-	totalPages : 0,
 	height : 0,
+	pageHeight : PAGE_HEIGHT,
 
 	componentDidMount: function() {
 		this.updateSize();
@@ -34,7 +39,21 @@ var BrewRenderer = React.createClass({
 		window.removeEventListener("resize", this.updateSize);
 	},
 
+	componentWillReceiveProps: function(nextProps) {
+		if(this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight;
+
+		const pages = nextProps.text.split('\\page');
+		this.setState({
+			pages : pages,
+			usePPR : pages.length >= PPR_THRESHOLD
+		})
+	},
+
 	updateSize : function() {
+		setTimeout(()=>{
+			if(this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight;
+		}, 1);
+
 		this.setState({
 			height : this.refs.main.parentNode.clientHeight,
 			isMounted : true
@@ -43,12 +62,9 @@ var BrewRenderer = React.createClass({
 
 	handleScroll : function(e){
 		this.setState({
-			viewablePageNumber : Math.floor(e.target.scrollTop / PAGE_HEIGHT)
+			viewablePageNumber : Math.floor(e.target.scrollTop / this.pageHeight)
 		});
 	},
-	//Implement later
-	scrollToPage : function(pageNumber){
-	},
 
 	shouldRender : function(pageText, index){
 		if(!this.state.isMounted) return false;
@@ -66,7 +82,15 @@ var BrewRenderer = React.createClass({
 
 	renderPageInfo : function(){
 		return <div className='pageInfo'>
-			{this.state.viewablePageNumber + 1} / {this.totalPages}
+			{this.state.viewablePageNumber + 1} / {this.state.pages.length}
+		</div>
+	},
+
+	renderPPRmsg : function(){
+		if(!this.state.usePPR) return;
+
+		return <div className='ppr_msg'>
+			Partial Page Renderer enabled, because your brew is so large. May effect rendering.
 		</div>
 	},
 
@@ -81,15 +105,18 @@ var BrewRenderer = React.createClass({
 	},
 
 	renderPages : function(){
-		var pages = this.props.text.split('\\page');
-		this.totalPages = pages.length;
+		if(this.state.usePPR){
+			return _.map(this.state.pages, (page, index)=>{
+				if(this.shouldRender(page, index)){
+					return this.renderPage(page, index);
+				}else{
+					return this.renderDummyPage(index);
+				}
+			});
+		}
 
-		return _.map(pages, (page, index)=>{
-			if(this.shouldRender(page, index)){
-				return this.renderPage(page, index);
-			}else{
-				return this.renderDummyPage(index);
-			}
+		return _.map(this.state.pages, (page, index)=>{
+			return this.renderPage(page, index);
 		});
 	},
 
@@ -101,10 +128,11 @@ var BrewRenderer = React.createClass({
 
 			<ErrorBar errors={this.props.errors} />
 
-			<div className='pages'>
+			<div className='pages' ref='pages'>
 				{this.renderPages()}
 			</div>
 			{this.renderPageInfo()}
+			{this.renderPPRmsg()}
 		</div>
 	}
 });

client/homebrew/brewRenderer/brewRenderer.less

@@ -16,6 +16,17 @@
 		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{

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -51,6 +51,16 @@ const MetadataEditor = React.createClass({
 			});
 	},
 
+	getRedditLink : function(){
+		const meta = this.props.metadata;
+		const title = `${meta.title} [${meta.systems.join(' ')}]`;
+		const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
+
+**[Homebrewery Link](http://homebrewery.naturalcrit.com/share/${meta.shareId})**`;
+
+		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title)}&text=${encodeURIComponent(text)}`;
+	},
+
 	renderSystems : function(){
 		return _.map(SYSTEMS, (val)=>{
 			return <label key={val}>
@@ -101,8 +111,22 @@ const MetadataEditor = React.createClass({
 		</div>
 	},
 
+	renderShareToReddit : function(){
+		if(!this.props.metadata.shareId) return;
+
+		return <div className='field reddit'>
+			<label>reddit</label>
+			<div className='value'>
+				<a href={this.getRedditLink()} target='_blank'>
+					<button className='publish'>
+						<i className='fa fa-reddit-alien' /> share to reddit
+					</button>
+				</a>
+			</div>
+		</div>
+	},
+
 	render : function(){
-		console.log(this.props.metadata);
 		return <div className='metadataEditor'>
 			<div className='field title'>
 				<label>title</label>
@@ -140,6 +164,8 @@ const MetadataEditor = React.createClass({
 				</div>
 			</div>
 
+			{this.renderShareToReddit()}
+
 			{this.renderDelete()}
 
 		</div>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -67,6 +67,11 @@
 			.button(@red);
 		}
 	}
+	.reddit.field .value{
+		button{
+			.button(@purple);
+		}
+	}
 	.authors.field .value{
 		font-size: 0.8em;
 		line-height    : 1.5em;