Merge branch 'MDL-73436-master' of https://github.com/dravek/moodle

2022-01-20 21:26:28 +08:00
parent c304ec8d02 5e42a09a92
commit 6405cad2ae
6 changed files with 381 additions and 0 deletions
@@ -0,0 +1,84 @@
+<?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/>.
+
+/**
+ * Moodle Component Library
+ *
+ * A sample dynamic tab page.
+ *
+ * @package    tool_componentlibrary
+ * @copyright  2021 David Matamoros <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+declare(strict_types=1);
+
+namespace tool_componentlibrary\local\examples\dynamictabs;
+
+use core\output\dynamic_tabs\base;
+use renderer_base;
+use stdClass;
+
+/**
+ * Example tab class
+ *
+ * @package     tool_componentlibrary
+ * @copyright   2021 David Matamoros <[email protected]>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class tab1 extends base {
+
+    /**
+     * Export this for use in a mustache template context.
+     *
+     * @param renderer_base $output
+     *
+     * @return stdClass
+     */
+    public function export_for_template(renderer_base $output) {
+        $content = (object)[];
+        $content->customtext = 'Tab 1 content example';
+        return $content;
+    }
+
+    /**
+     * The label to be displayed on the tab
+     *
+     * @return string
+     */
+    public function get_tab_label(): string {
+        return 'Tab 1';
+    }
+
+    /**
+     * Check permission of the current user to access this tab
+     *
+     * @return bool
+     */
+    public function is_available(): bool {
+        // Define the correct permissions here.
+        return true;
+    }
+
+    /**
+     * Template to use to display tab contents
+     *
+     * @return string
+     */
+    public function get_template(): string {
+        return 'tool_componentlibrary/examples/dynamictabs/tab1';
+    }
+}
@@ -0,0 +1,85 @@
+<?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/>.
+
+/**
+ * Moodle Component Library
+ *
+ * A sample dynamic tab page.
+ *
+ * @package    tool_componentlibrary
+ * @copyright  2021 David Matamoros <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+declare(strict_types=1);
+
+namespace tool_componentlibrary\local\examples\dynamictabs;
+
+use core\output\dynamic_tabs\base;
+use renderer_base;
+use stdClass;
+
+/**
+ * Example tab class
+ *
+ * @package     tool_componentlibrary
+ * @copyright   2021 David Matamoros <[email protected]>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class tab2 extends base {
+
+    /**
+     * Export this for use in a mustache template context.
+     *
+     * @param renderer_base $output
+     * @return stdClass
+     */
+    public function export_for_template(renderer_base $output) {
+        $content = (object)[];
+        // Define any content you might want to pass to the dynamic tab.
+        $content->currenttime = userdate(time(), get_string('strftimedatetimeaccurate'));
+
+        return $content;
+    }
+
+    /**
+     * The label to be displayed on the tab
+     *
+     * @return string
+     */
+    public function get_tab_label(): string {
+        return 'Tab 2';
+    }
+
+    /**
+     * Check permission of the current user to access this tab
+     *
+     * @return bool
+     */
+    public function is_available(): bool {
+        // Define the correct permissions here.
+        return true;
+    }
+
+    /**
+     * Template to use to display tab contents
+     *
+     * @return string
+     */
+    public function get_template(): string {
+        return 'tool_componentlibrary/examples/dynamictabs/tab2';
+    }
+}
@@ -0,0 +1,100 @@
+---
+layout: docs
+title: "Dynamic tabs"
+date: 2021-10-02T09:40:32+01:00
+draft: false
+tags:
+- MDL-71943
+- 4.0
+---
+
+## How it works
+
+Dynamic tabs are tabs that load content in AJAX requests. Once the user clicks on the tab heading, the page does not reload but the content of the respective tab loads in AJAX request.
+
+## Source files
+
+* `lib/amd/src/dynamic_tabs.js`
+* `lib/amd/src/local/repository/dynamic_tabs.js`
+* `lib/classes/external/dynamic_tabs_get_content.php`
+* `lib/classes/output/dynamic_tabs.php`
+* `lib/classes/output/dynamic_tabs/base.php`
+* `lib/db/services.php`
+* `lib/templates/dynamic_tabs.mustache`
+
+## How to use dynamic tabs
+
+First of all we need to create a tab class file for each tab that we need, extending `lib/classes/output/dynamic_tabs/base.php`.
+
+These tab classes need to include these 4 methods in order to work:
+
+* `export_for_template` returns the data we export to the template
+* `get_tab_label` returns the tab title
+* `is_available` checks the tab permission and returns true/false that will enable/disable the individual tab
+* `get_template` returns the path to the tab template file
+
+{{< php >}}
+class tab1 extends base {
+
+    /**
+     * Export this for use in a mustache template context.
+     *
+     * @param renderer_base $output
+     *
+     * @return stdClass
+     */
+    public function export_for_template(renderer_base $output) {
+        $content = (object)[];
+        $content->customtext = 'Tab 1 content example';
+        return $content;
+    }
+
+    /**
+     * The label to be displayed on the tab
+     *
+     * @return string
+     */
+    public function get_tab_label(): string {
+        return 'Tab 1';
+    }
+
+    /**
+     * Check permission of the current user to access this tab
+     *
+     * @return bool
+     */
+    public function is_available(): bool {
+        // Define the correct permissions here.
+        return true;
+    }
+
+    /**
+     * Template to use to display tab contents
+     *
+     * @return string
+     */
+    public function get_template(): string {
+        return 'tool_componentlibrary/dynamictabs_tab1';
+    }
+}
+{{< / php >}}
+
+Then we need to create the templates that each `get_template` method will call.
+
+Finally, to add dynamic tabs to our page, we just need to call all the previously created tabs, and pass the attributes
+needed in each tab.
+
+These attributes will be stored as "data attributes" in the DOM and can be also used inside our tab classes
+using `get_data` method (for example to check permissions in `is_available`).
+
+{{< php >}}
+    $tabs = [
+        new tab1(['demotab' => 'Tab1', 'reportid' => $reportid]),
+        new tab2(['demotab' => 'Tab2']),
+    ];
+    echo $OUTPUT->render_from_template('core/dynamic_tabs', (new dynamic_tabs($tabs))->export_for_template($OUTPUT));
+{{< / php >}}
+
+## Example
+
+<iframe src="../../../../dynamictabs.php" style="overflow:hidden;height:400px;width:100%;border:0" title="Moodle dynamictabs"></iframe>
@@ -0,0 +1,54 @@
+<?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/>.
+
+/**
+ * Moodle Component Library
+ *
+ * A sample page with dynamic tabs.
+ *
+ * @package    tool_componentlibrary
+ * @copyright  2021 David Matamoros <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+declare(strict_types=1);
+
+require_once('../../../config.php');
+
+use core\output\dynamic_tabs;
+
+require_login();
+require_capability('moodle/site:configview', context_system::instance());
+
+global $PAGE, $OUTPUT;
+$PAGE->set_url(new moodle_url('/local/componentlibrary/dynamictabs/dynamictabs.php'));
+$PAGE->set_context(context_system::instance());
+$PAGE->set_pagelayout('embedded');
+
+$PAGE->set_heading('Moodle dynamic fields');
+$PAGE->set_title('Moodle dynamic fields');
+
+echo $OUTPUT->header();
+
+// Add dynamic tabs to our page.
+$tabs = [
+    new \tool_componentlibrary\local\examples\dynamictabs\tab1(['demotab' => 'Tab1']),
+    new \tool_componentlibrary\local\examples\dynamictabs\tab2(['demotab' => 'Tab2']),
+];
+echo $OUTPUT->render_from_template('core/dynamic_tabs',
+    (new dynamic_tabs($tabs))->export_for_template($OUTPUT));
+
+echo $OUTPUT->footer();
@@ -0,0 +1,29 @@
+{{!
+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/dynamictabs/tab1
+
+    Template for showing Tab1 tab content
+
+    Example context (json):
+    {
+        "customtext": "My custom tab"
+    }
+}}
+
+<h3>Tab 1 content</h3>
+<p>{{customtext}}</p>
@@ -0,0 +1,29 @@
+{{!
+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/dynamictabs/tab2
+
+    Template for showing Tab2 tab content
+
+    Example context (json):
+    {
+        "currenttime": "March 3rd, 1979 12:30 PM"
+    }
+}}
+
+<h3>Tab 2 content</h3>
+<p>{{currenttime}}</p>