Skip to content

GitLab

Commit bc0ee3e1 authored by Jen Zajac's avatar Jen Zajac
Browse files
Options

Secondary navigation for collections BUG 1465107 

  behatnotneeded

Change-Id: Ic2ec9d28abcb742c0c3e9278d115d8fee65f50ab
parent bb921fd8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 291 additions and 94 deletions
htdocs/js/collection-navigation.js 0 → 100644
View file @ bc0ee3e1
/**
* Previous and next buttons for navigating between
* pages within a collection
*
* @package mahara
* @subpackage core
* @author Catalyst IT Ltd
* @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.
*
*/
jQuery(function($) {
"use strict";
// this feature relies on a custom dropdown element which is initialised in style.js
// initialise previous and next buttons
(function() {
var currentIndex = $('#currentindex').data('currentindex');
var indexLength = $('.custom-dropdown > ul').children().length;
function findLink(target) {
$('.custom-dropdown > ul').children().each(function() {
var elem = $($(this).children()[0]);
if (elem.data('index') === target && elem.data('location')) {
document.location.href = elem.data('location');
}
});
}
// setup prev
if (currentIndex !== 0) {
$('.prevpage').removeClass('invisible');
$('.prevpage').click(function() {
var target = currentIndex - 1;
findLink(target);
});
}
// setup next
if (currentIndex !== (indexLength - 1)) {
$('.nextpage').removeClass('invisible');
$('.nextpage').click(function() {
var target = currentIndex + 1;
findLink(target);
});
}
}());
});
htdocs/lang/en.utf8/collection.php
View file @ bc0ee3e1
......@@ -111,3 +111,7 @@ $string['copycollection'] = 'Copy collection';
$string['youhaveonecollection'] = 'You have 1 collection.';
$string['youhavecollections'] = 'You have %s collections.';
$string['collectionssharedtogroup'] = 'Collections shared with this group';
$string['nextpage'] = 'Next page';
$string['prevpage'] = 'Previous page';
$string['viewingpage'] = 'You are on page ';
$string['navtopage'] = 'Navigate to page:';
htdocs/theme/mahara/sass/components/_custom-dropdown.scss 0 → 100644
View file @ bc0ee3e1
.custom-dropdown {
// c.f. collection navigation. uses many of the same styles as _dropdown
position: relative;
text-align: left;
> ul {
// hidden list
z-index: 4; // to go over at least .inner-link elements
position: absolute;
top: calc(100% - 1px);
width: 100%;
list-style-type: none;
max-height: 200px;
overflow-y: auto;
padding: 0;
margin: 0;
background-color: $body-bg;
border: 1px solid $btn-default-border;
> li > a {
// option links
display: block;
padding: 5px;
color: $dropdown-link-color;
&:hover {
background-color: $dropdown-link-hover-bg;
color: $dropdown-link-hover-color;
text-decoration: none;
}
}
> li > span {
// selected item
display: block;
background-color: $dropdown-link-active-bg;
color: $dropdown-link-active-color;
padding: 5px;
cursor: default;
}
}
&.dropdown span.picker {
background-color: $body-bg;
cursor: default;
}
}
htdocs/theme/mahara/sass/features/_collection-navigation.scss 0 → 100644
View file @ bc0ee3e1
.collection-nav {
background-color: $panel-default-heading-bg;
padding: 10px;
margin-bottom: 20px;
border-top: 1px solid $btn-default-border;
@include border-bottom-radius(3px);
.prevpage {
float: left;
background-color: $body-bg;
}
.nextpage {
float: right;
background-color: $body-bg;
}
nav {
margin: 0 auto;
p.navlabel {
display: inline-block;
margin-right: 10px;
}
.custom-dropdown {
display: inline-block;
min-width: 200px;
}
}
}
htdocs/theme/mahara/sass/utilities/_index.scss
View file @ bc0ee3e1
......@@ -58,6 +58,7 @@
@import "../components/carousel";
@import "../components/contextual-help";
@import "../components/cells";
@import "../components/custom-dropdown";
@import "../components/dropzone-previews";
@import "../components/indicator";
@import "../components/label";
......@@ -72,6 +73,7 @@
// Feature related sass. We avoid this where we can in favour of reusable components
@import "../features/collection-navigation";
@import "../features/comment";
@import "../features/dashboard-widget";
@import "../features/filebrowser";
......
htdocs/theme/mahara/style/style.css
View file @ bc0ee3e1
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/theme/raw/js/theme.js
View file @ bc0ee3e1
......@@ -140,6 +140,27 @@ jQuery(function($) {
});
}
function setupCustomDropdown() {
/*
* Custom dropdown creates a fake select box that can have items of an
* arbitrary length (unlike attachInputDropdown which uses a select).
* For screenreaders, it works like a UL of links.
* Keyboard nav doesn't work for sighted users though.
*/
// open the dropdown when it is clicked
$('.custom-dropdown > .picker').click(function() {
$(this).parent().children('ul').toggleClass('hidden');
});
// close the dropdown when there is a click anywhere outside it
$(document).on('click', function(event) {
if (!$(event.target).closest('.custom-dropdown').length) {
$('.custom-dropdown').children('ul').addClass('hidden');
}
});
}
$(window).on('resize colresize', function(){
carouselHeight();
initThumbnailMasonry();
......@@ -164,6 +185,10 @@ jQuery(function($) {
attachInputDropdown();
}
if ($('.custom-dropdown') .length > 0) {
setupCustomDropdown();
}
$(".js-select2 select").select2({});
});
htdocs/theme/raw/sass/components/_custom-dropdown.scss 0 → 100644
View file @ bc0ee3e1
.custom-dropdown {
// cf. collection navigation. uses many of the same styles as _dropdown
position: relative;
text-align: left;
> ul {
// hidden list
z-index: 4; // to go over at least .inner-link elements
position: absolute;
top: calc(100% - 1px);
width: 100%;
list-style-type: none;
max-height: 200px;
overflow-y: auto;
padding: 0;
margin: 0;
background-color: $body-bg;
border: 1px solid $btn-default-border;
> li > a {
// option links
display: block;
padding: 5px;
color: $dropdown-link-color;
&:hover {
background-color: $dropdown-link-hover-bg;
color: $dropdown-link-hover-color;
text-decoration: none;
}
}
> li > span {
// selected item
display: block;
background-color: $dropdown-link-active-bg;
color: $dropdown-link-active-color;
padding: 5px;
cursor: default;
}
}
&.dropdown span.picker {
background-color: $body-bg;
cursor: pointer;
}
}
htdocs/theme/raw/sass/features/_collection-navigation.scss 0 → 100644
View file @ bc0ee3e1
.collection-nav {
background-color: $panel-default-heading-bg;
padding: 10px;
margin-bottom: 20px;
border-top: 1px solid $btn-default-border;
@include border-bottom-radius(3px);
text-align: center;
h2 {
clear: both;
@media (min-width: $screen-md-min) {
clear: none;
}
}
.prevpage {
float: left;
background-color: $body-bg;
margin-right: 10px;
margin-bottom: 10px;
}
.nextpage {
float: right;
background-color: $body-bg;
margin-left: 10px;
margin-bottom: 10px;
}
p.navlabel {
display: inline-block;
margin-right: 10px;
}
nav.custom-dropdown {
margin: 0 auto;
display: inline-block;
min-width: 200px;
}
@media (min-width: $screen-md-min) {
h2 {
clear: none;
}
}
}
htdocs/theme/raw/sass/utilities/_index.scss
View file @ bc0ee3e1
......@@ -58,6 +58,7 @@
@import "../components/carousel";
@import "../components/contextual-help";
@import "../components/cells";
@import "../components/custom-dropdown";
@import "../components/dropzone-previews";
@import "../components/indicator";
@import "../components/label";
......@@ -72,6 +73,7 @@
// Feature related sass. We avoid this where we can in favour of reusable components
@import "../features/collection-navigation";
@import "../features/comment";
@import "../features/dashboard-widget";
@import "../features/filebrowser";
......
htdocs/theme/raw/style/select2.css
View file @ bc0ee3e1
This diff is collapsed.
htdocs/theme/raw/style/style.css
View file @ bc0ee3e1
This diff is collapsed.
htdocs/theme/raw/style/tinymce.css
View file @ bc0ee3e1
This diff is collapsed.
htdocs/theme/raw/templates/collectionnav.tpl
View file @ bc0ee3e1
<div id="collectionnavwrap">
{foreach from=$collection item=chunk name=cchunk}
<nav class="mbxl {if $dwoo.foreach.cchunk.first}colnav1{else}colnav-extra{/if}">
<ol class="colnav list-inline unstyled">
{foreach from=$chunk item=view}
<li{if $view->view == $viewid} class="selected"{if $haslots}{$showmore=true}{/if}{/if}>
{if $view->view != $viewid}
<a class="colnav" href="{$view->fullurl}">{$view->title}</a>
{else}
<span>{$view->title}</span>
{/if}
</li>
{/foreach}
{if $dwoo.foreach.cchunk.first && !$dwoo.foreach.cchunk.last}{$haslots=true}{/if}
</ol>
</nav>
{/foreach}
<div id="collectionnavwrap" class="collection-nav">
{if count($collection) > 1}
<button type="button" class="btn btn-default prevpage invisible">{str tag="prevpage" section="collection"}</button>
<button type="button" class="btn btn-default nextpage invisible">{str tag="nextpage" section="collection"}</button>
{/if}
<div id="colnav-showmore-div" class="colnav-showmore"></div>
{if $dwoo.foreach.cchunk.index > 1}
<script>{literal}
function toggleShowmore() {
forEach (getElementsByTagAndClassName('div', 'colnav-extra', null), partial(toggleElementClass, 'hidden'));
{if $maintitle}<h2>{str tag="Collection" section="collection"}: {$maintitle|safe}</h2>{/if}
var elem = document.getElementById('colnav-more-a');
if (showmore) {
document.getElementById('colnav-more-a').innerHTML = '«';
} else {
document.getElementById('colnav-more-a').innerHTML = '…';
}
{* should the collection description go here? might need a read more concertina to prevent it being too long *}
var links = getElementsByTagAndClassName('a', 'colnav', null);
if (showmore) {
for (var index = 0; index < links.length; index ++) {
links[index].href = links[index].href + (links[index].href.indexOf('?') == -1 ? '?' : '&') + 'showmore=1';
}
} else {
for (var index = 0; index < links.length; index ++) {
links[index].href = links[index].href.replace(/[?&]showmore=1/, '');
}
}
}
addLoadEvent(function() {
{/literal}{if $showmore}{literal}
showmore = {/literal}{$showmore}{literal};
{/literal}{/if}{literal}
{/literal}{if $haslots}{literal}
var a = document.createElement('a');
a.setAttribute('id', 'colnav-more-a');
a.setAttribute('href', '');
a.appendChild(document.createTextNode('«'));
var li = document.createElement('li');
li.setAttribute('id', 'colnav-more');
li.setAttribute('class', 'nojs-hidden');
li.appendChild(a);
var ul = document.createElement('ul');
ul.setAttribute('class', 'colnav');
ul.appendChild(li);
var div = document.getElementById('colnav-showmore-div');
div.appendChild(ul);
{/literal}{/if}{literal}
if (!showmore) {
toggleShowmore();
} else {
var links = getElementsByTagAndClassName('a', 'colnav', null);
for (var index = 0; index < links.length; index ++) {
links[index].href = links[index].href + (links[index].href.indexOf('?') == -1 ? '?' : '&') + 'showmore=1';
}
}
connect('colnav-more', 'onclick', function(e) {
e.stop();
showmore = !showmore;
toggleShowmore();
return false;
});
});{/literal}
</script>
{/if}
<div class="cb"></div>
<p class="navlabel">{str tag="navtopage" section="collection"}</p>
<nav class="custom-dropdown dropdown">
<ul class="hidden">
{foreach from=$collection item=view name=page}
<li>
{if $view->view == $viewid}
{$currentindex = $dwoo.foreach.page.index}
<span data-index="{$dwoo.foreach.page.index}" data-location="{$view->fullurl}">{$view->title}</span>
{else}
<a href="{$view->fullurl}" data-index="{$dwoo.foreach.page.index}" data-location="{$view->fullurl}">{$view->title}</a>
{/if}
</li>
{/foreach}
</ul>
<span class="picker form-control">{str tag="viewingpage" section="collection"}<span id="currentindex" data-currentindex="{$currentindex}">{$currentindex + 1}</span>/{count($collection)}</span>
</nav>
</div>
htdocs/theme/raw/templates/view/view.tpl
View file @ bc0ee3e1
{include file="header.tpl"}
{if $collection}
{include file=collectionnav.tpl}
{/if}
{if $notrudeform}
<div class="alert alert-danger">
{$notrudeform|safe}
......@@ -8,8 +12,11 @@
{if $maintitle}
<h1 id="viewh1" class="page-header">
{if $title}<span class="subsection-heading">{$title}</span>{/if}
<span class="section-heading">{if $title} | {/if}{$maintitle|safe}</span>
{if $title}
<span class="subsection-heading">{$title}</span>
{else}
<span class="section-heading">{$maintitle|safe}</span>
{/if}
</h1>
{/if}
......@@ -82,10 +89,6 @@
{/if}
</div>
{if $collection}
{include file=collectionnav.tpl}
{/if}
<div id="view-description" class="pbl">{$viewdescription|clean_html|safe}</div>
<div id="view">
......
htdocs/view/view.php
View file @ bc0ee3e1
......@@ -191,7 +191,7 @@ function releaseview_submit() {
redirect($view->get_url());
}
$javascript = array('paginator', 'viewmenu', 'author');
$javascript = array('paginator', 'viewmenu', 'author', 'js/collection-navigation.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});";
......@@ -321,9 +321,7 @@ if ($collection) {
$shownav = $collection->get('navigation');
if ($shownav) {
if ($views = $collection->get('views')) {
if (count($views['views']) > 1) {
$smarty->assign_by_ref('collection', array_chunk($views['views'], 5));
}
$smarty->assign('collection', $views['views']);
}
}
}
......
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