Do not use inline styles (Solves vodkabears#123)

WPDevHQ · May 16, 2015 · 4d75164 · 4d75164
1 parent 35fb014
commit 4d75164
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/src/jquery.remodal.css b/src/jquery.remodal.css
@@ -24,7 +24,9 @@ html.remodal-is-locked {
   right: -5000px;
   bottom: -5000px;
   left: -5000px;
+}
 
+.remodal-overlay.remodal-is-closed {
   display: none;
 }
 
@@ -38,14 +40,17 @@ html.remodal-is-locked {
   bottom: 0;
   left: 0;
 
-  display: none;
   overflow: auto;
 
   text-align: center;
 
   -webkit-overflow-scrolling: touch;
 }
 
+.remodal-wrapper.remodal-is-closed {
+  display: none;
+}
+
 .remodal-wrapper:after {
   display: inline-block;
 

diff --git a/src/jquery.remodal.js b/src/jquery.remodal.js
@@ -290,6 +290,14 @@
         NAMESPACE + '-is-' + STATES.OPENED)
       .addClass(NAMESPACE + '-is-' + state);
 
+    instance.$wrapper
+      .removeClass(
+        NAMESPACE + '-is-' + STATES.CLOSING + ' ' +
+        NAMESPACE + '-is-' + STATES.OPENING + ' ' +
+        NAMESPACE + '-is-' + STATES.CLOSED + ' ' +
+        NAMESPACE + '-is-' + STATES.OPENED)
+      .addClass(NAMESPACE + '-is-' + state);
+
     instance.$modal
       .removeClass(
         NAMESPACE + '-is-' + STATES.CLOSING + ' ' +
@@ -377,8 +385,7 @@
     });
 
     instance.$bg.removeClass(instance.settings.modifier);
-    instance.$overlay.removeClass(instance.settings.modifier).hide();
-    instance.$wrapper.hide();
+    instance.$overlay.removeClass(instance.settings.modifier);
     unlockScreen();
     setState(instance, STATES.CLOSED, true);
   }
@@ -475,17 +482,19 @@
     remodal.$overlay = $('.' + NAMESPACE + '-overlay');
 
     if (!remodal.$overlay.length) {
-      remodal.$overlay = $('<div>').addClass(NAMESPACE + '-overlay');
+      remodal.$overlay = $('<div>').addClass(NAMESPACE + '-overlay ' + NAMESPACE + '-is-' + STATES.CLOSED);
       $body.append(remodal.$overlay);
     }
 
-    remodal.$bg = $('.' + NAMESPACE + '-bg');
-    remodal.$wrapper = $('<div>').addClass(NAMESPACE + '-wrapper');
+    remodal.$bg = $('.' + NAMESPACE + '-bg').addClass(NAMESPACE + '-is-' + STATES.CLOSED);
     remodal.$modal = $modal;
-    remodal.$modal.addClass(NAMESPACE + ' ' + remodal.settings.modifier);
+    remodal.$modal.addClass(NAMESPACE + ' ' + remodal.settings.modifier + ' ' + NAMESPACE + '-is-' + STATES.CLOSED);
     remodal.$modal.css('visibility', 'visible');
-
-    remodal.$wrapper.append(remodal.$modal);
+    remodal.$wrapper = $('<div>')
+      .addClass(
+        NAMESPACE + '-wrapper ' + remodal.settings.modifier + ' ' +
+        NAMESPACE + '-is-' + STATES.CLOSED)
+      .append(remodal.$modal);
     $body.append(remodal.$wrapper);
 
     // Add the event listener for the close button
@@ -558,8 +567,8 @@
     current = remodal;
     lockScreen();
     remodal.$bg.addClass(remodal.settings.modifier);
-    remodal.$overlay.addClass(remodal.settings.modifier).show();
-    remodal.$wrapper.show().scrollTop(0);
+    remodal.$overlay.addClass(remodal.settings.modifier);
+    remodal.$wrapper.scrollTop(0);
 
     syncWithAnimation(
       function() {
@@ -601,8 +610,7 @@
 
       function() {
         remodal.$bg.removeClass(remodal.settings.modifier);
-        remodal.$overlay.removeClass(remodal.settings.modifier).hide();
-        remodal.$wrapper.hide();
+        remodal.$overlay.removeClass(remodal.settings.modifier);
         unlockScreen();
 
         setState(remodal, STATES.CLOSED, false, reason);

diff --git a/test/remodal_test.js b/test/remodal_test.js
@@ -394,12 +394,14 @@
   QUnit.asyncTest('"modifier" option', function(assert) {
     var $modal = $('[data-remodal-id=modal2]');
     var $overlay = $('.remodal-overlay');
+    var $wrapper = $modal.parent();
     var $bg = $('.remodal-bg');
     var remodal = $modal.remodal();
 
     $document.one('opened', '[data-remodal-id=modal2]', function() {
       assert.ok($bg.hasClass('without-animation with-test-class'), 'bg has the modifier');
       assert.ok($overlay.hasClass('without-animation with-test-class'), 'overlay has the modifier');
+      assert.ok($wrapper.hasClass('without-animation with-test-class'), 'wrapper has the modifier');
       assert.ok($modal.hasClass('without-animation with-test-class'), 'modal has the modifier');
 
       remodal.close();
@@ -408,6 +410,7 @@
     $document.one('closed', '[data-remodal-id=modal2]', function() {
       assert.notOk($bg.hasClass('without-animation with-test-class'), 'bg hasn\'t the modifier');
       assert.notOk($overlay.hasClass('without-animation with-test-class'), 'overlay has\'t the modifier');
+      assert.ok($wrapper.hasClass('without-animation with-test-class'), 'wrapper still has the modifier');
       assert.ok($modal.hasClass('without-animation with-test-class'), 'modal still has the modifier');
 
       QUnit.start();