MDL-76134 gradebook: Add a bare dropdown component

grade/classes/output/gradebook_dropdown.php

@@ -0,0 +1,126 @@
+<?php
+// 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/>.
+
+namespace core_grades\output;
+
+use moodle_exception;
+use renderable;
+use renderer_base;
+use templatable;
+
+/**
+ * Renderable class for the dropdown in the gradebook pages.
+ *
+ * We have opted to have this as a class as opposed to a renderable for prosperity
+ * in the case that custom handling is required by the calling code.
+ *
+ * This could become a abstract class if other components require similar functionality and wish to extend the base here.
+ *
+ * @package    core_grades
+ * @copyright  2022 Mathew May <Mathew.solutions>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class gradebook_dropdown implements renderable, templatable {
+
+    /** @var bool $renderlater Should the dropdown render straightaway? */
+    protected $renderlater;
+
+    /** @var string $buttoncontent What is the content of the "Button" that users will always see. */
+    protected $buttoncontent;
+
+    /** @var null|string $dropdowncontent The content that can be passed in to render immediately. */
+    protected $dropdowncontent;
+
+    /** @var null|string $parentclasses Any special classes to put on the HTMLElement that contains the BS events. */
+    protected $parentclasses;
+
+    /** @var null|string $buttonclasses Any special classes to put on the HTMLElement that triggers the dropdown. */
+    protected $buttonclasses;
+
+    /** @var null|string $dropdownclasses Any special classes to put on the HTMLElement that contains the actual dropdown. */
+    protected $dropdownclasses;
+
+    /** @var null|string $buttonheader If the button item in the tertiary nav needs an extra top header for context. */
+    protected $buttonheader;
+
+    /**
+     * The class constructor.
+     *
+     * @param bool $renderlater How we figure out if we should render the template instantly.
+     * @param string $buttoncontent What gets placed in the button.
+     * @param ?string $dropdowncontent What can be placed in the dropdown if we are rendering now.
+     * @param ?string $parentclasses The classes that can be added that the bootstrap events are attached to.
+     * @param ?string $buttonclasses Any special classes that may be needed.
+     * @param ?string $dropdownclasses Any special classes that may be needed.
+     * @param ?string $buttonheader If the button item in the tertiary nav needs an extra top header for context.
+     * @throws moodle_exception If the implementor incorrectly call this module.
+     */
+    public function __construct(
+        bool $renderlater,
+        string $buttoncontent,
+        ?string $dropdowncontent = null,
+        ?string $parentclasses = null,
+        ?string $buttonclasses = null,
+        ?string $dropdownclasses = null,
+        ?string $buttonheader = null
+    ) {
+        // Ensure implementors cant request to render the content now and not provide us any to show.
+        if (!$renderlater && empty($dropdowncontent)) {
+            throw new moodle_exception(
+                'incorrectdropdownvars',
+                'core_grades',
+                '', null,
+                'Dropdown content must be set to render later.'
+            );
+        }
+
+        $this->renderlater = $renderlater;
+        $this->buttoncontent = $buttoncontent;
+        $this->dropdowncontent = $dropdowncontent;
+        $this->parentclasses = $parentclasses;
+        $this->buttonclasses = $buttonclasses;
+        $this->dropdownclasses = $dropdownclasses;
+        $this->buttonheader = $buttonheader;
+    }
+
+    /**
+     * Export the data for the mustache template.
+     *
+     * @param renderer_base $output renderer to be used to render the action bar elements.
+     * @return array
+     */
+    public function export_for_template(renderer_base $output): array {
+        return [
+            'rtl' => right_to_left(),
+            'renderlater' => $this->renderlater,
+            'buttoncontent' => $this->buttoncontent ,
+            'dropdowncontent' => $this->dropdowncontent,
+            'parentclasses' => $this->parentclasses,
+            'buttonclasses' => $this->buttonclasses,
+            'dropdownclasses' => $this->dropdownclasses,
+            'buttonheader' => $this->buttonheader,
+        ];
+    }
+
+    /**
+     * Returns the standard template for the dropdown.
+     *
+     * @return string
+     */
+    public function get_template(): string {
+        return 'core_grades/tertiary_navigation_dropdown';
+    }
+}

grade/templates/tertiary_navigation_dropdown.mustache

@@ -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/>.
+}}
+{{!
+    @template core_grades/tertiary_navigation_dropdown
+
+    Tertiary navigation dropdown selector.
+
+    Context variables required for this template:
+    * rtl - Is this dropdown being used in a RTL case? if so, we need to ensure it drops down in the right place.
+    * renderlater - This determines if we show a placeholder whilst fetching content to replace within the placeholder region
+    * buttoncontent - The string to be shown to users to trigger the dropdown
+    * dropdowncontent - If rendering now, The content within the dropdown
+    * parentclasses - Our class for the DOM Node that the default bootstrap dropdown events are tagged onto
+    * buttonclasses - If you want special handling add classes here
+    * dropdownclasses - If you want special handling or sizing etc add classes here
+    Example context (json):
+    {
+        "rtl": false,
+        "renderlater": false,
+        "buttoncontent": "Example dropdown button",
+        "dropdowncontent": "Some body content to render right now",
+        "parentclasses": "my-dropdown",
+        "buttonclasses": "my-button",
+        "dropdownclasses": "my-cool-dropdown"
+    }
+}}
+{{#buttonheader}}
+    <small>{{.}}</small>
+{{/buttonheader}}
+<div class="{{#parentclasses}}{{.}}{{/parentclasses}}">
+    <div class="{{#buttonclasses}}{{.}}{{/buttonclasses}} btn dropdown-toggle keep-open d-flex text-left align-items-center p-0 font-weight-bold" data-toggle="dropdown" tabindex="0" aria-haspopup="true" role="button" aria-label="{{#str}} aria-toggledropdown, core_grades {{/str}}" aria-expanded="false">
+        {{{buttoncontent}}}
+    </div>
+    <div class="{{#dropdownclasses}}{{.}}{{/dropdownclasses}} dropdown-menu {{#rtl}}dropdown-menu-right{{/rtl}}">
+        <div class="w-100 p-3" data-region="placeholder">
+            {{#renderlater}}
+                <div class="d-flex flex-column align-items-stretch justify-content-between" style="height: 150px; width: 300px;">
+                    <div class="bg-pulse-grey w-100 h-100 my-1"></div>
+                    <div class="bg-pulse-grey w-100 h-100 my-1"></div>
+                    <div class="bg-pulse-grey w-100 h-100 my-1"></div>
+                </div>
+            {{/renderlater}}
+            {{^renderlater}}
+                {{{dropdowncontent}}}
+            {{/renderlater}}
+        </div>
+    </div>
+</div>

lang/en/grades.php

@@ -901,6 +901,8 @@
 $string['yes'] = 'Yes';
 $string['yourgrade'] = 'Your grade';
 
+$string['aria-toggledropdown'] = 'Toggle the following dropdown';
+
 // Deprecated since Moodle 4.0.
 $string['navmethod'] = 'Navigation method';
 $string['dropdown'] = 'Drop-down menu';