Creating thew new brew renderer

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -2,13 +2,98 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-var COM = React.createClass({
+var Markdown = require('marked');
+
+var PAGE_HEIGHT = 1056 + 30;
+
+var BrewRenderer = React.createClass({
+	getDefaultProps: function() {
+		return {
+			brewText : ''
+		};
+	},
+	getInitialState: function() {
+		return {
+			viewablePageNumber: 0,
+			height : 0
+		};
+	},
+	totalPages : 0,
+	height : 0,
+
+
+	componentDidMount: function() {
+		this.setState({
+			height : this.refs.main.parentNode.clientHeight
+		});
+
+	},
+
+	handleScroll : function(e){
+		console.log('sco');
+
+		this.setState({
+			viewablePageNumber : Math.floor(e.target.scrollTop / PAGE_HEIGHT)
+		});
+	},
+
+	//Implement later
+	scrollToPage : function(pageNumber){
+	},
+
+	shouldRender : function(pageText, index){
+		var viewIndex = this.state.viewablePageNumber;
+		if(index == viewIndex - 1) return true;
+		if(index == viewIndex)     return true;
+		if(index == viewIndex + 1) return true;
+
+		//Check for style tages
+		if(pageText.indexOf('<style>') !== -1) return true;
+
+		return false;
+	},
+
+	renderPageInfo : function(){
+		return <div className='pageInfo'>
+			{this.state.viewablePageNumber} / {this.totalPages}
+		</div>
+	},
+
+	renderDummyPage : function(key){
+		return <div className='phb' key={key}>
+			<i className='fa fa-spinner fa-spin' />
+		</div>
+	},
+
+	renderPage : function(pageText, index){
+		return <div className='phb' dangerouslySetInnerHTML={{__html:Markdown(pageText)}} key={index} />
+	},
+
+	renderPages : function(){
+		var pages = this.props.brewText.split('\\page');
+		this.totalPages = pages.length;
+
+		return _.map(pages, (page, index)=>{
+			if(this.shouldRender(page, index)){
+				return this.renderPage(page, index);
+			}else{
+				return this.renderDummyPage(index);
+			}
+		});
+	},
 
 	render : function(){
-		return <div className='COM'>
+		return <div className='brewRenderer'
-			COM Ready!
+			onScroll={this.handleScroll}
+			ref='main'
+			style={{height : this.state.height}}>
+
+			<div className='pages'>
+				{this.renderPages()}
+			</div>
+			{this.renderPageInfo()}
 		</div>
 	}
 });
 
-module.exports = COM;
+module.exports = BrewRenderer;

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,3 +1,31 @@
-.COM{
+@import (less) './client/homebrew/phbStyle/phb.style.less';
+
+.brewRenderer{
+	position: relative;
+	overflow-y: scroll;
+
+	//height : calc(~"100%");
+
+	.pageInfo{
+		background-color: black;
+		color : White;
+		position: absolute;
+		padding: 30px;
+		z-index : 1000;
+
+		bottom: 0;
+		right : 0;
+	}
+
+	.pages{
+
+		&>.phb{
+			margin-right  : auto;
+			margin-bottom : 30px;
+			margin-left   : auto;
+			box-shadow    : 1px 4px 14px #000;
+		}
+	}
+
 
 }

client/homebrew/editor/editor.less

@@ -4,7 +4,7 @@
 
 	width      : 100%;
 
-	height : 500px;
+	//height : 500px;
 
 	.snippetBar{
 		padding : 5px;
@@ -69,9 +69,6 @@
 
 	}
 
-
-
-
 	.codeEditor{
 		height : 100%;
 	}

client/homebrew/navbar/redditShare.navitem.jsx

@@ -2,7 +2,7 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-var striptags = require('striptags');
+//var striptags = require('striptags');
 
 var Nav = require('naturalcrit/nav/nav.jsx');
 

client/homebrew/pages/homePage/homePage.jsx

@@ -20,6 +20,7 @@ var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 //var CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 
 var Editor = require('../../editor/editor.jsx');
+var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 
 
@@ -102,7 +103,7 @@ var HomePage = React.createClass({
 				<div className='content'>
 					<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 						<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
-						<div>{this.state.text}</div>
+						<BrewRenderer brewText={this.state.text} />
 					</SplitPane>