'keydown.zf.offcanvas': this._handleKeyboard.bind(this)
});
- if (this.options.closeOnClick === true) {
- if (this.options.closeOnClick && this.$exiter.length) {
- this.$exiter.on({'click.zf.offcanvas': this.close.bind(this)});
++ if (this.options.closeOnClick === true) {
+ var $target = this.options.contentOverlay ? this.$overlay : $('[data-off-canvas-content]');
- $target.on({'click.zf.offcanvas': this.close.bind(this)});
++ $target.on({'click.zf.offcanvas': this.close.bind(this)});
}
}
this.$element.attr('aria-hidden', 'false')
.trigger('opened.zf.offcanvas');
- if (this.options.closeOnClick) {
- this.$exiter.addClass('is-visible');
+ // If `contentScroll` is set to false, add class and disable scrolling on touch devices.
+ if (this.options.contentScroll === false) {
+ $('body').addClass('is-off-canvas-open').on('touchmove', this._stopScrolling);
}
- if (trigger) {
- this.$lastTrigger = trigger;
+ if (this.options.contentOverlay === true) {
+ this.$overlay.addClass('is-visible');
}
- if (this.options.autoFocus) {
- $wrapper.one(Foundation.transitionend($wrapper), function() {
- if(_this.$element.hasClass('is-open')) { // handle double clicks
- _this.$element.attr('tabindex', '-1');
- _this.$element.focus();
- }
- });
+ if (this.options.closeOnClick === true && this.options.contentOverlay === true) {
+ this.$overlay.addClass('is-closable');
}
- if (this.options.trapFocus) {
- $wrapper.one(Foundation.transitionend($wrapper), function() {
- if(_this.$element.hasClass('is-open')) { // handle double clicks
- _this.$element.attr('tabindex', '-1');
- Foundation.Keyboard.trapFocus(_this.$element);
- }
+ if (this.options.autoFocus === true) {
+ this.$element.one(Foundation.transitionend(this.$element), function() {
+ _this.$element.find('a, button').eq(0).focus();
});
}
- this._trapFocus();
+
+ if (this.options.trapFocus === true) {
+ $('[data-off-canvas-content]').attr('tabindex', '-1');
++ Foundation.Keyboard.trapFocus(_this.$element);
+ }
}
-- /**
- * Traps focus within the offcanvas on open.
- * Allows the offcanvas to appear sticky utilizing translate properties.
-- * @private
-- */
- _trapFocus() {
- var focusable = Foundation.Keyboard.findFocusable(this.$element),
- first = focusable.eq(0),
- last = focusable.eq(-1);
-
- focusable.off('.zf.offcanvas').on('keydown.zf.offcanvas', function(e) {
- var key = Foundation.Keyboard.parseKey(e);
- if (key === 'TAB' && e.target === last[0]) {
- e.preventDefault();
- first.focus();
- }
- if (key === 'SHIFT_TAB' && e.target === first[0]) {
- e.preventDefault();
- last.focus();
- }
- });
- }
-
- // OffCanvas.prototype._stick = function() {
- // var elStyle = this.$element[0].style;
- //
- // if (this.options.closeOnClick) {
- // var exitStyle = this.$exiter[0].style;
- // }
- //
- // $(window).on('scroll.zf.offcanvas', function(e) {
- // console.log(e);
- // var pageY = window.pageYOffset;
- // elStyle.transform = 'translate(0,' + pageY + 'px)';
- // if (exitStyle !== undefined) { exitStyle.transform = 'translate(0,' + pageY + 'px)'; }
- // });
- // // this.$element.trigger('stuck.zf.offcanvas');
- // };
/**
* Closes the off-canvas menu.
* @function
}
this.$triggers.attr('aria-expanded', 'false');
- if (this.options.trapFocus) {
++
+ if (this.options.trapFocus === true) {
$('[data-off-canvas-content]').removeAttr('tabindex');
+ Foundation.Keyboard.releaseFocus(this.$element);
}
}