Embedding icons into markup
This commit is contained in:
Jeff Avallone
parent
e9a0def7d8
commit
f68a410ac1
|
|
@ -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>
|
||||
<ul>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -62,6 +62,8 @@
|
|||
</script>
|
||||
{{/block}}
|
||||
</footer>
|
||||
|
||||
{{> "open_iconic"}}
|
||||
<!-- <![endif]-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
||||
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('<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">
|
||||
<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 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>
|
||||
</ul>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -184,7 +184,7 @@ export default class Regexper {
|
|||
// - __warnings__ - Array of warning messages to display.
|
||||
displayWarnings(warnings) {
|
||||
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('');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -124,6 +124,10 @@ function exposeError(error) {
|
|||
}, 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 {
|
||||
customEvent,
|
||||
normalizeBBox,
|
||||
|
|
@ -131,5 +135,6 @@ export default {
|
|||
spaceVertically,
|
||||
wait,
|
||||
tick,
|
||||
exposeError
|
||||
exposeError,
|
||||
icon
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ a {
|
|||
}
|
||||
|
||||
.inline-icon {
|
||||
img {
|
||||
svg {
|
||||
margin-right: rhythm(1/4);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import 'base';
|
||||
|
||||
#open-iconic {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg.regexp-svg {
|
||||
background-color: $white;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue