Skip to content
GitLab
Commit a404ac33 authored by Jacob Thornton's avatar Jacob Thornton
Browse files

modal accessibility tab control

parent b261f978
10 merge requests!4427Use variable for desktop media query,!4258Aria,!4248Amended mentions of 'javascript' to the correct 'JavaScript',!4235Patch 1,!4232Fixing the modal z-index issue + make modal stacking possible,!42132.1.0 wip,!4165Patch 2,!39192.1.0 wip,!3690fixed paths to javascript and the doc link,!3688fixed wrong paths to javascript
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 251 additions and 194 deletions
+251 -194
docs/assets/js/bootstrap-modal.js
+ 79
- 64
View file @ a404ac33
......@@ -52,8 +52,9 @@
this.isShown = true
escape.call(this)
backdrop.call(this, function () {
this.escape()
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
......@@ -69,6 +70,8 @@
that.$element.addClass('in')
that.enforceFocus()
transition ?
that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown')
......@@ -91,90 +94,102 @@
$('body').removeClass('modal-open')
escape.call(this)
this.escape()
this.relaxFocus()
this.$element.removeClass('in')
$.support.transition && this.$element.hasClass('fade') ?
hideWithTransition.call(this) :
hideModal.call(this)
this.hideWithTransition() :
this.hideModal()
}
}
/* MODAL PRIVATE METHODS
* ===================== */
, enforceFocus: function () {
var that = this
var console = window.console
console.log('attach');
$(document).on('focusin.modal', function (e) {
console.log('triggered');
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus()
}
})
}
function hideWithTransition() {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
hideModal.call(that)
}, 500)
, relaxFocus: function () {
$(document).off('focus.modal')
}
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
hideModal.call(that)
})
}
, escape: function () {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
}
function hideModal(that) {
this.$element
.hide()
.trigger('hidden')
, hideWithTransition: function () {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
that.hideModal()
}, 500)
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
that.hideModal()
})
}
backdrop.call(this)
}
, hideModal: function (that) {
this.$element
.hide()
.trigger('hidden')
function backdrop(callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
this.backdrop()
}
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
, removeBackdrop: function () {
this.$backdrop.remove()
this.$backdrop = null
}
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
, backdrop: function (callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
}
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
this.$backdrop.addClass('in')
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
}
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
this.$backdrop.addClass('in')
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
removeBackdrop.call(this)
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (callback) {
callback()
}
}
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
function removeBackdrop() {
this.$backdrop.remove()
this.$backdrop = null
}
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
this.removeBackdrop()
function escape() {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
} else if (callback) {
callback()
}
}
}
......
docs/assets/js/bootstrap.js
+ 78
- 63
View file @ a404ac33
......@@ -719,8 +719,9 @@
this.isShown = true
escape.call(this)
backdrop.call(this, function () {
this.escape()
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
......@@ -736,6 +737,8 @@
that.$element.addClass('in')
that.enforceFocus()
transition ?
that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown')
......@@ -758,90 +761,102 @@
$('body').removeClass('modal-open')
escape.call(this)
this.escape()
this.relaxFocus()
this.$element.removeClass('in')
$.support.transition && this.$element.hasClass('fade') ?
hideWithTransition.call(this) :
hideModal.call(this)
this.hideWithTransition() :
this.hideModal()
}
}
, enforceFocus: function () {
var that = this
var console = window.console
console.log('attach');
$(document).on('focusin.modal', function (e) {
console.log('triggered');
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus()
}
})
}
/* MODAL PRIVATE METHODS
* ===================== */
, relaxFocus: function () {
$(document).off('focus.modal')
}
function hideWithTransition() {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
hideModal.call(that)
}, 500)
, escape: function () {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
}
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
hideModal.call(that)
})
}
, hideWithTransition: function () {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
that.hideModal()
}, 500)
function hideModal(that) {
this.$element
.hide()
.trigger('hidden')
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
that.hideModal()
})
}
backdrop.call(this)
}
, hideModal: function (that) {
this.$element
.hide()
.trigger('hidden')
function backdrop(callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
this.backdrop()
}
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
, removeBackdrop: function () {
this.$backdrop.remove()
this.$backdrop = null
}
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
, backdrop: function (callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
}
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
this.$backdrop.addClass('in')
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
}
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
this.$backdrop.addClass('in')
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
removeBackdrop.call(this)
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (callback) {
callback()
}
}
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
function removeBackdrop() {
this.$backdrop.remove()
this.$backdrop = null
}
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
this.removeBackdrop()
function escape() {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
} else if (callback) {
callback()
}
}
}
......
docs/assets/js/bootstrap.min.js
+ 1
- 1
View file @ a404ac33
This diff is collapsed.
docs/javascript.html
+ 7
- 1
View file @ a404ac33
......@@ -223,8 +223,9 @@
<h2>Live demo</h2>
<p>Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content -->
<div id="myModal" class="modal hide fade">
<div id="myModal" class="modal hide fade" tabindex=0>
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h3>Modal Heading</h3>
......@@ -233,6 +234,11 @@
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<form class="well">
<label>Label name</label>
<input type="text" class="span3" placeholder="Type something…">
</form>
<h4>Popover in a modal</h4>
<p>This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
......
docs/templates/pages/javascript.mustache
+ 7
- 1
View file @ a404ac33
......@@ -146,8 +146,9 @@
<h2>{{_i}}Live demo{{/i}}</h2>
<p>{{_i}}Toggle a modal via javascript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
<!-- sample modal content -->
<div id="myModal" class="modal hide fade">
<div id="myModal" class="modal hide fade" tabindex="0">
<div class="modal-header">
<button class="close" data-dismiss="modal">&times;</button>
<h3>{{_i}}Modal Heading{{/i}}</h3>
......@@ -156,6 +157,11 @@
<h4>{{_i}}Text in a modal{{/i}}</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<form class="well">
<label>Label name</label>
<input type="text" class="span3" placeholder="Type something…">
</form>
<h4>{{_i}}Popover in a modal{{/i}}</h4>
<p>{{_i}}This <a href="#" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
......
js/bootstrap-modal.js
+ 79
- 64
View file @ a404ac33
......@@ -52,8 +52,9 @@
this.isShown = true
escape.call(this)
backdrop.call(this, function () {
this.escape()
this.backdrop(function () {
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
......@@ -69,6 +70,8 @@
that.$element.addClass('in')
that.enforceFocus()
transition ?
that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown')
......@@ -91,90 +94,102 @@
$('body').removeClass('modal-open')
escape.call(this)
this.escape()
this.relaxFocus()
this.$element.removeClass('in')
$.support.transition && this.$element.hasClass('fade') ?
hideWithTransition.call(this) :
hideModal.call(this)
this.hideWithTransition() :
this.hideModal()
}
}
/* MODAL PRIVATE METHODS
* ===================== */
, enforceFocus: function () {
var that = this
var console = window.console
console.log('attach');
$(document).on('focusin.modal', function (e) {
console.log('triggered');
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus()
}
})
}
function hideWithTransition() {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
hideModal.call(that)
}, 500)
, relaxFocus: function () {
$(document).off('focus.modal')
}
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
hideModal.call(that)
})
}
, escape: function () {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
}
function hideModal(that) {
this.$element
.hide()
.trigger('hidden')
, hideWithTransition: function () {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
that.hideModal()
}, 500)
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
that.hideModal()
})
}
backdrop.call(this)
}
, hideModal: function (that) {
this.$element
.hide()
.trigger('hidden')
function backdrop(callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
this.backdrop()
}
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
, removeBackdrop: function () {
this.$backdrop.remove()
this.$backdrop = null
}
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
, backdrop: function (callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
}
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
this.$backdrop.addClass('in')
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
}
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
this.$backdrop.addClass('in')
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
removeBackdrop.call(this)
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (callback) {
callback()
}
}
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
function removeBackdrop() {
this.$backdrop.remove()
this.$backdrop = null
}
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(this.removeBackdrop, this)) :
this.removeBackdrop()
function escape() {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
} else if (callback) {
callback()
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment