refact+style(UX/UI): showing nodes at top if they are less or equal t…

…han 20
sabre-io · Nov 30, 2024 · f2d6f75 · f2d6f75
1 parent bea6faa
commit f2d6f75
Showing 1 changed file with 82 additions and 57 deletions.
diff --git a/lib/DAV/Browser/Plugin.php b/lib/DAV/Browser/Plugin.php
@@ -262,6 +262,24 @@ public function generateDirectoryIndex($path)
 
         $node = $this->server->tree->getNodeForPath($path);
 
+        $subNodes = null;
+        $numSubNodes = 0;
+        $maxNodesAtTopSection = 20;
+        if ($node instanceof DAV\ICollection) {
+            $subNodes = $this->server->getPropertiesForChildren($path, [
+                '{DAV:}displayname',
+                '{DAV:}resourcetype',
+                '{DAV:}getcontenttype',
+                '{DAV:}getcontentlength',
+                '{DAV:}getlastmodified',
+            ]);
+            $numSubNodes = count($subNodes);
+            if ($numSubNodes && $numSubNodes <= $maxNodesAtTopSection) {
+               $html .= $this->generateNodesSection($subNodes, $numSubNodes);
+               $numSubNodes = 0;
+            }
+        }
+
         $html .= '<section><h1>Properties</h1>';
         $html .= '<table class="propTable">';
 
@@ -295,74 +313,81 @@ public function generateDirectoryIndex($path)
             $html .= "</section>\n";
         }
 
-        if ($node instanceof DAV\ICollection) {
-            $subNodes = $this->server->getPropertiesForChildren($path, [
-                '{DAV:}displayname',
-                '{DAV:}resourcetype',
-                '{DAV:}getcontenttype',
-                '{DAV:}getcontentlength',
-                '{DAV:}getlastmodified',
-            ]);
-
-            $html .= "<section><h1>Nodes (" . count($subNodes) . ")</h1>\n";
-            $html .= '<table class="nodeTable">';
+        // If there are nodes and they are more than the max number to show at the top of the page
+        if ($numSubNodes) {
+            $html .= $this->generateNodesSection($subNodes, $numSubNodes);
+        }
 
-            foreach ($subNodes as $subPath => $subProps) {
-                $subNode = $this->server->tree->getNodeForPath($subPath);
-                $fullPath = $this->server->getBaseUri().HTTP\encodePath($subPath);
-                list(, $displayPath) = Uri\split($subPath);
+        $html .= $this->generateFooter();
 
-                $subNodes[$subPath]['subNode'] = $subNode;
-                $subNodes[$subPath]['fullPath'] = $fullPath;
-                $subNodes[$subPath]['displayPath'] = $displayPath;
-            }
-            uasort($subNodes, [$this, 'compareNodes']);
+        $this->server->httpResponse->setHeader('Content-Security-Policy', "default-src 'none'; img-src 'self'; style-src 'self'; font-src 'self';");
 
-            foreach ($subNodes as $subProps) {
-                $type = [
-                    'string' => 'Unknown',
-                    'icon' => 'cog',
-                ];
-                if (isset($subProps['{DAV:}resourcetype'])) {
-                    $type = $this->mapResourceType($subProps['{DAV:}resourcetype']->getValue(), $subProps['subNode']);
-                }
+        return $html;
+    }
 
-                $html .= '<tr>';
-                $html .= '<td class="nameColumn"><a href="'.$this->escapeHTML($subProps['fullPath']).'"><span class="oi" data-glyph="'.$this->escapeHTML($type['icon']).'"></span> '.$this->escapeHTML($subProps['displayPath']).'</a></td>';
-                $html .= '<td class="typeColumn">'.$this->escapeHTML($type['string']).'</td>';
-                $html .= '<td>';
-                if (isset($subProps['{DAV:}getcontentlength'])) {
-                    $html .= $this->escapeHTML($subProps['{DAV:}getcontentlength'].' bytes');
-                }
-                $html .= '</td><td>';
-                if (isset($subProps['{DAV:}getlastmodified'])) {
-                    $lastMod = $subProps['{DAV:}getlastmodified']->getTime();
-                    $html .= $this->escapeHTML($lastMod->format('F j, Y, g:i a'));
-                }
-                $html .= '</td><td>';
-                if (isset($subProps['{DAV:}displayname'])) {
-                    $html .= $this->escapeHTML($subProps['{DAV:}displayname']);
-                }
-                $html .= '</td>';
+    /**
+     * Generates the Nodes section block of HTML.
+     *
+     * @param array $subNodes
+     * @param int $numSubNodes
+     *
+     * @return string
+     */
+    protected function generateNodesSection($subNodes, $numSubNodes)
+    {
+        $html = "<section><h1>Nodes (" . $numSubNodes . ")</h1>\n";
+        $html .= '<table class="nodeTable">';
 
-                $buttonActions = '';
-                if ($subProps['subNode'] instanceof DAV\IFile) {
-                    $buttonActions = '<a href="'.$this->escapeHTML($subProps['fullPath']).'?sabreAction=info"><span class="oi" data-glyph="info"></span></a>';
-                }
-                $this->server->emit('browserButtonActions', [$subProps['fullPath'], $subProps['subNode'], &$buttonActions]);
+        foreach ($subNodes as $subPath => $subProps) {
+            $subNode = $this->server->tree->getNodeForPath($subPath);
+            $fullPath = $this->server->getBaseUri().HTTP\encodePath($subPath);
+            list(, $displayPath) = Uri\split($subPath);
 
-                $html .= '<td>'.$buttonActions.'</td>';
-                $html .= '</tr>';
+            $subNodes[$subPath]['subNode'] = $subNode;
+            $subNodes[$subPath]['fullPath'] = $fullPath;
+            $subNodes[$subPath]['displayPath'] = $displayPath;
+        }
+        uasort($subNodes, [$this, 'compareNodes']);
+
+        foreach ($subNodes as $subProps) {
+            $type = [
+                'string' => 'Unknown',
+                'icon' => 'cog',
+            ];
+            if (isset($subProps['{DAV:}resourcetype'])) {
+                $type = $this->mapResourceType($subProps['{DAV:}resourcetype']->getValue(), $subProps['subNode']);
             }
 
-            $html .= '</table>';
-            $html .= '</section>';
-        }
+            $html .= '<tr>';
+            $html .= '<td class="nameColumn"><a href="'.$this->escapeHTML($subProps['fullPath']).'"><span class="oi" data-glyph="'.$this->escapeHTML($type['icon']).'"></span> '.$this->escapeHTML($subProps['displayPath']).'</a></td>';
+            $html .= '<td class="typeColumn">'.$this->escapeHTML($type['string']).'</td>';
+            $html .= '<td>';
+            if (isset($subProps['{DAV:}getcontentlength'])) {
+                $html .= $this->escapeHTML($subProps['{DAV:}getcontentlength'].' bytes');
+            }
+            $html .= '</td><td>';
+            if (isset($subProps['{DAV:}getlastmodified'])) {
+                $lastMod = $subProps['{DAV:}getlastmodified']->getTime();
+                $html .= $this->escapeHTML($lastMod->format('F j, Y, g:i a'));
+            }
+            $html .= '</td><td>';
+            if (isset($subProps['{DAV:}displayname'])) {
+                $html .= $this->escapeHTML($subProps['{DAV:}displayname']);
+            }
+            $html .= '</td>';
 
-        $html .= $this->generateFooter();
+            $buttonActions = '';
+            if ($subProps['subNode'] instanceof DAV\IFile) {
+                $buttonActions = '<a href="'.$this->escapeHTML($subProps['fullPath']).'?sabreAction=info"><span class="oi" data-glyph="info"></span></a>';
+            }
+            $this->server->emit('browserButtonActions', [$subProps['fullPath'], $subProps['subNode'], &$buttonActions]);
 
-        $this->server->httpResponse->setHeader('Content-Security-Policy', "default-src 'none'; img-src 'self'; style-src 'self'; font-src 'self';");
+            $html .= '<td>'.$buttonActions.'</td>';
+            $html .= '</tr>';
+        }
 
+        $html .= '</table>';
+        $html .= '</section>';
         return $html;
     }