MDL-72668 block_private_files: Switched from YUI to core/tree AMD

blocks/private_files/amd/src/files_tree.js

@@ -0,0 +1,33 @@
+// 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/>.
+
+/**
+ * Changes the display of directories and files into a tree.
+ *
+ * @module      block_private_files/files_tree
+ * @copyright   2021 Shamim Rezaie <shamim@moodle.com>
+ * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+import Tree from 'core/tree';
+
+/**
+ * The init function that does the job.
+ * It changes the display of directories and files into a tree.
+ *
+ * @param {string} blockId
+ */
+export const init = (blockId) => {
+    new Tree(`#${blockId} [role="tree"]`);
+};

blocks/private_files/renderer.php

@@ -35,41 +35,53 @@ public function private_files_tree() {
     }
 
     public function render_private_files_tree(private_files_tree $tree) {
-        $module = array('name'=>'block_private_files', 'fullpath'=>'/blocks/private_files/module.js', 'requires'=>array('yui2-treeview'));
         if (empty($tree->dir['subdirs']) && empty($tree->dir['files'])) {
             $html = $this->output->box(get_string('nofilesavailable', 'repository'));
         } else {
             $htmlid = 'private_files_tree_'.uniqid();
-            $this->page->requires->js_init_call('M.block_private_files.init_tree', array(false, $htmlid));
+            $this->page->requires->js_call_amd('block_private_files/files_tree', 'init', [$htmlid]);
             $html = '<div id="'.$htmlid.'">';
-            $html .= $this->htmllize_tree($tree, $tree->dir);
+            $html .= $this->htmllize_tree($tree, $tree->dir, true);
             $html .= '</div>';
         }
 
         return $html;
     }
 
     /**
-     * Internal function - creates htmls structure suitable for YUI tree.
+     * Internal function - creates htmls structure suitable for core/tree AMD.
+     *
+     * @param private_files_tree $tree The renderable tree.
+     * @param array $dir The directory in the tree
+     * @param bool $isroot If it is the root directory in the tree.
+     * @return string
      */
-    protected function htmllize_tree($tree, $dir) {
+    protected function htmllize_tree($tree, $dir, $isroot) {
         global $CFG;
-        $yuiconfig = array();
-        $yuiconfig['type'] = 'html';
 
         if (empty($dir['subdirs']) and empty($dir['files'])) {
             return '';
         }
-        $result = '<ul>';
+        if ($isroot) {
+            $result = '<ul role="tree" aria-label="' . s(get_string('privatefiles')) . '">';
+        } else {
+            $result = '<ul role="group" aria-hidden="true">';
+        }
         foreach ($dir['subdirs'] as $subdir) {
-            $image = $this->output->pix_icon(file_folder_icon(), $subdir['dirname'], 'moodle', array('class'=>'icon'));
-            $result .= '<li yuiConfig=\''.json_encode($yuiconfig).'\'><div>'.$image.s($subdir['dirname']).'</div> '.$this->htmllize_tree($tree, $subdir).'</li>';
+            $image = $this->output->pix_icon(file_folder_icon(), '');
+            $content = $this->htmllize_tree($tree, $subdir, false);
+            if ($content) {
+                $result .= '<li role="treeitem" aria-expanded="false"><p>' . $image . s($subdir['dirname']) . '</p>' .
+                    $content . '</li>';
+            } else {
+                $result .= '<li role="treeitem"><p>' . $image . s($subdir['dirname']) . '</p></li>';
+            }
         }
         foreach ($dir['files'] as $file) {
             $url = file_encode_url("$CFG->wwwroot/pluginfile.php", '/'.$tree->context->id.'/user/private'.$file->get_filepath().$file->get_filename(), true);
             $filename = $file->get_filename();
-            $image = $this->output->pix_icon(file_file_icon($file), $filename, 'moodle', array('class'=>'icon'));
-            $result .= '<li yuiConfig=\''.json_encode($yuiconfig).'\'><div>'.html_writer::link($url, $image.$filename).'</div></li>';
+            $image = $this->output->pix_icon(file_file_icon($file), '');
+            $result .= '<li role="treeitem">'.html_writer::link($url, $image.$filename, ['tabindex' => -1]).'</li>';
         }
         $result .= '</ul>';
 

blocks/private_files/styles.css

@@ -8,3 +8,70 @@
     padding: 10px 0 0;
     margin-top: .5em;
 }
+
+.block_private_files ul[role="tree"] {
+    margin: 0;
+    padding: 0;
+}
+.block_private_files ul,
+.block_private_files li {
+    list-style: none;
+}
+
+.block_private_files [role="treeitem"] {
+    padding-left: 22px;
+    cursor: pointer;
+}
+
+.block_private_files [role="treeitem"] p {
+    margin-bottom: 0;
+}
+
+.block_private_files [role="treeitem"][aria-expanded] {
+    padding-left: 0;
+}
+
+.block_private_files [role="treeitem"][aria-expanded="false"] > p::before {
+    /*rtl:remove*/
+    content: url('[[pix:t/collapsed]]');
+    /*rtl:raw:
+        content: url('[[pix:t/collapsed_rtl]]');
+    */
+    vertical-align: sub;
+    margin-right: 5px;
+}
+
+.block_private_files [role="treeitem"][aria-expanded="true"] > p::before {
+    content: url('[[pix:t/expanded]]');
+    vertical-align: sub;
+    margin-right: 5px;
+}
+
+.block_private_files [role="treeitem"]:not([aria-expanded]) {
+    background-image:
+        repeating-linear-gradient(to right, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .5) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 2px),
+        repeating-linear-gradient(to top, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 2px);
+    background-repeat: no-repeat, no-repeat;
+    /*rtl:remove*/
+    background-position: left 10px top 50%, left 8px top 0;
+    /*rtl:raw:
+        background-position: right 10px top 50%, right 8px top 0;
+    */
+    background-size: 11px 1px, 1px 100%;
+}
+
+.block_private_files [role="treeitem"]:not([aria-expanded]):last-child {
+    background-size: 11px 1px, 1px 50%;
+}
+
+.block_private_files [role="group"] {
+    background-image: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.5) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 2px);
+    background-repeat: no-repeat;
+    background-position: left 8px top 100%;
+    background-size: 1px 100%;
+    margin-left: 0;
+}
+
+.block_private_files [aria-hidden="true"]:not(.icon) {
+    display: none;
+}

lib/amd/src/tree.js

@@ -418,7 +418,7 @@ define(['jquery'], function($) {
                     }).focus();
                 };
 
-                // If this is a goup item then collapse it and focus the parent group
+                // If this is a group item then collapse it and focus the parent group
                 // in accordance with the aria spec.
                 if (this.isGroupItem(item)) {
                     if (this.isGroupCollapsed(item)) {
@@ -531,5 +531,5 @@ define(['jquery'], function($) {
         }, SELECTORS.ITEM);
     };
 
-    return /** @alias module:tool_lp/tree */ Tree;
+    return /** @alias module:core/tree */ Tree;
 });