Added a table of contents snippet

changelog.md

@@ -7,6 +7,8 @@
 - 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 :)
 - UI on the user page improved slightly
+- Fixed lists not breaking across columns (thanks u/tyson-nw)
+-
 
 
 

client/homebrew/editor/editor.jsx

@@ -82,7 +82,11 @@ const Editor = React.createClass({
 	render : function(){
 		return(
 			<div className='editor' ref='main'>
-				<SnippetBar onInject={this.handleInject} onToggle={this.handgleToggle} showmeta={this.state.showMetadataEditor} />
+				<SnippetBar
+					brew={this.props.value}
+					onInject={this.handleInject}
+					onToggle={this.handgleToggle}
+					showmeta={this.state.showMetadataEditor} />
 				{this.renderMetadataEditor()}
 				<CodeEditor
 					ref='codeEditor'

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -5,8 +5,8 @@ const cx    = require('classnames');
 
 const Snippets = require('./snippets/snippets.js');
 
-const execute = function(val){
-	if(_.isFunction(val)) return val();
+const execute = function(val, brew){
+	if(_.isFunction(val)) return val(brew);
 	return val;
 }
 
@@ -15,6 +15,7 @@ const execute = function(val){
 const Snippetbar = React.createClass({
 	getDefaultProps: function() {
 		return {
+			brew : '',
 			onInject : ()=>{},
 			onToggle : ()=>{},
 			showmeta : false
@@ -28,6 +29,7 @@ const Snippetbar = React.createClass({
 	renderSnippetGroups : function(){
 		return _.map(Snippets, (snippetGroup)=>{
 			return <SnippetGroup
+				brew={this.props.brew}
 				groupName={snippetGroup.groupName}
 				icon={snippetGroup.icon}
 				snippets={snippetGroup.snippets}
@@ -58,6 +60,7 @@ module.exports = Snippetbar;
 const SnippetGroup = React.createClass({
 	getDefaultProps: function() {
 		return {
+			brew : '',
 			groupName : '',
 			icon : 'fa-rocket',
 			snippets : [],
@@ -65,7 +68,7 @@ const SnippetGroup = React.createClass({
 		};
 	},
 	handleSnippetClick : function(snippet){
-		this.props.onSnippetClick(execute(snippet.gen));
+		this.props.onSnippetClick(execute(snippet.gen, this.props.brew));
 	},
 	renderSnippets : function(){
 		return _.map(this.props.snippets, (snippet)=>{

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -4,6 +4,7 @@ var MonsterBlockGen = require('./monsterblock.gen.js');
 var ClassFeatureGen = require('./classfeature.gen.js');
 var FullClassGen = require('./fullclass.gen.js');
 var CoverPageGen = require('./coverpage.gen.js');
+var TableOfContentsGen = require('./tableOfContents.gen.js');
 
 
 module.exports = [
@@ -70,6 +71,12 @@ module.exports = [
 				gen : "[Click here](#p3) to go to page 3\n"
 			},
 
+			{
+				name : "Table of Contents",
+				icon : 'fa-book',
+				gen : TableOfContentsGen
+			},
+
 
 		]
 	},

client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js

@@ -0,0 +1,72 @@
+const _ = require('lodash');
+
+const getTOC = (pages) => {
+	const add1 = (title, page)=>{
+		res.push({
+			title : title,
+			page : page + 1,
+			children : []
+		});
+	}
+	const add2 = (title, page)=>{
+		if(!_.last(res)) add1('', page);
+		_.last(res).children.push({
+			title : title,
+			page : page + 1,
+			children : []
+		});
+	}
+	const add3 = (title, page)=>{
+		if(!_.last(res)) add1('', page);
+		if(!_.last(_.last(res).children)) add2('', page);
+		_.last(_.last(res).children).children.push({
+			title : title,
+			page : page + 1,
+			children : []
+		});
+	}
+
+	let res = [];
+	_.each(pages, (page, pageNum)=>{
+		const lines = page.split('\n');
+		_.each(lines, (line) => {
+			if(_.startsWith(line, '# ')){
+				const title = line.replace('# ', '');
+				add1(title, pageNum)
+			}
+			if(_.startsWith(line, '## ')){
+				const title = line.replace('## ', '');
+				add2(title, pageNum);
+			}
+			if(_.startsWith(line, '### ')){
+				const title = line.replace('### ', '');
+				add3(title, pageNum);
+			}
+		})
+	});
+	return res;
+}
+
+module.exports = function(brew){
+	const pages = brew.split('\\page');
+	const TOC = getTOC(pages);
+	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
+		r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`)
+		if(g1.children.length){
+			_.each(g1.children, (g2, idx2) => {
+				r.push(`  - [${idx1 + 1}.${idx2 + 1} ${g2.title}](#p${g2.page})`);
+				if(g2.children.length){
+					_.each(g2.children, (g3, idx3) => {
+						r.push(`    - [${idx1 + 1}.${idx2 + 1}.${idx3 + 1} ${g3.title}](#p${g3.page})`);
+					});
+				}
+			});
+		}
+		return r;
+	}, []).join('\n');
+
+	return `<div class='toc'>
+##### Table Of Contents
+${markdown}
+</div>\n`;
+}

client/homebrew/phbStyle/phb.style.less

@@ -15,7 +15,7 @@ body {
 	counter-reset : phb-page-numbers;
 }
 *{
-	-webkit-print-color-adjust: exact;
+	-webkit-print-color-adjust : exact;
 }
 .useSansSerif(){
 	font-family : ScalySans;
@@ -332,7 +332,7 @@ body {
 		-moz-column-break-after    : always;
 	}
 	//Avoid breaking up
-	p,ul,blockquote,table{
+	p,blockquote,table{
 		z-index                     : 15;
 		-webkit-column-break-inside : avoid;
 		column-break-inside         : avoid;
@@ -449,4 +449,25 @@ body {
 }
 .phb pre+.descriptive{
 	margin-top : 8px;
+}
+//*****************************
+// *      TABLE OF CONTENTS
+// *****************************/
+.phb .toc{
+	-webkit-column-break-inside : avoid;
+	column-break-inside         : avoid;
+	a{
+		color           : black;
+		text-decoration : none;
+		&:hover{
+			text-decoration : underline;
+		}
+	}
+	ul{
+		padding-left    : 0;
+		list-style-type : none;
+	}
+	&>ul>li{
+		margin-bottom : 10px;
+	}
 }

phb.standalone.css

@@ -518,7 +518,6 @@ body {
   -moz-column-break-after: always;
 }
 .phb p,
-.phb ul,
 .phb blockquote,
 .phb table {
   z-index: 15;
@@ -540,6 +539,10 @@ body {
   margin-bottom: 0px;
   margin-left: 1.5em;
 }
+.phb li {
+  -webkit-column-break-inside: avoid;
+  column-break-inside: avoid;
+}
 .phb .spellList {
   font-family: ScalySans;
   column-count: 4;
@@ -627,3 +630,21 @@ body {
 .phb pre + .descriptive {
   margin-top: 8px;
 }
+.phb .toc {
+  -webkit-column-break-inside: avoid;
+  column-break-inside: avoid;
+}
+.phb .toc a {
+  color: black;
+  text-decoration: none;
+}
+.phb .toc a:hover {
+  text-decoration: underline;
+}
+.phb .toc ul {
+  padding-left: 0;
+  list-style-type: none;
+}
+.phb .toc > ul > li {
+  margin-bottom: 10px;
+}