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

Changing how permalink and download links are hidden

Browse Source 
Using a class name instead of setting the display CSS property. This
way, the ::after of the download link can be hidden when the permalink
is gone
This commit is contained in:
Jeff Avallone 2014-12-30 16:20:37 -05:00
parent 6c49d6ba8e
commit facd4f6ac4
4 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
spec/regexper_spec.js
View File

@ -9,11 +9,15 @@ describe('regexper.js', function() {
beforeEach(function() {
this.root = document.createElement('div');
this.root.innerHTML = [
'<form id="regexp-form" action="/"><input type="text" id="regexp-input" /></form>',
'<form id="regexp-form" action="/">',
'<input type="text" id="regexp-input">',
'<ul class="example">',
'<ul><a href="#" data-glyph="link-intact"></a></ul>',
'<ul><a href="#" data-glyph="data-transfer-download"></a></ul>',
'</ul>',
'</form>',
'<div id="error"></div>',
'<ul id="warnings"></ul>',
'<div><a href="#" data-glyph="link-intact"></a></div>',
'<div><a href="#" data-glyph="data-transfer-download"></a></div>',
'<div id="regexp-render"></div>',
].join('');
@ -308,7 +312,8 @@ describe('regexper.js', function() {
it('hides the download link', function() {
this.regexper.updateLinks();
expect(this.regexper.download.parentNode.style.display).toEqual('none');
expect(this.regexper.links.className).toMatch(/\bexample\b/);
expect(this.regexper.links.className).toMatch(/\bhide-download\b/);
});
});
@ -334,7 +339,8 @@ describe('regexper.js', function() {
it('hides the permalink', function() {
this.regexper.updateLinks();
expect(this.regexper.permalink.parentNode.style.display).toEqual('none');
expect(this.regexper.links.className).toMatch(/\bexample\b/);
expect(this.regexper.links.className).toMatch(/\bhide-permalink\b/);
});
});

8
src/index.html
View File

@ -4,8 +4,12 @@
<button type="submit">Display</button>
<ul class="inline-list">
<li><a href="#" class="oi with-text" data-glyph="data-transfer-download" download="image.svg" type="image/svg+xml">Download</a></li>
<li><a href="#" class="oi with-text" data-glyph="link-intact">Permalink</a></li>
<li class="download">
<a href="#" class="oi with-text" data-glyph="data-transfer-download" download="image.svg" type="image/svg+xml">Download</a>
</li>
<li class="permalink">
<a href="#" class="oi with-text" data-glyph="link-intact">Permalink</a>
</li>
</ul>
</form>
</div>

15
src/js/regexper.js
View File

@ -10,8 +10,11 @@ export default class Regexper {
this.field = root.querySelector('#regexp-input');
this.error = root.querySelector('#error');
this.warnings = root.querySelector('#warnings');
this.permalink = root.querySelector('a[data-glyph="link-intact"]');
this.download = root.querySelector('a[data-glyph="data-transfer-download"]');
this.links = this.form.querySelector('ul');
this.permalink = this.links.querySelector('a[data-glyph="link-intact"]');
this.download = this.links.querySelector('a[data-glyph="data-transfer-download"]');
this.svgContainer = root.querySelector('#regexp-render');
}
@ -97,6 +100,8 @@ export default class Regexper {
}
updateLinks() {
var classes = _.without(this.links.className.split(' '), ['hide-download', 'hide-permalink']);
try {
this.download.parentNode.style.display = null;
this.download.href = this.buildBlobURL(this.svgContainer.querySelector('.svg').innerHTML);
@ -104,15 +109,17 @@ export default class Regexper {
catch(e) {
// Blobs or URLs created from them don't work here.
// Giving up on the download link
this.download.parentNode.style.display = 'none';
classes.push('hide-download');
}
if (this.permalinkEnabled) {
this.permalink.parentNode.style.display = null;
this.permalink.href = location.toString();
} else {
this.permalink.parentNode.style.display = 'none';
classes.push('hide-permalink');
}
this.links.className = classes.join(' ');
}
displayWarnings(warnings) {

6
src/sass/main.scss
View File

@ -273,6 +273,12 @@ header {
body.has-results & {
display: inline-block;
}
&.hide-permalink .permalink,
&.hide-permalink .download::after,
&.hide-download .download {
display: none;
}
}
}