root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Embedding icons into markup

Browse Source
This commit is contained in:
Jeff Avallone 2016-03-10 16:53:54 -05:00
parent e7aa0bb533
commit 5f9a8ddfc1
15 changed files with 49 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/helpers/icons.js Normal file
View 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>`);
});
};

8
lib/partials/layout.hbs
View File

@ -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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
spec/regexper_spec.js
View File

@ -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>');
}); });
}); });

3
src/images/open-iconic/code.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 203 B

3
src/images/open-iconic/data-transfer-download.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 145 B

3
src/images/open-iconic/document.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 183 B

4
src/images/open-iconic/link-intact.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 704 B

3
src/images/open-iconic/list-rich.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 193 B

3
src/images/open-iconic/warning.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 312 B

4
src/index.hbs
View File

@ -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>

2
src/js/regexper.js
View File

@ -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('');
} }

7
src/js/util.js
View File

@ -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
}; };

2
src/sass/main.scss
View File

@ -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;

4
src/sass/svg.scss
View File

@ -1,5 +1,9 @@
@import 'base'; @import 'base';
#open-iconic {
display: none;
}
svg.regexp-svg { svg.regexp-svg {
background-color: $white; background-color: $white;