Preview modal

administrator/components/com_media/resources/scripts/app/Api.js

@@ -28,10 +28,10 @@ class Api {
      * @param dir
      * @returns {Promise}
      */
-    getContents(dir) {
+    getContents(dir, full) {
         // Wrap the ajax call into a real promise
         return new Promise((resolve, reject) => {
-            const url = this._baseUrl + '&task=api.files&path=' + dir;
+            const url = this._baseUrl + '&task=api.files&path=' + dir + '&url=' + full;
 
 	        Joomla.request({
 		        url:    url,

administrator/components/com_media/resources/scripts/components/app.vue

@@ -12,6 +12,7 @@
         </div>
         <media-upload></media-upload>
         <media-create-folder-modal></media-create-folder-modal>
+        <media-preview-modal></media-preview-modal>
     </div>
 </template>
 

administrator/components/com_media/resources/scripts/components/browser/items/image.vue

@@ -1,9 +1,8 @@
 <template>
-    <div class="media-browser-image">
+    <div class="media-browser-image" @dblclick="openPreview()">
         <div class="media-browser-item-preview">
             <div class="image-brackground">
-                <div class="image-cropped" :style="{ backgroundImage: 'url(' + thumbUrl + ')' }"
-                 @dblclick="openEditView()"></div>
+                <div class="image-cropped" :style="{ backgroundImage: 'url(' + thumbUrl + ')' }"></div>
             </div>
         </div>
         <div class="media-browser-item-info">
@@ -22,7 +21,8 @@
 </template>
 
 <script>
-    // TODO DN get the base path and make the path dynamic
+    import * as types from './../../../store/mutation-types';
+
     export default {
         name: 'media-browser-item-image',
         props: ['item'],
@@ -33,7 +33,12 @@
             }
         },
         methods: {
-            /* Delete am item */
+            /* Preview an item */
+            openPreview() {
+                this.$store.commit(types.SHOW_PREVIEW_MODAL);
+                this.$store.dispatch('getFullContents', this.item);
+            },
+            /* Delete an item */
             deleteItem() {
                 this.$store.dispatch('deleteItem', this.item);
             },

administrator/components/com_media/resources/scripts/components/modals/preview-modal.vue

@@ -0,0 +1,33 @@
+<template>
+    <media-modal v-if="$store.state.showPreviewModal && item" :size="'md'" @close="close()">
+        <h3 slot="header" class="modal-title">{{ item.name }}</h3>
+        <div slot="body">
+            <img :src="item.url"/>
+        </div>
+        <div slot="footer">
+            <button class="btn btn-link" @click="close()">{{ translate('JCANCEL') }}</button>
+        </div>
+    </media-modal>
+</template>
+
+<script>
+    import * as types from "../../store/mutation-types";
+    import * as item from "../../components/browser/items/item";
+
+    export default {
+        name: 'media-preview-modal',
+        computed: {
+            /* Get the item to show in the modal */
+            item() {
+                // Use the currently selected directory as a fallback
+                return this.$store.state.previewItem;
+            }
+        },
+        methods: {
+            /* Close the modal */
+            close() {
+                this.$store.commit(types.HIDE_PREVIEW_MODAL);
+            }
+        }
+    }
+</script>

administrator/components/com_media/resources/scripts/mediamanager.js

@@ -12,6 +12,7 @@ import Browser from "./components/browser/browser.vue";
 import BrowserItem from "./components/browser/items/item";
 import Modal from "./components/modals/modal.vue";
 import CreateFolderModal from "./components/modals/create-folder-modal.vue";
+import PreviewModal from "./components/modals/preview-modal.vue";
 import Infobar from "./components/infobar/infobar.vue";
 import Upload from "./components/upload/upload.vue";
 import Translate from "./plugins/translate";
@@ -31,6 +32,7 @@ Vue.component('media-browser', Browser);
 Vue.component('media-browser-item', BrowserItem);
 Vue.component('media-modal', Modal);
 Vue.component('media-create-folder-modal', CreateFolderModal);
+Vue.component('media-preview-modal', PreviewModal);
 Vue.component('media-infobar', Infobar);
 Vue.component('media-upload', Upload);
 

administrator/components/com_media/resources/scripts/store/actions.js

@@ -29,7 +29,7 @@ export const getContents = (context, payload) => {
     // Update the url
     updateUrlPath(payload);
 
-    api.getContents(payload)
+    api.getContents(payload, false)
         .then(contents => {
             context.commit(types.LOAD_CONTENTS_SUCCESS, contents);
             context.commit(types.UNSELECT_ALL_BROWSER_ITEMS);
@@ -41,6 +41,17 @@ export const getContents = (context, payload) => {
         });
 }
 
+export const getFullContents = (context, payload) => {
+	api.getContents(payload.path, true)
+		.then(contents => {
+		context.commit(types.LOAD_FULL_CONTENTS_SUCCESS, contents.files[0]);
+    })
+    .catch(error => {
+            // TODO error handling
+            console.log("error", error);
+    });
+}
+
 /**
  * Toggle the selection state of an item
  * @param commit

administrator/components/com_media/resources/scripts/store/mutation-types.js

@@ -5,6 +5,7 @@ export const UNSELECT_ALL_BROWSER_ITEMS = 'UNSELECT_ALL_BROWSER_ITEMS';
 
 // Api handlers
 export const LOAD_CONTENTS_SUCCESS = 'LOAD_CONTENTS_SUCCESS';
+export const LOAD_FULL_CONTENTS_SUCCESS = 'LOAD_FULL_CONTENTS_SUCCESS';
 export const CREATE_DIRECTORY_SUCCESS = 'CREATE_DIRECTORY_SUCCESS';
 export const UPLOAD_SUCCESS = 'UPLOAD_SUCCESS';
 
@@ -21,3 +22,7 @@ export const DELETE_SUCCESS = 'DELETE_SUCCESS';
 
 // List view
 export const CHANGE_LIST_VIEW = 'CHANGE_LIST_VIEW';
+
+// Preview modal
+export const SHOW_PREVIEW_MODAL = 'SHOW_PREVIEW_MODAL';
+export const HIDE_PREVIEW_MODAL = 'HIDE_PREVIEW_MODAL';

administrator/components/com_media/resources/scripts/store/mutations.js

@@ -212,7 +212,7 @@ export default {
     },
 
     /**
-     * Show the create folder modal
+     * Hide the create folder modal
      * @param state
      */
     [types.HIDE_CREATE_FOLDER_MODAL]: (state) => {
@@ -242,4 +242,29 @@ export default {
     [types.CHANGE_LIST_VIEW]: (state, view) => {
         state.listView = view;
     },
+
+    /**
+     * FUll content is loaded
+     * @param state
+     * @param payload
+     */
+    [types.LOAD_FULL_CONTENTS_SUCCESS]: (state, payload) => {
+        state.previewItem = payload;
+    },
+
+    /**
+     * Show the preview modal
+     * @param state
+     */
+    [types.SHOW_PREVIEW_MODAL]: (state) => {
+        state.showPreviewModal = true;
+    },
+
+    /**
+     * Hide the preview modal
+     * @param state
+     */
+    [types.HIDE_PREVIEW_MODAL]: (state) => {
+        state.showPreviewModal = false;
+    },
 }

administrator/components/com_media/resources/scripts/store/state.js

@@ -46,5 +46,9 @@ export default {
     // The state of the infobar
     showInfoBar: false,
     // List view
-    listView: 'grid'
+    listView: 'grid',
+    // The state of preview model
+	showPreviewModal: false,
+    // The preview item
+	previewItem: null
 }