From 61a7c3b179030a6438b391d7e4c3e74016bea905 Mon Sep 17 00:00:00 2001
From: Kathrin Osswald <kathrin.osswald@uni-ulm.de>
Date: Mon, 20 Mar 2017 11:02:47 +0100
Subject: [PATCH] Added back to top button with smooth scrolling.
---
CHANGES.md | 1 +
README.md | 4 +++
amd/build/backtotop.min.js | 1 +
amd/src/backtotop.js | 50 +++++++++++++++++++++++++++++++++++++
scss/post.scss | 15 +++++++++++
templates/columns2.mustache | 2 ++
6 files changed, 73 insertions(+)
create mode 100644 amd/build/backtotop.min.js
create mode 100644 amd/src/backtotop.js
diff --git a/CHANGES.md b/CHANGES.md
index 15b104e..3ede2bf 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 796dfe3..66c88b9 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 0000000..f6b611f
--- /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 0000000..19affe9
--- /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 9c64524..767208d 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 3f29ec8..b08137a 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}}
--
GitLab