MDL-66463 theme_boost: go to top link

theme/boost/amd/build/loader.min.js

@@ -1,2 +1,2 @@
-define ("theme_boost/loader",["jquery","./tether","core/event","core/custom_interaction_events"],function(a,b,c,d){window.jQuery=a;window.Tether=b;M.util.js_pending("theme_boost/loader:children");require(["theme_boost/aria","theme_boost/pending","theme_boost/util","theme_boost/alert","theme_boost/button","theme_boost/carousel","theme_boost/collapse","theme_boost/dropdown","theme_boost/modal","theme_boost/scrollspy","theme_boost/tab","theme_boost/tooltip","theme_boost/popover"],function(b){a("body").popover({trigger:"focus",selector:"[data-toggle=popover][data-trigger!=hover]",placement:"auto"});d.define(a("body"),[d.events.escape]);a("body").on(d.events.escape,"[data-toggle=popover]",function(){a(this).trigger("blur")});a("html").popover({container:"body",selector:"[data-toggle=popover][data-trigger=hover]",trigger:"hover",delay:{hide:500}});a("html").tooltip({selector:"[data-toggle=\"tooltip\"]"});a.fn.dropdown.Constructor.Default.flip=!1;a("a[data-toggle=\"tab\"]").on("shown.bs.tab",function(b){var c=a(b.target).attr("href");if(history.replaceState){history.replaceState(null,null,c)}else{location.hash=c}});var e=window.location.hash;if(e){a(".nav-link[href=\""+e+"\"]").tab("show")}c.getLegacyEvents().done(function(b){a(document).on(b.FILTER_CONTENT_UPDATED,function(){a("body").popover({selector:"[data-toggle=\"popover\"]",trigger:"focus"})})});b.init();M.util.js_complete("theme_boost/loader:children")});return{}});
+define ("theme_boost/loader",["jquery","./tether","core/event","core/custom_interaction_events"],function(a,b,c,d){window.jQuery=a;window.Tether=b;M.util.js_pending("theme_boost/loader:children");require(["theme_boost/aria","theme_boost/scroll","theme_boost/pending","theme_boost/util","theme_boost/alert","theme_boost/button","theme_boost/carousel","theme_boost/collapse","theme_boost/dropdown","theme_boost/modal","theme_boost/scrollspy","theme_boost/tab","theme_boost/tooltip","theme_boost/popover"],function(b,e){a("body").popover({trigger:"focus",selector:"[data-toggle=popover][data-trigger!=hover]",placement:"auto"});d.define(a("body"),[d.events.escape]);a("body").on(d.events.escape,"[data-toggle=popover]",function(){a(this).trigger("blur")});a("html").popover({container:"body",selector:"[data-toggle=popover][data-trigger=hover]",trigger:"hover",delay:{hide:500}});a("html").tooltip({selector:"[data-toggle=\"tooltip\"]"});a.fn.dropdown.Constructor.Default.flip=!1;a("a[data-toggle=\"tab\"]").on("shown.bs.tab",function(b){var c=a(b.target).attr("href");if(history.replaceState){history.replaceState(null,null,c)}else{location.hash=c}});var f=window.location.hash;if(f){a(".nav-link[href=\""+f+"\"]").tab("show")}c.getLegacyEvents().done(function(b){a(document).on(b.FILTER_CONTENT_UPDATED,function(){a("body").popover({selector:"[data-toggle=\"popover\"]",trigger:"focus"})})});b.init();this.scroll=new e;this.scroll.init();M.util.js_complete("theme_boost/loader:children")});return{}});
 //# sourceMappingURL=loader.min.js.map

theme/boost/amd/build/scroll.min.js

@@ -0,0 +1,2 @@
+define ("theme_boost/scroll",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.default=void 0;function b(a,b){if(!(a instanceof b)){throw new TypeError("Cannot call a class as a function")}}function c(a,b){for(var c=0,d;c<b.length;c++){d=b[c];d.enumerable=d.enumerable||!1;d.configurable=!0;if("value"in d)d.writable=!0;Object.defineProperty(a,d.key,d)}}function d(a,b,d){if(b)c(a.prototype,b);if(d)c(a,d);return a}var e=function(){function a(){b(this,a)}d(a,[{key:"init",value:function init(){this.scrollY=0;window.addEventListener("scroll",this.scrollHandler.bind(this));return this}},{key:"getScrollPosition",value:function getScrollPosition(){return window.pageYOffset||document.documentElement.scrollTop}},{key:"scrollHandler",value:function scrollHandler(){var a=document.querySelector("body"),b=this.getScrollPosition();if(b>=window.innerHeight){a.classList.add("scrolled")}else{a.classList.remove("scrolled")}}}]);return a}();a.default=e;return a.default});
+//# sourceMappingURL=scroll.min.js.map

theme/boost/amd/build/scroll.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scroll.js"],"names":["MoodleScroll","scrollY","window","addEventListener","scrollHandler","bind","pageYOffset","document","documentElement","scrollTop","body","querySelector","getScrollPosition","innerHeight","classList","add","remove"],"mappings":"wcA6BqBA,CAAAA,C,yEASV,CACH,KAAKC,OAAL,CAAe,CAAf,CACAC,MAAM,CAACC,gBAAP,CAAwB,QAAxB,CAAkC,KAAKC,aAAL,CAAmBC,IAAnB,CAAwB,IAAxB,CAAlC,EACA,MAAO,KACV,C,6DASmB,CAChB,MAAOH,CAAAA,MAAM,CAACI,WAAP,EAAsBC,QAAQ,CAACC,eAAT,CAAyBC,SACzD,C,qDAQe,IACNC,CAAAA,CAAI,CAAGH,QAAQ,CAACI,aAAT,CAAuB,MAAvB,CADD,CAENV,CAAO,CAAG,KAAKW,iBAAL,EAFJ,CAGZ,GAAIX,CAAO,EAAIC,MAAM,CAACW,WAAtB,CAAmC,CAC/BH,CAAI,CAACI,SAAL,CAAeC,GAAf,CAAmB,UAAnB,CACH,CAFD,IAEO,CACHL,CAAI,CAACI,SAAL,CAAeE,MAAf,CAAsB,UAAtB,CACH,CACJ,C","sourcesContent":["// This file is part of Moodle - http://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.\n\n/**\n * Manage user scroll in Moodle for future floating elements.\n *\n * @copyright  2020 Ferran Recio <ferran@moodle.org>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n/**\n * Moodle scroll handling. For now it just handle a \"scrolled\" class\n * on the body tag but in the near future could handle more floating\n * elements like option bars, docked elements or other active elements.\n *\n * @class MoodleScroll\n */\nexport default class MoodleScroll {\n\n    /**\n     * Initialise the scroll monitoring.\n     *\n     * @method  init\n     * @chainable\n     * @return {Object} this.\n     */\n    init() {\n        this.scrollY = 0;\n        window.addEventListener(\"scroll\", this.scrollHandler.bind(this));\n        return this;\n    }\n\n    /**\n     * Add special classes to body depending on scroll position.\n     *\n     * @method  update\n     * @chainable\n     * @return {Integer} current scroll position.\n     */\n    getScrollPosition() {\n        return window.pageYOffset || document.documentElement.scrollTop;\n    }\n\n    /**\n     * Add special classes to body depending on scroll position.\n     *\n     * @method  update\n     * @chainable\n     */\n    scrollHandler() {\n        const body = document.querySelector('body');\n        const scrollY = this.getScrollPosition();\n        if (scrollY >= window.innerHeight) {\n            body.classList.add('scrolled');\n        } else {\n            body.classList.remove('scrolled');\n        }\n    }\n}\n"],"file":"scroll.min.js"}

theme/boost/amd/src/loader.js

@@ -30,6 +30,7 @@ define(['jquery', './tether', 'core/event', 'core/custom_interaction_events'], f
     M.util.js_pending('theme_boost/loader:children');
 
     require(['theme_boost/aria',
+            'theme_boost/scroll',
             'theme_boost/pending',
             'theme_boost/util',
             'theme_boost/alert',
@@ -42,7 +43,7 @@ define(['jquery', './tether', 'core/event', 'core/custom_interaction_events'], f
             'theme_boost/tab',
             'theme_boost/tooltip',
             'theme_boost/popover'],
-            function(Aria) {
+            function(Aria, MoodleScroll) {
 
         // We do twice because: https://github.com/twbs/bootstrap/issues/10547
         jQuery('body').popover({
@@ -102,6 +103,8 @@ define(['jquery', './tether', 'core/event', 'core/custom_interaction_events'], f
         });
 
         Aria.init();
+        this.scroll = new MoodleScroll();
+        this.scroll.init();
         M.util.js_complete('theme_boost/loader:children');
     });
 

theme/boost/amd/src/scroll.js

@@ -0,0 +1,71 @@
+// 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/>.
+
+/**
+ * Manage user scroll in Moodle for future floating elements.
+ *
+ * @copyright  2020 Ferran Recio <ferran@moodle.org>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+/**
+ * Moodle scroll handling. For now it just handle a "scrolled" class
+ * on the body tag but in the near future could handle more floating
+ * elements like option bars, docked elements or other active elements.
+ *
+ * @class MoodleScroll
+ */
+export default class MoodleScroll {
+
+    /**
+     * Initialise the scroll monitoring.
+     *
+     * @method  init
+     * @chainable
+     * @return {Object} this.
+     */
+    init() {
+        this.scrollY = 0;
+        window.addEventListener("scroll", this.scrollHandler.bind(this));
+        return this;
+    }
+
+    /**
+     * Add special classes to body depending on scroll position.
+     *
+     * @method  update
+     * @chainable
+     * @return {Integer} current scroll position.
+     */
+    getScrollPosition() {
+        return window.pageYOffset || document.documentElement.scrollTop;
+    }
+
+    /**
+     * Add special classes to body depending on scroll position.
+     *
+     * @method  update
+     * @chainable
+     */
+    scrollHandler() {
+        const body = document.querySelector('body');
+        const scrollY = this.getScrollPosition();
+        if (scrollY >= window.innerHeight) {
+            body.classList.add('scrolled');
+        } else {
+            body.classList.remove('scrolled');
+        }
+    }
+}

theme/boost/lang/en/theme_boost.php

@@ -52,3 +52,4 @@ $string['region-side-pre'] = 'Right';
 $string['privacy:metadata:preference:draweropennav'] = 'The user\'s preference for hiding or showing the drawer menu navigation.';
 $string['privacy:drawernavclosed'] = 'The current preference for the navigation drawer is closed.';
 $string['privacy:drawernavopen'] = 'The current preference for the navigation drawer is open.';
+$string['totop'] = 'Go to top';

theme/boost/scss/moodle/core.scss

@@ -26,6 +26,32 @@ $bg-inverse-link-color: #fff !default;
     margin-top: 4px;
 }
 
+$gototop-bottom-position: 50px !default;
+
+#goto-top-link {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .7s ease 0s, visibility .1s ease .8s;
+    display: block;
+    position: fixed; /* IE compatibility hack */
+    @supports (position: sticky) {
+        position: sticky;
+    }
+    bottom: $gototop-bottom-position;
+
+    a {
+        position: absolute;
+        right: 0;
+        transform: translateY(-100%);
+    }
+}
+
+body.scrolled #goto-top-link {
+    opacity: 1;
+    visibility: visible;
+    transition: visibility 0s ease 0s, opacity .7s ease .1s;
+}
+
 .context-header-settings-menu .dropdown-toggle > .icon,
 #region-main-settings-menu .dropdown-toggle > .icon {
     height: 24px;

theme/boost/scss/preset/default.scss

@@ -55,6 +55,9 @@ $breadcrumb-bg:                     transparent !default;
 $breadcrumb-divider: "/" !default;
 $breadcrumb-divider-rtl: "/" !default;
 
+// Floating elements positions
+$gototop-bottom-position: 50px !default;
+
 // Alerts
 $alert-border-width:                0 !default;
 

theme/boost/style/moodle.css

@@ -9413,6 +9413,27 @@ input[disabled] {
   display: block;
   margin-top: 4px; }
 
+#goto-top-link {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity .7s ease 0s, visibility .1s ease .8s;
+  display: block;
+  position: fixed;
+  /* IE compatibility hack */
+  bottom: 50px; }
+  @supports (position: sticky) {
+    #goto-top-link {
+      position: sticky; } }
+  #goto-top-link a {
+    position: absolute;
+    right: 0;
+    transform: translateY(-100%); }
+
+body.scrolled #goto-top-link {
+  opacity: 1;
+  visibility: visible;
+  transition: visibility 0s ease 0s, opacity .7s ease .1s; }
+
 .context-header-settings-menu .dropdown-toggle > .icon,
 #region-main-settings-menu .dropdown-toggle > .icon {
   height: 24px;

theme/boost/templates/footer.mustache

@@ -17,6 +17,12 @@
 {{!
     Page footer.
 }}
+<div id="goto-top-link">
+    {{! go to top is sticky to footer so needs to be sibling }}
+    <a class="btn btn-light" role="button" href="#">
+        {{#pix}} i/up, core, {{#str}} totop, theme_boost {{/str}}{{/pix}}
+    </a>
+</div>
 <footer id="page-footer" class="py-3 bg-dark text-light">
     <div class="container">
         <div id="course-footer">{{{ output.course_footer }}}</div>

theme/classic/style/moodle.css

@@ -9618,6 +9618,27 @@ input[disabled] {
   display: block;
   margin-top: 4px; }
 
+#goto-top-link {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity .7s ease 0s, visibility .1s ease .8s;
+  display: block;
+  position: fixed;
+  /* IE compatibility hack */
+  bottom: 50px; }
+  @supports (position: sticky) {
+    #goto-top-link {
+      position: sticky; } }
+  #goto-top-link a {
+    position: absolute;
+    right: 0;
+    transform: translateY(-100%); }
+
+body.scrolled #goto-top-link {
+  opacity: 1;
+  visibility: visible;
+  transition: visibility 0s ease 0s, opacity .7s ease .1s; }
+
 .context-header-settings-menu .dropdown-toggle > .icon,
 #region-main-settings-menu .dropdown-toggle > .icon {
   height: 24px;