diff --git a/spec/parser/javascript/charset_spec.js b/spec/parser/javascript/charset_spec.js index 2a5bc5e..559706e 100644 --- a/spec/parser/javascript/charset_spec.js +++ b/spec/parser/javascript/charset_spec.js @@ -1,4 +1,5 @@ import javascript from 'src/js/parser/javascript/parser.js'; +import Node from 'src/js/parser/javascript/node.js'; import util from 'src/js/util.js'; import _ from 'lodash'; import Snap from 'snapsvg'; @@ -49,6 +50,14 @@ describe('parser/javascript/charset.js', function() { }); }); + it('adds a warning for character sets the contain non-standard escapes', function() { + var node; + + Node.state = { warnings: [] }; + node = new javascript.Parser('[\\c]').__consume__charset(); + expect(node.state.warnings).toEqual(['The character set "[\\c]" contains the \\c escape followed by a character other than A-Z. This can lead to different behavior depending on browser. The representation here is the most common interpretation.']); + }); + describe('_anchor property', function() { it('calculates the anchor based on the partContainer', function() { diff --git a/spec/parser/javascript_spec.js b/spec/parser/javascript_spec.js index 1deb3a6..7ac50bb 100644 --- a/spec/parser/javascript_spec.js +++ b/spec/parser/javascript_spec.js @@ -119,4 +119,13 @@ describe('parser/javascript.js', function() { }); + describe('warnings property', function() { + + it('returns the content of the warnings state variable', function() { + this.parser.state.warnings.push('example'); + expect(this.parser.warnings).toEqual(['example']); + }); + + }); + }); diff --git a/spec/regexper_spec.js b/spec/regexper_spec.js index 9321daa..b011ec8 100644 --- a/spec/regexper_spec.js +++ b/spec/regexper_spec.js @@ -11,6 +11,7 @@ describe('regexper.js', function() { this.root.innerHTML = [ '
', '
', + '', '
', '
', '
', @@ -355,6 +356,15 @@ describe('regexper.js', function() { }); + describe('#displayWarnings', function() { + + it('adds a list item for each warning', function() { + this.regexper.displayWarnings(['warning 1', 'warning 2']); + expect(this.regexper.warnings.innerHTML).toEqual('
  • warning 1
  • warning 2
    • '); + }); + + }); + describe('#renderRegexp', function() { beforeEach(function() { @@ -366,6 +376,7 @@ describe('regexper.js', function() { spyOn(this.regexper, '_trackEvent'); spyOn(this.regexper, 'updateLinks'); + spyOn(this.regexper, 'displayWarnings'); this.regexper.renderRegexp('example expression'); }); @@ -440,6 +451,10 @@ describe('regexper.js', function() { expect(this.regexper.updateLinks).toHaveBeenCalled(); }); + it('displays the warnings', function() { + expect(this.regexper.displayWarnings).toHaveBeenCalled(); + }); + it('tracks the complete render', function() { expect(this.regexper._trackEvent).toHaveBeenCalledWith('visualization', 'complete'); }); diff --git a/src/index.html b/src/index.html index 2c72ed2..9129c82 100644 --- a/src/index.html +++ b/src/index.html @@ -24,6 +24,8 @@
    + +
    diff --git a/src/js/parser/javascript.js b/src/js/parser/javascript.js index 9b63d7e..39efcb9 100644 --- a/src/js/parser/javascript.js +++ b/src/js/parser/javascript.js @@ -9,7 +9,8 @@ export default class Parser { groupCounter: 1, renderCounter: 0, maxCounter: 0, - cancelRender: false + cancelRender: false, + warnings: [] }; } @@ -58,4 +59,8 @@ export default class Parser { cancel() { this.state.cancelRender = true; } + + get warnings() { + return this.state.warnings; + } } diff --git a/src/js/parser/javascript/charset.js b/src/js/parser/javascript/charset.js index 323d016..455c95a 100644 --- a/src/js/parser/javascript/charset.js +++ b/src/js/parser/javascript/charset.js @@ -41,5 +41,9 @@ export default { this.elements = _.unique(this.properties.parts.elements, part => { return [part.type, part.textValue].join(':'); }); + + if (this.textValue.match(/\\c[^a-zA-Z]/)) { + this.state.warnings.push(`The character set "${this.textValue}" contains the \\c escape followed by a character other than A-Z. This can lead to different behavior depending on browser. The representation here is the most common interpretation.`); + } } -}; +} diff --git a/src/js/regexper.js b/src/js/regexper.js index 680b15d..3487f4d 100644 --- a/src/js/regexper.js +++ b/src/js/regexper.js @@ -1,6 +1,7 @@ import util from './util.js'; import Parser from './parser/javascript.js'; import Q from 'q'; +import _ from 'lodash'; export default class Regexper { constructor(root) { @@ -8,6 +9,7 @@ export default class Regexper { this.form = root.querySelector('#regexp-form'); this.field = root.querySelector('#regexp-input'); this.error = root.querySelector('#error'); + this.warnings = root.querySelector('#warnings'); this.permalink = root.querySelector('a[data-glyph="link-intact"]'); this.download = root.querySelector('a[data-glyph="data-transfer-download"]'); this.percentage = root.querySelector('#progress div'); @@ -122,6 +124,12 @@ export default class Regexper { } } + displayWarnings(warnings) { + this.warnings.innerHTML = _.map(warnings, warning => { + return `
  • ${warning}
    • `; + }).join(''); + } + renderRegexp(expression) { if (this.runningParser) { let deferred = Q.defer(); @@ -154,6 +162,7 @@ export default class Regexper { .then(() => { this.state = 'has-results'; this.updateLinks(); + this.displayWarnings(this.runningParser.warnings); this._trackEvent('visualization', 'complete'); }) .then(null, message => { diff --git a/src/sass/_base.scss b/src/sass/_base.scss index d3c91d7..a152120 100644 --- a/src/sass/_base.scss +++ b/src/sass/_base.scss @@ -6,6 +6,7 @@ $light-gray: tint($gray, 25%); $tan: #cbcbba; $red: #b3151a; $blue: #dae9e5; +$yellow: #f8ca00; $black: #000; $white: #fff; diff --git a/src/sass/main.scss b/src/sass/main.scss index 8888791..29b0aac 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -383,6 +383,21 @@ header { } } +#warnings { + @include adjust-font-size-to($base-font-size, 1); + font-weight: bold; + background-color: $yellow; + display: none; + + li { + margin: rhythm(1/4); + } + + body.has-results & { + display: block; + } +} + #regexp-render { background: $white; width: 100%;