From 8874725c5397751b80e46d8573cc334fc1d63e12 Mon Sep 17 00:00:00 2001 From: Amaia Anabitarte Date: Tue, 8 Aug 2023 15:31:01 +0200 Subject: [PATCH] MDL-78847 mod_folder: Fix inline folder renderer --- mod/folder/amd/build/folder.min.js | 10 ++ mod/folder/amd/build/folder.min.js.map | 1 + mod/folder/{module.js => amd/src/folder.js} | 15 ++- mod/folder/renderer.php | 114 +++++++++++++------- mod/folder/templates/folder.mustache | 102 ++++++++++++++++++ mod/folder/templates/tree.mustache | 65 +++++++++++ mod/folder/upgrade.txt | 5 + 7 files changed, 266 insertions(+), 46 deletions(-) create mode 100644 mod/folder/amd/build/folder.min.js create mode 100644 mod/folder/amd/build/folder.min.js.map rename mod/folder/{module.js => amd/src/folder.js} (84%) create mode 100644 mod/folder/templates/folder.mustache create mode 100644 mod/folder/templates/tree.mustache create mode 100644 mod/folder/upgrade.txt diff --git a/mod/folder/amd/build/folder.min.js b/mod/folder/amd/build/folder.min.js new file mode 100644 index 00000000000..688284d3678 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/mod/folder/amd/build/folder.min.js.map b/mod/folder/amd/build/folder.min.js.map new file mode 100644 index 00000000000..54bc89a30ee --- /dev/null +++ b/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 .\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"} \ No newline at end of file diff --git a/mod/folder/module.js b/mod/folder/amd/src/folder.js similarity index 84% rename from mod/folder/module.js rename to mod/folder/amd/src/folder.js index 32e4514051f..9352463ddae 100644 --- a/mod/folder/module.js +++ b/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(); }); -} +}; diff --git a/mod/folder/renderer.php b/mod/folder/renderer.php index e6153bf8169..b53a932b66b 100644 --- a/mod/folder/renderer.php +++ b/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 .= '
'; - $content .= $this->htmllize_tree($tree, array('files' => array(), 'subdirs' => array($tree->dir))); - $content .= '
'; - $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 { diff --git a/mod/folder/templates/folder.mustache b/mod/folder/templates/folder.mustache new file mode 100644 index 00000000000..d846885e56f --- /dev/null +++ b/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 . +}} +{{! + @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": "alt", + "hassubdirs": true, + "subdirs": [ + { + "name": "File1", + "icon": "alt", + "hassubdirs": false, + "subdirs": null + } + ] + }, + { + "name": "File2", + "icon": "alt", + "hassubdirs": false, + "subdirs": null + } + ] + } +}} + +
+ {{{intro}}} + {{#hasbuttons}} +
+
+ {{#edit_button}} + {{>core/single_button}} + {{/edit_button}} + {{#download_button}} + {{>core/single_button}} + {{/download_button}} +
+
+ {{/hasbuttons}} +
+
+ {{#dir}} +
    +
  • + {{>mod_folder/tree}} +
    • +
+ {{/dir}} +
+
+
+ +{{#js}} + // Init tree JS. + require(['mod_folder/folder'], function(Folder) { + Folder.initTree('{{{id}}}', '{{{showexpanded}}}'); + }); +{{/js}} diff --git a/mod/folder/templates/tree.mustache b/mod/folder/templates/tree.mustache new file mode 100644 index 00000000000..0cf307fa9d6 --- /dev/null +++ b/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 . +}} +{{! + @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": "alt", + "hassubdirs": true, + "subdirs": [ + { + "name": "File1", + "icon": "alt", + "hassubdirs": false, + "subdirs": null + } + ] + } +}} + +
+ + {{{icon}}} + + + {{#url}} + {{{name}}} + {{/url}} + {{^url}} + {{{name}}} + {{/url}} + +
+{{#hassubdirs}} +
    + {{#subdirs}} +
  • + {{>mod_folder/tree}} +
    • + {{/subdirs}} +
+{{/hassubdirs}} diff --git a/mod/folder/upgrade.txt b/mod/folder/upgrade.txt new file mode 100644 index 00000000000..6bdd5bc68a6 --- /dev/null +++ b/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.