fire opened.zf.offcanvas after adding the classes to prevent some race conditions

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 995bf91d4036568f3e865a33f5dbd0cb6faa64f8..b335cb0cb86dad763aa8357a743a74bc6980951d 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -301,15 +301,11 @@ class OffCanvas extends Plugin {
       this.$element.siblings('[data-off-canvas-content]').css('transition-duration', '');
     }
 
-    /**
-     * Fires when the off-canvas menu opens.
-     * @event OffCanvas#opened
-     */
     this.$element.addClass('is-open').removeClass('is-closed');
-
     this.$triggers.attr('aria-expanded', 'true');
-    this.$element.attr('aria-hidden', 'false')
-        .trigger('opened.zf.offcanvas');
+    this.$element.attr('aria-hidden', 'false');
+
+
 
     this.$content.addClass('is-open-' + this.position);
 
@@ -328,6 +324,12 @@ class OffCanvas extends Plugin {
       this.$overlay.addClass('is-closable');
     }
 
+    /**
+     * Fires when the off-canvas menu opens.
+     * @event OffCanvas#opened
+     */
+    this.$element.trigger('opened.zf.offcanvas');
+
     if (this.options.autoFocus === true) {
       this.$element.one(transitionend(this.$element), function() {
         if (!_this.$element.hasClass('is-open')) {

diff --git a/test/javascript/components/offcanvas.js b/test/javascript/components/offcanvas.js
index 7938dbaf1726f0109d0bf6b87b8240db57d4e75d..d5cace80067e7a4e95c431d2f4dac6b0049072a3 100644 (file)
--- a/test/javascript/components/offcanvas.js
+++ b/test/javascript/components/offcanvas.js
@@ -104,7 +104,7 @@ describe('Off Canvas', function() {
           plugin.$element.should.have.class('is-open');
           $('body').should.have.class('is-off-canvas-open');
           done();
-        }, 30);
+        }, 1);
       });
 
       plugin.open();
@@ -252,7 +252,7 @@ describe('Off Canvas', function() {
       plugin.toggle();
     });
   });
-  
+
   describe('keyboard events', function() {
     it('closes Off Canvas on ESCAPE', function(done) {
       $html = $(template).appendTo('body');