MDL-78204 core: Add new showmore/showless UI component

- Create a new 'showmore' template that receives both collapsed and expanded content.
Initially only the collapsed content will be displayed with a "Show more" button. When it is expanded,
only the expanded content will be displayed with "Show less" button.

- Add 'showmore' component to component library

admin/tool/componentlibrary/content/moodle/components/showmore.md

@@ -0,0 +1,40 @@
+---
+layout: docs
+title: "Show more"
+date: 2023-06-12T00:00:00+01:00
+draft: false
+weight: 70
+tags:
+- MDL-78204
+- 4.3
+---
+
+## How to use
+
+The show more component is used to show and hide content. It is useful for showing a preview of content and then allowing the user to expand it to see more.
+
+The parameters for the template context are:
+* collapsedcontent: The content to show when collapsed.
+* expandedcontent: The content to show when expanded.
+* extraclasses: Any extra classes added to the showmore outer container.
+* buttonextraclasses: Any extra classes added to the button.
+* collapsedextraclasses: Any extra classes added to the collapsed content container.
+* expandedextraclasses: Any extra classes added to the expanded content container.
+
+## Example
+
+{{< mustache template="core/showmore" >}}
+    {
+        "collapsedcontent": "Hello...",
+        "expandedcontent": "Hello<br>Is it me you're looking for? I can see it in your eyes",
+        "extraclasses": "rounded p-2 border",
+        "buttonextraclasses": "font-weight-bold"
+    }
+{{< /mustache >}}
+
+## Example used as a template block
+
+{{< mustache template="tool_componentlibrary/examples/showmore/example" >}}
+    {
+    }
+{{< /mustache >}}

admin/tool/componentlibrary/templates/examples/showmore/example.mustache

@@ -0,0 +1,37 @@
+{{!
+    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/>.
+}}
+{{!
+    @template tool_componentlibrary/examples/showmore/example
+
+    Template for showmore element used as a block example
+
+    Example context (json):
+    {
+    }
+}}
+<div id="showmore-example">
+    <h1>Show more block</h1>
+    <p>This is a simple example using showmore template as a block.</p>
+    {{< core/showmore }}
+        {{$collapsedcontent}} Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem... {{/collapsedcontent}}
+        {{$expandedcontent}}
+            Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.
+            Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Sed cursus turpis vitae tortor. Praesent turpis. Proin viverra, ligula sit amet ultrices semper, ligula arcu
+            tristique sapien, a accumsan nisi mauris ac eros. Donec venenatis vulputate lorem. Vestibulum eu odio. Morbi nec metus. Vivamus euismod mauris. Vivamus elementum semper nisi.
+        {{/expandedcontent}}
+    {{/core/showmore }}
+</div>

lang/en/moodle.php

@@ -2019,8 +2019,10 @@ $string['showgrades'] = 'Show gradebook to students';
 $string['showgrades_help'] = 'Many activities allow grades to be set. This setting determines whether a student can view a list of all their grades in the course.';
 $string['showingacourses'] = 'Showing all {$a} courses';
 $string['showingxofycourses'] = 'Showing courses {$a->start} to {$a->end} of {$a->total} courses';
+$string['showless'] = 'Show less';
 $string['showlistofcourses'] = 'Show list of courses';
 $string['showmodulecourse'] = 'Show list of courses containing activity';
+$string['showmore'] = 'Show more';
 $string['showoncoursepage'] = 'Show on course page';
 $string['showonly'] = 'Show only';
 $string['showperpage'] = 'Show {$a} per page';

lib/amd/build/showmore.min.js

@@ -0,0 +1,11 @@
+define("core/showmore",["exports"],(function(_exports){Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.init=void 0;
+/**
+   * Initializes and handles events fow 'showmore' components.
+   *
+   * @module      core/showmore
+   * @copyright   2023 Mikel Martín <mikel@moodle.com>
+   * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */
+const Selectors_actions={toggleContent:'[data-action="toggle-content"]'},Selectors_regions={main:'[data-region="showmore"]'};let initialized=!1;_exports.init=()=>{initialized||(document.addEventListener("click",(event=>{const toggleContent=event.target.closest(Selectors_actions.toggleContent);if(toggleContent){const region=toggleContent.closest(Selectors_regions.main);region.classList.toggle("collapsed");region.querySelector(Selectors_actions.toggleContent).setAttribute("aria-expanded",!region.classList.contains("collapsed"))}})),initialized=!0)}}));
+
+//# sourceMappingURL=showmore.min.js.map

lib/amd/build/showmore.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"showmore.min.js","sources":["../src/showmore.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 * Initializes and handles events fow 'showmore' components.\n *\n * @module      core/showmore\n * @copyright   2023 Mikel Martín <mikel@moodle.com>\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nconst Selectors = {\n    actions: {\n        toggleContent: '[data-action=\"toggle-content\"]'\n    },\n    regions: {\n        main: '[data-region=\"showmore\"]'\n    }\n};\n\nlet initialized = false;\n\n/**\n * Initialise module\n *\n * @method\n */\nexport const init = () => {\n\n    if (initialized) {\n        // We already added the event listeners (can be called multiple times by mustache template).\n        return;\n    }\n\n    // Listen for click events.\n    document.addEventListener('click', (event) => {\n        const toggleContent = event.target.closest(Selectors.actions.toggleContent);\n        if (toggleContent) {\n            const region = toggleContent.closest(Selectors.regions.main);\n            region.classList.toggle('collapsed');\n            const toggleButton = region.querySelector(Selectors.actions.toggleContent);\n            toggleButton.setAttribute('aria-expanded', !region.classList.contains('collapsed'));\n        }\n    });\n\n    initialized = true;\n};\n"],"names":["Selectors","toggleContent","main","initialized","document","addEventListener","event","target","closest","region","classList","toggle","querySelector","setAttribute","contains"],"mappings":";;;;;;;;MAuBMA,kBACO,CACLC,cAAe,kCAFjBD,kBAIO,CACLE,KAAM,gCAIVC,aAAc,gBAOE,KAEZA,cAMJC,SAASC,iBAAiB,SAAUC,cAC1BL,cAAgBK,MAAMC,OAAOC,QAAQR,kBAAkBC,kBACzDA,cAAe,OACTQ,OAASR,cAAcO,QAAQR,kBAAkBE,MACvDO,OAAOC,UAAUC,OAAO,aACHF,OAAOG,cAAcZ,kBAAkBC,eAC/CY,aAAa,iBAAkBJ,OAAOC,UAAUI,SAAS,kBAI9EX,aAAc"}

lib/amd/src/showmore.js

@@ -0,0 +1,59 @@
+// 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/>.
+
+/**
+ * Initializes and handles events fow 'showmore' components.
+ *
+ * @module      core/showmore
+ * @copyright   2023 Mikel Martín <mikel@moodle.com>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+const Selectors = {
+    actions: {
+        toggleContent: '[data-action="toggle-content"]'
+    },
+    regions: {
+        main: '[data-region="showmore"]'
+    }
+};
+
+let initialized = false;
+
+/**
+ * Initialise module
+ *
+ * @method
+ */
+export const init = () => {
+
+    if (initialized) {
+        // We already added the event listeners (can be called multiple times by mustache template).
+        return;
+    }
+
+    // Listen for click events.
+    document.addEventListener('click', (event) => {
+        const toggleContent = event.target.closest(Selectors.actions.toggleContent);
+        if (toggleContent) {
+            const region = toggleContent.closest(Selectors.regions.main);
+            region.classList.toggle('collapsed');
+            const toggleButton = region.querySelector(Selectors.actions.toggleContent);
+            toggleButton.setAttribute('aria-expanded', !region.classList.contains('collapsed'));
+        }
+    });
+
+    initialized = true;
+};

lib/classes/output/icon_system_fontawesome.php

@@ -376,6 +376,7 @@ class icon_system_fontawesome extends icon_system_font {
             'core:t/collapsedcaret' => 'fa-caret-right',
             'core:t/collapsedchevron' => 'fa-chevron-right',
             'core:t/collapsedchevron_rtl' => 'fa-chevron-left',
+            'core:t/collapsedchevron_up' => 'fa-chevron-up',
             'core:t/completion_complete' => 'fa-circle',
             'core:t/completion_fail' => 'fa-times',
             'core:t/completion_incomplete' => 'fa-circle-thin',

lib/templates/showmore.mustache

@@ -0,0 +1,52 @@
+{{!
+    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/>.
+}}
+{{!
+    @template core/showmore
+
+    Displays content with 'Show more'/'Show less' feature.
+
+    Example context (json):
+    {
+        "collapsedcontent": "Hello...",
+        "expandedcontent": "Hello...<br>Is it me you're looking for? I can see it in your eyes",
+        "extraclasses": "p-3",
+        "collapsedextraclasses": "bg-secondary",
+        "expandedextraclasses": "bg-secondary"
+    }
+}}
+<div class="showmore-container collapsed {{$extraclasses}}{{extraclasses}}{{/extraclasses}}" data-region="showmore">
+    <button
+        type="button"
+        class="btn btn-sm btn-link p-0 {{$buttonextraclasses}}{{buttonextraclasses}}{{/buttonextraclasses}}"
+        aria-expanded="false"
+        data-action="toggle-content"
+    >
+        <span class="collapsed-content"> {{#str}} showmore, core {{/str}} {{#pix}} t/expandedchevron, core {{/pix}} </span>
+        <span class="expanded-content"> {{#str}} showless, core {{/str}} {{#pix}} t/collapsedchevron_up, core {{/pix}} </span>
+    </button>
+    <div class="collapsed-content {{$collapsedextraclasses}}{{collapsedextraclasses}}{{/collapsedextraclasses}}">
+        {{$collapsedcontent}}{{{collapsedcontent}}}{{/collapsedcontent}}
+    </div>
+    <div class="expanded-content {{$expandedextraclasses}}{{expandedextraclasses}}{{/expandedextraclasses}}">
+        {{$expandedcontent}}{{{expandedcontent}}}{{/expandedcontent}}
+    </div>
+</div>
+{{#js}}
+require(['core/showmore'], function(showmore) {
+    showmore.init();
+});
+{{/js}}

theme/boost/scss/moodle/core.scss

@@ -3112,3 +3112,33 @@ blockquote {
         white-space: normal;
     }
 }
+
+/* Showmore component */
+.showmore-container {
+    &.collapsed {
+        .collapsed-content {
+            display: block;
+        }
+        .expanded-content {
+            display: none;
+        }
+    }
+    &:not(.collapsed) {
+        .collapsed-content {
+            display: none;
+        }
+        .expanded-content {
+            display: block;
+        }
+    }
+    button {
+        float: right;
+        &.btn-link {
+            text-decoration: none;
+        }
+        .icon {
+            font-size: $btn-font-size-sm;
+            margin: 0;
+        }
+    }
+}

theme/boost/style/moodle.css

@@ -25913,6 +25913,30 @@ blockquote {
   white-space: normal;
 }
 
+/* Showmore component */
+.showmore-container.collapsed .collapsed-content {
+  display: block;
+}
+.showmore-container.collapsed .expanded-content {
+  display: none;
+}
+.showmore-container:not(.collapsed) .collapsed-content {
+  display: none;
+}
+.showmore-container:not(.collapsed) .expanded-content {
+  display: block;
+}
+.showmore-container button {
+  float: right;
+}
+.showmore-container button.btn-link {
+  text-decoration: none;
+}
+.showmore-container button .icon {
+  font-size: 0.8203125rem;
+  margin: 0;
+}
+
 .icon {
   font-size: 16px;
   width: 16px;

theme/classic/style/moodle.css

@@ -25913,6 +25913,30 @@ blockquote {
   white-space: normal;
 }
 
+/* Showmore component */
+.showmore-container.collapsed .collapsed-content {
+  display: block;
+}
+.showmore-container.collapsed .expanded-content {
+  display: none;
+}
+.showmore-container:not(.collapsed) .collapsed-content {
+  display: none;
+}
+.showmore-container:not(.collapsed) .expanded-content {
+  display: block;
+}
+.showmore-container button {
+  float: right;
+}
+.showmore-container button.btn-link {
+  text-decoration: none;
+}
+.showmore-container button .icon {
+  font-size: 0.8203125rem;
+  margin: 0;
+}
+
 .icon {
   font-size: 16px;
   width: 16px;