mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-24 21:40:17 +00:00
Code Issues Projects Releases Wiki Activity

force reflow instead of relying on eventloop (firefox)

Browse Source 
listen to window for escape press
This commit is contained in:
Jacob Thornton 2011-09-18 21:03:52 -07:00
parent ba6f4f03da
commit ac8001190a
3 changed files with 158 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/javascript.html
View File

@ -12,7 +12,7 @@
<![endif]--> <![endif]-->
<!-- Le javascript --> <!-- Le javascript -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script> <script>$(function () { prettyPrint() })</script>
<script src="../js/bootstrap-modal.js"></script> <script src="../js/bootstrap-modal.js"></script>

33
js/bootstrap-modal.js vendored
View File

@ -85,11 +85,13 @@
.appendTo(document.body) .appendTo(document.body)
.show() .show()
setTimeout(function () { if ($.support.transition && that.$element.hasClass('fade')) {
that.$element that.$backdrop[0].offsetWidth // force reflow
.addClass('in') }
.trigger('shown')
}, 0) that.$element
.addClass('in')
.trigger('shown')
}) })
return this return this
@ -132,6 +134,8 @@
var that = this var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : '' , animate = this.$element.hasClass('fade') ? 'fade' : ''
if ( this.isShown && this.settings.backdrop ) { if ( this.isShown && this.settings.backdrop ) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />') this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body) .appendTo(document.body)
@ -139,12 +143,15 @@
this.$backdrop.click($.proxy(this.hide, this)) this.$backdrop.click($.proxy(this.hide, this))
} }
setTimeout(function () { if ( doAnimate ) {
that.$backdrop && that.$backdrop.addClass('in') that.$backdrop[0].offsetWidth // force reflow
$.support.transition && that.$backdrop.hasClass('fade') ? }
that.$backdrop.one(transitionEnd, callback) :
callback() that.$backdrop && that.$backdrop.addClass('in')
}, 0)
doAnimate ?
that.$backdrop.one(transitionEnd, callback) :
callback()
} else if ( !this.isShown && this.$backdrop ) { } else if ( !this.isShown && this.$backdrop ) {
this.$backdrop.removeClass('in') this.$backdrop.removeClass('in')
@ -165,13 +172,13 @@
function escape() { function escape() {
var that = this var that = this
if ( this.isShown && this.settings.keyboard ) { if ( this.isShown && this.settings.keyboard ) {
$('body').bind('keyup.modal', function ( e ) { $(window).bind('keyup.modal', function ( e ) {
if ( e.which == 27 ) { if ( e.which == 27 ) {
that.hide() that.hide()
} }
}) })
} else if ( !this.isShown ) { } else if ( !this.isShown ) {
$('body').unbind('keyup.modal') $(window).unbind('keyup.modal')
} }
} }

274
js/tests/unit/bootstrap-modal.js vendored
View File

@ -1,151 +1,151 @@
$(function () { $(function () {
module("bootstrap-modal") module("bootstrap-modal")
test("should be defined on jquery object", function () { test("should be defined on jquery object", function () {
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
ok(div.modal, 'modal method is defined') ok(div.modal, 'modal method is defined')
}) })
test("should return element", function () { test("should return element", function () {
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
ok(div.modal() == div, 'document.body returned') ok(div.modal() == div, 'div element returned')
}) })
test("should expose defaults var for settings", function () { test("should expose defaults var for settings", function () {
ok($.fn.modal.defaults, 'default object exposed') ok($.fn.modal.defaults, 'default object exposed')
}) })
test("should insert into dom when show method is called", function () { test("should insert into dom when show method is called", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal() .modal()
.modal("show") .bind("shown", function () {
.bind("shown", function () { ok($('#modal-test').length, 'modal insterted into dom')
ok($('#modal-test').length, 'modal insterted into dom') start()
start() div.remove()
div.remove() })
}) .modal("show")
}) })
test("should hide modal when hide is called", function () { test("should hide modal when hide is called", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal() .modal()
.bind("shown", function () { .bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible') ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom') ok($('#modal-test').length, 'modal insterted into dom')
div.modal("hide") div.modal("hide")
}) })
.bind("hidden", function() { .bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden') ok(!$('#modal-test').is(":visible"), 'modal hidden')
start() start()
div.remove() div.remove()
}) })
.modal("show") .modal("show")
}) })
test("should toggle when toggle is called", function () { test("should toggle when toggle is called", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal() .modal()
.bind("shown", function () { .bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible') ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom') ok($('#modal-test').length, 'modal insterted into dom')
div.modal("toggle") div.modal("toggle")
}) })
.bind("hidden", function() { .bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden') ok(!$('#modal-test').is(":visible"), 'modal hidden')
start() start()
div.remove() div.remove()
}) })
.modal("toggle") .modal("toggle")
}) })
test("should remove from dom when click .close", function () { test("should remove from dom when click .close", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'><span class='close'></span></div>") var div = $("<div id='modal-test'><span class='close'></span></div>")
div div
.modal() .modal()
.bind("shown", function () { .bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible') ok($('#modal-test').is(":visible"), 'modal visible')
ok($('#modal-test').length, 'modal insterted into dom') ok($('#modal-test').length, 'modal insterted into dom')
div.find('.close').click() div.find('.close').click()
}) })
.bind("hidden", function() { .bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden') ok(!$('#modal-test').is(":visible"), 'modal hidden')
start() start()
div.remove() div.remove()
}) })
.modal("toggle") .modal("toggle")
}) })
test("should add backdrop when desired", function () { test("should add backdrop when desired", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal({backdrop:true}) .modal({ backdrop:true })
.modal("show") .bind("shown", function () {
.bind("shown", function () { equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom') start()
start() div.remove()
div.remove() $('.modal-backdrop').remove()
$('.modal-backdrop').remove() })
}) .modal("show")
}) })
test("should not add backdrop when not desired", function () { test("should not add backdrop when not desired", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal({backdrop:false}) .modal({backdrop:false})
.modal("show") .bind("shown", function () {
.bind("shown", function () { equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom')
equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom') start()
start() div.remove()
div.remove() })
}) .modal("show")
}) })
test("should close backdrop when clicked", function () { test("should close backdrop when clicked", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal({backdrop:true}) .modal({backdrop:true})
.modal("show") .bind("shown", function () {
.bind("shown", function () { equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom') $('.modal-backdrop').click()
$('.modal-backdrop').click() equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom')
equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom') start()
start() div.remove()
div.remove() })
}) .modal("show")
}) })
test("should not close backdrop when click disabled", function () { test("should not close backdrop when click disabled", function () {
stop() stop()
$.support.transition = false $.support.transition = false
var div = $("<div id='modal-test'></div>") var div = $("<div id='modal-test'></div>")
div div
.modal({backdrop: 'static'}) .modal({backdrop: 'static'})
.modal("show") .bind("shown", function () {
.bind("shown", function () { equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom')
equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom') $('.modal-backdrop').click()
$('.modal-backdrop').click() equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom')
equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom') start()
start() div.remove()
div.remove() $('.modal-backdrop').remove()
$('.modal-backdrop').remove() })
}) .modal("show")
}) })
}) })