public
Last active

User script to view SVG files both as image and text at gist.github.com

  • Download Gist
README.md
Markdown

Click "raw" below to install. Requires Google Chrome, Firefox + Greasemonkey, or some other browser supporting user scripts / content scripts / user javascript.

gist-svg.user.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
// ==UserScript==
// @name Gist.github.com: inline SVG images
// @namespace http://github.com/johan/
// @description When viewing SVG gists, show the image instead of its source code, by default, and links to switch between the two
// @include https://gist.github.com/*
// @match https://gist.github.com/*
// @version 1.0
// ==/UserScript==
 
(function exit_sandbox() { // see end of file for unsandboxing code
var sel_svg = '#files .file[id$=".svg"]' // context node for all following:
, sel_box = '.data'
, sel_raw = '.data > table td[width="100%"]'
, sel_num = '.data > table td:not([width="100%"])'
, sel_hdr = '.meta .actions'
, A = tag('a')
;
 
function init() {
$(sel_svg).each(function inline_image_and_add_header_links(n, all) {
var me = this // jQuery doesn't pass it in arg 1, as forEach would
, th = $(sel_hdr, me)
, td = $(sel_raw, me)
, tw = $(sel_box, me).width()
, ai = A({ href: '#', click: show_as_image }, 'image/svg')
, at = A({ href: '#', click: show_as_text }, 'text/plain')
, svg, viewbox, w, h;
 
th.prepend(ai, at); // add header links
 
// parse and inject the SVG image (as innerHTML can be lossy on XML content)
svg = td.find('.highlight').text().replace(/\xA0/g, ' '); // XML source code
svg = (new DOMParser).parseFromString(svg, 'text/xml'); // make XML document
svg = document.importNode(svg.documentElement, true); // (HTML)SVGSVGElement
svg = td.prepend(svg).find('svg:first'); // insert in doc, and jQuery:ify it
 
// set width and height to fill the width of the image, subject to what
// the viewBox declares (ignoring any width/height absolute units crap)
svg.css({ width: tw });
if ((viewbox = svg.prop('viewBox'))) {
viewbox = viewbox.animVal;
if ('number' === typeof (w = viewbox.width) &&
'number' === typeof (h = viewbox.height))
svg.css({ height: tw * h / w });
}
 
$(ai).click(); // show the image version by default
});
}
 
function get_files() {
function is_svg() { return $('.meta[data-path$=".svg"]', this).length; }
return $('.file').filter(is_svg);
}
 
/* page structure, one file:
 
<div class="file" id="file_octocat.svg">
<div class="meta clearfix instapaper_ignore readability-extra">
<div class="info">
<span class="code">
octocat.svg
<a href="#file_octocat.svg">#</a>
</span>
</div>
<div class="actions">
<div id="gist-embed" style="display:inline;">
<a href="#" class="gist-embed-link">embed</a>
<input class="gist-embed-box" type="text" value="&lt;[...]&gt;">
</div>
<a href="/raw/1007813/[HASH HERE]/octocat.svg">raw</a>
</div>
</div>
<div class="data type-text">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
<td><!-- line number; we toggle its style="display: none;" -->
<pre class="line_numbers"><span id="L1" rel="#L1">1</span>[...]</pre>
</td>
<td width="100%"><!-- where 100% means 853px after hiding the above -->
<!-- we inject our <svg xmlns=[...]>[...]</svg> tag here -->
<div class="highlight">
<pre><div class="line" id="LC1">[...]</div></pre>
</div>
</td>
</tr></tbody>
</table>
</div>
</div>
 
*/
 
function show_as_image(e) {
var me = $(e.target)
, at = me.parents(sel_svg)
;
e.preventDefault(); // don't scroll to top
me.css('color', '#000').siblings('a').css('color', '');
 
at.find(sel_num).hide(); // hide line numbers
at.find(sel_raw).children('svg:first').show().siblings().hide(); // show svg
}
 
function show_as_text(e) {
var me = $(e.target)
, at = me.parents(sel_svg)
;
e.preventDefault(); // don't scroll to top
me.css('color', '#000').siblings('a').css('color', '');
 
at.find(sel_num).show(); // show line numbers
at.find(sel_raw).children('.highlight').show().siblings().hide(); // and file
}
 
function array(arrish) { return [].slice.call(arrish); }
 
function tag(name) {
return function make_tag() {
var args = array(arguments)
, elem = document.createElement(name)
, arg, key, val;
while (undefined !== (arg = args.shift()))
if ('string' === typeof arg)
elem.appendChild(document.createTextNode(arg));
else if (is_object(arg))
for (key in arg)
if ('function' === typeof(val = arg[key]))
//elem.addEventListener(key, val, false); won't handle $(me).click()
$(elem).bind(key, val);
else
elem.setAttribute(key, val);
else
elem.appendChild(arg);
return elem;
};
}
 
function is_object(obj) {
return null != obj && Object === obj.__proto__.constructor;
}
 
// This block of code injects our source in the content scope and then calls the
// passed callback there. The whole script runs in both GM and page content, but
// since we have no other code that does anything, the Greasemonkey sandbox does
// nothing at all when it has spawned the page script, which gets to use jQuery.
// (jQuery unfortunately degrades much when run in Mozilla's javascript sandbox)
if ('object' === typeof opera && opera.extension) {
this.__proto__ = window; // bleed the web page's js into our execution scope
document.addEventListener('DOMContentLoaded', init, false); // GM-style init
}
else { // for Chrome or Firefox+Greasemonkey
if ('undefined' == typeof __RUN_ME_IN_PAGE_SCOPE__) { // unsandbox, please!
var src = exit_sandbox + '',
script = document.createElement('script');
script.setAttribute('type', 'application/javascript');
script.innerHTML = 'const __RUN_ME_IN_PAGE_SCOPE__ = true;\n('+ src +')();';
document.documentElement.appendChild(script);
document.documentElement.removeChild(script);
} else { // unsandboxed -- here we go!
init();
}
}
 
})();

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.