* @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');
});
}
$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...