implemented image embedding links

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/files/Index.svelte

@@ -6,6 +6,7 @@
     import { t }             from '../../translations.svelte';
     import { user }          from '../../user.svelte';
 
+    const image_extensions = ['jpg','jpeg','gif','png','svg'];
     const router = useTinyRouter();
     let children = $state({});
     let new_dir = $state(null);
@@ -80,12 +81,17 @@
         yikes();
     }
 
+    function is_image(file){
+        let parts = file.toLowerCase().split('.');
+        let ext = parts.pop();
+        return image_extensions.includes(ext);
+    }
+
     async function loadChildren(p){
         p = p.substring(6);
         if (p == '') p = '/';
         children = { dirs : {}, files : {}, title : p};
         path = p;
-        console.log(p);
         if (p == '/'){
             children.dirs[`/user/${user.id}`]  = t('my_files');
             children.dirs['/project']  = t('projects')
@@ -106,6 +112,12 @@
         }
     }
 
+    function markdown(file){
+        let parts = file.split('/');
+        let md = `![${parts.pop()}](/api/files${file})`;
+        navigator.clipboard.writeText(md);
+    }
+
     function onclick(ev){
         ev.preventDefault();
         ev.stopPropagation();
@@ -178,8 +190,11 @@
     <li class="file">
         <span class="symbol"></span>
         <a href={`/api/files${k}`} target="_blank">{v}</a>
+        {#if is_image(k)}
+        <button class="symbol" title={'markdown_code'} onclick={e => markdown(k)}></button>
+        {/if}
         {#if delete_allowed}
-        <button class="symbol" onclick={e => dropFile(`/api/files${k}`,v)}></button>
+        <button class="symbol" title={t('delete_object',{'object':t('file')})} onclick={e => dropFile(`/api/files${k}`,v)}></button>
         {/if}
     </li>
 {/each}

translations/src/main/resources/de.json

@@ -84,6 +84,7 @@
 
   "failed": "fehlgeschlagen",
   "failed_login_attempts" : "Account nach {attempts} fehlgeschlagenen Logins gesperrt bis {release_time}",
+  "file": "Datei",
   "files": "Dateien",
   "filter": "Filter",
   "footer": "Fuß-Text",
@@ -123,6 +124,7 @@
   "logout_user": "{user} abmelden",
   "long_click_to_edit": "lang klicken zum Bearbeiten",
 
+  "markdown_code": "Markdown-Code",
   "MANAGE_LOGIN_SERVICES": "Login-Services verwalten",
   "member": "Mitarbeiter",
   "members": "Mitarbeiter",

translations/src/main/resources/en.json

@@ -123,6 +123,7 @@
   "logout_user": "logout {user}",
   "long_click_to_edit": "click long to edit",
 
+  "markdown_code": "Markdown-Code",
   "MANAGE_LOGIN_SERVICES": "manage login services",
   "member": "member",
   "members": "members",

web/src/main/resources/web/css/basic.css

@@ -659,4 +659,8 @@ li.task button.symbol:nth-child(1){
 
 .timetracks .selected td:not(.year):not(.month){
     background: skyblue;
+}
+
+.markdown image{
+    max-width: 75%;
 }

web/src/main/resources/web/css/bloodshed.css

@@ -298,6 +298,11 @@ span.timetracking {
     right: 0;
     top: 0;
 }
+
+.markdown img{
+    max-width: 75%;
+}
+
 table{
     min-width: 30vw;
 }

web/src/main/resources/web/css/default.css

@@ -294,6 +294,11 @@ span.timetracking {
     right: 0;
     top: 0;
 }
+
+.markdown img{
+    max-width: 75%;
+}
+
 table{
     min-width: 30vw;
 }

web/src/main/resources/web/css/winter.css

@@ -298,6 +298,11 @@ span.timetracking {
     right: 0;
     top: 0;
 }
+
+.markdown img{
+    max-width: 75%;
+}
+
 table{
     min-width: 30vw;
 }