Commit c97e40ac authored by Robert Lyon's avatar Robert Lyon
Browse files

Bug 1409546: Adding carousel type ability to matrix table



So that we can show only a portion of the pages and use a
'next'/'prev' toggle to scroll through them.

This works by hiding/showing columns based on the td.index number.

behatnotneeded - will test this in the next patch

Change-Id: Id15bde4f792294dd2f798987a378afbd496bbb55
Signed-off-by: Robert Lyon's avatarRobert Lyon <robertl@catalyst.net.nz>
parent 49a48366
......@@ -104,7 +104,69 @@ foreach ($evidence as $e) {
}
}
// $smarty->assign('INLINEJAVASCRIPT', $javascript . $inlinejs);
$inlinejs = <<<EOF
jQuery(function($) {
// Variable to adjust for the hiding/showing of columns
var minstart = 1; // The index of the last column before first page column, indexes start at zero so 1 = two columns
var curstart = 2; // The index of first page currently being displayed
var range = 4; // The number of pages to display
var curend = curstart + range; // The index of last page currently being displayed
var maxend = $( "#tablematrix tr th" ).length; // The number of columns in the table
function carousel_matrix() {
$('#tablematrix td:not(.special), #tablematrix th').each(function() {
var index = $(this).index();
if ((index > minstart && index < curstart) || index > curend) {
$(this).hide();
}
else {
$(this).show();
}
});
if (curstart <= (minstart + 1)) {
$('#prev').hide();
}
else {
$('#prev').show();
}
if (curend >= (maxend - 1)) {
$('#next').hide();
}
else {
$('#next').show();
}
}
$('#prev, #next').on('click', function(e) {
e.preventDefault();
var action = $(this).attr('id');
if (action == 'next') {
curend = Math.min(curend + 1, maxend - 1);
curstart = curend - range;
carousel_matrix();
}
if (action == 'prev') {
curstart = Math.max(curstart - 1, minstart + 1);
curend = curstart + range;
carousel_matrix();
}
});
// Setup
carousel_matrix();
$('.code div').hover(
function() {
$(this).find('span').removeClass('hidden');
},
function() {
$(this).find('span').addClass('hidden');
}
);
});
EOF;
$smarty->assign('INLINEJAVASCRIPT', $inlinejs);
$smarty->assign('maintitle', $collection->get('name'));
$smarty->assign('owner', $owner);
$smarty->assign('PAGEHEADING', null);
......
......@@ -9,7 +9,20 @@
</h1>
<p>{$description}</p>
<p>{str tag="addpages" section="module.framework"}</p>
<table class="fullwidth table tablematrix">
<table class="fullwidth table tablematrix" id="tablematrix">
<tr>
<td colspan="2">&nbsp;</td>
<td colspan="{$viewcount}" class="special">
<span class="btn btn-default" id="prev">
<span class="icon left icon-chevron-left" aria-hidden="true" role="presentation"></span>
Prev
</span>
<span class="btn btn-default next" id="next">
<span class="icon left icon-chevron-right" aria-hidden="true" role="presentation"></span>
Next
</span>
</td>
</tr>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
......@@ -24,7 +37,7 @@
{if $standard->options}
{foreach from=$standard->options key=ok item=option}
<tr{if $option->parent} class="sub"{/if}>
<td class="code"><div>{$option->shortname} <span class="hidden">{$option->name}<br>{$option->description}</span></div></td>
<td class="code"><div>{$option->shortname} <span class="hidden matrixtooltip">{$option->name}<br>{$option->description}</span></div></td>
<td>{if $completed[$option->id]}{$completed[$option->id]}{else}0{/if}</td>
{foreach from=$views key=vk item=view}
<td class="mid">{if $evidence[$framework][$option->id][$view->id].completed}
......
......@@ -8,6 +8,7 @@
th.viewtab {
text-align: center;
max-width: 70px;
}
td {
......@@ -33,6 +34,23 @@
&.code {
width: 20%;
}
}
}
&.special {
border-top: 0;
}
.next {
float: right;
}
.matrixtooltip {
z-index:2;
background-color: #fff;
border: 1px solid #999;
display: inline-block;
padding: 0 5px;
position: absolute;
}
}
}
\ No newline at end of file
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