From f1009c19b31c24df871b97efa74e8e10791bb2c3 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Tue, 23 Jul 2013 18:44:08 -0700 Subject: [PATCH] revert collapse change + add emulateTransitionEvent to catch dead css transitions --- dist/js/bootstrap.js | 89 +++++++++++++++++++++------------------- dist/js/bootstrap.min.js | 2 +- js/alert.js | 4 +- js/carousel.js | 14 ++++--- js/collapse.js | 6 ++- js/dropdown.js | 3 +- js/modal.js | 31 +++++++------- js/tab.js | 4 +- js/tooltip.js | 15 ++----- js/transition.js | 8 ++++ 10 files changed, 91 insertions(+), 85 deletions(-) diff --git a/dist/js/bootstrap.js b/dist/js/bootstrap.js index 82f8203d9e..0c9996ab02 100644 --- a/dist/js/bootstrap.js +++ b/dist/js/bootstrap.js @@ -40,6 +40,14 @@ } } + // http://blog.alexmaccaw.com/css-transitions + $.fn.emulateTransitionEnd = function (duration) { + var called = false, $el = this + $(this).one('webkitTransitionEnd', function () { called = true }) + var callback = function () { if (!called) $($el).trigger('webkitTransitionEnd') } + setTimeout(callback, duration) + } + $(function () { $.support.transition = transitionEnd() }) @@ -103,7 +111,9 @@ } $.support.transition && $parent.hasClass('fade') ? - $parent.on($.support.transition.end, removeElement) : + $parent + .one($.support.transition.end, removeElement) + .emulateTransitionEnd(150) : removeElement() } @@ -380,12 +390,14 @@ $next[0].offsetWidth // force reflow $active.addClass(direction) $next.addClass(direction) - this.$element.find('.item').one($.support.transition.end, function () { - $next.removeClass([type, direction].join(' ')).addClass('active') - $active.removeClass(['active', direction].join(' ')) - that.sliding = false - setTimeout(function () { that.$element.trigger('slid') }, 0) - }) + this.$element.find('.item') + .one($.support.transition.end, function () { + $next.removeClass([type, direction].join(' ')).addClass('active') + $active.removeClass(['active', direction].join(' ')) + that.sliding = false + setTimeout(function () { that.$element.trigger('slid') }, 0) + }) + .emulateTransitionEnd(600) } else { this.$element.trigger(e) if (e.isDefaultPrevented()) return @@ -511,7 +523,7 @@ var dimension = this.dimension() var scroll = $.camelCase(['scroll', dimension].join('-')) - var actives = this.$parent && this.$parent.find('.collapse.in') + var actives = this.$parent && this.$parent.find('> .accordion-group > .in') if (actives && actives.length) { var hasData = actives.data('bs.collapse') @@ -565,7 +577,9 @@ this.$element[method]('in') $.support.transition && this.$element.hasClass('collapse') ? - this.$element.one($.support.transition.end, complete) : + this.$element + .one($.support.transition.end, complete) + .emulateTransitionEnd(350) : complete() } @@ -719,7 +733,7 @@ function clearMenus() { $(backdrop).remove() - $(toggle).each(function (e) { + $(toggle).each(function (e) { var $parent = getParent($(this)) if (!$parent.hasClass('open')) return $parent.trigger(e = $.Event('hide.bs.dropdown')) @@ -772,7 +786,6 @@ // APPLY TO STANDARD DROPDOWN ELEMENTS // =================================== - $(document) .on('click.bs.dropdown.data-api', clearMenus) .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) @@ -856,7 +869,11 @@ that.enforceFocus() transition ? - that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown.bs.modal') }) : + that.$element + .one($.support.transition.end, function () { + that.$element.focus().trigger('shown.bs.modal') + }) + .emulateTransitionEnd(300) : that.$element.focus().trigger('shown.bs.modal') }) } @@ -881,7 +898,9 @@ .attr('aria-hidden', true) $.support.transition && this.$element.hasClass('fade') ? - this.hideWithTransition() : + this.$element + .one($.support.transition.end, $.proxy(this.hideModal, this)) + .emulateTransitionEnd(300) : this.hideModal() } @@ -905,19 +924,6 @@ } } - Modal.prototype.hideWithTransition = function () { - var that = this - var timeout = setTimeout(function () { - that.$element.off($.support.transition.end) - that.hideModal() - }, 500) - - this.$element.one($.support.transition.end, function () { - clearTimeout(timeout) - that.hideModal() - }) - } - Modal.prototype.hideModal = function () { var that = this this.$element.hide() @@ -956,14 +962,18 @@ if (!callback) return doAnimate ? - this.$backdrop.one($.support.transition.end, callback) : + this.$backdrop + .one($.support.transition.end, callback) + .emulateTransitionEnd(150) : callback() } else if (!this.isShown && this.$backdrop) { this.$backdrop.removeClass('in') $.support.transition && this.$element.hasClass('fade')? - this.$backdrop.one($.support.transition.end, callback) : + this.$backdrop + .one($.support.transition.end, callback) + .emulateTransitionEnd(150) : callback() } else if (callback) { @@ -1020,8 +1030,8 @@ }) var $body = $(document.body) - .on('bs.modal.shown', '.modal', function () { $body.addClass('modal-open') }) - .on('bs.modal.hidden', '.modal', function () { $body.removeClass('modal-open') }) + .on('shown.bs.modal', '.modal', function () { $body.addClass('modal-open') }) + .on('hidden.bs.modal', '.modal', function () { $body.removeClass('modal-open') }) }(window.jQuery); /* ======================================================================== @@ -1264,19 +1274,10 @@ $tip.removeClass('in') - function removeWithAnimation() { - var timeout = setTimeout(function () { - $tip.off($.support.transition.end).detach() - }, 500) - - $tip.one($.support.transition.end, function () { - clearTimeout(timeout) - $tip.detach() - }) - } - $.support.transition && this.$tip.hasClass('fade') ? - removeWithAnimation() : + $tip + .one($.support.transition.end, $tip.detach) + .emulateTransitionEnd(150) : $tip.detach() this.$element.trigger('hidden.bs.' + this.type) @@ -1739,7 +1740,9 @@ } transition ? - $active.one($.support.transition.end, next) : + $active + .one($.support.transition.end, next) + .emulateTransitionEnd(150) : next() $active.removeClass('in') diff --git a/dist/js/bootstrap.min.js b/dist/js/bootstrap.min.js index a2106e5d4f..65bfc4f956 100644 --- a/dist/js/bootstrap.min.js +++ b/dist/js/bootstrap.min.js @@ -3,4 +3,4 @@ * Copyright 2013 Twitter, Inc. * http://www.apache.org/licenses/LICENSE-2.0.txt */ -+function(e){"use strict";function t(){var e=document.createElement("bootstrap"),t={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var n in t)if(e.style[n]!==undefined)return{end:t[n]}}e(function(){e.support.transition=t()})}(window.jQuery),+function(e){"use strict";var t='[data-dismiss="alert"]',n=function(n){e(n).on("click",t,this.close)};n.prototype.close=function(t){function s(){i.trigger("closed.bs.alert").remove()}var n=e(this),r=n.attr("data-target");r||(r=n.attr("href"),r=r&&r.replace(/.*(?=#[^\s]*$)/,""));var i=e(r);t&&t.preventDefault(),i.length||(i=n.hasClass("alert")?n:n.parent()),i.trigger(t=e.Event("close.bs.alert"));if(t.isDefaultPrevented())return;i.removeClass("in"),e.support.transition&&i.hasClass("fade")?i.on(e.support.transition.end,s):s()};var r=e.fn.alert;e.fn.alert=function(t){return this.each(function(){var r=e(this),i=r.data("bs.alert");i||r.data("bs.alert",i=new n(this)),typeof t=="string"&&i[t].call(r)})},e.fn.alert.Constructor=n,e.fn.alert.noConflict=function(){return e.fn.alert=r,this},e(document).on("click.bs.alert.data-api",t,n.prototype.close)}(window.jQuery),+function(e){"use strict";var t=function(n,r){this.$element=e(n),this.options=e.extend({},t.DEFAULTS,r)};t.DEFAULTS={loadingText:"loading..."},t.prototype.setState=function(e){var t="disabled",n=this.$element,r=n.is("input")?"val":"html",i=n.data();e+="Text",i.resetText||n.data("resetText",n[r]()),n[r](i[e]||this.options[e]),setTimeout(function(){e=="loadingText"?n.addClass(t).attr(t,t):n.removeClass(t).removeAttr(t)},0)},t.prototype.toggle=function(){var e=this.$element.closest('[data-toggle="buttons"]');if(e.length){var t=this.$element.find("input").prop("checked",!this.$element.hasClass("active"));t.prop("type")==="radio"&&e.find(".active").removeClass("active")}this.$element.toggleClass("active")};var n=e.fn.button;e.fn.button=function(n){return this.each(function(){var r=e(this),i=r.data("button"),s=typeof n=="object"&&n;i||r.data("bs.button",i=new t(this,s)),n=="toggle"?i.toggle():n&&i.setState(n)})},e.fn.button.Constructor=t,e.fn.button.noConflict=function(){return e.fn.button=n,this},e(document).on("click.bs.button.data-api","[data-toggle^=button]",function(t){var n=e(t.target);n.hasClass("btn")||(n=n.closest(".btn")),n.button("toggle"),t.preventDefault()})}(window.jQuery),+function(e){"use strict";var t=function(t,n){this.$element=e(t),this.$indicators=this.$element.find(".carousel-indicators"),this.options=n,this.paused=this.sliding=this.interval=this.$active=this.$items=null,this.options.pause=="hover"&&this.$element.on("mouseenter",e.proxy(this.pause,this)).on("mouseleave",e.proxy(this.cycle,this))};t.DEFAULTS={interval:5e3,pause:"hover"},t.prototype.cycle=function(t){return t||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(e.proxy(this.next,this),this.options.interval)),this},t.prototype.getActiveIndex=function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},t.prototype.to=function(t){var n=this,r=this.getActiveIndex();if(t>this.$items.length-1||t<0)return;return this.sliding?this.$element.one("slid",function(){n.to(t)}):r==t?this.pause().cycle():this.slide(t>r?"next":"prev",e(this.$items[t]))},t.prototype.pause=function(t){return t||(this.paused=!0),this.$element.find(".next, .prev").length&&e.support.transition.end&&(this.$element.trigger(e.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},t.prototype.next=function(){if(this.sliding)return;return this.slide("next")},t.prototype.prev=function(){if(this.sliding)return;return this.slide("prev")},t.prototype.slide=function(t,n){var r=this.$element.find(".item.active"),i=n||r[t](),s=this.interval,o=t=="next"?"left":"right",u=t=="next"?"first":"last",a=this;this.sliding=!0,s&&this.pause(),i=i.length?i:this.$element.find(".item")[u]();var f=e.Event("slide.bs.carousel",{relatedTarget:i[0],direction:o});if(i.hasClass("active"))return;this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var t=e(a.$indicators.children()[a.getActiveIndex()]);t&&t.addClass("active")}));if(e.support.transition&&this.$element.hasClass("slide")){this.$element.trigger(f);if(f.isDefaultPrevented())return;i.addClass(t),i[0].offsetWidth,r.addClass(o),i.addClass(o),this.$element.find(".item").one(e.support.transition.end,function(){i.removeClass([t,o].join(" ")).addClass("active"),r.removeClass(["active",o].join(" ")),a.sliding=!1,setTimeout(function(){a.$element.trigger("slid")},0)})}else{this.$element.trigger(f);if(f.isDefaultPrevented())return;r.removeClass("active"),i.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return s&&this.cycle(),this};var n=e.fn.carousel;e.fn.carousel=function(n){return this.each(function(){var r=e(this),i=r.data("bs.carousel"),s=e.extend({},t.DEFAULTS,typeof n=="object"&&n),o=typeof n=="string"?n:s.slide;i||r.data("bs.carousel",i=new t(this,s)),typeof n=="number"?i.to(n):o?i[o]():s.interval&&i.pause().cycle()})},e.fn.carousel.Constructor=t,e.fn.carousel.noConflict=function(){return e.fn.carousel=n,this},e(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(t){var n=e(this),r,i=e(n.attr("data-target")||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,"")),s=e.extend({},i.data(),n.data()),o=n.attr("data-slide-to");o&&(s.interval=!1),i.carousel(s),(o=n.attr("data-slide-to"))&&i.data("bs.carousel").to(o),t.preventDefault()}),e(window).on("load",function(){e('[data-ride="carousel"]').each(function(){var t=e(this);t.carousel(t.data())})})}(window.jQuery),+function(e){"use strict";var t=function(n,r){this.$element=e(n),this.options=e.extend({},t.DEFAULTS,r),this.transitioning=null,this.options.parent&&(this.$parent=e(this.options.parent)),this.options.toggle&&this.toggle()};t.DEFAULTS={toggle:!0},t.prototype.dimension=function(){var e=this.$element.hasClass("width");return e?"width":"height"},t.prototype.show=function(){if(this.transitioning||this.$element.hasClass("in"))return;var t=e.Event("show.bs.collapse");this.$element.trigger(t);if(t.isDefaultPrevented())return;var n=this.dimension(),r=e.camelCase(["scroll",n].join("-")),i=this.$parent&&this.$parent.find(".collapse.in");if(i&&i.length){var s=i.data("bs.collapse");if(s&&s.transitioning)return;i.collapse("hide"),s||i.data("bs.collapse",null)}this.$element[n](0),this.transition("addClass","shown.bs.collapse"),e.support.transition&&this.$element[n](this.$element[0][r])},t.prototype.hide=function(){if(this.transitioning||!this.$element.hasClass("in"))return;var t=e.Event("hide.bs.collapse");this.$element.trigger(t);if(t.isDefaultPrevented())return;var n=this.dimension();this.reset(this.$element[n]()),this.transition("removeClass","shown.bs.hidden"),this.$element[n](0)},t.prototype.reset=function(e){var t=this.dimension();return this.$element.removeClass("collapse")[t](e||"auto")[0].offsetWidth,this.$element[e!=null?"addClass":"removeClass"]("collapse"),this},t.prototype.transition=function(t,n){var r=this,i=function(){n=="shown.bs.collapse"&&r.reset(),r.transitioning=0,r.$element.trigger(n)};this.transitioning=1,this.$element[t]("in"),e.support.transition&&this.$element.hasClass("collapse")?this.$element.one(e.support.transition.end,i):i()},t.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var n=e.fn.collapse;e.fn.collapse=function(n){return this.each(function(){var r=e(this),i=r.data("bs.collapse"),s=e.extend({},t.DEFAULTS,r.data(),typeof n=="object"&&n);i||r.data("bs.collapse",i=new t(this,s)),typeof n=="string"&&i[n]()})},e.fn.collapse.Constructor=t,e.fn.collapse.noConflict=function(){return e.fn.collapse=n,this},e(document).on("click.bs.collapse.data-api","[data-toggle=collapse]",function(t){var n=e(this),r,i=n.attr("data-target")||t.preventDefault()||(r=n.attr("href"))&&r.replace(/.*(?=#[^\s]+$)/,""),s=e(i),o=s.data("bs.collapse"),u=o?"toggle":n.data(),a=n.attr("data-parent"),f=a&&e(a);if(!o||!o.transitioning)f&&f.find("[data-toggle=collapse][data-parent="+a+"]").not(n).addClass("collapsed"),n[s.hasClass("in")?"addClass":"removeClass"]("collapsed");s.collapse(u)})}(window.jQuery),+function(e){"use strict";function i(){e(t).remove(),e(n).each(function(t){var n=s(e(this));if(!n.hasClass("open"))return;n.trigger(t=e.Event("hide.bs.dropdown"));if(t.isDefaultPrevented())return;n.removeClass("open").trigger("hidden.bs.dropdown")})}function s(t){var n=t.attr("data-target");n||(n=t.attr("href"),n=n&&/#/.test(n)&&n.replace(/.*(?=#[^\s]*$)/,""));var r=n&&e(n);return r&&r.length?r:t.parent()}var t=".dropdown-backdrop",n="[data-toggle=dropdown]",r=function(t){var n=e(t).on("click.bs.dropdown",this.toggle)};r.prototype.toggle=function(t){var n=e(this);if(n.is(".disabled, :disabled"))return;var r=s(n),o=r.hasClass("open");i();if(!o){"ontouchstart"in document.documentElement&&e('