From fc6ffbd73af268375df2e479597b89985b04d707 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Tue, 30 Dec 2014 10:17:55 -0500
Subject: [PATCH] Merging some shared styles

---
 spec/parser/javascript_spec.js |  6 ++++++
 src/js/parser/javascript.js    | 11 +++++++++--
 src/sass/main.scss             | 28 ++++++++++------------------
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/spec/parser/javascript_spec.js b/spec/parser/javascript_spec.js
index e5f91e7..c1a553d 100644
--- a/spec/parser/javascript_spec.js
+++ b/spec/parser/javascript_spec.js
@@ -30,6 +30,12 @@ describe('parser/javascript.js', function() {
       expect(element.innerHTML).not.toEqual('example content');
     });
 
+    it('adds the "svg-container" class', function() {
+      spyOn(this.parser, '_addClass');
+      this.parser.container = document.createElement('div');
+      expect(this.parser._addClass).toHaveBeenCalledWith('svg-container');
+    });
+
   });
 
   describe('#parse', function() {
diff --git a/src/js/parser/javascript.js b/src/js/parser/javascript.js
index dd66920..101478b 100644
--- a/src/js/parser/javascript.js
+++ b/src/js/parser/javascript.js
@@ -28,6 +28,7 @@ export default class Parser {
       document.querySelector('#svg-container-base').innerHTML,
       this.options.keepContent ? this.container.innerHTML : ''
     ].join('');
+    this._addClass('svg-container');
   }
 
   get container() {
@@ -35,11 +36,17 @@ export default class Parser {
   }
 
   _addClass(className) {
-    this.container.className = _.compact([this.container.className, className]).join(' ');
+    this.container.className = _(this.container.className.split(' '))
+      .union([className])
+      .value()
+      .join(' ');
   }
 
   _removeClass(className) {
-    this.container.className = _.without(this.container.className.split(' '), className).join(' ');
+    this.container.className = _(this.container.className.split(' '))
+      .without(className)
+      .value()
+      .join(' ');
   }
 
   parse(expression) {
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 1f1918c..62f5664 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -48,6 +48,15 @@ ul.inline-list {
   }
 }
 
+.svg-container {
+  min-width: 200px;
+
+  &.loading .svg {
+    position: absolute;
+    top: -10000px;
+  }
+}
+
 #deprecation-notice {
   @include background(linear-gradient(top, $green, $dark-green));
   background-color: $green;
@@ -209,15 +218,6 @@ header {
         margin-right: rhythm(1/2);
       }
 
-      &.loading {
-        min-width: 100px;
-
-        .svg {
-          position: absolute;
-          top: -10000px;
-        }
-      }
-
       .svg {
         margin: 0;
         text-align: center;
@@ -354,15 +354,7 @@ header {
   text-align: center;
   display: none;
 
-  body.is-loading & {
-    display: block;
-
-    .svg {
-      position: absolute;
-      top: -10000px;
-    }
-  }
-
+  body.is-loading &,
   body.has-results & {
     display: block;
   }