Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
E
edx-platform
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
edx
edx-platform
Commits
2bea68fc
Commit
2bea68fc
authored
Jul 24, 2015
by
Chris Rodriguez
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Sending focus to modal in CMS
parent
dccc36a4
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
30 additions
and
9 deletions
+30
-9
cms/static/js/spec/views/modals/base_modal_spec.js
+10
-0
cms/static/js/spec_helpers/modal_helpers.js
+8
-2
cms/static/js/views/modals/base_modal.js
+8
-3
cms/templates/js/basic-modal.underscore
+2
-2
cms/templates/ux/reference/modal_access-component.html
+2
-2
No files found.
cms/static/js/spec/views/modals/base_modal_spec.js
View file @
2bea68fc
...
...
@@ -31,6 +31,16 @@ define(["jquery", "underscore", "js/views/modals/base_modal", "js/spec_helpers/m
expect
(
ModelHelpers
.
isShowingModal
(
modal
)).
toBeTruthy
();
});
it
(
'sends focus to the modal window after show is called'
,
function
()
{
showMockModal
();
waitsFor
(
function
()
{
// This is the implementation of "toBeFocused". However, simply calling that method
// with no wait seems to be flaky.
var
modalWindow
=
ModelHelpers
.
getModalWindow
(
modal
);
return
$
(
modalWindow
)[
0
]
===
$
(
modalWindow
)[
0
].
ownerDocument
.
activeElement
;
},
'Modal Window did not get focus'
,
5000
);
});
it
(
'is removed after hide is called'
,
function
()
{
showMockModal
();
modal
.
hide
();
...
...
cms/static/js/spec_helpers/modal_helpers.js
View file @
2bea68fc
...
...
@@ -3,8 +3,8 @@
*/
define
([
"jquery"
,
"common/js/spec_helpers/template_helpers"
,
"js/spec_helpers/view_helpers"
],
function
(
$
,
TemplateHelpers
,
ViewHelpers
)
{
var
installModalTemplates
,
getModalElement
,
getModal
Title
,
isShowingModal
,
hideModalIfShowing
,
pressModalButton
,
cancelModal
,
cancelModalIfShowing
;
var
installModalTemplates
,
getModalElement
,
getModal
Window
,
getModalTitle
,
isShowingModal
,
hideModalIfShowing
,
pressModalButton
,
cancelModal
,
cancelModalIfShowing
;
installModalTemplates
=
function
(
append
)
{
ViewHelpers
.
installViewTemplates
(
append
);
...
...
@@ -22,6 +22,11 @@ define(["jquery", "common/js/spec_helpers/template_helpers", "js/spec_helpers/vi
return
modalElement
;
};
getModalWindow
=
function
(
modal
)
{
var
modalElement
=
getModalElement
(
modal
);
return
modalElement
.
find
(
'.modal-window'
);
};
getModalTitle
=
function
(
modal
)
{
var
modalElement
=
getModalElement
(
modal
);
return
modalElement
.
find
(
'.modal-window-title'
).
text
();
...
...
@@ -58,6 +63,7 @@ define(["jquery", "common/js/spec_helpers/template_helpers", "js/spec_helpers/vi
return
$
.
extend
(
ViewHelpers
,
{
'getModalElement'
:
getModalElement
,
'getModalWindow'
:
getModalWindow
,
'getModalTitle'
:
getModalTitle
,
'installModalTemplates'
:
installModalTemplates
,
'isShowingModal'
:
isShowingModal
,
...
...
cms/static/js/views/modals/base_modal.js
View file @
2bea68fc
...
...
@@ -34,6 +34,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview"],
modalType
:
'generic'
,
modalSize
:
'lg'
,
title
:
''
,
modalWindowClass
:
'.modal-window'
,
// A list of class names, separated by space.
viewSpecificClasses
:
''
}),
...
...
@@ -46,7 +47,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview"],
if
(
parent
)
{
parentElement
=
parent
.
$el
;
}
else
if
(
!
parentElement
)
{
parentElement
=
this
.
$el
.
closest
(
'.modal-window'
);
parentElement
=
this
.
$el
.
closest
(
this
.
options
.
modalWindowClass
);
if
(
parentElement
.
length
===
0
)
{
parentElement
=
$
(
'body'
);
}
...
...
@@ -87,6 +88,10 @@ define(["jquery", "underscore", "gettext", "js/views/baseview"],
this
.
render
();
this
.
resize
();
$
(
window
).
resize
(
_
.
bind
(
this
.
resize
,
this
));
// after showing and resizing, send focus
var
modal
=
this
.
$el
.
find
(
this
.
options
.
modalWindowClass
);
modal
.
focus
();
},
hide
:
function
()
{
...
...
@@ -132,7 +137,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview"],
* Returns the action bar that contains the modal's action buttons.
*/
getActionBar
:
function
()
{
return
this
.
$
(
'.modal-window
> div > .modal-actions'
);
return
this
.
$
(
this
.
options
.
modalWindowClass
+
'
> div > .modal-actions'
);
},
/**
...
...
@@ -146,7 +151,7 @@ define(["jquery", "underscore", "gettext", "js/views/baseview"],
var
top
,
left
,
modalWindow
,
modalWidth
,
modalHeight
,
availableWidth
,
availableHeight
,
maxWidth
,
maxHeight
;
modalWindow
=
this
.
$
(
'.modal-window'
);
modalWindow
=
this
.
$
el
.
find
(
this
.
options
.
modalWindowClass
);
availableWidth
=
$
(
window
).
width
();
availableHeight
=
$
(
window
).
height
();
maxWidth
=
availableWidth
*
0.80
;
...
...
cms/templates/js/basic-modal.underscore
View file @
2bea68fc
...
...
@@ -4,10 +4,10 @@
aria-hidden=""
role="dialog">
<div class="modal-window-overlay"></div>
<div class="modal-window <%= viewSpecificClasses %> modal-<%= size %> modal-type-<%= type %>">
<div class="modal-window <%= viewSpecificClasses %> modal-<%= size %> modal-type-<%= type %>"
tabindex="-1" aria-labelledby="modal-window-title"
>
<div class="<%= name %>-modal">
<div class="modal-header">
<h2 class="title modal-window-title"><%= title %></h2>
<h2
id="modal-window-title"
class="title modal-window-title"><%= title %></h2>
<ul class="editor-modes action-list action-modes">
</ul>
</div>
...
...
cms/templates/ux/reference/modal_access-component.html
View file @
2bea68fc
<div
class=
"wrapper wrapper-modal-window wrapper-modal-window-edit-xblock"
aria-describedby=
"modal-window-description"
aria-labelledby=
"modal-window-title"
aria-hidden=
""
role=
"dialog"
>
<div
class=
"modal-window-overlay"
></div>
<div
class=
"modal-window confirm modal-med modal-type-html modal-editor"
style=
"top: 50px; left: 400px;"
>
<div
class=
"modal-window confirm modal-med modal-type-html modal-editor"
style=
"top: 50px; left: 400px;"
tabindex=
"-1"
aria-labelledby=
"modal-window-title"
>
<div
class=
"edit-xblock-modal"
>
<div
class=
"modal-header"
>
<h2
class=
"title modal-window-title"
>
Editing visibility for: [Component Name]
</h2>
<h2
id=
"modal-window-title"
class=
"title modal-window-title"
>
Editing visibility for: [Component Name]
</h2>
</div>
<div
class=
"modal-content"
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment