Skip to content

GitLab

Commit 9d52504d authored by Jono Mingard's avatar Jono Mingard
Browse files

Made Attachments expander keyboard-accessible (Bug #1279530) 



- Changed trigger to an anchor instead of a <td>, moved js file out of resume (since
resume isn't the only thing using it) and added focus management - the first link in
the expander is focused when it's opened
- Modified the expander in Cookie Consent 2 to use the same logic
- Fixed Resume blocktypes, which were no longer displaying properly after the change

Change-Id: I399ea9558482c1af91bd904f4057851cdb0b3ee7
Signed-off-by: default avatarJono Mingard <jonom@catalyst.net.nz>
parent cebec827
Hide whitespace changes
Inline Side-by-side
htdocs/admin/site/cookieconsent.php
View file @ 9d52504d
......@@ -196,12 +196,6 @@ function cookieconsent_submit(Pieform $form, $values) {
$js = <<<EOF
jQuery(document).ready(function() {
var j = jQuery.noConflict();
j(".expandable-body").hide();
j(".toggle").addClass('expandable');
j(".expandable-head").click(function(event) {
j(this).next('.expandable-body').toggle();
j(this).children(".toggle.expandable").toggleClass('expanded');
});
j('#cookieconsent input[name=enabled]').click(function() {
if (this.checked) {
// Expand collapsible fieldsets
......@@ -217,7 +211,7 @@ jQuery(document).ready(function() {
EOF;
$smarty = smarty();
$smarty = smarty(array('expandable'));
$smarty->assign('form', $form);
$smarty->assign('introtext1', get_string('cookieconsentintro1', 'cookieconsent'));
$smarty->assign('introtext2', get_string('cookieconsentintro2', 'cookieconsent'));
......
htdocs/admin/site/cookieconsent2.php
View file @ 9d52504d
......@@ -192,22 +192,8 @@ $data = array(
)
);
$js = <<<EOF
jQuery(document).ready(function() {
var j = jQuery.noConflict();
j(".expandable-body").hide();
j(".toggle").addClass('expandable');
j(".expandable-head").click(function(event) {
j(this).next('.expandable-body').toggle();
j(this).children(".toggle.expandable").toggleClass('expanded');
});
});
EOF;
$smarty = smarty();
$smarty = smarty(array('expandable'));
$smarty->assign('modifications', get_string('additionalmodifications','cookieconsent'));
$smarty->assign('data', $data);
$smarty->assign('PAGEHEADING', TITLE);
$smarty->assign('INLINEJAVASCRIPT', $js);
$smarty->display('admin/site/cookieconsent2.tpl');
htdocs/artefact/internal/blocktype/textbox/theme/raw/content.tpl
View file @ 9d52504d
......@@ -2,10 +2,11 @@
{if isset($attachments)}
<table class="cb attachments fullwidth">
<thead class="expandable-head">
<tr class="toggle">
<td {if $icons}colspan="2"{/if} class="toggle-padding"><strong>{str tag=attachedfiles section=artefact.blog}</strong>
<span class="fr"><img class="fl" src="{theme_url filename='images/attachment.png'}" alt="{str tag=Attachments section=artefact.resume}">&nbsp;{$count}</span>
</td>
<tr>
<td {if $icons}colspan="2"{/if}>
<a class="toggle" href="#">{str tag=attachedfiles section=artefact.blog}</a>
<span class="fr"><img class="fl" src="{theme_url filename='images/attachment.png'}" alt="{str tag=Attachments section=artefact.resume}">&nbsp;{$count}</span>
</td>
</tr>
</thead>
<tbody class="expandable-body">
......
htdocs/artefact/resume/theme/raw/fragments/book.tpl
View file @ 9d52504d
......@@ -21,28 +21,32 @@
{foreach from=$rows item=row}
<tr class="{cycle values='r0,r0,r1,r1'} expandable-head">
{if $controls}<td class="buttonscell"></td>{/if}
<td class="toggle">{$row->date}</td>
<td>{if $row->url}<a href="{$row->url}" target="_blank">{$row->title}</a>{else}{$row->title}{/if}</td>
<td>{$row->date}</td>
<td><a class="toggle textonly" href="#">{$row->title}</a></td>
<td class="center">{$row->clipcount}</td>
{if $controls}<td class="buttonscell"></td>{/if}
</tr>
<tr class="{cycle values='r0,r0,r1,r1'} expandable-body">
{if $controls}<td class="buttonscell"></td>{/if}
<td colspan="3"><div class="compositedesc">{$row->description}</div>
{if $row->attachments}
<table class="cb attachments fullwidth">
<tbody>
<tr><th colspan="2">{str tag='attachedfiles' section='artefact.blog'}:</th></tr>
{foreach from=$row->attachments item=item}
<tr class="{cycle values='r0,r1'}">
{if $icons}<td class="iconcell"><img src="{$item->iconpath}" alt=""></td>{/if}
<td><a href="{$item->viewpath}">{$item->title}</a> ({$item->size}) - <strong><a href="{$item->downloadpath}">{str tag=Download section=artefact.file}</a></strong>
<br>{$item->description}</td>
</tr>
{/foreach}
</tbody>
</table>
{/if}
<td colspan="3">
<div class="compositedesc">
{$row->description}
{if $row->url}<p><a href="{$row->url}" target="_blank">{$row->url}</a></p>{/if}
</div>
{if $row->attachments}
<table class="cb attachments fullwidth">
<tbody>
<tr><th colspan="2">{str tag='attachedfiles' section='artefact.blog'}:</th></tr>
{foreach from=$row->attachments item=item}
<tr class="{cycle values='r0,r1'}">
{if $icons}<td class="iconcell"><img src="{$item->iconpath}" alt=""></td>{/if}
<td><a href="{$item->viewpath}">{$item->title}</a> ({$item->size}) - <strong><a href="{$item->downloadpath}">{str tag=Download section=artefact.file}</a></strong>
<br>{$item->description}</td>
</tr>
{/foreach}
</tbody>
</table>
{/if}
</td>
{if $controls}<td class="buttonscell"></td>{/if}
</tr>
......@@ -61,3 +65,6 @@
</div>
{/if}
</fieldset>
<script type="text/javascript">
setupExpanders(jQuery('#booklist{$suffix}'));
</script>
htdocs/artefact/resume/theme/raw/fragments/certification.tpl
View file @ 9d52504d
......@@ -21,8 +21,8 @@
{foreach from=$rows item=row}
<tr class="{cycle values='r0,r0,r1,r1'} expandable-head">
{if $controls}<td class="buttonscell"></td>{/if}
<td class="toggle">{$row->date}</td>
<td>{$row->title}</td>
<td>{$row->date}</td>
<td><a class="toggle textonly" href="#">{$row->title}</a></td>
<td class="center">{$row->clipcount}</td>
{if $controls}<td class="buttonscell"></td>{/if}
</tr>
......@@ -61,3 +61,6 @@
</div>
{/if}
</fieldset>
<script type="text/javascript">
setupExpanders(jQuery('#certificationlist{$suffix}'));
</script>
htdocs/artefact/resume/theme/raw/fragments/educationhistory.tpl
View file @ 9d52504d
......@@ -22,9 +22,9 @@
{foreach from=$rows item=row}
<tr class="{cycle values='r0,r0,r1,r1'} expandable-head">
{if $controls}<td class="buttonscell"></td>{/if}
<td class="toggle">{$row->startdate}</td>
<td>{$row->startdate}</td>
<td>{$row->enddate}</td>
<td>{$row->qualification}</td>
<td><a class="toggle textonly" href="#">{$row->qualification}</a></td>
<td class="center">{$row->clipcount}</td>
{if $controls}<td class="buttonscell"></td>{/if}
</tr>
......@@ -63,3 +63,6 @@
</div>
{/if}
</fieldset>
<script type="text/javascript">
setupExpanders(jQuery('#educationhistorylist{$suffix}'));
</script>
htdocs/artefact/resume/theme/raw/fragments/employmenthistory.tpl
View file @ 9d52504d
......@@ -24,7 +24,7 @@
{if $controls}<td class="buttonscell"></td>{/if}
<td class="toggle">{$row->startdate}</td>
<td>{$row->enddate}</td>
<td>{$row->jobtitle}: {$row->employer}</td>
<td><a class="toggle textonly" href="#">{$row->jobtitle}: {$row->employer}</a></td>
<td class="center">{$row->clipcount}</td>
{if $controls}<td class="buttonscell"></td>{/if}
</tr>
......@@ -63,3 +63,6 @@
</div>
{/if}
</fieldset>
<script type="text/javascript">
setupExpanders(jQuery('#employmenthistorylist{$suffix}'));
</script>
htdocs/artefact/resume/theme/raw/fragments/goalsandskills.tpl
View file @ 9d52504d
......@@ -2,8 +2,8 @@
{if isset($attachments)}
<table class="cb attachments fullwidth">
<thead class="expandable-head">
<tr class="toggle">
<td colspan="2" class="toggle-padding"><strong>{str tag=attachedfiles section=artefact.blog}</strong>
<tr>
<td colspan="2"><a class="toggle" href="#">{str tag=attachedfiles section=artefact.blog}</a>
<img class="fr" src="{theme_url filename='images/attachment.png'}" alt="{str tag=Attachments section=artefact.resume}">
<span class="fr">{$count}&nbsp;</span>
</td>
......@@ -19,4 +19,7 @@
{/foreach}
</tbody>
</table>
{/if}
\ No newline at end of file
<script type="text/javascript">
setupExpanders(jQuery('table.attachments'));
</script>
{/if}
htdocs/artefact/resume/theme/raw/fragments/membership.tpl
View file @ 9d52504d
......@@ -24,7 +24,7 @@
{if $controls}<td class="buttonscell"></td>{/if}
<td class="toggle">{$row->startdate}</td>
<td>{$row->enddate}</td>
<td>{$row->title}</td>
<td><a class="toggle textonly" href="#">{$row->title}</a></td>
<td class="center">{$row->clipcount}</td>
{if $controls}<td class="buttonscell"></td>{/if}
</tr>
......@@ -64,3 +64,6 @@
</div>
{/if}
</fieldset>
<script type="text/javascript">
setupExpanders(jQuery('#membershiplist{$suffix}'));
</script>
htdocs/artefact/resume/resumeshowhide.js → htdocs/js/expandable.js
View file @ 9d52504d
/**
* Javascript for the resume artefact
* Javascript for showing and hiding attachments or other expandable content
* @source: http://gitorious.org/mahara/mahara
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later
* @copyright For copyright information on Mahara, please see the README file distributed with this software.
......@@ -7,18 +7,22 @@
*/
/*
* TODO
* move javascript into the resume plugin?
* @todo
* test in safari and opera
* implement for employment history
*/
$j = jQuery;
$j(document).ready(function() {
$j(".expandable-body").hide();
$j(".toggle").addClass('expandable');
$j(".expandable-head").click(function(event) {
$j(this).next('.expandable-body').toggle();
$j(this).children(".toggle.expandable").toggleClass('expanded');
});
});
\ No newline at end of file
function setupExpanders(element) {
element.find(".expandable-body").hide();
element.find(".expandable-head a.toggle:not(.expandable)").addClass('expandable').click(function(event) {
$j(this).toggleClass('expanded');
body = $j(this).closest('.expandable-head').next('.expandable-body');
body.toggle();
if (body.is(':visible')) {
body.find('a').first().focus();
}
return false;
});
}
jQuery(document).ready(function() {
setupExpanders($j('body'));
});
htdocs/theme/default/static/style/style.css
View file @ 9d52504d
......@@ -47,6 +47,10 @@ thead th {
.r1, .r1 td, .d1 {
background-color: #f3f7ec;
}
/* expanders */
.expandable-head a.toggle:hover, .expandable-head a.toggle:focus {
text-decoration: none;
}
/******************** Forms ********************/
/* fieldset */
fieldset {
......
htdocs/theme/raw/static/style/style.css
View file @ 9d52504d
......@@ -505,31 +505,27 @@ td.icon-container img {
white-space: normal;
}
/* expandable */
tr.toggle, td.toggle {
width: 10px;
height: 10px;
padding-left: 18px;
background-image: url(../images/expanded.png);
background-repeat: no-repeat;
background-position: 3px 4px;
}
td.toggle-padding {
padding-left: 18px;
}
.valign-middle {
vertical-align: middle;
}
tr.expandable, td.expandable {
cursor: pointer;
.expandable-head a.toggle {
font-weight: bold;
background-image: url(../images/expand.png);
background-repeat: no-repeat;
background-position: 3px 5px;
background-position: 2px 2px;
padding-left: 18px;
display: inline-block;
}
tr.expanded, td.expanded {
cursor: pointer;
.expandable-head a.toggle.textonly {
background-image: none;
padding-left: inherit;
}
.expandable-head a.toggle.expanded {
background-image: url(../images/expanded.png);
background-repeat: no-repeat;
background-position: 3px 4px;
background-position: 2px 1px;
}
.expandable-head a.toggle.textonly.expanded {
background-image: none;
}
/******************** Forms ********************/
form {
......
htdocs/theme/raw/templates/admin/site/cookieconsent.tpl
View file @ 9d52504d
{include file="header.tpl"}
<p>{$introtext1|safe}</p>
<p>{$introtext2|safe}</p>
<p><em>{$introtext3|safe}</em></p>
<table class="cb fullwidth">
<thead class="expandable-head">
<tr class="toggle">
<td colspan="2" class="toggle-padding"><strong>{str tag=readfulltext1 section=cookieconsent}</strong></td>
</tr>
</thead>
<tbody class="expandable-body">
<tr class="r0" id="directive_2009136_container">
<th>{str tag=directive2009136 section=cookieconsent}</th>
<td>
<p>{$introtext1|safe}</p>
<p>{$introtext2|safe}</p>
<p><em>{$introtext3|safe}</em></p>
<table class="cb fullwidth">
<thead class="expandable-head">
<tr>
<td colspan="2">
<a class="toggle" href="#">{str tag=readfulltext1 section=cookieconsent}</a>
</td>
</tr>
</thead>
<tbody class="expandable-body">
<tr class="r0" id="directive_2009136_container">
<th>{str tag=directive2009136 section=cookieconsent}</th>
<td>
{foreach from=$languages item=lang name=languages}
<a href="http://eur-lex.europa.eu/LexUriServ/LexUriServ.do?uri=OJ:L:2009:337:0011:0036:{$lang}:PDF" target="_blank" title="{str tag=readdirective$lang section=cookieconsent}">{$lang}</a>{if not $dwoo.foreach.languages.last} | {/if}
{/foreach}
</td>
</tr>
</tbody>
</table>
<p>{$introtext4|safe}</p>
<p>{$introtext5|safe}</p>
{$form|safe}
</td>
</tr>
</tbody>
</table>
<p>{$introtext4|safe}</p>
<p>{$introtext5|safe}</p>
{$form|safe}
{include file="footer.tpl"}
htdocs/theme/raw/templates/admin/site/cookieconsent2.tpl
View file @ 9d52504d
......@@ -10,8 +10,8 @@
</ol>
<table class="cb attachments fullwidth">
<thead class="expandable-head">
<tr class="toggle">
<td class="toggle-padding"><strong>{str tag=example section=cookieconsent}</strong></td>
<tr>
<td><a class="toggle" href="#">{str tag=example section=cookieconsent}</a></td>
</tr>
</thead>
<tbody class="expandable-body">
......@@ -31,8 +31,8 @@
</table>
<table class="cb attachments fullwidth">
<thead class="expandable-head">
<tr class="toggle">
<td class="toggle-padding"><strong>{str tag=itdidntwork section=cookieconsent}</strong></td>
<tr>
<td><a class="toggle" href="#">{str tag=itdidntwork section=cookieconsent}</a></td>
</tr>
</thead>
<tbody class="expandable-body">
......
htdocs/user/view.php
View file @ 9d52504d
......@@ -93,7 +93,7 @@ if (!$restrictedview) {
$viewcontent = $view->build_rows();
}
$javascript = array('paginator', 'lib/pieforms/static/core/pieforms.js', 'artefact/resume/resumeshowhide.js');
$javascript = array('paginator', 'lib/pieforms/static/core/pieforms.js', 'expandable');
$blocktype_js = $view->get_all_blocktype_javascript();
$javascript = array_merge($javascript, $blocktype_js['jsfiles']);
$inlinejs = "addLoadEvent( function() {\n" . join("\n", $blocktype_js['initjs']) . "\n});";
......
htdocs/view/artefact.php
View file @ 9d52504d
......@@ -130,7 +130,7 @@ addLoadEvent(function () {
});
EOF;
$javascript = array('paginator', 'viewmenu');
$javascript = array('paginator', 'viewmenu', 'expandable');
$extrastylesheets = array('style/views.css');
if ($artefact->get('allowcomments')) {
......
htdocs/view/blocks.php
View file @ 9d52504d
......@@ -139,7 +139,7 @@ if ($viewtheme && !isset($allowedthemes[$viewtheme])) {
exit;
}
$javascript = array('views', 'tinymce', 'paginator', 'js/jquery/jquery-ui/js/jquery-ui-1.8.19.custom.min.js', 'tablerenderer', 'artefact/file/js/filebrowser.js', 'lib/pieforms/static/core/pieforms.js','js/jquery/modernizr.custom.js');
$javascript = array('views', 'tinymce', 'paginator', 'expandable', 'js/jquery/jquery-ui/js/jquery-ui-1.8.19.custom.min.js', 'tablerenderer', 'artefact/file/js/filebrowser.js', 'lib/pieforms/static/core/pieforms.js','js/jquery/modernizr.custom.js');
$blocktype_js = $view->get_all_blocktype_javascript();
$javascript = array_merge($javascript, $blocktype_js['jsfiles']);
$inlinejs = "addLoadEvent( function() {\n" . join("\n", $blocktype_js['initjs']) . "\n});";
......
htdocs/view/view.php
View file @ 9d52504d
......@@ -157,7 +157,7 @@ function releaseview_submit() {
redirect($view->get_url());
}
$javascript = array('paginator', 'viewmenu', 'artefact/resume/resumeshowhide.js');
$javascript = array('paginator', 'viewmenu', 'expandable');
$blocktype_js = $view->get_all_blocktype_javascript();
$javascript = array_merge($javascript, $blocktype_js['jsfiles']);
$inlinejs = "addLoadEvent( function() {\n" . join("\n", $blocktype_js['initjs']) . "\n});";
......
Markdown is supported
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