smallbird
/
dreamish
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes for modals in Foundation 

* fix event names in focus-on-reveal JS
* change close link to a button with fallback text
This commit is contained in:
Cocoa 2023-08-09 15:11:43 +00:00 committed by Jen
parent 576f1688a1
commit 03f1fb801b
5 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
htdocs/js/skins/jquery.focus-on-reveal.js
View File

@ -1,13 +1,13 @@
jQuery(document).ready(function($) {
// save previously focused item when we open
$(document).on('open', '[data-reveal]', function () {
$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
var $modal = $(this);
$modal.data( "previously_focused", $( ":focus" ) );
});
// focus on the first input, for keyboard users
$(document).on('opened', '[data-reveal]', function () {
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
var $modal = $(this);
$modal.data( "previously_focused", $( ":focus" ) );
@ -15,7 +15,7 @@ jQuery(document).ready(function($) {
});
// switch back focus
$(document).on('closed', '[data-reveal]', function () {
$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
var $modal = $(this);
var focused = $modal.data( "previously_focused" );

3
htdocs/scss/foundation/components/_reveal.scss
View File

@ -163,7 +163,8 @@ $z-index-base: 1005;
line-height: 1;
position: absolute;
top: $reveal-close-top;
#{$opposite-direction}: $reveal-close-side;
border: 0;
#{$opposite-direction}: $reveal-close-top;
}
@include exports("reveal") {

2
htdocs/scss/skins/_nav.scss
View File

@ -85,7 +85,7 @@ $nav-small-screen-header-height: 3em;
.logout.button { display: block; margin-top: .5em; }
ul { list-style: none; margin-left: 0; }
a.close-reveal-modal {
button.close-reveal-modal {
@include reveal-close();
}
}

12
schemes/common.tt
View File

@ -34,6 +34,7 @@ the same terms as Perl itself. For a copy of the license, please reference
dw.need_res( { group => "foundation" },
"js/foundation/foundation/foundation.reveal.js"
"js/skins/jquery.focus-on-reveal.js"
"stc/css/components/foundation-icons.css"
);
dw.need_res( "stc/canary.css" );
@ -122,7 +123,10 @@ the table based way can be removed when the entire site is Foundation-based.
</ul>
</div></div>
<a class="close-reveal-modal">&#215;</a>
<button type="button" class="fi-icon--with-fallback close-reveal-modal">
<span class="fi-icon fi-x" aria-hidden="true"></span>
<span class="fi-icon--fallback">Close</span>
</button>
</div><!-- end #account-links-text -->
</div>
</div><!-- end #account-links.row -->
@ -157,7 +161,11 @@ the table based way can be removed when the entire site is Foundation-based.
</div>
</form>
</div></div>
<a class="close-reveal-modal">&#215;</a>
<button type="button" class="fi-icon--with-fallback close-reveal-modal">
<span class="fi-icon fi-x" aria-hidden="true"></span>
<span class="fi-icon--fallback">Close</span>
</button>
</div>
</div>
</div>

6
views/components/modal.tt
View File

@ -15,9 +15,13 @@ the same terms as Perl itself. For a copy of the license, please reference
[%- dw.need_res({ group => "foundation"}
"js/foundation/foundation/foundation.reveal.js"
"js/skins/jquery.focus-on-reveal.js"
"stc/css/components/foundation-icons.css"
) -%]
<div id="[%- id -%]" class="reveal-modal [%- class.join(" ") -%]" [% IF options %]data-options="[%- options.dquote -%]" [% END %]data-reveal>
[%- content -%]
<a href="#0" class="close-reveal-modal" title="Close">&#215;</a>
<button type="button" class="fi-icon--with-fallback close-reveal-modal">
<span class="fi-icon fi-x" aria-hidden="true"></span>
<span class="fi-icon--fallback">Close</span>
</button>
</div>