From f68a410ac1a2b65265569642eb040a8b9622c700 Mon Sep 17 00:00:00 2001 From: Jeff Avallone Date: Thu, 10 Mar 2016 16:53:54 -0500 Subject: [PATCH] Embedding icons into markup --- lib/helpers/icons.js | 5 ++++ lib/partials/layout.hbs | 8 ++++--- lib/partials/open_iconic.hbs | 23 +++++++++++++++++++ spec/regexper_spec.js | 3 ++- src/images/open-iconic/code.svg | 3 --- .../open-iconic/data-transfer-download.svg | 3 --- src/images/open-iconic/document.svg | 3 --- src/images/open-iconic/link-intact.svg | 4 ---- src/images/open-iconic/list-rich.svg | 3 --- src/images/open-iconic/warning.svg | 3 --- src/index.hbs | 4 ++-- src/js/regexper.js | 2 +- src/js/util.js | 7 +++++- src/sass/main.scss | 2 +- src/sass/svg.scss | 4 ++++ 15 files changed, 49 insertions(+), 28 deletions(-) create mode 100644 lib/helpers/icons.js create mode 100644 lib/partials/open_iconic.hbs delete mode 100644 src/images/open-iconic/code.svg delete mode 100644 src/images/open-iconic/data-transfer-download.svg delete mode 100644 src/images/open-iconic/document.svg delete mode 100644 src/images/open-iconic/link-intact.svg delete mode 100644 src/images/open-iconic/list-rich.svg delete mode 100644 src/images/open-iconic/warning.svg diff --git a/lib/helpers/icons.js b/lib/helpers/icons.js new file mode 100644 index 0000000..a8ce89e --- /dev/null +++ b/lib/helpers/icons.js @@ -0,0 +1,5 @@ +module.exports.register = function(handlebars) { + handlebars.registerHelper('icon', function(selector, context) { + return new handlebars.SafeString(``); + }); +}; diff --git a/lib/partials/layout.hbs b/lib/partials/layout.hbs index 70b9d86..d75f97a 100644 --- a/lib/partials/layout.hbs +++ b/lib/partials/layout.hbs @@ -31,13 +31,13 @@ @@ -62,6 +62,8 @@ {{/block}} + + {{> "open_iconic"}} diff --git a/lib/partials/open_iconic.hbs b/lib/partials/open_iconic.hbs new file mode 100644 index 0000000..fc65bb2 --- /dev/null +++ b/lib/partials/open_iconic.hbs @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/spec/regexper_spec.js b/spec/regexper_spec.js index 29a5e36..9a60d69 100644 --- a/spec/regexper_spec.js +++ b/spec/regexper_spec.js @@ -364,8 +364,9 @@ describe('regexper.js', function() { describe('#displayWarnings', function() { it('adds a list item for each warning', function() { + spyOn(util, 'icon').and.returnValue('(icon-markup)'); this.regexper.displayWarnings(['warning 1', 'warning 2']); - expect(this.regexper.warnings.innerHTML).toEqual('
  • warning 1
  • warning 2
    • '); + expect(this.regexper.warnings.innerHTML).toEqual('
  • (icon-markup)warning 1
  • (icon-markup)warning 2
    • '); }); }); diff --git a/src/images/open-iconic/code.svg b/src/images/open-iconic/code.svg deleted file mode 100644 index 14e4937..0000000 --- a/src/images/open-iconic/code.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/open-iconic/data-transfer-download.svg b/src/images/open-iconic/data-transfer-download.svg deleted file mode 100644 index 9f14f33..0000000 --- a/src/images/open-iconic/data-transfer-download.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/open-iconic/document.svg b/src/images/open-iconic/document.svg deleted file mode 100644 index 8e2ba05..0000000 --- a/src/images/open-iconic/document.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/open-iconic/link-intact.svg b/src/images/open-iconic/link-intact.svg deleted file mode 100644 index cdfbabd..0000000 --- a/src/images/open-iconic/link-intact.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/open-iconic/list-rich.svg b/src/images/open-iconic/list-rich.svg deleted file mode 100644 index cf816d1..0000000 --- a/src/images/open-iconic/list-rich.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/images/open-iconic/warning.svg b/src/images/open-iconic/warning.svg deleted file mode 100644 index e3594a8..0000000 --- a/src/images/open-iconic/warning.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/index.hbs b/src/index.hbs index 37cae2f..d4266d8 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -7,10 +7,10 @@ diff --git a/src/js/regexper.js b/src/js/regexper.js index 1afa5c9..eecd34f 100644 --- a/src/js/regexper.js +++ b/src/js/regexper.js @@ -184,7 +184,7 @@ export default class Regexper { // - __warnings__ - Array of warning messages to display. displayWarnings(warnings) { this.warnings.innerHTML = _.map(warnings, warning => { - return `
  • ${warning}
    • `; + return `
  • ${util.icon("#warning")}${warning}
    • `; }).join(''); } diff --git a/src/js/util.js b/src/js/util.js index 6d67875..eb60784 100644 --- a/src/js/util.js +++ b/src/js/util.js @@ -124,6 +124,10 @@ function exposeError(error) { }, 0); } +function icon(selector) { + return ``; +} + export default { customEvent, normalizeBBox, @@ -131,5 +135,6 @@ export default { spaceVertically, wait, tick, - exposeError + exposeError, + icon }; diff --git a/src/sass/main.scss b/src/sass/main.scss index 8f4485b..b9be487 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -15,7 +15,7 @@ a { } .inline-icon { - img { + svg { margin-right: rhythm(1/4); width: 1em; height: 1em; diff --git a/src/sass/svg.scss b/src/sass/svg.scss index 0193fd6..b3f1f9d 100644 --- a/src/sass/svg.scss +++ b/src/sass/svg.scss @@ -1,5 +1,9 @@ @import 'base'; +#open-iconic { + display: none; +} + svg.regexp-svg { background-color: $white;