parent
b4ea423221
commit
19b8d8c71c
@ -12,7 +12,8 @@ describe('regexper.js', function() {
|
||||
'<input type="text" id="regexp-input">',
|
||||
'<ul class="example">',
|
||||
'<ul><a href="#" data-action="permalink"></a></ul>',
|
||||
'<ul><a href="#" data-action="download"></a></ul>',
|
||||
'<ul><a href="#" data-action="download-svg"></a></ul>',
|
||||
'<ul><a href="#" data-action="download-png"></a></ul>',
|
||||
'</ul>',
|
||||
'</form>',
|
||||
'<div id="error"></div>',
|
||||
@ -312,7 +313,7 @@ describe('regexper.js', function() {
|
||||
|
||||
it('sets the download link href', function() {
|
||||
this.regexper.updateLinks();
|
||||
expect(this.regexper.download.href).toEqual('http://example.com/blob');
|
||||
expect(this.regexper.downloadSvg.href).toEqual('http://example.com/blob');
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -6,8 +6,11 @@
|
||||
<button type="submit">Display</button>
|
||||
|
||||
<ul class="inline-list">
|
||||
<li class="download">
|
||||
<a href="#" class="inline-icon" data-action="download" download="image.svg" type="image/svg+xml">{{icon "#data-transfer-download"}}Download</a>
|
||||
<li class="download-svg">
|
||||
<a href="#" class="inline-icon" data-action="download-svg" download="image.svg" type="image/svg+xml">{{icon "#data-transfer-download"}}Download SVG</a>
|
||||
</li>
|
||||
<li class="download-png">
|
||||
<a href="#" class="inline-icon" data-action="download-png" download="image.png" type="image/png">{{icon "#data-transfer-download"}}Download PNG</a>
|
||||
</li>
|
||||
<li class="permalink">
|
||||
<a href="#" class="inline-icon" data-action="permalink">{{icon "#link-intact"}}Permalink</a>
|
||||
|
@ -16,7 +16,8 @@ export default class Regexper {
|
||||
|
||||
this.links = this.form.querySelector('ul');
|
||||
this.permalink = this.links.querySelector('a[data-action="permalink"]');
|
||||
this.download = this.links.querySelector('a[data-action="download"]');
|
||||
this.downloadSvg = this.links.querySelector('a[data-action="download-svg"]');
|
||||
this.downloadPng = this.links.querySelector('a[data-action="download-png"]');
|
||||
|
||||
this.svgContainer = root.querySelector('#regexp-render');
|
||||
}
|
||||
@ -154,19 +155,44 @@ export default class Regexper {
|
||||
|
||||
// Update the URLs of the 'download' and 'permalink' links.
|
||||
updateLinks() {
|
||||
let classes = _.without(this.links.className.split(' '), ['hide-download', 'hide-permalink']);
|
||||
let classes = _.without(this.links.className.split(' '), ['hide-download-svg', 'hide-permalink']);
|
||||
let svg = this.svgContainer.querySelector('.svg');
|
||||
|
||||
// Create the 'download' image URL.
|
||||
// Create the SVG 'download' image URL.
|
||||
try {
|
||||
this.download.parentNode.style.display = null;
|
||||
this.download.href = this.buildBlobURL(this.svgContainer.querySelector('.svg').innerHTML);
|
||||
this.downloadSvg.parentNode.style.display = null;
|
||||
this.downloadSvg.href = this.buildBlobURL(svg.innerHTML);
|
||||
}
|
||||
catch(e) {
|
||||
// Blobs or URLs created from a blob URL don't work in the current
|
||||
// browser. Giving up on the download link.
|
||||
classes.push('hide-download');
|
||||
classes.push('hide-download-svg');
|
||||
}
|
||||
|
||||
//Create the PNG 'download' image URL.
|
||||
try {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
let loader = new Image;
|
||||
|
||||
loader.width = canvas.width = Number(svg.querySelector('svg').getAttribute('width'));
|
||||
loader.height = canvas.height = Number(svg.querySelector('svg').getAttribute('height'));
|
||||
loader.onload = () => {
|
||||
try {
|
||||
context.drawImage(loader, 0, 0, loader.width, loader.height);
|
||||
canvas.toBlob(blob => {
|
||||
window.pngBlob = blob;
|
||||
this.downloadPng.href = URL.createObjectURL(window.pngBlob);
|
||||
this.links.className = this.links.className.replace(/\bhide-download-png\b/, '');
|
||||
}, 'image/png');
|
||||
}
|
||||
catch(e) {}
|
||||
};
|
||||
loader.src = 'data:image/svg+xml,' + encodeURIComponent(svg.innerHTML);
|
||||
classes.push('hide-download-png');
|
||||
}
|
||||
catch(e) {}
|
||||
|
||||
// Create the 'permalink' URL.
|
||||
if (this.permalinkEnabled) {
|
||||
this.permalink.parentNode.style.display = null;
|
||||
|
@ -265,9 +265,14 @@ header {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.hide-download-png.hide-permalink .download-svg:after,
|
||||
&.hide-permalink .download-png:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.hide-permalink .permalink,
|
||||
&.hide-permalink .download::after,
|
||||
&.hide-download .download {
|
||||
&.hide-download-svg .download-svg,
|
||||
&.hide-download-png .download-png {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user