Commit a902cc4e authored by Robert Lyon's avatar Robert Lyon

Bug 1667181: Adding in new layout and 'show more' pagination

Change-Id: I7081b319ff410aceeae01eb9d9f83fba95e99638
parent 56c7f911
......@@ -34,8 +34,8 @@ else {
}
$js = <<< EOF
jQuery(function($) {
p = {$pagination['javascript']}
jQuery(function() {
{$pagination['javascript']}
EOF;
if ($offset > 0) {
$js .= <<< EOF
......@@ -64,12 +64,12 @@ setpageicon($smarty, 'icon-file-text');
$smarty->assign('INLINEJAVASCRIPT', $js);
$smarty->assign('views', $views);
$smarty->assign('institution', 'mahara');
$smarty->assign('sitetemplate', View::SITE_TEMPLATE);
$smarty->assign('querystring', get_querystring());
$smarty->assign('pagination', $pagination['html']);
$html = $smarty->fetch('view/indexresults.tpl');
$smarty->assign('viewresults', $html);
$smarty->assign('pagination', $pagination['html']);
$smarty->assign('query', param_variable('query', null));
$smarty->assign('searchform', $searchform);
$smarty->assign('createviewform', $createviewform);
$smarty->display('view/index.tpl');
......@@ -307,3 +307,24 @@ function PaginatorProxy() {
// Create the paginator proxy
var paginatorProxy = new PaginatorProxy();
// 'Show more' pagination
function pagination_showmore(btn) {
var params = {};
params.offset = parseInt(btn.data('offset'), 10);
params.orderby = btn.data('orderby');
if (btn.data('group').length) {
params.group = btn.data('group');
}
if (btn.data('institution').length) {
params.institution = btn.data('institution');
}
sendjsonrequest(config['wwwroot'] + btn.data('jsonscript'), params, 'POST', function(data) {
var btnid = btn.prop('id');
btn.parent().replaceWith(data.data.tablerows);
// we have a new 'showmore' button so wire it up
jQuery('#' + btnid).on('click', function() {
pagination_showmore(jQuery(this));
});
});
}
......@@ -16,7 +16,7 @@ require(dirname(dirname(__FILE__)) . '/init.php');
require_once(get_config('libroot') . 'view.php');
$offset = param_integer('offset', 0);
$limit = param_integer('limit', 0);
$limit = param_integer('limit', 12);
$setlimit = param_boolean('setlimit', false);
$groupid = param_integer('group', null);
$institution = param_alpha('institution', null);
......@@ -53,16 +53,14 @@ if (!empty($groupid)) {
}
}
$pagination = build_pagination(array(
'url' => get_config('wwwroot') . 'view/groupviews.php?group=' . $group->id,
$pagination = build_showmore_pagination(array(
'count' => $data->count,
'limit' => $limit,
'offset' => $offset,
'setlimit' => $setlimit,
'datatable' => 'myviews',
'orderby' => $orderby,
'group' => $groupid,
'databutton' => 'showmorebtn',
'jsonscript' => 'json/viewlist.php',
'jumplinks' => 6,
'numbersincludeprevnext' => 2,
));
}
else {
......@@ -73,7 +71,7 @@ if (!empty($groupid)) {
else if (!empty($institution)) {
if ($institution == 'mahara') {
define('ADMIN', 1);
$templateviews = View::get_template_views();
$templateviews = View::get_site_template_views();
list($searchform, $data, $pagination) = View::views_by_owner(null, 'mahara');
if ($data->data && $offset == '0') {
$data->data = array_merge($templateviews, $data->data);
......@@ -90,6 +88,8 @@ else {
$smarty = smarty_core();
$smarty->assign('views', $data->data);
$smarty->assign('sitetemplate', View::SITE_TEMPLATE);
$smarty->assign('pagination', $pagination['html']);
if ($groupid && !$can_edit) {
$html = $smarty->fetch('view/indexgroupresults.tpl');
$smarty->assign('viewresults', $html);
......@@ -105,7 +105,6 @@ json_reply(false, array(
'message' => null,
'data' => array(
'tablerows' => $html,
'pagination' => $pagination['html'],
'pagination_js' => $pagination['javascript'],
'count' => $data->count,
'results' => $data->count . ' ' . ($data->count == 1 ? get_string('result') : get_string('results')),
......
......@@ -69,6 +69,7 @@ $string['editviewaccess'] = 'Edit page access';
$string['editaccess'] = 'Edit collection access';
$string['emptycollectionnoeditaccess'] = 'You cannot edit access to empty collections. Add some pages first.';
$string['emptycollection'] = 'Empty collection';
$string['manage'] = 'Manage';
$string['manageviews'] = 'Manage pages';
$string['manageviewsspecific'] = 'Manage pages in "%s"';
$string['name'] = 'Collection name';
......@@ -88,6 +89,10 @@ $string['smartevidence'] = 'SmartEvidence';
$string['update'] = 'Update';
$string['usecollectionname'] = 'Use collection name?';
$string['usecollectionnamedesc'] = 'If you wish to use the collection name instead of the block title, leave this checked.';
$string['numviewsincollection'] = array(
'%s page in collection',
'%s pages in collection',
);
$string['viewsaddedtocollection1'] = array(
'%s page added to collection.',
'%s pages added to collection.',
......
......@@ -151,6 +151,7 @@ $string['nmembers'] = array(
$string['memberrequests'] = 'Membership requests';
$string['declinerequest'] = 'Decline request';
$string['submittedviews'] = 'Submitted pages';
$string['submitted'] = 'Submitted';
$string['releaseview'] = 'Release page';
$string['releasecollection'] = 'Release collection';
$string['invite'] = 'Invite';
......
......@@ -129,6 +129,7 @@ $string['firstpage'] = 'First page';
$string['last'] = 'Last';
$string['lastpage'] = 'Last page';
$string['maxitemsperpage1'] = 'Results per page:';
$string['showmore'] = 'Show more';
$string['accept'] = 'Accept';
$string['memberofinstitutions'] = 'Member of %s';
......@@ -766,6 +767,7 @@ $string['filter'] = 'Filter';
$string['expand'] = 'Expand';
$string['collapse'] = 'Collapse';
$string['more...'] = 'More...';
$string['moreoptionsfor'] = 'More options for "%s"';
$string['details'] = 'details';
$string['nohelpfound'] = 'There was no help found for this item.';
$string['nohelpfoundpage'] = 'There was no help found for this page.';
......
......@@ -19,6 +19,11 @@ $string['editcontentandlayout'] = 'Edit content and layout';
$string['editlayout'] = 'Edit layout';
$string['editaccess'] = 'Edit access';
$string['editaccessfor'] = 'Edit access (ID %s)';
$string['manageaccess'] = 'Manage access';
$string['manageaccessfor'] = 'Manage access for "%s"';
$string['managekeys'] = 'Manage secret URLs';
$string['managekeysfor'] = 'Manage secret URLs for "%s"';
$string['accessrulesfor'] = 'Access rules for "%s"';
$string['next'] = 'Next';
$string['back'] = 'Back';
$string['title'] = 'Page title';
......@@ -71,6 +76,7 @@ $string['accessbetweendates3'] = 'Nobody can see this page before %s or after %s
$string['artefactsinthisview'] = 'Artefacts in this page';
$string['whocanseethisview'] = 'Who can see this page';
$string['view'] = 'page';
$string['panelmenu'] = 'Menu';
$string['vieworcollection'] = 'page or collection';
$string['views'] = 'pages';
$string['viewsandcollections'] = 'pages and collections';
......
This diff is collapsed.
......@@ -4227,6 +4227,56 @@ function build_pagination($params) {
}
/**
* Builds 'Show more' pagination for HTML display.
*
* This pagination is for adding a 'Show more' button when more results exist
* rather than 'paging' the results so the page only loads certain amount
* at a time but the user can see all loaded results in one view.
*
* This function takes one array that contains the options to configure the
* pagination.
* Required include:
* - jsonscript: Relative path to json script to return subsequent results
* - count: The total number of results to paginate for
* - limit: How many to show per fetch from db
* - offset: At which result to begin fetch for results
* - orderby: What order the results will be returned in
* - databutton: The ID of the 'Show more' button
*
* Optional include:
* - group: Group id the pagination is for
* - institution: Institution name the pagination is for
*/
function build_showmore_pagination($params) {
// Bail if the required attributes are not present
$required = array('jsonscript', 'count', 'limit', 'offset', 'orderby', 'databutton');
foreach ($required as $option) {
if (!isset($params[$option])) {
throw new ParameterException('You must supply option "' . $option . '" to build_pagination');
}
}
$output = $js = '';
if ((int) $params['count'] > ((int) $params['offset'] + (int) $params['limit'])) {
// Need to add 'showmore' button
$output = '<div class="showmore">' . "\n";
$output .= ' <div id="' . $params['databutton'] . '" class="btn btn-default"';
$output .= ' data-orderby="' . $params['orderby'] . '"';
$output .= ' data-offset="' . ((int) $params['offset'] + (int) $params['limit']) . '"';
$output .= ' data-group="' . (isset($params['group']) ? $params['group'] : '') . '"';
$output .= ' data-jsonscript="' . $params['jsonscript'] . '"';
$output .= ' data-institution="' . (isset($params['institution']) ? $params['institution'] : '') . '">';
$output .= get_string('showmore', 'mahara') . '</div>' . "\n";
$output .= '</div>';
$js = 'jQuery("#' . $params['databutton'] . '").on("click", function() {';
$js .= ' pagination_showmore(jQuery(this));';
$js .= '});' . "\n";
}
return array('html' => $output, 'javascript' => $js);
}
/**
* Used by build_pagination to build individual links. Shouldn't be used
* elsewhere.
......
......@@ -400,6 +400,92 @@ class BehatGeneral extends BehatBase {
$elementnode->click();
}
/**
* Click on the bottom right menu elipsis inside a list panel containing the specified text.
*
* @When /^I click on "(?P<row_text_string>(?:[^"]|\\")*)" panel menu$/
* @param string $rowtext The list/table row text
* @throws ElementNotFoundException
*/
public function i_click_on_in_panel($rowtext) {
// The panel container.
$rowtextliteral = $this->escaper->escapeLiteral($rowtext);
$exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the panel containing the text "' . $rowtext . '"');
$xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), concat(' ', 'panel', ' '))" .
" and contains(normalize-space(.), " . $rowtextliteral . ")]";
$rownode = $this->find('xpath', $xpath, $exception);
// Click on the elipsis button for the panel
$jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.elipsis-right button')[0].click();";
$this->getSession()->executeScript($jscode);
}
/**
* Click on the bottom right collection menu inside a list panel containing the specified text.
*
* @When /^I click on "(?P<row_text_string>(?:[^"]|\\")*)" panel collection$/
* @param string $rowtext The list/table row text
* @throws ElementNotFoundException
*/
public function i_click_on_in_panel_collection_box($rowtext) {
// The panel container.
$rowtextliteral = $this->escaper->escapeLiteral($rowtext);
$exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the panel containing the text "' . $rowtext . '"');
$xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), concat(' ', 'panel', ' '))" .
" and contains(normalize-space(.), " . $rowtextliteral . ")]";
$rownode = $this->find('xpath', $xpath, $exception);
// Click on the collection box for the panel
$jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.collnum')[0].click();";
$this->getSession()->executeScript($jscode);
}
/**
* Click on the link or button inside a panel menu containing the specified text.
*
* @When /^I click on "(?P<link_or_button>(?:[^"]|\\")*)" in "(?P<row_text_string>(?:[^"]|\\")*)" panel menu$/
* @param string $link_or_button we look for
* @param string $rowtext The panel menu text
* @throws ElementNotFoundException
*/
public function i_click_on_in_panel_menu($link_or_button, $rowtext) {
// The panel container.
$rowtextliteral = $this->escaper->escapeLiteral($rowtext);
$exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the panel containing the text "' . $rowtext . '"');
$xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), concat(' ', 'panel', ' '))" .
" and contains(normalize-space(.), " . $rowtextliteral . ")]";
$rownode = $this->find('xpath', $xpath, $exception);
// Click on the elipsis button for the panel
$jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find('.elipsis-right a:contains(" . $this->escapeDoubleQuotes($link_or_button) . ")')[0].click();";
$this->getSession()->executeScript($jscode);
}
/**
* Click on the link or button inside a panel collection list containing the specified text.
*
* @When /^I click on "(?P<link_or_button>(?:[^"]|\\")*)" in "(?P<row_text_string>(?:[^"]|\\")*)" panel collection$/
* @param string $link_or_button we look for
* @param string $rowtext The panel menu text
* @throws ElementNotFoundException
*/
public function i_click_on_in_panel_collection_menu($link_or_button, $rowtext) {
// The panel container.
$rowtextliteral = $this->escaper->escapeLiteral($rowtext);
$exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the panel containing the text "' . $rowtext . '"');
$xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), concat(' ', 'panel', ' '))" .
" and contains(normalize-space(.), " . $rowtextliteral . ")]";
$rownode = $this->find('xpath', $xpath, $exception);
// Click on the elipsis button for the panel
$jscode = "jQuery(\"div.panel h3:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\").siblings('.panel-footer').find(\"a:contains(" . $this->escapeDoubleQuotes($link_or_button) . ")\")[0].click();";
$this->getSession()->executeScript($jscode);
}
/**
* Click a row containing the specified text.
*
......@@ -426,6 +512,27 @@ class BehatGeneral extends BehatBase {
$this->getSession()->executeScript($jscode);
}
/**
* Click a panel header containing the specified text.
*
* @When /^I click the panel "(?P<row_text_string>(?:[^"]|\\")*)"$/
* @param string $rowtext the panel heading text
* @throws ElementNotFoundException
*/
public function i_click_panel($rowtext) {
// The panel container.
$rowtextliteral = $this->escaper->escapeLiteral($rowtext);
$exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the panel containing the text "' . $rowtext . '"');
$xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), concat(' ', 'panel', ' '))" .
" and contains(normalize-space(.), " . $rowtextliteral . ")]" .
"//a[contains(concat(' ', normalize-space(@class), ' '), ' title-link ')]";
$rownode = $this->find('xpath', $xpath, $exception);
$jscode = "jQuery(\"div.panel h3 a.title-link:contains(" . $this->escapeDoubleQuotes($rowtextliteral) . ")\")[0].click();";
$this->getSession()->executeScript($jscode);
}
/**
* Click a matrix point by being given a column,row pair
* NOTE: column and row start from number '0' so the first cell in a table is (0,0)
......
......@@ -320,3 +320,241 @@ h4.list-group-item-heading {
}
}
}
// Styles for the new page/collection layout
.panel-quarter {
position: relative;
&.panel-view {
background-color: #ddd;
.panel-heading,
.panel-body,
.panel-footer,
button.dropdown-toggle {
background-color: transparent;
}
&.panel-warning {
background-color: $state-warning-bg;
}
.panel-footer {
border-bottom: 2px solid #999;
}
&.site-template {
background: repeating-linear-gradient(
-45deg,
#ddd,
#ddd 10px,
#ccc 10px,
#ccc 20px
) !important;
}
}
&.panel-collection {
background-color: #fff;
.panel-heading,
.panel-body,
.panel-footer,
button.dropdown-toggle {
background-color: #fff;
}
&.panel-warning {
background-color: $state-warning-bg;
.panel-heading,
.panel-body,
.panel-footer,
button.dropdown-toggle {
background-color: $state-warning-bg;
}
}
.panel-footer {
border-bottom: 2px solid #ddd;
}
}
.panel-heading {
border-bottom: 1px solid transparent;
A {
padding: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.panel-body {
padding: 5px;
}
.panel-footer {
border-top: 1px solid transparent;
position: absolute;
width: 100%;
bottom: 0;
.dropdown-menu {
top: 100%;
}
.dropdown-toggle {
.collnum-arrow {
display: none;
}
.collnum {
display: block;
}
&.open {
.collnum-arrow {
display: inline-block;
}
.collnum {
display: none;
}
}
}
}
.access-list {
float: left;
.dropdown-menu {
width: 200%; /* to allow it to expand to almost 2 panel blocks wide */
max-height: 200px;
overflow: auto;
a {
white-space: normal;
background-color: $dropdown-bg;
padding: 5px;
&:hover {
background-color: $dropdown-link-hover-bg;
}
span.icon {
position: absolute;
padding-top: 5px;
}
span.link-text {
display: inline-block;
padding-left: 20px;
position: relative;
}
&.seperator {
border-bottom: 1px solid #aaa;
}
}
}
}
&.lastquarter {
.access-list {
ul {
left: auto;
right: 0;
}
}
}
@media (max-width: $screen-sm-min) {
&.lasthalf {
.access-list {
ul {
left: auto;
right: 0;
}
}
}
}
.elipsis-right {
float: right;
.dropdown-menu {
.view-details {
font-size: 12px;
padding: 0 5px 0 5px;
A {
display: inline !important;
padding: 0 !important;
}
}
}
}
.collection-list {
text-align: center;
float: right;
width: 26px;
a {
display: block;
}
border-radius: 3px;
&.list-small {
border: 1px solid #800000;
}
&.list-medium {
border: 1px solid #008000;
}
&.list-large {
border: 1px solid #000080;
}
&.open {
border: 1px solid transparent;
}
.dropdown-menu {
width: 200%; /* to allow it to expand to almost 2 panel blocks wide */
max-height: 200px;
overflow: auto;
a {
white-space: normal;
background-color: $dropdown-bg;
padding: 5px;
&:hover {
background-color: $dropdown-link-hover-bg;
}
span.icon {
position: absolute;
padding-top: 5px;
}
span.link-text {
display: inline-block;
padding-left: 20px;
position: relative;
}
}
}
}
&.firstquarter {
.collection-list {
ul {
left: 0;
right: auto;
}
}
}
@media (max-width: $screen-sm-min) {
&.firsthalf {
.collection-list {
ul {
left: 0;
right: auto;
}
}
}
}
.btn-default {
border: 1px solid transparent;
}
.dropdown-menu {
padding: 0;
margin: 0;
min-width: auto;
}
}
.showmore {
text-align: center;
clear: both;
}
\ No newline at end of file
......@@ -10,3 +10,20 @@
margin-left:0;
}
}
.panel-quarter {
width: 22%;
float: left;
margin-left: 4%;
height: 200px;
&.firstquarter {
margin-left:0;
}
@media (max-width: $screen-sm-min) {
width: 48%;
margin-left: 4%;
&.firsthalf {
margin-left:0;
}
}
}