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
moodle · Jun 26, 2023 · fb49de8 · fb49de8
1 parent 09d9f36
commit fb49de8
Show file tree

Hide file tree

Showing 11 changed files with 281 additions and 0 deletions.
diff --git a/admin/tool/componentlibrary/content/moodle/components/showmore.md b/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 >}}
diff --git a/admin/tool/componentlibrary/templates/examples/showmore/example.mustache b/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>
diff --git a/lang/en/moodle.php b/lang/en/moodle.php
@@ -2019,8 +2019,10 @@
 $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';

diff --git a/lib/amd/build/showmore.min.js b/lib/amd/build/showmore.min.js
diff --git a/lib/amd/build/showmore.min.js.map b/lib/amd/build/showmore.min.js.map
diff --git a/lib/amd/src/showmore.js b/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;
+};
diff --git a/lib/classes/output/icon_system_fontawesome.php b/lib/classes/output/icon_system_fontawesome.php
@@ -376,6 +376,7 @@ public function get_core_icon_map() {
             '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',

diff --git a/lib/templates/showmore.mustache b/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}}
diff --git a/theme/boost/scss/moodle/core.scss b/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;
+        }
+    }
+}
diff --git a/theme/boost/style/moodle.css b/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;

diff --git a/theme/classic/style/moodle.css b/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;