Open GValencise opened 4 years ago
The reason that the transition is not working is because support.transition.end is undefined under bootstrap 4.
If you don't care about IE11 support you can update drawer.js to the following and this will fix the issue:
/* ========================================================================
* Bootstrap: drawer.js v1.0.6
# Heavily based on collapse, but had to change the name to "fold" to
# avoid transition conflicts.
* ========================================================================
*/
(function ($) {
'use strict';
// OFF CANVAS PUBLIC CLASS DEFINITION
// ================================
var Drawer = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Drawer.DEFAULTS, options)
this.$trigger = $(this.options.trigger).filter('[href="#' + element.id + '"], [data-target="#' + element.id + '"]')
this.transitioning = null
if (this.options.parent) {
this.$parent = this.getParent()
} else {
this.addAriaAndDrawerdClass(this.$element, this.$trigger)
}
if (this.options.toggle) this.toggle()
}
Drawer.VERSION = '3.3.2'
Drawer.TRANSITION_DURATION = 350
Drawer.DEFAULTS = {
toggle: true,
trigger: '[data-toggle="drawer"]'
}
Drawer.prototype.dimension = function () {
var isRight = this.$element.hasClass('drawer-right')
return isRight ? 'margin-right' : 'margin-left'
}
Drawer.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('open')) return
var activesData
var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
if (actives && actives.length) {
activesData = actives.data('bs.drawer')
if (activesData && activesData.transitioning) return
}
var startEvent = $.Event('show.bs.drawer')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
if (actives && actives.length) {
Plugin.call(actives, 'hide')
activesData || actives.data('bs.drawer', null)
}
var dimension = this.dimension()
this.$element
.addClass('folding').css(dimension, 0)
.attr('aria-expanded', true)
this.$trigger
.removeClass('folded')
.attr('aria-expanded', true)
this.transitioning = 1
var complete = function () {
this.$element
.removeClass('folding')
.addClass('fold open').css(dimension, '')
this.transitioning = 0
this.$element
.trigger('shown.bs.drawer')
}
this.$element
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Drawer.TRANSITION_DURATION).css(dimension, 0)
}
Drawer.prototype.hide = function () {
if (this.transitioning || !this.$element.hasClass('open')) return
var startEvent = $.Event('hide.bs.drawer')
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var dimension = this.dimension()
this.$element
.addClass('folding')
.removeClass('open')
.attr('aria-expanded', false)
this.$trigger
.addClass('folded')
.attr('aria-expanded', false)
this.transitioning = 1
var complete = function () {
this.transitioning = 0
this.$element
.removeClass('folding')
.addClass('fold')
.trigger('hidden.bs.drawer')
}
this.$element
.css(dimension, '')
.one('bsTransitionEnd', $.proxy(complete, this))
.emulateTransitionEnd(Drawer.TRANSITION_DURATION)
}
Drawer.prototype.toggle = function () {
this[this.$element.hasClass('open') ? 'hide' : 'show']()
}
Drawer.prototype.getParent = function () {
return $(this.options.parent)
.find('[data-toggle="drawer"][data-parent="' + this.options.parent + '"]')
.each($.proxy(function (i, element) {
var $element = $(element)
this.addAriaAndDrawerdClass(getTargetFromTrigger($element), $element)
}, this))
.end()
}
Drawer.prototype.addAriaAndDrawerdClass = function ($element, $trigger) {
var isOpen = $element.hasClass('open')
$element.attr('aria-expanded', isOpen)
$trigger
.toggleClass('folded', !isOpen)
.attr('aria-expanded', isOpen)
}
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
// OFFCANVAS PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.drawer')
var options = $.extend({}, Drawer.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data && options.toggle && option == 'show') options.toggle = false
if (!data) $this.data('bs.drawer', (data = new Drawer(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.fold
$.fn.drawer = Plugin
$.fn.drawer.Constructor = Drawer
// OFFCANVAS NO CONFLICT
// ====================
$.fn.drawer.noConflict = function () {
$.fn.fold = old
return this
}
// OFFCANVAS DATA-API
// =================
$(document).on('click.bs.drawer.data-api', '[data-toggle="drawer"]', function (e) {
var $this = $(this)
if (!$this.attr('data-target')) e.preventDefault()
var $target = getTargetFromTrigger($this)
var data = $target.data('bs.drawer')
var option = data ? 'toggle' : $.extend({}, $this.data(), { trigger: this })
Plugin.call($target, option)
})
})(window.jQuery || {});
spanish
Hi!
Maybe i'm missing some libraries, but using bootstrap 4 min css and js libs + yours bootstrap drawer libs are not making transitions happen when clicking on link with ref or button with data-toggle.
I created a JSFiddle showing my problem....
https://jsfiddle.net/gvalencise/2p64wg15/1/
Could you help me backtrace where am i missing something ?