Add share button to preview

.github/workflows/ci.yml

@@ -15,14 +15,14 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
 
     - name: Validate composer.json and composer.lock
       run: composer validate --strict
 
     - name: Cache Composer packages
       id: composer-cache
-      uses: actions/cache@v3
+      uses: actions/cache@v4
       with:
         path: vendor
         key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}
@@ -36,7 +36,7 @@ jobs:
       run: ./publish.sh
 
     - name: Upload release
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v4
       with:
         name: Release
         path: ./publish

_internal/DeerLister.php

@@ -35,7 +35,7 @@ function __construct()
         // Convert a size in byte to something more diggest
         $this->twig->addFilter(new TwigFilter("humanFileSize", function($size) {
             $units = ["B", "KB", "MB", "GB"];
-            for ($i = 0; $size > 1024; $i++) $size /= 1024;
+            for ($i = 0; $size > 1024 && $i < count($units); $i++) $size /= 1024;
 
             return round($size, 2) . $units[$i];
         }));
@@ -153,6 +153,7 @@ private function readDirectory(string $directory, mixed $config): array|false
             array_push($files,
                 [
                     "name" => $name,
+                    "share" => urlencode($name),
                     "isFolder" => $isFolder,
                     "icon" => $isFolder ? Icons::getFolderIcon() : Icons::getIcon($ext),
                     "lastModified" => $modified,
@@ -288,7 +289,7 @@ public function registerFileDisplay(string $name, string $display)
         $this->fileDisplays[$name] = $instance;
     }
 
-    public function render(string $directory): string
+    public function render(string $directory, string $preview): string
     {
         // read the directory
         if (($files = $this->readDirectory($directory, $this->config)) === false)
@@ -333,6 +334,10 @@ public function render(string $directory): string
                 }
             }
 
+            if (urlencode($f["name"]) === $preview) {
+                $f["preview"] = true;
+            }
+
             if (!$displayBack && $f["name"] === "..")
             { }
             else if (!$displayOthers && isset($displayMode) && !$this->fileDisplays[$displayMode]->doesHandle($f["extension"]))

_internal/css/index.css

@@ -141,6 +141,11 @@ body {
     text-decoration: none;
 }
 
+.button:hover {
+    box-shadow: .15em .15em lightgrey;
+    cursor: pointer;
+}
+
 .codeblock {
     padding: 1em;
     border-radius: 5px;

_internal/js/script.js

@@ -12,45 +12,71 @@ document.querySelector(".modal").addEventListener("click", function(event) {
     event.currentTarget.style.display = "none"
 })
 
+const prev = document.getElementById("selected-preview")
+if (prev != undefined) {
+    showFile(prev.href, prev.dataset.preview, prev.dataset.filename, prev.dataset.share)
+}
+
 function fileClicked(event) {
     const target = event.currentTarget
 
     const file = target.dataset.preview
     const filename = target.dataset.filename
+    const share = target.dataset.share
 
     // check if file is previewable
     if (file) {
         event.preventDefault()
 
-        // fetch file preview
-        fetch("/?preview=" + encodeURIComponent(file))
-            .then(response => {
-                if (!response.ok) {
-                    throw "Failed to preview file: " + response.statusText
-                }
-
-                return response.text()
-            })
-            .then(content => {
-                showFileModal(target, filename, content);
-                document.querySelectorAll('pre code').forEach((el) => {
-                    hljs.highlightElement(el);
-                });
-            })
+        showFile(target.href, file, filename, share)
     }
 }
 
-function showFileModal(target, filename, content) {
+function showFile(href, file, filename, shareName) {
+
+    // fetch file preview
+    fetch("/?preview=" + encodeURIComponent(file))
+        .then(response => {
+            if (!response.ok) {
+                throw "Failed to preview file: " + response.statusText
+            }
+
+            return response.text()
+        })
+        .then(content => {
+            showFileModal(href, filename, content, shareName);
+            document.querySelectorAll('pre code').forEach((el) => {
+                hljs.highlightElement(el);
+            });
+        })
+}
+
+function showFileModal(href, filename, content, shareName) {
     // clone template
     const clone = template.content.cloneNode(true)
 
     // fill out
     clone.querySelector("h2").innerText = filename
     clone.querySelector("div").innerHTML = content
 
-    clone.querySelector("a").href = target.href
+    clone.querySelector("a").href = href
 
     // add into modal and show it
-    document.querySelector(".modal-body").innerHTML = clone
+    document.querySelector(".modal-body").innerHTML = ""
+    document.querySelector(".modal-body").appendChild(clone)
     document.getElementById("modal").style.display = "block"
+
+    document.getElementById("share").addEventListener("click", _ => {
+        const nodes = document.querySelectorAll(".path > a")
+        const dir = nodes[nodes.length - 1]
+        const url = `${window.location.origin}${window.location.pathname}?dir=${dir.innerHTML}&share=${shareName}`
+        if (navigator.share)
+        {
+            navigator.share({url: url});
+        }
+        else
+        {
+            window.prompt("Copy to share", url)
+        }
+    })
 }

_internal/templates/displays/audio.html.twig

@@ -7,10 +7,14 @@
     </div>
     {% for file in files %}
         <a href="{{ file | getFilePath(path.full) }}" data-filename="{{ file.name }}"
-            {%if file.extension | canBeDisplayed(displayName) %}
+            {% if file.extension | canBeDisplayed(displayName) %}
             class="audio-preview"
-            {%elseif file.filePreview %}
+            {% elseif file.filePreview %}
             data-preview="{{ file.filePreview }}"
+            data-share="{{ file.share }}"
+            {% endif %}
+            {% if file.preview %}
+            id="selected-preview"
             {% endif %}
         >
             <div class="file-info">

_internal/templates/displays/image.html.twig

@@ -1,6 +1,6 @@
 <div class="display-image-flex-container">
     {% for file in files %}
-        <a href="{{ file | getFilePath(path.full) }}" data-filename="{{ file.name }}" {%if file.filePreview %} data-preview="{{ file.filePreview }}" {% endif %}>
+        <a href="{{ file | getFilePath(path.full) }}" data-filename="{{ file.name }}" {%if file.filePreview %} data-preview="{{ file.filePreview }}" data-share="{{ file.share }}" {% endif %} {% if file.preview %} id="selected-preview" {% endif %}>
             <div class="display-image">
                 {%if file.name == ".." %}
                     <i class="fa-solid fa-arrow-left"></i>

_internal/templates/displays/normal.html.twig

@@ -6,7 +6,7 @@
         <div class="last-modified">Last Modified</div>
     </div>
     {% for file in files %}
-        <a href="{{ file | getFilePath(path.full) }}" data-filename="{{ file.name }}" {%if file.filePreview %} data-preview="{{ file.filePreview }}" {% endif %}>
+        <a href="{{ file | getFilePath(path.full) }}" data-filename="{{ file.name }}" {%if file.filePreview %} data-preview="{{ file.filePreview }}" data-share="{{ file.share }}" {% endif %} {% if file.preview %} id="selected-preview" {% endif %}>
             <div class="file-info">
                 <div class="icon"><i class="{{ file.icon }}"></i></div>
                 <div class="name">{{ file.name }}</div>

_internal/templates/index.html.twig

@@ -27,7 +27,7 @@
     </div>
 
     <template id="filepreview">
-        <h2 class="preview-title"></h2> <a class="button" download>Download</a>
+        <h2 class="preview-title"></h2> <a class="button" download>Download</a> <a class="button" id="share">Share</a>
 
         <div class="preview-content">
 

index.php

@@ -36,4 +36,4 @@
     exit;
 }
 
-echo $lister->render($_GET["dir"] ?? "");
+echo $lister->render($_GET["dir"] ?? "", $_GET["share"] ?? "");