Make `.is-reveal-open` class on body persists if another Reveal is still visible.

Added visual and automatic test.

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index a3b1bfca4523a07e47f1ec31763b4acf76657d03..b18538addf66a39a3b8fd3fdaa5cc3a1a4bc4491 100644 (file)
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -379,14 +379,15 @@ class Reveal {
     }
     // jQuery method of hiding
     else {
+
+      this.$element.hide(this.options.hideDelay);
+
       if (this.options.overlay) {
         this.$overlay.hide(0, finishUp);
       }
       else {
         finishUp();
       }
-
-      this.$element.hide(this.options.hideDelay);
     }
 
     // Conditionals to remove extra event listeners added on open
@@ -402,14 +403,18 @@ class Reveal {
 
     function finishUp() {
       if (_this.isMobile) {
-        $('html, body').removeClass('is-reveal-open');
+        if ($('.reveal:visible').length === 0) {
+          $('html, body').removeClass('is-reveal-open');
+        }
         if(_this.originalScrollPos) {
           $('body').scrollTop(_this.originalScrollPos);
           _this.originalScrollPos = null;
         }
       }
       else {
-        $('body').removeClass('is-reveal-open');
+        if ($('.reveal:visible').length  === 0) {
+          $('body').removeClass('is-reveal-open');
+        }
       }
 
 

diff --git a/test/javascript/components/reveal.js b/test/javascript/components/reveal.js
index bca91dc47d662b20070fce8e50cff47ea81fd033..433a9256b731dafc97e8785d9e7682b6a61378f0 100644 (file)
--- a/test/javascript/components/reveal.js
+++ b/test/javascript/components/reveal.js
@@ -175,16 +175,42 @@ describe('Reveal', function() {
 
       $html.should.have.attr('aria-hidden', 'true');
     });
-    it('removes class from body', function() {
+    it('removes class from body', function(done) {
       $html = $(template).appendTo('body');
       plugin = new Foundation.Reveal($html, {});
 
       // Open it first
       plugin.open();
 
+
+      $html.on('closed.zf.reveal', function() {
+        $('body').should.not.have.class('is-reveal-open');
+        done();
+      });
+      
       plugin.close();
+    });
+    it('does not remove class from body if another reveal is open', function(done) {
+      $html = $(template).appendTo('body');
+      plugin = new Foundation.Reveal($html, {multipleOpened: true});
+
+      let $html2 = $(template).attr('id', 'exampleModal2').appendTo('body');
+      let plugin2 = new Foundation.Reveal($html2, {multipleOpened: true, vOffset: 10});
+
+      // Open both first
+      plugin.open();
+      plugin2.open();
+
+
+      $html.on('closed.zf.reveal', function() {
 
-      $('body').should.not.have.class('is-reveal-open');
+        $('body').should.have.class('is-reveal-open');
+        plugin2.destroy();
+        $html2.remove();
+        done();
+      });
+
+      plugin.close();
     });
     it('fires closed.zf.reveal event', function(done) {
       $html = $(template).appendTo('body');
@@ -247,7 +273,6 @@ describe('Reveal', function() {
       $anchor.trigger('click');
 
       plugin.$overlay.should.be.visible;
-
       $anchor.remove();
     });
                it('closes a modal on overlay click if closeOnClick option is true', function() {

diff --git a/test/visual/reveal/basic.html b/test/visual/reveal/basic.html
index 317a30edb47f5778edeec47fdcd35a759c1e4d54..2922d555ae19bac26915be002a3dd12786bf00f2 100644 (file)
--- a/test/visual/reveal/basic.html
+++ b/test/visual/reveal/basic.html
@@ -72,6 +72,21 @@
           <p><a data-close>Close modal</a></p>
         </div>
       </section>
+
+      <section>
+        <h2>Multiple opened</h2>
+        <p>Each link should open a separate modal.</p>
+        <p><a data-open="exampleModal7-1">Open modal 1</a></p>
+        <p><a data-open="exampleModal7-2">Open modal 2</a></p>
+        <div class="reveal" id="exampleModal7-1" data-reveal data-multiple-opened="true" data-v-offset="10" data-overlay="false" data-close-on-click="false">
+          <p>Modal 1 - Now click the other one.</p>
+          <p><a data-close>Close modal</a></p>
+        </div>
+        <div class="reveal" id="exampleModal7-2" data-reveal data-multiple-opened="true" data-v-offset="200" data-overlay="false" data-close-on-click="false">
+          <p>Modal 2 - Now click the other one.</p>
+          <p><a data-close>Close modal</a></p>
+        </div>
+      </section>
     </div>
 
     <script src="../assets/js/vendor.js"></script>