Skip to content

Commit

Permalink
Rewrite demo page to be function and sans jQuery.
Browse files Browse the repository at this point in the history
  • Loading branch information
jasmussen committed Nov 15, 2016
1 parent e15ec16 commit b10b2ae
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 127 deletions.
2 changes: 1 addition & 1 deletion Gruntfile.js
Expand Up @@ -62,7 +62,7 @@ module.exports = function(grunt) {
<div id="icons">
{{#each icons}}
<div>
<svg width="16" height="16" class="genericon {{name}}">
<svg width="16" height="16" class="genericons-neue genericons-neue-{{name}}">
<use xlink:href="#{{name}}" />
</svg>
<p>{{title}}</p>
Expand Down
37 changes: 14 additions & 23 deletions svg-sprite/genericons-neue-demo.js
@@ -1,27 +1,18 @@
/**
* Gridicons Demo page JS
* Genericons Neue Demo page JS
*/
(function( $ ){
// Kick things off
$( document ).ready( function() {
initEvents();
});
function initEvents() {
var $rows = $('#icons').find('svg');
// When you click on an icon
$rows.on( 'click', function() {
var attr = $( this ).find( 'use' ).attr( 'xlink:href' ),
cssClass = attr.split( '#' )[1];

suggestCode( attr, cssClass );

});
}
function suggestCode( attr, cssClass ) {

var fileLocation = '//s1.wp.com/i/gridicons.svg', // @todo: needs to be updated with final location
suggestion = '<svg class="gridicon '+ cssClass +'" width="24px" height="24px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="' + fileLocation + attr + '"></use></svg>';

window.prompt( "Copy this, paste in your HTML.\n\nRemember to update the gridicons.svg file as well!", suggestion );
window.onload = function () {

var rows = document.getElementsByTagName( 'svg' );

for ( i=0; i<rows.length; i++ ) {
rows[i].onclick = function () {
var cssClass = this.getAttribute( 'class' );
var iconID = '#' + cssClass.split(' genericons-neue-')[1];
var fileLocation = 'genericons-neue.svg';
var suggestion = '<svg class="'+ cssClass +'" width="16px" height="16px"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="' + fileLocation + iconID + '"></use></svg>';
window.prompt( 'Copy this, paste in your HTML.', suggestion );
}
}
})( jQuery );
}

0 comments on commit b10b2ae

Please sign in to comment.