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

Adding download PNG link 

For #46
This commit is contained in:
Jeff Avallone 2018-02-10 13:05:42 -05:00
parent b4ea423221
commit 19b8d8c71c
4 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
spec/regexper_spec.js
View File

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

7
src/index.hbs
View File

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

38
src/js/regexper.js
View File

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

9
src/sass/main.scss
View File

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