Changing how permalink and download links are hidden

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

spec/regexper_spec.js

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

src/index.html

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

src/js/regexper.js

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

src/sass/main.scss

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