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
9 years ago
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
();
...
...
This diff is collapsed.
Click to expand it.
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
,
...
...
This diff is collapsed.
Click to expand it.
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
;
...
...
This diff is collapsed.
Click to expand it.
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>
...
...
This diff is collapsed.
Click to expand it.
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"
>
...
...
This diff is collapsed.
Click to expand it.
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