Added conditional partial page rendering

changelog.md

@@ -2,6 +2,12 @@
 
 ### Saturday, 03/12/2016 - v2.6.0
 - Added report back to the edit page
+- Changed metaeditor icon
+- Added a button to quickly share your brew to reddit :)
+- Disabled Partial Page Rendering unless your brew hits 75 pages or longer
+- The brew renderer will now try and use your first page to judge the page size of each of your brews. This allows you now to set landscape and other weird sizes and everthing should work fine :)
+
+
 
 ### Thursday, 01/12/2016
 - Added in a snippet for a split table

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;

shared/naturalcrit/nav/nav.jsx

@@ -50,13 +50,15 @@ var Nav = {
 			var icon;
 			if(this.props.icon) icon = <i className={'fa ' + this.props.icon} />;
 
+			const props = _.omit(this.props, ['newTab']);
+
 			if(this.props.href){
-				return <a {...this.props} className={classes} target={this.props.newTab ? '_blank' : '_self'} >
+				return <a {...props} className={classes} target={this.props.newTab ? '_blank' : '_self'} >
 					{this.props.children}
 					{icon}
 				</a>
 			}else{
-				return <div {...this.props} className={classes} onClick={this.handleClick} >
+				return <div {...props} className={classes} onClick={this.handleClick} >
 					{this.props.children}
 					{icon}
 				</div>