diff --git a/shared/depricated/brewRendererOld/brewRendererOld.jsx b/shared/depricated/brewRendererOld/brewRendererOld.jsx new file mode 100644 index 000000000..60bfa7fb7 --- /dev/null +++ b/shared/depricated/brewRendererOld/brewRendererOld.jsx @@ -0,0 +1,152 @@ +const React = require('react'); +const _ = require('lodash'); +const cx = require('classnames'); + +const Markdown = require('homebrewery/markdown.js'); +const ErrorBar = require('./errorBar/errorBar.jsx'); + +const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx') +const Store = require('homebrewery/brew.store.js'); + + +const PAGE_HEIGHT = 1056; +const PPR_THRESHOLD = 50; + +const BrewRenderer = React.createClass({ + getDefaultProps: function() { + return { + value : '', + style : '', + errors : [] + }; + }, + getInitialState: function() { + const pages = this.props.value.split('\\page'); + + return { + viewablePageNumber: 0, + height : 0, + isMounted : false, + pages : pages, + usePPR : pages.length >= PPR_THRESHOLD + }; + }, + height : 0, + pageHeight : PAGE_HEIGHT, + lastRender :
, + + componentDidMount: function() { + this.updateSize(); + window.addEventListener("resize", this.updateSize); + }, + componentWillUnmount: function() { + window.removeEventListener("resize", this.updateSize); + }, + + componentWillReceiveProps: function(nextProps) { + if(this.refs.pages && this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight; + + const pages = nextProps.value.split('\\page'); + this.setState({ + pages : pages, + usePPR : pages.length >= PPR_THRESHOLD + }) + }, + + updateSize : function() { + setTimeout(()=>{ + if(this.refs.pages && this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight; + }, 1); + + this.setState({ + height : this.refs.main.parentNode.clientHeight, + isMounted : true + }); + }, + + handleScroll : function(e){ + this.setState({ + viewablePageNumber : Math.floor(e.target.scrollTop / this.pageHeight) + }); + }, + + shouldRender : function(pageText, index){ + if(!this.state.isMounted) return false; + + 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(' +
+ {this.renderPages()} +
+ {this.renderPageInfo()} + {this.renderPPRmsg()} + + } +}); + +module.exports = BrewRenderer; diff --git a/shared/depricated/brewRendererOld/brewRendererOld.less b/shared/depricated/brewRendererOld/brewRendererOld.less new file mode 100644 index 000000000..c893dbac4 --- /dev/null +++ b/shared/depricated/brewRendererOld/brewRendererOld.less @@ -0,0 +1,39 @@ + +@import (less) './client/homebrew/phbStyle/phb.style.less'; +.pane{ + position : relative; +} +.brewRenderer{ + overflow-y : scroll; + .pageInfo{ + position : absolute; + right : 17px; + bottom : 0; + z-index : 1000; + padding : 8px 10px; + background-color : #333; + font-size : 10px; + 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{ + margin-right : auto; + margin-bottom : 30px; + margin-left : auto; + box-shadow : 1px 4px 14px #000; + } + } +} \ No newline at end of file diff --git a/shared/depricated/brewRendererOld/errorBar/errorBar.jsx b/shared/depricated/brewRendererOld/errorBar/errorBar.jsx new file mode 100644 index 000000000..e9ff189c9 --- /dev/null +++ b/shared/depricated/brewRendererOld/errorBar/errorBar.jsx @@ -0,0 +1,73 @@ +var React = require('react'); +var _ = require('lodash'); +var cx = require('classnames'); + +var ErrorBar = React.createClass({ + getDefaultProps: function() { + return { + errors : [] + }; + }, + + hasOpenError : false, + hasCloseError : false, + hasMatchError : false, + + renderErrors : function(){ + this.hasOpenError = false; + this.hasCloseError = false; + this.hasMatchError = false; + + + var errors = _.map(this.props.errors, (err, idx) => { + if(err.id == 'OPEN') this.hasOpenError = true; + if(err.id == 'CLOSE') this.hasCloseError = true; + if(err.id == 'MISMATCH') this.hasMatchError = true; + return
  • + Line {err.line} : {err.text}, '{err.type}' tag +
  • + }); + + return + }, + + renderProtip : function(){ + var msg = []; + if(this.hasOpenError){ + msg.push(
    + An unmatched opening tag means there's an opened tag that isn't closed, you need to close a tag, like this {'
    '}. Make sure to match types! + ); + } + + if(this.hasCloseError){ + msg.push(
    + An unmatched closing tag means you closed a tag without opening it. Either remove it, you check to where you think you opened it. +
    ); + } + + if(this.hasMatchError){ + msg.push(
    + A type mismatch means you closed a tag, but the last open tag was a different type. +
    ); + } + return
    +

    Protips!

    + {msg} +
    + }, + + render : function(){ + if(!this.props.errors.length) return null; + + return
    + +

    There are HTML errors in your markup

    + If these aren't fixed your brew will not render properly when you print it to PDF or share it + {this.renderErrors()} +
    + {this.renderProtip()} +
    + } +}); + +module.exports = ErrorBar; diff --git a/shared/depricated/brewRendererOld/errorBar/errorBar.less b/shared/depricated/brewRendererOld/errorBar/errorBar.less new file mode 100644 index 000000000..f3f2dbaae --- /dev/null +++ b/shared/depricated/brewRendererOld/errorBar/errorBar.less @@ -0,0 +1,60 @@ + +.errorBar{ + position : absolute; + z-index : 10000; + box-sizing : border-box; + width : 100%; + margin-right : 13px; + padding : 20px; + padding-bottom : 10px; + padding-left : 100px; + background-color : @red; + color : white; + i{ + position : absolute; + left : 30px; + opacity : 0.8; + font-size : 3em; + } + h3{ + font-size : 1.1em; + font-weight : 800; + } + ul{ + margin-top : 15px; + font-size : 0.8em; + list-style-position : inside; + list-style-type : disc; + li{ + line-height : 1.6em; + } + } + hr{ + box-sizing : border-box; + height : 2px; + width : 150%; + margin-top : 25px; + margin-bottom : 15px; + margin-left : -100px; + background-color : darken(@red, 8%); + border : none; + } + small{ + font-size: 0.6em; + opacity: 0.7; + } + .protips{ + margin-left : -80px; + font-size : 0.6em; + &>div{ + margin-bottom : 10px; + line-height : 1.2em; + } + h4{ + opacity : 0.8; + font-weight : 800; + line-height : 1.5em; + text-transform : uppercase; + } + } +} \ No newline at end of file diff --git a/shared/homebrewery/markdown.new.js b/shared/depricated/markdown.old.js similarity index 61% rename from shared/homebrewery/markdown.new.js rename to shared/depricated/markdown.old.js index 14a484df9..fcb8d6ef2 100644 --- a/shared/homebrewery/markdown.new.js +++ b/shared/depricated/markdown.old.js @@ -1,12 +1,9 @@ -const _ = require('lodash'); -const Markdown = require('marked'); +var _ = require('lodash'); +var Markdown = require('marked'); +var renderer = new Markdown.Renderer(); - - -/* //Processes the markdown within an HTML block if it's just a class-wrapper renderer.html = function (html) { - console.log(html); if(_.startsWith(_.trim(html), '')){ var openTag = html.substring(0, html.indexOf('>')+1); html = html.substring(html.indexOf('>')+1); @@ -15,59 +12,22 @@ renderer.html = function (html) { } return html; }; -*/ +const tagTypes = ['div', 'span', 'a']; +const tagRegex = new RegExp('(' + + _.map(tagTypes, (type)=>{ + return `\\<${type}|\\`; + }).join('|') + ')', 'g'); module.exports = { marked : Markdown, render : (rawBrewText)=>{ - //Adds in the new div block syntax - let count = 0; - let blockReg = /{{[\w|,]+|}}/g; - const renderer = new Markdown.Renderer(); - renderer.paragraph = function (text) { - const matches = text.match(blockReg); - if(!matches) return `\n

    ${text}

    \n`; - let matchIndex = 0; - const res = _.reduce(text.split(blockReg), (r, text) => { - if(text) r.push(`\n

    ${text}

    \n`); - const block = matches[matchIndex]; - if(block && _.startsWith(block, '{{')){ - r.push(`\n\n
    `); - count++; - } - if(block == '}}' && count !== 0){ - r.push('
    \n\n'); - count--; - } - matchIndex++; - return r; - }, []).join('\n'); - return res; - }; - let html = Markdown(rawBrewText, {renderer : renderer, sanitize: true}); - html += _.times(count, ()=>{return ''}).join('\n'); - return html; + return Markdown(rawBrewText, {renderer : renderer}) }, - - - - - - - - - - - - - validate : (rawBrewText) => { - return []; - /* var errors = []; var leftovers = _.reduce(rawBrewText.split('\n'), (acc, line, _lineNumber) => { var lineNumber = _lineNumber + 1; @@ -117,7 +77,6 @@ module.exports = { }); return errors; - */ }, }; diff --git a/shared/homebrewery/brewRenderer/brewRenderer.jsx b/shared/homebrewery/brewRenderer/brewRenderer.jsx index ddcf424f3..60bfa7fb7 100644 --- a/shared/homebrewery/brewRenderer/brewRenderer.jsx +++ b/shared/homebrewery/brewRenderer/brewRenderer.jsx @@ -2,7 +2,7 @@ const React = require('react'); const _ = require('lodash'); const cx = require('classnames'); -const Markdown = require('homebrewery/markdown.new.js'); +const Markdown = require('homebrewery/markdown.js'); const ErrorBar = require('./errorBar/errorBar.jsx'); const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx') diff --git a/shared/homebrewery/markdown.js b/shared/homebrewery/markdown.js index fcb8d6ef2..023e6201f 100644 --- a/shared/homebrewery/markdown.js +++ b/shared/homebrewery/markdown.js @@ -1,82 +1,42 @@ -var _ = require('lodash'); -var Markdown = require('marked'); -var renderer = new Markdown.Renderer(); - -//Processes the markdown within an HTML block if it's just a class-wrapper -renderer.html = function (html) { - if(_.startsWith(_.trim(html), '')){ - var openTag = html.substring(0, html.indexOf('>')+1); - html = html.substring(html.indexOf('>')+1); - html = html.substring(0, html.lastIndexOf('')); - return `${openTag} ${Markdown(html)} `; - } - return html; -}; - - -const tagTypes = ['div', 'span', 'a']; -const tagRegex = new RegExp('(' + - _.map(tagTypes, (type)=>{ - return `\\<${type}|\\`; - }).join('|') + ')', 'g'); +const _ = require('lodash'); +const Markdown = require('marked'); module.exports = { marked : Markdown, render : (rawBrewText)=>{ - return Markdown(rawBrewText, {renderer : renderer}) + //Adds in the new div block syntax + let count = 0; + let blockReg = /{{[\w|,]+|}}/g; + const renderer = new Markdown.Renderer(); + renderer.paragraph = function (text) { + const matches = text.match(blockReg); + if(!matches) return `\n

    ${text}

    \n`; + let matchIndex = 0; + const res = _.reduce(text.split(blockReg), (r, text) => { + if(text) r.push(`\n

    ${text}

    \n`); + const block = matches[matchIndex]; + if(block && _.startsWith(block, '{{')){ + r.push(`\n\n
    `); + count++; + } + if(block == '}}' && count !== 0){ + r.push('
    \n\n'); + count--; + } + matchIndex++; + return r; + }, []).join('\n'); + return res; + }; + let html = Markdown(rawBrewText, {renderer : renderer, sanitize: true}); + html += _.times(count, ()=>{return ''}).join('\n'); + return html; }, validate : (rawBrewText) => { - var errors = []; - var leftovers = _.reduce(rawBrewText.split('\n'), (acc, line, _lineNumber) => { - var lineNumber = _lineNumber + 1; - var matches = line.match(tagRegex); - if(!matches || !matches.length) return acc; + return []; - _.each(matches, (match)=>{ - _.each(tagTypes, (type)=>{ - if(match == `<${type}`){ - acc.push({ - type : type, - line : lineNumber - }); - } - if(match === ``){ - if(!acc.length){ - errors.push({ - line : lineNumber, - type : type, - text : 'Unmatched closing tag', - id : 'CLOSE' - }); - }else if(_.last(acc).type == type){ - acc.pop(); - }else{ - errors.push({ - line : _.last(acc).line + ' to ' + lineNumber, - type : type, - text : 'Type mismatch on closing tag', - id : 'MISMATCH' - }); - acc.pop(); - } - } - }); - }); - return acc; - }, []); - - _.each(leftovers, (unmatched)=>{ - errors.push({ - line : unmatched.line, - type : unmatched.type, - text : "Unmatched opening tag", - id : 'OPEN' - }) - }); - - return errors; }, };