Embedding icons into markup
5
lib/helpers/icons.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports.register = function(handlebars) {
|
||||||
|
handlebars.registerHelper('icon', function(selector, context) {
|
||||||
|
return new handlebars.SafeString(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 8"><use xlink:href="${selector}" /></svg>`);
|
||||||
|
});
|
||||||
|
};
|
@ -31,13 +31,13 @@
|
|||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a class="inline-icon" href="/changelog.html"><img alt="" src="/images/open-iconic/list-rich.svg">Changelog</a>
|
<a class="inline-icon" href="/changelog.html">{{icon "#list-rich"}}Changelog</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="inline-icon" href="/documentation.html"><img alt="" src="/images/open-iconic/document.svg">Documentation</a>
|
<a class="inline-icon" href="/documentation.html">{{icon "#document"}}Documentation</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="inline-icon" href="https://github.com/javallone/regexper-static"><img alt="" src="/images/open-iconic/code.svg">Source on GitHub</a>
|
<a class="inline-icon" href="https://github.com/javallone/regexper-static">{{icon "#code"}}Source on GitHub</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
@ -62,6 +62,8 @@
|
|||||||
</script>
|
</script>
|
||||||
{{/block}}
|
{{/block}}
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
{{> "open_iconic"}}
|
||||||
<!-- <![endif]-->
|
<!-- <![endif]-->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
23
lib/partials/open_iconic.hbs
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="open-iconic">
|
||||||
|
<!-- These icon are from the Open Iconic project https://useiconic.com/open/ -->
|
||||||
|
<defs>
|
||||||
|
<g id="code">
|
||||||
|
<path d="M5 0l-3 6h1l3-6h-1zm-4 1l-1 2 1 2h1l-1-2 1-2h-1zm5 0l1 2-1 2h1l1-2-1-2h-1z" transform="translate(0 1)" />
|
||||||
|
</g>
|
||||||
|
<g id="data-transfer-download">
|
||||||
|
<path d="M3 0v3h-2l3 3 3-3h-2v-3h-2zm-3 7v1h8v-1h-8z" />
|
||||||
|
</g>
|
||||||
|
<g id="document">
|
||||||
|
<path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z" />
|
||||||
|
</g>
|
||||||
|
<g id="link-intact">
|
||||||
|
<path d="M5.88.03c-.18.01-.36.03-.53.09-.27.1-.53.25-.75.47a.5.5 0 1 0 .69.69c.11-.11.24-.17.38-.22.35-.12.78-.07 1.06.22.39.39.39 1.04 0 1.44l-1.5 1.5c-.44.44-.8.48-1.06.47-.26-.01-.41-.13-.41-.13a.5.5 0 1 0-.5.88s.34.22.84.25c.5.03 1.2-.16 1.81-.78l1.5-1.5c.78-.78.78-2.04 0-2.81-.28-.28-.61-.45-.97-.53-.18-.04-.38-.04-.56-.03zm-2 2.31c-.5-.02-1.19.15-1.78.75l-1.5 1.5c-.78.78-.78 2.04 0 2.81.56.56 1.36.72 2.06.47.27-.1.53-.25.75-.47a.5.5 0 1 0-.69-.69c-.11.11-.24.17-.38.22-.35.12-.78.07-1.06-.22-.39-.39-.39-1.04 0-1.44l1.5-1.5c.4-.4.75-.45 1.03-.44.28.01.47.09.47.09a.5.5 0 1 0 .44-.88s-.34-.2-.84-.22z" />
|
||||||
|
</g>
|
||||||
|
<g id="list-rich">
|
||||||
|
<path d="M0 0v3h3v-3h-3zm4 0v1h4v-1h-4zm0 2v1h3v-1h-3zm-4 2v3h3v-3h-3zm4 0v1h4v-1h-4zm0 2v1h3v-1h-3z" />
|
||||||
|
</g>
|
||||||
|
<g id="warning">
|
||||||
|
<path d="M3.09 0c-.06 0-.1.04-.13.09l-2.94 6.81c-.02.05-.03.13-.03.19v.81c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-.81c0-.05-.01-.14-.03-.19l-2.94-6.81c-.02-.05-.07-.09-.13-.09h-.81zm-.09 3h1v2h-1v-2zm0 3h1v1h-1v-1z" />
|
||||||
|
</g>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.6 KiB |
@ -364,8 +364,9 @@ describe('regexper.js', function() {
|
|||||||
describe('#displayWarnings', function() {
|
describe('#displayWarnings', function() {
|
||||||
|
|
||||||
it('adds a list item for each warning', function() {
|
it('adds a list item for each warning', function() {
|
||||||
|
spyOn(util, 'icon').and.returnValue('(icon-markup)');
|
||||||
this.regexper.displayWarnings(['warning 1', 'warning 2']);
|
this.regexper.displayWarnings(['warning 1', 'warning 2']);
|
||||||
expect(this.regexper.warnings.innerHTML).toEqual('<li class="inline-icon"><img alt="" src="/images/open-iconic/warning.svg">warning 1</li><li class="inline-icon"><img alt="" src="/images/open-iconic/warning.svg">warning 2</li>');
|
expect(this.regexper.warnings.innerHTML).toEqual('<li class="inline-icon">(icon-markup)warning 1</li><li class="inline-icon">(icon-markup)warning 2</li>');
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
|
|
||||||
<path d="M5 0l-3 6h1l3-6h-1zm-4 1l-1 2 1 2h1l-1-2 1-2h-1zm5 0l1 2-1 2h1l1-2-1-2h-1z" transform="translate(0 1)" />
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 203 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
|
|
||||||
<path d="M3 0v3h-2l3 3 3-3h-2v-3h-2zm-3 7v1h8v-1h-8z" />
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 145 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
|
|
||||||
<path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z" />
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 183 B |
@ -1,4 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
|
|
||||||
<path d="M5.88.03c-.18.01-.36.03-.53.09-.27.1-.53.25-.75.47a.5.5 0 1 0 .69.69c.11-.11.24-.17.38-.22.35-.12.78-.07 1.06.22.39.39.39 1.04 0 1.44l-1.5 1.5c-.44.44-.8.48-1.06.47-.26-.01-.41-.13-.41-.13a.5.5 0 1 0-.5.88s.34.22.84.25c.5.03 1.2-.16 1.81-.78l1.5-1.5c.78-.78.78-2.04 0-2.81-.28-.28-.61-.45-.97-.53-.18-.04-.38-.04-.56-.03zm-2 2.31c-.5-.02-1.19.15-1.78.75l-1.5 1.5c-.78.78-.78 2.04 0 2.81.56.56 1.36.72 2.06.47.27-.1.53-.25.75-.47a.5.5 0 1 0-.69-.69c-.11.11-.24.17-.38.22-.35.12-.78.07-1.06-.22-.39-.39-.39-1.04 0-1.44l1.5-1.5c.4-.4.75-.45 1.03-.44.28.01.47.09.47.09a.5.5 0 1 0 .44-.88s-.34-.2-.84-.22z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 704 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
|
|
||||||
<path d="M0 0v3h3v-3h-3zm4 0v1h4v-1h-4zm0 2v1h3v-1h-3zm-4 2v3h3v-3h-3zm4 0v1h4v-1h-4zm0 2v1h3v-1h-3z" />
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 193 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
|
|
||||||
<path d="M3.09 0c-.06 0-.1.04-.13.09l-2.94 6.81c-.02.05-.03.13-.03.19v.81c0 .05.04.09.09.09h6.81c.05 0 .09-.04.09-.09v-.81c0-.05-.01-.14-.03-.19l-2.94-6.81c-.02-.05-.07-.09-.13-.09h-.81zm-.09 3h1v2h-1v-2zm0 3h1v1h-1v-1z" />
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 312 B |
@ -7,10 +7,10 @@
|
|||||||
|
|
||||||
<ul class="inline-list">
|
<ul class="inline-list">
|
||||||
<li class="download">
|
<li class="download">
|
||||||
<a href="#" class="inline-icon" data-action="download" download="image.svg" type="image/svg+xml"><img alt="" src="/images/open-iconic/data-transfer-download.svg">Download</a>
|
<a href="#" class="inline-icon" data-action="download" download="image.svg" type="image/svg+xml">{{icon "#data-transfer-download"}}Download</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="permalink">
|
<li class="permalink">
|
||||||
<a href="#" class="inline-icon" data-action="permalink"><img alt="" src="/images/open-iconic/link-intact.svg">Permalink</a>
|
<a href="#" class="inline-icon" data-action="permalink">{{icon "#link-intact"}}Permalink</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</form>
|
</form>
|
||||||
|
@ -184,7 +184,7 @@ export default class Regexper {
|
|||||||
// - __warnings__ - Array of warning messages to display.
|
// - __warnings__ - Array of warning messages to display.
|
||||||
displayWarnings(warnings) {
|
displayWarnings(warnings) {
|
||||||
this.warnings.innerHTML = _.map(warnings, warning => {
|
this.warnings.innerHTML = _.map(warnings, warning => {
|
||||||
return `<li class="inline-icon"><img alt="" src="/images/open-iconic/warning.svg">${warning}</li>`;
|
return `<li class="inline-icon">${util.icon("#warning")}${warning}</li>`;
|
||||||
}).join('');
|
}).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -124,6 +124,10 @@ function exposeError(error) {
|
|||||||
}, 0);
|
}, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function icon(selector) {
|
||||||
|
return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 8"><use xlink:href="${selector}" /></svg>`;
|
||||||
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
customEvent,
|
customEvent,
|
||||||
normalizeBBox,
|
normalizeBBox,
|
||||||
@ -131,5 +135,6 @@ export default {
|
|||||||
spaceVertically,
|
spaceVertically,
|
||||||
wait,
|
wait,
|
||||||
tick,
|
tick,
|
||||||
exposeError
|
exposeError,
|
||||||
|
icon
|
||||||
};
|
};
|
||||||
|
@ -15,7 +15,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.inline-icon {
|
.inline-icon {
|
||||||
img {
|
svg {
|
||||||
margin-right: rhythm(1/4);
|
margin-right: rhythm(1/4);
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
@import 'base';
|
@import 'base';
|
||||||
|
|
||||||
|
#open-iconic {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
svg.regexp-svg {
|
svg.regexp-svg {
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
|
|
||||||
|