Initial impelementation of "View" item for pagemedia cards (#1010)

admin.php

@@ -652,7 +652,7 @@ class AdminPlugin extends Plugin
             'DROP_FILES_HERE_TO_UPLOAD',
             'DELETE',
             'INSERT',
-            'UNDO',
+            'VIEW',
             'UNDO',
             'REDO',
             'HEADERS',

languages/en.yaml

@@ -34,6 +34,7 @@ PLUGIN_ADMIN:
   ADD_MODULAR: "Add Modular"
   MOVE: "Move"
   DELETE: "Delete"
+  VIEW: "View"
   SAVE: "Save"
   NORMAL: "Normal"
   EXPERT: "Expert"

themes/grav/app/pages/page/media.js

@@ -16,6 +16,7 @@ const previewTemplate = `
       <div class="dz-error-mark"><span>✘</span></div>
       <div class="dz-error-message"><span data-dz-errormessage></span></div>
       <a class="dz-remove" href="javascript:undefined;" data-dz-remove>${translations.PLUGIN_ADMIN.DELETE}</a>
+      <a class="dz-view" href="#" target="_blank" data-dz-view>${translations.PLUGIN_ADMIN.VIEW}</a>
       <a class="dz-insert" href="javascript:undefined;" data-dz-insert>${translations.PLUGIN_ADMIN.INSERT}</a>
     </div>`.trim();
 
@@ -97,6 +98,15 @@ export default class PageMedia extends FilesField {
             }
         });
 
+        this.container.delegate('[data-dz-view]', 'mouseenter', (e) => {
+            let target = $(e.currentTarget);
+            let file = target.parent('.dz-preview').find('.dz-filename');
+            let filename = encodeURI(file.text());
+            let URL = target.closest('[data-media-path]').data('media-path');
+
+            target.attr('href', `${URL}/${filename}`);
+        });
+
         this.container.delegate('.dz-preview', 'dragstart', (e) => {
             let target = $(e.currentTarget);
             let uri = encodeURI(target.find('.dz-filename').text());

themes/grav/templates/forms/fields/pagemedia/pagemedia.html.twig

@@ -12,6 +12,7 @@
              class="dropzone"
              data-media-url="{{ base_url }}/media/{{ admin.route|trim('/') }}.json"
              data-media-local="{{ base_url_relative_frontend|rtrim('/') }}/{{ admin.route|trim('/') }}"
+             data-media-path="{{ url(context.relativePagePath) }}"
              data-dropzone-options="{{ dropzoneSettings|json_encode|e('html_attr') }}"></div>
         <span>{{ value|join("\n") }}</span>
     </div>