MDL-78847 mod_folder: Fix inline folder renderer

mod/folder/amd/build/folder.min.js

@@ -0,0 +1,10 @@
+define("mod_folder/folder",["exports","core/yui"],(function(_exports,_yui){var obj;
+/**
+   * Javascript helper function for Folder module
+   *
+   * @module     mod_folder/folder
+   * @copyright  2009 Petr Skoda  {@link http://skodak.org}
+   * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.initTree=void 0,_yui=(obj=_yui)&&obj.__esModule?obj:{default:obj};_exports.initTree=(id,expandAll)=>{_yui.default.use("yui2-treeview","node-event-simulate",(function(Y){var tree=new Y.YUI2.widget.TreeView(id);tree.subscribe("clickEvent",(function(){return!1})),tree.subscribe("enterKeyPressed",(function(node){return Y.one(node.getContentEl()).one("a").simulate("click"),!1})),expandAll?tree.expandAll():tree.getRoot().children[0].expand(),tree.render()}))}}));
+
+//# sourceMappingURL=folder.min.js.map

mod/folder/amd/build/folder.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"folder.min.js","sources":["../src/folder.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 * Javascript helper function for Folder module\n *\n * @module     mod_folder/folder\n * @copyright  2009 Petr Skoda  {@link http://skodak.org}\n * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport YUI from 'core/yui';\n\nexport const initTree = (id, expandAll) => {\n    YUI.use('yui2-treeview', 'node-event-simulate', function(Y) {\n        var tree = new Y.YUI2.widget.TreeView(id);\n\n        tree.subscribe(\"clickEvent\", function() {\n            // we want normal clicking which redirects to url\n            return false;\n        });\n\n        tree.subscribe(\"enterKeyPressed\", function(node) {\n            // We want keyboard activation to trigger a click on the first link.\n            Y.one(node.getContentEl()).one('a').simulate('click');\n            return false;\n        });\n\n        if (expandAll) {\n            tree.expandAll();\n        } else {\n            // Else just expand the top node.\n            tree.getRoot().children[0].expand();\n        }\n\n        tree.render();\n    });\n};\n"],"names":["id","expandAll","use","Y","tree","YUI2","widget","TreeView","subscribe","node","one","getContentEl","simulate","getRoot","children","expand","render"],"mappings":";;;;;;;0JAyBwB,CAACA,GAAIC,0BACrBC,IAAI,gBAAiB,uBAAuB,SAASC,OACjDC,KAAO,IAAID,EAAEE,KAAKC,OAAOC,SAASP,IAEtCI,KAAKI,UAAU,cAAc,kBAElB,KAGXJ,KAAKI,UAAU,mBAAmB,SAASC,aAEvCN,EAAEO,IAAID,KAAKE,gBAAgBD,IAAI,KAAKE,SAAS,UACtC,KAGPX,UACAG,KAAKH,YAGLG,KAAKS,UAAUC,SAAS,GAAGC,SAG/BX,KAAKY"}

mod/folder/amd/src/folder.js

@@ -16,19 +16,18 @@
 /**
  * Javascript helper function for Folder module
  *
- * @package    mod
- * @subpackage folder
+ * @module     mod_folder/folder
  * @copyright  2009 Petr Skoda  {@link http://skodak.org}
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
-M.mod_folder = {};
+import YUI from 'core/yui';
 
-M.mod_folder.init_tree = function(Y, id, expand_all) {
-    Y.use('yui2-treeview', 'node-event-simulate', function(Y) {
+export const initTree = (id, expandAll) => {
+    YUI.use('yui2-treeview', 'node-event-simulate', function(Y) {
         var tree = new Y.YUI2.widget.TreeView(id);
 
-        tree.subscribe("clickEvent", function(node, event) {
+        tree.subscribe("clickEvent", function() {
             // we want normal clicking which redirects to url
             return false;
         });
@@ -39,7 +38,7 @@ M.mod_folder.init_tree = function(Y, id, expand_all) {
             return false;
         });
 
-        if (expand_all) {
+        if (expandAll) {
             tree.expandAll();
         } else {
             // Else just expand the top node.
@@ -48,4 +47,4 @@ M.mod_folder.init_tree = function(Y, id, expand_all) {
 
         tree.render();
     });
-}
+};

mod/folder/renderer.php

@@ -35,7 +35,8 @@ class mod_folder_renderer extends plugin_renderer_base {
      * @return string
      */
     public function display_folder(stdClass $folder) {
-        $output = '';
+        static $treecounter = 0;
+
         $folderinstances = get_fast_modinfo($folder->course)->get_instances_of('folder');
         if (!isset($folderinstances[$folder->id]) ||
                 !($cm = $folderinstances[$folder->id]) ||
@@ -43,43 +44,37 @@ class mod_folder_renderer extends plugin_renderer_base {
             // Some error in parameters.
             // Don't throw any errors in renderer, just return empty string.
             // Capability to view module must be checked before calling renderer.
-            return $output;
+            return '';
         }
 
+        $data = [];
         if (trim($folder->intro)) {
             if ($folder->display == FOLDER_DISPLAY_INLINE && $cm->showdescription) {
                 // for "display inline" do not filter, filters run at display time.
-                $output .= format_module_intro('folder', $folder, $cm->id, false);
+                $data['intro'] = format_module_intro('folder', $folder, $cm->id, false);
             }
         }
-        $buttons = '';
+        $buttons = [];
         // Display the "Edit" button if current user can edit folder contents.
         // Do not display it on the course page for the teachers because there
-        // is an "Edit settings" button right next to it with the same functionality.
+        // is an "Edit settings" option in the action menu with the same functionality.
         $canmanagefolderfiles = has_capability('mod/folder:managefiles', $context);
         $canmanagecourseactivities = has_capability('moodle/course:manageactivities', $context);
         if ($canmanagefolderfiles && ($folder->display != FOLDER_DISPLAY_INLINE || !$canmanagecourseactivities)) {
             $editbutton = new single_button(new moodle_url('/mod/folder/edit.php', ['id' => $cm->id]),
                 get_string('edit'), 'post', single_button::BUTTON_PRIMARY);
             $editbutton->class = 'navitem';
-            $buttons .= $this->render($editbutton);
+            $data['edit_button'] = $editbutton->export_for_template($this->output);
+            $data['hasbuttons'] = true;
         }
 
-        // Do not append the edit button on the course page.
         $downloadable = folder_archive_available($folder, $cm);
         if ($downloadable) {
             $downloadbutton = new single_button(new moodle_url('/mod/folder/download_folder.php', ['id' => $cm->id]),
                 get_string('downloadfolder', 'folder'), 'get');
             $downloadbutton->class = 'navitem ml-auto';
-            $buttons .= $this->render($downloadbutton);
-        }
-
-        if ($buttons) {
-            $output .= $this->output->container_start("container-fluid tertiary-navigation");
-            $output .= $this->output->container_start("row");
-            $output .= $buttons;
-            $output .= $this->output->container_end();
-            $output .= $this->output->container_end();
+            $data['download_button'] = $downloadbutton->export_for_template($this->output);
+            $data['hasbuttons'] = true;
         }
 
         $foldertree = new folder_tree($folder, $cm);
@@ -87,35 +82,27 @@ class mod_folder_renderer extends plugin_renderer_base {
             // Display module name as the name of the root directory.
             $foldertree->dir['dirname'] = $cm->get_formatted_name(array('escape' => false));
         }
-        $output .= $this->output->container_start("box generalbox pt-0 pb-3 foldertree");
-        $output .= $this->render($foldertree);
-        $output .= $this->output->container_end();
 
-        return $output;
-    }
+        $data['id'] = 'folder_tree'. ($treecounter++);
+        $data['showexpanded'] = !empty($foldertree->folder->showexpanded);
+        $data['dir'] = $this->renderable_tree_elements($foldertree, ['files' => [], 'subdirs' => [$foldertree->dir]]);
 
-    public function render_folder_tree(folder_tree $tree) {
-        static $treecounter = 0;
-
-        $content = '';
-        $id = 'folder_tree'. ($treecounter++);
-        $content .= '<div id="'.$id.'" class="filemanager">';
-        $content .= $this->htmllize_tree($tree, array('files' => array(), 'subdirs' => array($tree->dir)));
-        $content .= '</div>';
-        $showexpanded = true;
-        if (empty($tree->folder->showexpanded)) {
-            $showexpanded = false;
-        }
-        $this->page->requires->js_init_call('M.mod_folder.init_tree', array($id, $showexpanded));
-        return $content;
+        return $this->render_from_template('mod_folder/folder', $data);
     }
 
     /**
      * Internal function - creates htmls structure suitable for YUI tree.
+     *
+     * @deprecated since Moodle 4.3
      */
     protected function htmllize_tree($tree, $dir) {
         global $CFG;
 
+        debugging(
+            'Method htmllize_tree() is deprecated. Please use renderable_tree_elements instead',
+            DEBUG_DEVELOPER
+        );
+
         if (empty($dir['subdirs']) and empty($dir['files'])) {
             return '';
         }
@@ -123,14 +110,14 @@ class mod_folder_renderer extends plugin_renderer_base {
         foreach ($dir['subdirs'] as $subdir) {
             $image = $this->output->pix_icon(file_folder_icon(), $subdir['dirname'], 'moodle');
             $filename = html_writer::tag('span', $image, array('class' => 'fp-icon')).
-                    html_writer::tag('span', s($subdir['dirname']), array('class' => 'fp-filename'));
+                html_writer::tag('span', s($subdir['dirname']), array('class' => 'fp-filename'));
             $filename = html_writer::tag('div', $filename, array('class' => 'fp-filename-icon'));
             $result .= html_writer::tag('li', $filename. $this->htmllize_tree($tree, $subdir));
         }
         foreach ($dir['files'] as $file) {
             $filename = $file->get_filename();
             $url = moodle_url::make_pluginfile_url($file->get_contextid(), $file->get_component(),
-                    $file->get_filearea(), $file->get_itemid(), $file->get_filepath(), $filename, false);
+                $file->get_filearea(), $file->get_itemid(), $file->get_filepath(), $filename, false);
             $filenamedisplay = clean_filename($filename);
             if (file_extension_in_typegroup($filename, 'web_image')) {
                 $image = $url->out(false, array('preview' => 'tinyicon', 'oid' => $file->get_timemodified()));
@@ -139,7 +126,7 @@ class mod_folder_renderer extends plugin_renderer_base {
                 $image = $this->output->pix_icon(file_file_icon($file), $filenamedisplay, 'moodle');
             }
             $filename = html_writer::tag('span', $image, array('class' => 'fp-icon')).
-                    html_writer::tag('span', $filenamedisplay, array('class' => 'fp-filename'));
+                html_writer::tag('span', $filenamedisplay, array('class' => 'fp-filename'));
             $urlparams = null;
             if ($tree->folder->forcedownload) {
                 $urlparams = ['forcedownload' => 1];
@@ -154,6 +141,57 @@ class mod_folder_renderer extends plugin_renderer_base {
 
         return $result;
     }
+
+    /**
+     * Internal function - Creates elements structure suitable for mod_folder/folder template.
+     *
+     * @param folder_tree $tree The folder tree to work with.
+     * @param array $dir The subdir and files structure to convert into a tree.
+     * @return array The structure to be rendered by mod_folder/folder template.
+     */
+    protected function renderable_tree_elements(folder_tree $tree, array $dir): array {
+        if (empty($dir['subdirs']) && empty($dir['files'])) {
+            return [];
+        }
+        $elements = [];
+        foreach ($dir['subdirs'] as $subdir) {
+            $htmllize = $this->renderable_tree_elements($tree, $subdir);
+            $image = $this->output->pix_icon(file_folder_icon(), $subdir['dirname'], 'moodle');
+            $elements[] = [
+                'name' => $subdir['dirname'],
+                'icon' => $image,
+                'subdirs' => $htmllize,
+                'hassubdirs' => !empty($htmllize),
+            ];
+        }
+        foreach ($dir['files'] as $file) {
+            $filename = $file->get_filename();
+            $filenamedisplay = clean_filename($filename);
+
+            $url = moodle_url::make_pluginfile_url($file->get_contextid(), $file->get_component(),
+                $file->get_filearea(), $file->get_itemid(), $file->get_filepath(), $filename, false);
+            if (file_extension_in_typegroup($filename, 'web_image')) {
+                $image = $url->out(false, ['preview' => 'tinyicon', 'oid' => $file->get_timemodified()]);
+                $image = html_writer::empty_tag('img', ['src' => $image]);
+            } else {
+                $image = $this->output->pix_icon(file_file_icon($file), $filenamedisplay, 'moodle');
+            }
+
+            if ($tree->folder->forcedownload) {
+                $url->param('forcedownload', 1);
+            }
+
+            $elements[] = [
+                'name' => $filenamedisplay,
+                'icon' => $image,
+                'url' => $url,
+                'subdirs' => null,
+                'hassubdirs' => false,
+            ];
+        }
+
+        return $elements;
+    }
 }
 
 class folder_tree implements renderable {

mod/folder/templates/folder.mustache

@@ -0,0 +1,102 @@
+{{!
+    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 mod_folder/folder
+
+    Template for displaying folder resource.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Example context (json):
+    {
+        "id": 42,
+        "showexpanded": true,
+        "buttons": {
+           "edit_button": {
+                "id": "edit_button",
+                "label": "Edit",
+                "url": "/mod/folder/edit.php",
+                "classes": "navitem"
+            },
+            "download_button": {
+                "id": "download_button",
+                "label": "Download",
+                "url": "/mod/folder/download.php",
+                "classes": "navitem"
+            }
+        },
+        "dir": [
+            {
+                "name": "Folder",
+                "icon": "<img src='icon' alt='alt'>",
+                "hassubdirs": true,
+                "subdirs": [
+                    {
+                        "name": "File1",
+                        "icon": "<img src='icon' alt='alt'>",
+                        "hassubdirs": false,
+                        "subdirs": null
+                     }
+                ]
+            },
+            {
+                "name": "File2",
+                "icon": "<img src='icon' alt='alt'>",
+                "hassubdirs": false,
+                "subdirs": null
+            }
+        ]
+    }
+}}
+
+<div class="flex-fill description-inner text-break">
+    {{{intro}}}
+    {{#hasbuttons}}
+        <div class="container-fluid">
+            <div class="row">
+                {{#edit_button}}
+                    {{>core/single_button}}
+                {{/edit_button}}
+                {{#download_button}}
+                    {{>core/single_button}}
+                {{/download_button}}
+            </div>
+        </div>
+    {{/hasbuttons}}
+    <div class="box generalbox pt-0 pb-3 foldertree">
+        <div id="{{{id}}}" class="filemanager">
+            {{#dir}}
+                <ul>
+                    <li>
+                        {{>mod_folder/tree}}
+                    </li>
+                </ul>
+            {{/dir}}
+        </div>
+    </div>
+</div>
+
+{{#js}}
+    // Init tree JS.
+    require(['mod_folder/folder'], function(Folder) {
+        Folder.initTree('{{{id}}}', '{{{showexpanded}}}');
+    });
+{{/js}}

mod/folder/templates/tree.mustache

@@ -0,0 +1,65 @@
+{{!
+    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 mod_folder/tree
+
+    Template for displaying a folder content subdirs and files tree.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * none
+
+    Example context (json):
+    {
+        "name": "Folder",
+        "icon": "<img src='icon' alt='alt'>",
+        "hassubdirs": true,
+        "subdirs": [
+            {
+                "name": "File1",
+                "icon": "<img src='icon' alt='alt'>",
+                "hassubdirs": false,
+                "subdirs": null
+             }
+        ]
+    }
+}}
+
+<div class="fp-filename-icon">
+    <span class="fp-icon">
+        {{{icon}}}
+    </span>
+    <span class="fp-filename">
+        {{#url}}
+            <a href="{{url}}">{{{name}}}</a>
+        {{/url}}
+        {{^url}}
+            {{{name}}}
+        {{/url}}
+    </span>
+</div>
+{{#hassubdirs}}
+    <ul>
+        {{#subdirs}}
+            <li>
+                {{>mod_folder/tree}}
+            </li>
+        {{/subdirs}}
+    </ul>
+{{/hassubdirs}}

mod/folder/upgrade.txt

@@ -0,0 +1,5 @@
+This files describes API changes in /mod/folder/*,
+information provided here is intended especially for developers.
+
+=== 4.3 ===
+  * htmllize_tree() method has been deprecated. Use renderable_tree_elements() instead.