MDL-76783 theme_boost: sticky footer js control

lib/amd/build/sticky-footer.min.js

@@ -0,0 +1,14 @@
+define("core/sticky-footer",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.registerManager=_exports.init=_exports.enableStickyFooter=_exports.disableStickyFooter=void 0;
+/**
+   * Sticky footer wrapper module.
+   *
+   * Themes are responsible for implementing the sticky footer. However,
+   * modules can interact with the sticky footer using this module.
+   *
+   * @module     core/sticky-footer
+   * @copyright  2023 Ferran Recio <ferran@moodle.com>
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */
+let manager={},enabled=!1,initialized=!1;const SELECTORS_STICKYFOOTER=".stickyfooter",CLASSES_INVISIBLE="v-hidden",enableStickyFooter=()=>{var _document$querySelect;(enabled=!0,void 0!==manager.enableStickyFooter)?manager.enableStickyFooter():null===(_document$querySelect=document.querySelector(SELECTORS_STICKYFOOTER))||void 0===_document$querySelect||_document$querySelect.classList.remove(CLASSES_INVISIBLE)};_exports.enableStickyFooter=enableStickyFooter;const disableStickyFooter=()=>{var _document$querySelect2;(enabled=!1,void 0!==manager.disableStickyFooter)?manager.disableStickyFooter():null===(_document$querySelect2=document.querySelector(SELECTORS_STICKYFOOTER))||void 0===_document$querySelect2||_document$querySelect2.classList.add(CLASSES_INVISIBLE)};_exports.disableStickyFooter=disableStickyFooter;_exports.registerManager=themeManager=>{manager=themeManager,enabled&&enableStickyFooter()};_exports.init=()=>{var _document$querySelect3;if(initialized)return;initialized=!0;(null===(_document$querySelect3=document.querySelector(SELECTORS_STICKYFOOTER))||void 0===_document$querySelect3?void 0:_document$querySelect3.dataset.disable)?disableStickyFooter():enableStickyFooter()}}));
+
+//# sourceMappingURL=sticky-footer.min.js.map

lib/amd/build/sticky-footer.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-footer.min.js","sources":["../src/sticky-footer.js"],"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 * Sticky footer wrapper module.\n *\n * Themes are responsible for implementing the sticky footer. However,\n * modules can interact with the sticky footer using this module.\n *\n * @module     core/sticky-footer\n * @copyright  2023 Ferran Recio <ferran@moodle.com>\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\n\nlet manager = {};\n\nlet enabled = false;\n\nlet initialized = false;\n\nconst SELECTORS = {\n    STICKYFOOTER: '.stickyfooter',\n};\n\nconst CLASSES = {\n    INVISIBLE: 'v-hidden',\n};\n\n/**\n * Enable sticky footer in the page.\n */\nexport const enableStickyFooter = () => {\n    enabled = true;\n    if (manager.enableStickyFooter === undefined) {\n        document.querySelector(SELECTORS.STICKYFOOTER)?.classList.remove(CLASSES.INVISIBLE);\n        return;\n    }\n    manager.enableStickyFooter();\n};\n\n/**\n * Disable sticky footer in the page.\n */\nexport const disableStickyFooter = () => {\n    enabled = false;\n    if (manager.disableStickyFooter === undefined) {\n        document.querySelector(SELECTORS.STICKYFOOTER)?.classList.add(CLASSES.INVISIBLE);\n        return;\n    }\n    manager.disableStickyFooter();\n};\n\n/**\n * Register the theme sticky footer methods.\n *\n * @param {Object} themeManager the manager object with all the needed methods.\n * @param {Function} themeManager.enableStickyFooter enable sticky footer method\n * @param {Function} themeManager.disableStickyFooter disable sticky footer method\n */\nexport const registerManager = (themeManager) => {\n    manager = themeManager;\n    if (enabled) {\n        enableStickyFooter();\n    }\n};\n\n/**\n * Initialize the module if the theme does not implement its own init.\n */\nexport const init = () => {\n    if (initialized) {\n        return;\n    }\n    initialized = true;\n\n    const isDisabled = document.querySelector(SELECTORS.STICKYFOOTER)?.dataset.disable;\n    if (isDisabled) {\n        disableStickyFooter();\n    } else {\n        enableStickyFooter();\n    }\n};\n"],"names":["manager","enabled","initialized","SELECTORS","CLASSES","enableStickyFooter","undefined","document","querySelector","classList","remove","disableStickyFooter","add","themeManager","_document$querySelect3","dataset","disable"],"mappings":";;;;;;;;;;;IA2BIA,QAAU,GAEVC,SAAU,EAEVC,aAAc,QAEZC,uBACY,gBAGZC,kBACS,WAMFC,mBAAqB,gCAC9BJ,SAAU,OACyBK,IAA/BN,QAAQK,oBAIZL,QAAQK,mDAHJE,SAASC,cAAcL,gFAAyBM,UAAUC,OAAON,yEAS5DO,oBAAsB,iCAC/BV,SAAU,OAC0BK,IAAhCN,QAAQW,qBAIZX,QAAQW,qDAHJJ,SAASC,cAAcL,kFAAyBM,UAAUG,IAAIR,8FAatCS,eAC5Bb,QAAUa,aACNZ,SACAI,oCAOY,mCACZH,mBAGJA,aAAc,kCAEKK,SAASC,cAAcL,iEAAvBW,uBAAgDC,QAAQC,SAEvEL,sBAEAN"}

lib/amd/src/sticky-footer.js

@@ -0,0 +1,95 @@
+// 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/>.
+
+/**
+ * Sticky footer wrapper module.
+ *
+ * Themes are responsible for implementing the sticky footer. However,
+ * modules can interact with the sticky footer using this module.
+ *
+ * @module     core/sticky-footer
+ * @copyright  2023 Ferran Recio <ferran@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+
+let manager = {};
+
+let enabled = false;
+
+let initialized = false;
+
+const SELECTORS = {
+    STICKYFOOTER: '.stickyfooter',
+};
+
+const CLASSES = {
+    INVISIBLE: 'v-hidden',
+};
+
+/**
+ * Enable sticky footer in the page.
+ */
+export const enableStickyFooter = () => {
+    enabled = true;
+    if (manager.enableStickyFooter === undefined) {
+        document.querySelector(SELECTORS.STICKYFOOTER)?.classList.remove(CLASSES.INVISIBLE);
+        return;
+    }
+    manager.enableStickyFooter();
+};
+
+/**
+ * Disable sticky footer in the page.
+ */
+export const disableStickyFooter = () => {
+    enabled = false;
+    if (manager.disableStickyFooter === undefined) {
+        document.querySelector(SELECTORS.STICKYFOOTER)?.classList.add(CLASSES.INVISIBLE);
+        return;
+    }
+    manager.disableStickyFooter();
+};
+
+/**
+ * Register the theme sticky footer methods.
+ *
+ * @param {Object} themeManager the manager object with all the needed methods.
+ * @param {Function} themeManager.enableStickyFooter enable sticky footer method
+ * @param {Function} themeManager.disableStickyFooter disable sticky footer method
+ */
+export const registerManager = (themeManager) => {
+    manager = themeManager;
+    if (enabled) {
+        enableStickyFooter();
+    }
+};
+
+/**
+ * Initialize the module if the theme does not implement its own init.
+ */
+export const init = () => {
+    if (initialized) {
+        return;
+    }
+    initialized = true;
+
+    const isDisabled = document.querySelector(SELECTORS.STICKYFOOTER)?.dataset.disable;
+    if (isDisabled) {
+        disableStickyFooter();
+    } else {
+        enableStickyFooter();
+    }
+};

lib/classes/output/sticky_footer.php

@@ -46,6 +46,11 @@ class sticky_footer implements named_templatable, renderable {
      */
     protected $stickyclasses = 'justify-content-end';
 
+    /**
+     * @var bool if the footer should auto enable or not.
+     */
+    protected $autoenable = true;
+
     /**
      * @var array extra HTML attributes (attribute => value).
      */
@@ -75,6 +80,15 @@ class sticky_footer implements named_templatable, renderable {
         $this->stickycontent = $stickycontent;
     }
 
+    /**
+     * Set the auto enable value.
+     *
+     * @param bool $autoenable the footer content
+     */
+    public function set_auto_enable(bool $autoenable) {
+        $this->autoenable = $autoenable;
+    }
+
     /**
      * Add extra classes to the sticky footer.
      *
@@ -111,11 +125,15 @@ class sticky_footer implements named_templatable, renderable {
                 'value' => $value,
             ];
         }
-        return [
+        $data = [
             'stickycontent' => (string)$this->stickycontent,
             'stickyclasses' => $this->stickyclasses,
             'extras' => $extras,
         ];
+        if (!$this->autoenable) {
+            $data['disable'] = true;
+        }
+        return $data;
     }
 
     /**

lib/templates/sticky_footer.mustache

@@ -22,6 +22,15 @@
     Sticky footer behaviour depends on the theme. The default template is
     a regular element.
 
+    Classes required for JS:
+    * none
+
+    Data attributes optional for JS:
+    * data-disable Number|String - If the sticky footer should be disabled by default
+
+    Context variables required for this template:
+    * disable Boolean - if the sticky footer should be loaded hidden
+
     Example context (json):
     {
         "stickycontent" : "<a href=\"#\">Moodle</a>",
@@ -37,6 +46,9 @@
 <div
     id="sticky-footer"
     class="{{$ stickyclasses }}{{stickyclasses}}{{/ stickyclasses }}"
+    {{$ disable }}
+        {{#disable}} data-disable="true" {{/disable}}
+    {{/ disable }}
     {{#extras}}
     {{attribute}}="{{value}}"
     {{/extras}}
@@ -45,3 +57,9 @@
         {{{stickycontent}}}
     {{/ stickycontent }}
 </div>
+{{#js}}
+require(['core/sticky-footer'], function(footer) {
+    footer.init();
+});
+
+{{/js}}

theme/boost/amd/build/sticky-footer.min.js

@@ -1,10 +1,10 @@
-define("theme_boost/sticky-footer",["exports","core/pending"],(function(_exports,_pending){var obj;
+define("theme_boost/sticky-footer",["exports","core/pending","core/sticky-footer"],(function(_exports,_pending,_stickyFooter){var obj;
 /**
    * Sticky footer module.
    *
    * @module     theme_boost/sticky-footer
    * @copyright  2022 Ferran Recio <ferran@moodle.com>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=_exports.enableStickyFooter=_exports.disableStickyFooter=void 0,_pending=(obj=_pending)&&obj.__esModule?obj:{default:obj};const SELECTORS_STICKYFOOTER=".stickyfooter",SELECTORS_PAGE="#page",CLASSES_HASSTICKYFOOTER="hasstickyfooter";let initialized=!1,previousScrollPosition=0;const scrollSpy=()=>{if(document.body.clientWidth>=768)return;let scrollPosition=(()=>{const page=document.querySelector(SELECTORS_PAGE);return page?page.scrollTop:window.pageYOffset})();scrollPosition>previousScrollPosition?disableStickyFooter():enableStickyFooter(),previousScrollPosition=scrollPosition},enableStickyFooter=()=>{const pendingPromise=new _pending.default("theme_boost/sticky-footer:enabling"),footer=document.querySelector(SELECTORS_STICKYFOOTER),page=document.querySelector(SELECTORS_PAGE);footer&&page&&(document.body.classList.add(CLASSES_HASSTICKYFOOTER),page.classList.add(CLASSES_HASSTICKYFOOTER)),setTimeout((()=>pendingPromise.resolve()),1e3)};_exports.enableStickyFooter=enableStickyFooter;const disableStickyFooter=()=>{document.body.classList.remove(CLASSES_HASSTICKYFOOTER);const page=document.querySelector(SELECTORS_PAGE);null==page||page.classList.remove(CLASSES_HASSTICKYFOOTER)};_exports.disableStickyFooter=disableStickyFooter;_exports.init=()=>{var _document$querySelect;if(initialized||document.body.classList.contains("behat-site"))return;initialized=!0,enableStickyFooter();(null!==(_document$querySelect=document.querySelector(SELECTORS_PAGE))&&void 0!==_document$querySelect?_document$querySelect:document.body).addEventListener("scroll",scrollSpy)}}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=_exports.enableStickyFooter=_exports.disableStickyFooter=void 0,_pending=(obj=_pending)&&obj.__esModule?obj:{default:obj};const SELECTORS_STICKYFOOTER=".stickyfooter",SELECTORS_PAGE="#page",CLASSES_HASSTICKYFOOTER="hasstickyfooter";let initialized=!1,previousScrollPosition=0,enabled=!1;const scrollSpy=()=>{if(!enabled)return;if(document.body.clientWidth>=768)return;let scrollPosition=(()=>{const page=document.querySelector(SELECTORS_PAGE);return page?page.scrollTop:window.pageYOffset})();scrollPosition>previousScrollPosition?hideStickyFooter():showStickyFooter(),previousScrollPosition=scrollPosition},showStickyFooter=()=>{const pendingPromise=new _pending.default("theme_boost/sticky-footer:enabling"),footer=document.querySelector(SELECTORS_STICKYFOOTER),page=document.querySelector(SELECTORS_PAGE);footer&&page&&(document.body.classList.add(CLASSES_HASSTICKYFOOTER),page.classList.add(CLASSES_HASSTICKYFOOTER)),setTimeout((()=>pendingPromise.resolve()),1e3)},hideStickyFooter=()=>{document.body.classList.remove(CLASSES_HASSTICKYFOOTER);const page=document.querySelector(SELECTORS_PAGE);null==page||page.classList.remove(CLASSES_HASSTICKYFOOTER)},enableStickyFooter=()=>{enabled=!0,showStickyFooter()};_exports.enableStickyFooter=enableStickyFooter;const disableStickyFooter=()=>{enabled=!1,hideStickyFooter()};_exports.disableStickyFooter=disableStickyFooter;_exports.init=()=>{var _document$querySelect;if(initialized||document.body.classList.contains("behat-site"))return void(0,_stickyFooter.init)();initialized=!0,(()=>{const footer=document.querySelector(SELECTORS_STICKYFOOTER);return!!footer&&!!footer.dataset.disable})()||enableStickyFooter();(null!==(_document$querySelect=document.querySelector(SELECTORS_PAGE))&&void 0!==_document$querySelect?_document$querySelect:document.body).addEventListener("scroll",scrollSpy),(0,_stickyFooter.registerManager)({enableStickyFooter:enableStickyFooter,disableStickyFooter:disableStickyFooter})}}));
 
 //# sourceMappingURL=sticky-footer.min.js.map

theme/boost/amd/src/sticky-footer.js

@@ -22,6 +22,7 @@
  */
 
 import Pending from 'core/pending';
+import {registerManager, init as defaultInit} from 'core/sticky-footer';
 
 const SELECTORS = {
     STICKYFOOTER: '.stickyfooter',
@@ -36,6 +37,8 @@ let initialized = false;
 
 let previousScrollPosition = 0;
 
+let enabled = false;
+
 /**
  * Return the current page scroll position.
  * @package
@@ -54,6 +57,9 @@ const getScrollPosition = () => {
  * @package
  */
 const scrollSpy = () => {
+    if (!enabled) {
+        return;
+    }
     // Ignore scroll if page size is not small.
     if (document.body.clientWidth >= 768) {
         return;
@@ -61,17 +67,29 @@ const scrollSpy = () => {
     // Detect if scroll is going down.
     let scrollPosition = getScrollPosition();
     if (scrollPosition > previousScrollPosition) {
-        disableStickyFooter();
+        hideStickyFooter();
     } else {
-        enableStickyFooter();
+        showStickyFooter();
     }
     previousScrollPosition = scrollPosition;
 };
 
 /**
- * Enable sticky footer in the page.
+ * Return if the sticky footer must be enabled by default or not.
+ * @returns {Boolean} true if the sticky footer is enabled automatic.
  */
-export const enableStickyFooter = () => {
+const isDisabledByDefault = () => {
+    const footer = document.querySelector(SELECTORS.STICKYFOOTER);
+    if (!footer) {
+        return false;
+    }
+    return !!footer.dataset.disable;
+};
+
+/**
+ * Show the sticky footer in the page.
+ */
+const showStickyFooter = () => {
     // We need some seconds to make sure the CSS animation is ready.
     const pendingPromise = new Pending('theme_boost/sticky-footer:enabling');
     const footer = document.querySelector(SELECTORS.STICKYFOOTER);
@@ -84,24 +102,49 @@ export const enableStickyFooter = () => {
 };
 
 /**
- * Disable sticky footer in the page.
+ * Hide the sticky footer in the page.
  */
-export const disableStickyFooter = () => {
+const hideStickyFooter = () => {
     document.body.classList.remove(CLASSES.HASSTICKYFOOTER);
     const page = document.querySelector(SELECTORS.PAGE);
     page?.classList.remove(CLASSES.HASSTICKYFOOTER);
 };
 
+/**
+ * Enable sticky footer in the page.
+ */
+export const enableStickyFooter = () => {
+    enabled = true;
+    showStickyFooter();
+};
+
+/**
+ * Disable sticky footer in the page.
+ */
+export const disableStickyFooter = () => {
+    enabled = false;
+    hideStickyFooter();
+};
+
 /**
  * Initialize the module.
  */
 export const init = () => {
     // Prevent sticky footer in behat.
     if (initialized || document.body.classList.contains('behat-site')) {
+        defaultInit();
         return;
     }
     initialized = true;
-    enableStickyFooter();
+    if (!isDisabledByDefault()) {
+        enableStickyFooter();
+    }
     const content = document.querySelector(SELECTORS.PAGE) ?? document.body;
+
     content.addEventListener("scroll", scrollSpy);
+
+    registerManager({
+        enableStickyFooter,
+        disableStickyFooter,
+    });
 };

theme/boost/scss/moodle/core.scss

@@ -2607,6 +2607,10 @@ input[disabled] {
     }
 }
 
+.v-hidden {
+    visibility: hidden;
+}
+
 // Emoji picker.
 $picker-width: 350px !default;
 $picker-width-xs: 320px !default;

theme/boost/style/moodle.css

@@ -11966,6 +11966,9 @@ input[disabled] {
 .border-radius {
   border-radius: 0.5rem; }
 
+.v-hidden {
+  visibility: hidden; }
+
 .emoji-picker {
   width: 350px;
   height: 400px; }

theme/boost/templates/core/sticky_footer.mustache

@@ -19,10 +19,20 @@
 
     Displays a page sticky footer element.
 
+    Classes required for JS:
+    * none
+
+    Data attributes optional for JS:
+    * data-disable Number|String - If the sticky footer should be disabled by default
+
+    Context variables required for this template:
+    * disable Boolean - if the sticky footer should be loaded hidden
+
     Example context (json):
     {
         "stickycontent": "<a href=\"#\">Moodle</a>",
         "stickyclasses": "justify-content-end",
+        "disable": false,
         "extras": [
             {
                 "attribute" : "data-example",
@@ -38,9 +48,14 @@
             }}{{# stickyclasses }}{{ stickyclasses }}{{/ stickyclasses }}{{!
             }}{{^ stickyclasses }}justify-content-end{{/ stickyclasses }}{{!
         }}{{/ stickyclasses }}"
-    {{#extras}}
-    {{attribute}}="{{value}}"
-    {{/extras}}
+    {{$ disable }}
+        {{#disable}} data-disable="true" {{/disable}}
+    {{/ disable }}
+    {{$ extradata }}
+        {{#extras}}
+        {{attribute}}="{{value}}"
+        {{/extras}}
+    {{/ extradata }}
 >
     {{$ stickycontent }}
         {{{stickycontent}}}

theme/classic/style/moodle.css

@@ -11966,6 +11966,9 @@ input[disabled] {
 .border-radius {
   border-radius: 0.25rem; }
 
+.v-hidden {
+  visibility: hidden; }
+
 .emoji-picker {
   width: 350px;
   height: 400px; }