]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Merge branch 'feature/offcanvas-fixed-sticky' of https://github.com/SassNinja/foundat...
authorkball <kball@zendev.com>
Wed, 24 Jul 2019 22:38:37 +0000 (15:38 -0700)
committerkball <kball@zendev.com>
Wed, 24 Jul 2019 22:38:37 +0000 (15:38 -0700)
1  2 
js/foundation.offcanvas.js
test/javascript/components/offcanvas.js

index 54d5d892ea3246dbd9fbfad777af78b1c8291092,8284ec69b0e350abdf2b894fb0aa214cee2bef1e..4786418ed6cb94cff2224687227002506ce62b73
@@@ -403,6 -456,14 +456,14 @@@ class OffCanvas extends Plugin 
       * @event OffCanvas#opened
       */
      this.$element.trigger('opened.zf.offCanvas');
 -     * Fires when the off-canvas menu close transition is done.
 -     * @event OffCanvas#closedEnd
+     /**
++     * Fires when the off-canvas menu open transition is done.
++     * @event OffCanvas#openedEnd
+      */
+     this.$element.one(transitionend(this.$element), () => {
+       this.$element.trigger('openedEnd.zf.offCanvas');
+     });
    }
  
    /**
  
      this.$triggers.attr('aria-expanded', 'false');
  
-     if (this.options.trapFocus === true) {
-       this.$content.removeAttr('tabindex');
-       Keyboard.releaseFocus(this.$element);
-     }
  
-     // Listen to transitionEnd and add class when done.
-     this.$element.one(transitionend(this.$element), function(e) {
-       _this.$element.addClass('is-closed');
-       _this._removeContentClasses();
+     // Listen to transitionEnd: add class, re-enable scrolling and release focus when done.
+     this.$element.one(transitionend(this.$element), (e) => {
+       this.$element.addClass('is-closed');
+       this._removeContentClasses();
+       if (this.options.transition === 'push') {
+         this._unfixStickyElements();
+       }
+       // If `contentScroll` is set to false, remove class and re-enable scrolling on touch devices.
+       if (this.options.contentScroll === false) {
+         $('body').removeClass('is-off-canvas-open').off('touchmove', this._stopScrolling);
+         this.$element.off('touchstart', this._recordScrollable);
+         this.$element.off('touchmove', this._stopScrollPropagation);
+       }
+       if (this.options.trapFocus === true) {
+         this.$content.removeAttr('tabindex');
+         Keyboard.releaseFocus(this.$element);
+       }
        /**
-        * Fires when the off-canvas menu is closed.
+        * Fires when the off-canvas menu close transition is done.
 -       * @event OffCanvas#closedEnd
 +       * @event OffCanvas#closed
         */
-       _this.$element.trigger('closed.zf.offCanvas');
 -      this.$element.trigger('closedEnd.zf.offCanvas');
++      this.$element.trigger('closed.zf.offCanvas');
      });
    }
  
index 49c010251b0e7e1d5a5edc5318e9622565662034,15f32d55e30bd0fc2d1e93cd55d744e120b246d4..cb9b2a6564f5e55908a0843411f6a50b9d3ab951
@@@ -177,35 -182,17 +182,32 @@@ describe('Off Canvas', function() 
        $html = $(template).appendTo('body');
        plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
  
-       $html.one('opened.zf.offCanvas', function() {
-         setTimeout(function() {
-           plugin.close();
-           plugin.$element.should.not.have.class('is-open');
-           $('body').should.not.have.class('is-off-canvas-open');
-           done();
-         }, 1);
 -      $html.one('closedEnd.zf.offCanvas', function() {
++      $html.one('closed.zf.offCanvas', function() {
+         plugin.$element.should.not.have.class('is-open');
+         $('body').should.not.have.class('is-off-canvas-open');
+         done();
        });
  
-       // Open it first
+       // Open and close the off-canvas
        plugin.open();
+       $html.one('openedEnd.zf.offCanvas', () => plugin.close());
      });
  
 +    it('fires close.zf.offCanvas event', function(done) {
 +      $html = $(template).appendTo('body');
 +      plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
 +      $html.one('opened.zf.offCanvas', function() {
 +        $html.one('close.zf.offCanvas', function() {
 +          done();
 +        });
 +
 +        plugin.close();
 +      });
 +
 +      // Open it first
 +      plugin.open();
 +    });
 +
      it('fires closed.zf.offCanvas event', function(done) {
        $html = $(template).appendTo('body');
        plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
        plugin.open();
      });
  
-     it('releases focus if trapFocus option is true', function() {
 -    it('fires closedEnd.zf.offCanvas event', function(done) {
++    it('fires closed.zf.offCanvas event', function(done) {
        $html = $(template).appendTo('body');
-       plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {trapFocus: true});
+       plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), {});
  
-       $html.one(Foundation.transitionend($html), function() {
-         let spy = sinon.spy(Foundation.Keyboard, 'releaseFocus');
+       $html.one('openedEnd.zf.offCanvas', function() {
 -        $html.one('closedEnd.zf.offCanvas', function() {
++        $html.one('closed.zf.offCanvas', function() {
+           done();
+         });
  
          plugin.close();
+       });
  
-         sinon.assert.called(spy);
-         Foundation.Keyboard.releaseFocus.restore();
+       // Open it first
+       plugin.open();
+     });
+     it('releases focus if trapFocus option is true', function(done) {
+       $html = $(template).appendTo('body');
+       plugin = new Foundation.OffCanvas($html.find('[data-off-canvas]'), { trapFocus: true });
+       let spy = sinon.spy(Foundation.Keyboard, 'releaseFocus');
+       $html.one('openedEnd.zf.offCanvas', function () {
 -        $html.one('closedEnd.zf.offCanvas', function () {
++        $html.one('closed.zf.offCanvas', function () {
+           sinon.assert.called(spy);
+           Foundation.Keyboard.releaseFocus.restore();
+           done();
+         });
+         plugin.close();
        });
  
        // Open it first...