diff --git a/CHANGES.md b/CHANGES.md index 15b104e336ed74a2fda9939a93f91920e78182cc..3ede2bfce91f0c70dab3b92a898646680b18a056 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -6,6 +6,7 @@ Changes ### Unreleased +* 2017-03-17 - Added back to top button with smooth scrolling. * 2017-03-15 - Setting to choose if switched role information should be displayed beneath course header. * 2017-03-13 - Setting to be able to upload a favicon. * 2017-03-10 - Setting to be able to display the title for the first course section (section 0) again. diff --git a/README.md b/README.md index 796dfe328f7d87fdb494f3a81ec608dde33052da..66c88b91db155c620a2ffbb673487353fdfef25b 100644 --- a/README.md +++ b/README.md @@ -95,6 +95,10 @@ The course settings icon will now be displayed on all sites that renders the cou We added the course edit on / off button to the course header again like it was displayed before theme_boost for faster accessibility. +### Back to top button + +We added a back to top button that appears in the right bottom corner when the user scrolls down the page. With a click on it the page scrolls back to top smoothly and the button will disappear again. + Further information ------------------- diff --git a/amd/build/backtotop.min.js b/amd/build/backtotop.min.js new file mode 100644 index 0000000000000000000000000000000000000000..f6b611f649dd372ed573a104d6373b3d3422f4c3 --- /dev/null +++ b/amd/build/backtotop.min.js @@ -0,0 +1 @@ +define(["jquery"],function(a){return a(document).ready(function(){a("#page-footer").after('<i class="fa fa-chevron-circle-up fa-3x" id="back-to-top"></i>'),a(window).scroll(function(){a(this).scrollTop()>220?a("#back-to-top").fadeIn(500):a("#back-to-top").fadeOut(500)}),a("#back-to-top").click(function(b){return b.preventDefault(),a("html, body").animate({scrollTop:0},500),!1})}),{}}); \ No newline at end of file diff --git a/amd/src/backtotop.js b/amd/src/backtotop.js new file mode 100644 index 0000000000000000000000000000000000000000..19affe967621b33d02b888f4654b8432fc29e80d --- /dev/null +++ b/amd/src/backtotop.js @@ -0,0 +1,50 @@ +// This file is part of Moodle - http://moodle.org/ +// +// Moodle is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// Moodle is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// +// You should have received a copy of the GNU General Public License +// along with Moodle. If not, see <http://www.gnu.org/licenses/>. + +/** + * Theme Boost Campus - JS code back to top button + * + * @package theme_boost_campus + * @copyright 2017 Kathrin Osswald, Ulm University <kathrin.osswald@uni-ulm.de> + * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later + */ + +define(['jquery'], function($) { + + $(document).ready(function() { + + // Add a fontawesome icon after the footer as the back to top button. + $('#page-footer').after('<i class="fa fa-chevron-circle-up fa-3x" id="back-to-top"></i>'); + + // This function fades the button in when the page is scrolled down or fades it out if the user is at the top of the page. + $(window).scroll(function() { + if ($(this).scrollTop() > 220) { + $('#back-to-top').fadeIn(500); + } else { + $('#back-to-top').fadeOut(500); + } + }); + + // This function scrolls the page to top with a duration of 500ms. + $('#back-to-top').click(function(event) { + event.preventDefault(); + $('html, body').animate({scrollTop: 0}, 500); + return false; + }); + }); + + return {}; + +}); diff --git a/scss/post.scss b/scss/post.scss index 9c64524a3e54fbff9557b4bff94081faeb04359f..767208d81dd94380af23aeeabed19d42c0e03e13 100644 --- a/scss/post.scss +++ b/scss/post.scss @@ -207,3 +207,18 @@ body.path-course-view #section-0 h3.accesshide { font-size: $font-size-h3; } } + + +/*------------------------------------ + Additional Elements + -------------------------------------*/ + +/* Back to top button */ +#back-to-top { + display: none; + position: fixed; + bottom: 0.5em; + right: 0.5em; + color: $brand-primary; + cursor: pointer; +} diff --git a/templates/columns2.mustache b/templates/columns2.mustache index 3f29ec85435bd7c2b166025377df838d68103020..b08137a529ab0e365975faa6edba12df67aa7c7c 100644 --- a/templates/columns2.mustache +++ b/templates/columns2.mustache @@ -51,6 +51,7 @@ {{! MODIFICATION: * Remove section for footer blocks with own mustache template * Add theme_boost_campus/nav-drawer template instead of theme_boost/nav-drawer template + * Require own javascript module for back to top button functionality }} {{{ output.doctype }}} <html {{{ output.htmlattributes }}}> @@ -107,4 +108,5 @@ require(['theme_boost/loader']); require(['theme_boost/drawer'], function(mod) { mod.init(); }); +require(['theme_boost_campus/backtotop']); {{/js}}