Adding new navitems and finishing the edit and share page

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -9,7 +9,7 @@ var PAGE_HEIGHT = 1056 + 30;
 var BrewRenderer = React.createClass({
 	getDefaultProps: function() {
 		return {
-			brewText : ''
+			text : ''
 		};
 	},
 	getInitialState: function() {
@@ -68,7 +68,7 @@ var BrewRenderer = React.createClass({
 	},
 
 	renderPages : function(){
-		var pages = this.props.brewText.split('\\page');
+		var pages = this.props.text.split('\\page');
 		this.totalPages = pages.length;
 
 		return _.map(pages, (page, index)=>{

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,31 +1,23 @@
+
 @import (less) './client/homebrew/phbStyle/phb.style.less';
-
-
 .pane{
-	position: relative;
+	position : relative;
 }
-
 .brewRenderer{
-	overflow-y: scroll;
+	overflow-y : scroll;
-
-	//height : calc(~"100%");
-
 	.pageInfo{
-		background-color: #333;
+		position         : absolute;
-		color : White;
+		right            : 17px;
-		position: absolute;
+		bottom           : 0;
-		padding: 8px 10px;
+		z-index          : 1000;
-		font-weight: 800;
+		padding          : 8px 10px;
-		font-size: 10px;
+		background-color : #333;
-		z-index : 1000;
+		font-size        : 10px;
-
+		font-weight      : 800;
-		bottom: 0;
+		color            : white;
-		right : 17px;
 	}
-
 	.pages{
-		margin: 30px 0px;
+		margin : 30px 0px;
-
 		&>.phb{
 			margin-right  : auto;
 			margin-bottom : 30px;
@@ -33,6 +25,4 @@
 			box-shadow    : 1px 4px 14px #000;
 		}
 	}
-
-
 }

client/homebrew/editor/editor.less

@@ -1,74 +1,51 @@
 
 .editor{
-	position   : relative;
+	position : relative;
-
+	width    : 100%;
-	width      : 100%;
-
-	//height : 500px;
-
 	.snippetBar{
-		padding : 5px;
+		display          : flex;
-		background-color: #ddd;
+		padding          : 5px;
-
+		background-color : #ddd;
-		display: flex;
+		align-items      : center;
-
-		align-items: center;
-
-
 		.snippetGroup{
 			.animate(background-color);
-
+			margin        : 0px 10px;
+			padding       : 5px;
+			font-size     : 15px;
 			border-radius : 5px;
 			&:hover, &.selected{
-				background-color: #999;
+				background-color : #999;
 			}
-			padding : 5px;
-			font-size: 15px;
-			margin: 0px 10px;
-
 			.text{
-				line-height: 20px;
+				line-height : 20px;
-
 				.groupName{
-					margin-left: 6px;
+					margin-left : 6px;
-					font-size: 12px;
+					font-size   : 12px;
-
 				}
 			}
-
-			//cursor : pointer;
-
 			&:hover{
 				.dropdown{
-					visibility: visible;
+					visibility : visible;
 				}
 			}
-
-
 			.dropdown{
-				position: absolute;
+				position         : absolute;
-				z-index : 1000;
+				visibility       : hidden;
-				background-color: #ddd;
+				z-index          : 1000;
-				padding : 5px;
+				padding          : 5px;
-				visibility: hidden;
+				background-color : #ddd;
-
 				.snippet{
-					font-size: 13px;
-					padding : 10px;
 					.animate(background-color);
-					cursor : pointer;
+					padding   : 10px;
+					cursor    : pointer;
+					font-size : 13px;
 					&:hover{
-						background-color: #999;
+						background-color : #999;
 					}
 				}
-
 			}
-
 		}
-
-
 	}
-
 	.codeEditor{
 		height : 100%;
 	}

client/homebrew/homebrew.jsx

@@ -17,7 +17,8 @@ var Homebrew = React.createClass({
 			welcomeText : "",
 			changelog : "",
 			brew : {
-				text : "",
+				title : '',
+				text : '',
 				shareId : null,
 				editId : null,
 				createdAt : null,
@@ -28,14 +29,14 @@ var Homebrew = React.createClass({
 	componentWillMount: function() {
 		Router = CreateRouter({
 			'/homebrew/edit/:id' : (args) => {
-				return <EditPage id={args.id} entry={this.props.brew} />
+				return <EditPage id={args.id} brew={this.props.brew} />
 			},
 
 			'/homebrew/share/:id' : (args) => {
-				return <SharePage id={args.id} entry={this.props.brew} />
+				return <SharePage id={args.id} brew={this.props.brew} />
 			},
 			'/homebrew/changelog' : (args) => {
-				return <SharePage entry={{text : this.props.changelog}} />
+				return <SharePage brew={{title : 'Changelog', text : this.props.changelog}} />
 			},
 			'/homebrew/new' : (args) => {
 				return <NewPage />

client/homebrew/navbar/issue.navitem.jsx

@@ -10,7 +10,6 @@ const MAX_URL_SIZE = 2083;
 const MAIN_URL = "https://www.reddit.com/r/UnearthedArcana/submit?selftext=true"
 
 
-
 var RedditShare = React.createClass({
 	getDefaultProps: function() {
 		return {

client/homebrew/navbar/navbar.less

@@ -39,4 +39,11 @@
 			}
 		}
 	}
+	.brewTitle.navItem{
+		font-size        : 12px;
+		font-weight      : 800;
+		color            : white;
+		text-align       : center;
+		text-transform: initial;
+	}
 }

client/homebrew/navbar/print.navitem.jsx

@@ -0,0 +1,51 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+//var striptags = require('striptags');
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_URL_SIZE = 2083;
+const MAIN_URL = "https://www.reddit.com/r/UnearthedArcana/submit?selftext=true"
+
+
+var RedditShare = React.createClass({
+	getDefaultProps: function() {
+		return {
+			brew : {
+				title : '',
+				sharedId : '',
+				text : ''
+			}
+		};
+	},
+
+	getText : function(){
+
+	},
+
+
+	handleClick : function(){
+		var url = [
+			MAIN_URL,
+			'title=' + encodeURIComponent(this.props.brew.title ? this.props.brew.title : 'Check out my brew!'),
+
+			'text=' + encodeURIComponent(this.props.brew.text)
+
+
+		].join('&');
+
+		window.open(url, '_blank');
+	},
+
+
+	render : function(){
+		return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}>
+			share on reddit
+		</Nav.item>
+	},
+
+});
+
+module.exports = RedditShare;

client/homebrew/navbar/reddit.navitem.jsx

@@ -0,0 +1,51 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+//var striptags = require('striptags');
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_URL_SIZE = 2083;
+const MAIN_URL = "https://www.reddit.com/r/UnearthedArcana/submit?selftext=true"
+
+
+var RedditShare = React.createClass({
+	getDefaultProps: function() {
+		return {
+			brew : {
+				title : '',
+				sharedId : '',
+				text : ''
+			}
+		};
+	},
+
+	getText : function(){
+
+	},
+
+
+	handleClick : function(){
+		var url = [
+			MAIN_URL,
+			'title=' + encodeURIComponent(this.props.brew.title ? this.props.brew.title : 'Check out my brew!'),
+
+			'text=' + encodeURIComponent(this.props.brew.text)
+
+
+		].join('&');
+
+		window.open(url, '_blank');
+	},
+
+
+	render : function(){
+		return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}>
+			share on reddit
+		</Nav.item>
+	},
+
+});
+
+module.exports = RedditShare;

client/homebrew/navbar/source.navitem.jsx

@@ -0,0 +1,51 @@
+var React = require('react');
+var _ = require('lodash');
+var cx = require('classnames');
+
+//var striptags = require('striptags');
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+
+const MAX_URL_SIZE = 2083;
+const MAIN_URL = "https://www.reddit.com/r/UnearthedArcana/submit?selftext=true"
+
+
+var RedditShare = React.createClass({
+	getDefaultProps: function() {
+		return {
+			brew : {
+				title : '',
+				sharedId : '',
+				text : ''
+			}
+		};
+	},
+
+	getText : function(){
+
+	},
+
+
+	handleClick : function(){
+		var url = [
+			MAIN_URL,
+			'title=' + encodeURIComponent(this.props.brew.title ? this.props.brew.title : 'Check out my brew!'),
+
+			'text=' + encodeURIComponent(this.props.brew.text)
+
+
+		].join('&');
+
+		window.open(url, '_blank');
+	},
+
+
+	render : function(){
+		return <Nav.item icon='fa-reddit-alien' color='red' onClick={this.handleClick}>
+			share on reddit
+		</Nav.item>
+	},
+
+});
+
+module.exports = RedditShare;

client/homebrew/pageContainer/pageContainer.less

@@ -1,15 +1,9 @@
-@import (less) './client/homebrew/phbStyle/phb.style.less';
 
+@import (less) './client/homebrew/phbStyle/phb.style.less';
 .pageContainer{
 	background-color : @steel;
-//	overflow-y: scroll;
-
-//height :100%;
-
-
 	.pages{
-		padding          : 30px 0px;
+		padding : 30px 0px;
-
 		&>.phb{
 			margin-right  : auto;
 			margin-bottom : 30px;
@@ -17,5 +11,4 @@
 			box-shadow    : 1px 4px 14px #000;
 		}
 	}
-
 }

client/homebrew/pages/editPage/editPage.jsx

@@ -1,16 +1,32 @@
 var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
+var request = require("superagent");
+
+
+var Nav = require('naturalcrit/nav/nav.jsx');
+var Navbar = require('../../navbar/navbar.jsx');
+
+var EditTitle = require('../../navbar/editTitle.navitem.jsx');
+
+
+var SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
+var Editor = require('../../editor/editor.jsx');
+var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+
+
+
+
+
 
 var Statusbar = require('../../statusbar/statusbar.jsx');
 var PageContainer = require('../../pageContainer/pageContainer.jsx');
 var Editor = require('../../editor/editor.jsx');
 
-var FullClassGen = require('../../editor/snippets/fullclass.gen.js');
 
-var request = require("superagent");
 
-var SAVE_TIMEOUT = 3000;
+
+const SAVE_TIMEOUT = 3000;
 
 
 
@@ -18,8 +34,9 @@ var EditPage = React.createClass({
 	getDefaultProps: function() {
 		return {
 			id : null,
-			entry : {
+			brew : {
-				text : "",
+				title : '',
+				text : '',
 				shareId : null,
 				editId : null,
 				createdAt : null,
@@ -30,9 +47,13 @@ var EditPage = React.createClass({
 
 	getInitialState: function() {
 		return {
-			text: this.props.entry.text,
+			title : this.props.brew.title,
+			text: this.props.brew.text,
+			isSaving : false,
+			errors : null,
 			pending : false,
-			lastUpdated : this.props.entry.updatedAt
+
+			lastUpdated : this.props.brew.updatedAt
 		};
 	},
 
@@ -43,6 +64,21 @@ var EditPage = React.createClass({
 			return "You have unsaved changes!";
 		}
 	},
+	componentWillUnmount: function() {
+		window.onbeforeunload = function(){};
+	},
+
+	handleSplitMove : function(){
+		this.refs.editor.update();
+	},
+
+	handleTitleChange : function(title){
+		this.setState({
+			title : title,
+			pending : true
+		});
+		this.save();
+	},
 
 	handleTextChange : function(text){
 		this.setState({
@@ -52,9 +88,20 @@ var EditPage = React.createClass({
 		this.save();
 	},
 
+	handleDelete : function(){
+		if(!confirm("are you sure you want to delete this brew?")) return;
+		if(!confirm("are you REALLY sure? You will not be able to recover it")) return;
+
+		request.get('/homebrew/api/remove/' + this.props.brew.editId)
+			.send()
+			.end(function(err, res){
+				window.location.href = '/homebrew';
+			});
+	},
+
 	save : _.debounce(function(){
 		request
-			.put('/homebrew/update/' + this.props.id)
+			.put('/homebrew/api/update/' + this.props.id)
 			.send({text : this.state.text})
 			.end((err, res) => {
 				this.setState({
@@ -64,25 +111,44 @@ var EditPage = React.createClass({
 			})
 	}, SAVE_TIMEOUT),
 
+
+
+	renderNavbar : function(){
+		return <Navbar>
+			<Nav.section>
+				<EditTitle title={this.state.title} onChange={this.handleTitleChange} />
+			</Nav.section>
+
+			<Nav.section>
+				<Nav.item newTab={true} href='https://github.com/stolksdorf/naturalcrit/issues' color='red' icon='fa-bug'>
+					report issue
+				</Nav.item>
+
+				<Nav.item newTab={true} href={'/homebrew/share/' + this.props.brew.shareId} color='teal' icon='fa-share'>
+					Share
+				</Nav.item>
+
+				<Nav.item newTab={true} href={'/homebrew/print/' + this.props.brew.sharedId} color='orange' icon='fa-print'>
+					print
+				</Nav.item>
+
+				<Nav.item color='lightred' icon='fa-trash' onClick={this.handleDelete}>
+					Delete
+				</Nav.item>
+
+			</Nav.section>
+		</Navbar>
+	},
+
 	render : function(){
-		return <div className='editPage'>
+		return <div className='editPage page'>
+			{this.renderNavbar()}
 
-
+			<div className='content'>
-
+				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
-			<Statusbar
+					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
-				editId={this.props.entry.editId}
+					<BrewRenderer text={this.state.text} />
-				shareId={this.props.entry.shareId}
+				</SplitPane>
-				printId={this.props.entry.shareId}
-				lastUpdated={this.state.lastUpdated}
-				isPending={this.state.pending} />
-
-			<div className='paneSplit'>
-				<div className='leftPane'>
-					<Editor text={this.state.text} onChange={this.handleTextChange} />
-				</div>
-				<div className='rightPane'>
-					<PageContainer text={this.state.text} />
-				</div>
 			</div>
 		</div>
 	}

client/homebrew/pages/homePage/homePage.jsx

@@ -4,7 +4,6 @@ var cx = require('classnames');
 
 var Nav = require('naturalcrit/nav/nav.jsx');
 var Navbar = require('../../navbar/navbar.jsx');
-var RedditShare = require('../../navbar/redditShare.navitem.jsx');
 
 
 
@@ -14,64 +13,35 @@ var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 
 
-
-
-
 var HomePage = React.createClass({
-
 	getDefaultProps: function() {
 		return {
 			welcomeText : ""
 		};
 	},
-
 	getInitialState: function() {
 		return {
 			text: this.props.welcomeText
 		};
 	},
-
-
 	handleSplitMove : function(){
 		this.refs.editor.update();
 	},
-
 	handleTextChange : function(text){
 		this.setState({
 			text : text
 		});
-
-		//localStorage.setItem(KEY, text);
 	},
-
 	renderNavbar : function(){
 		return <Navbar>
 			<Nav.section>
-				<Nav.item>Bad Ass Brew</Nav.item>
+				<Nav.item newTab={true} href='https://github.com/stolksdorf/naturalcrit/issues' color='red' icon='fa-bug'>
-			</Nav.section>
-
-			<Nav.section>
-				<RedditShare brew={{text : this.state.text}}/>
-
-
-				<Nav.item
-					newTab={true}
-					href='https://github.com/stolksdorf/naturalcrit/issues'
-					color='red'
-					icon='fa-bug'>
 					report issue
 				</Nav.item>
-				<Nav.item
+				<Nav.item newTab={true} href='/homebrew/changelog' color='purple' icon='fa-file-text-o'>
-					newTab={true}
-					href='/homebrew/changelog'
-					color='purple'
-					icon='fa-file-text-o'>
 					Changelog
 				</Nav.item>
-				<Nav.item
+				<Nav.item href='/homebrew/new' color='green' icon='fa-external-link'>
-					href='/homebrew/new'
-					color='green'
-					icon='fa-external-link'>
 					New Brew
 				</Nav.item>
 			</Nav.section>
@@ -85,45 +55,15 @@ var HomePage = React.createClass({
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
-					<BrewRenderer brewText={this.state.text} />
+					<BrewRenderer text={this.state.text} />
 				</SplitPane>
-
-
 			</div>
 
-			{/*
 			<a href='/homebrew/new' className='floatingNewButton'>
 				Create your own <i className='fa fa-magic' />
 			</a>
-			*/}
 		</div>
 	}
 });
 
 module.exports = HomePage;
-
-/*
-<SplitPane>
-
-
-	<PageContainer text={this.state.text} />
-	<Editor text={this.state.text} onChange={this.handleTextChange} />
-</SplitPane>
-
-*/
-
-
-
-/* Test code
-<div className='content'>
-	<SplitPane>
-		<div className='woo'>
-			one
-		</div>
-		<div className='temp'>
-			yo
-			<div className='tooBig' />
-		</div>
-	</SplitPane>
-</div>
-*/

client/homebrew/pages/newPage/newPage.jsx

@@ -32,8 +32,9 @@ var NewPage = React.createClass({
 				text : storage
 			})
 		}
-		window.onbeforeunload = function(e){
+		window.onbeforeunload = (e)=>{
-			//return "Your homebrew isn't saved. Are you sure you want to leave?";
+			if(this.state.text == '') return;
+			return "Your homebrew isn't saved. Are you sure you want to leave?";
 		};
 	},
 
@@ -104,15 +105,9 @@ var NewPage = React.createClass({
 
 			<Nav.section>
 				{this.renderSaveButton()}
-
+				<Nav.item newTab={true} href='https://github.com/stolksdorf/naturalcrit/issues' color='red' icon='fa-bug'>
-				<Nav.item
-					newTab={true}
-					href='https://github.com/stolksdorf/naturalcrit/issues'
-					color='red'
-					icon='fa-bug'>
 					report issue
 				</Nav.item>
-
 			</Nav.section>
 		</Navbar>
 	},
@@ -125,7 +120,7 @@ var NewPage = React.createClass({
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor value={this.state.text} onChange={this.handleTextChange} ref='editor'/>
-					<BrewRenderer brewText={this.state.text} />
+					<BrewRenderer text={this.state.text} />
 				</SplitPane>
 			</div>
 		</div>

client/homebrew/pages/sharePage/sharePage.jsx

@@ -2,18 +2,22 @@ var React = require('react');
 var _ = require('lodash');
 var cx = require('classnames');
 
-var Statusbar = require('../../statusbar/statusbar.jsx');
+var Nav = require('naturalcrit/nav/nav.jsx');
+var Navbar = require('../../navbar/navbar.jsx');
 
-var PageContainer = require('../../pageContainer/pageContainer.jsx');
+var BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+
+var replaceAll = function(str, find, replace) {
+	return str.replace(new RegExp(find, 'g'), replace);
+}
 
 var SharePage = React.createClass({
 	getDefaultProps: function() {
 		return {
-			id : null,
+			brew : {
-			entry : {
+				title : '',
-				text : "",
+				text : '',
 				shareId : null,
-				editId : null,
 				createdAt : null,
 				updatedAt : null,
 				views : 0
@@ -21,20 +25,38 @@ var SharePage = React.createClass({
 		};
 	},
 
-	render : function(){
+	openSourceWindow : function(){
-		return(
+		var sourceWindow = window.open();
-			<div className='sharePage'>
+		var content = replaceAll(this.props.brew.text, '<', '&lt;');
-				<Statusbar
+		content = replaceAll(content, '>', '&gt;');
-					sourceText={this.props.entry.text}
+		sourceWindow.document.write('<code><pre>' + content + '</pre></code>');
-					lastUpdated={this.props.entry.updatedAt}
+	},
-					views={this.props.entry.views}
-					printId={this.props.entry.shareId}
-					shareId={this.props.entry.shareId}
-				/>
 
-				<PageContainer text={this.props.entry.text} />
+
+	render : function(){
+
+		console.log('brew', this.props.brew);
+
+		return <div className='sharePage page'>
+			<Navbar>
+				<Nav.section>
+					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
+				</Nav.section>
+
+				<Nav.section>
+					<Nav.item newTab={true} href={'/homebrew/print/' + this.props.brew.sharedId} color='orange' icon='fa-print'>
+						print
+					</Nav.item>
+					<Nav.item onClick={this.openSourceWindow} color='teal' icon='fa-code'>
+						source
+					</Nav.item>
+				</Nav.section>
+			</Navbar>
+
+			<div className='content'>
+				<BrewRenderer text={this.props.brew.text} />
 			</div>
-		);
+		</div>
 	}
 });
 

server/homebrew.model.js

@@ -5,6 +5,7 @@ var _ = require('lodash');
 var HomebrewSchema = mongoose.Schema({
 	shareId : {type : String, default: shortid.generate},
 	editId : {type : String, default: shortid.generate},
+	title : {type : String, default : ""},
 	text : {type : String, default : ""},
 
 	createdAt     : { type: Date, default: Date.now },

todo.md

@@ -8,7 +8,7 @@ X Add `infoBox` to BrewRenderer to show views, and current pages
 - remove old status bar
 X remove jsoneditor (if we don't need it)
 X Add in markdown editor
-- Add the '/new' page and force save to reduce database size
+X Add the '/new' page and force save to reduce database size
 X Add pagniation and query to the homebrew api
 X Update the admin page with pagnition and a query box
 X Test the old/small brew filtering for deleteion
@@ -17,8 +17,10 @@ X Partial rendering kills style tags on unrendered pages. Detect if pages have s
 - Add in brew title, use for metadata?
 - Add in specific entry point rendering in server.js
 - Add in a tutorial page?
-- Add in a localstorage fallback on the `/new` page, clear it when they save
+X Add in a localstorage fallback on the `/new` page, clear it when they save
 X Rename `/client/naturalCrit` -> `/client/main`
+- Move snippets into their new groups
+- Replace pseudo-elements with encoded images
 
 ## v1.6
 - Add error handling to the saving wdiget in the status bar