Appearance

Preview Dialog ​

File Information ​

  • Path: components/dam/Dialogs/PreviewDialog.vue
  • Purpose: Full-screen asset preview with navigation and actions

Overview ​

The Preview Dialog component provides a full-screen preview interface for viewing assets with navigation controls, zoom functionality, and action buttons. It supports images, videos, PDFs, and other file types.

Key Features ​

  1. Asset Preview

    • Full-screen preview
    • Image preview
    • Video playback
    • PDF viewer
    • Document preview

  2. Navigation

    • Previous asset navigation
    • Next asset navigation
    • Keyboard shortcuts
    • Asset list navigation

  3. Zoom Controls

    • Zoom in/out
    • Pan functionality
    • Fit to screen
    • Reset zoom

  4. Actions

    • Download asset
    • Share asset
    • Edit asset
    • Delete asset
    • View details

  5. Asset Information

    • Asset name display
    • Asset metadata
    • File size and type
    • Creation date

Props ​

javascript
{
  dialog: {
    type: Boolean,
    default: false
  },
  asset: {
    type: Object,
    required: true
  },
  assetList: {
    type: Array,
    default: () => []
    // List of assets for navigation
  },
  currentIndex: {
    type: Number,
    default: 0
    // Current asset index in list
  }
}

Data Properties ​

javascript
{
  zoomLevel: 1,        // Zoom level (1 = 100%)
  panning: false,     // Panning state
  panStart: null,     // Pan start position
  loading: false     // Loading state
}

Computed Properties ​

currentAsset ​

Returns current asset being previewed

hasPrevious ​

Checks if previous asset exists

hasNext ​

Checks if next asset exists

previewUrl ​

Returns asset preview URL

Methods ​

openPreview(asset, index) ​

Opens preview for asset:

  • Sets current asset
  • Sets current index
  • Loads asset preview
  • Handles errors

closePreview() ​

Closes preview dialog:

  • Emits close event
  • Resets zoom
  • Clears state

Navigates to previous asset:

  • Decrements index
  • Loads previous asset
  • Updates preview

Navigates to next asset:

  • Increments index
  • Loads next asset
  • Updates preview

zoomIn() ​

Zooms in preview:

  • Increases zoom level
  • Updates zoom
  • Maintains center

zoomOut() ​

Zooms out preview:

  • Decreases zoom level
  • Updates zoom
  • Maintains center

resetZoom() ​

Resets zoom level:

  • Sets zoom to 1
  • Resets pan
  • Fits to screen

downloadAsset() ​

Downloads current asset:

  • Gets download URL
  • Triggers download
  • Handles errors

Events ​

  • close - Dialog closed
  • asset-changed - Asset changed (navigation)
  • download - Asset download requested
  • share - Asset share requested
  • edit - Asset edit requested

Keyboard Shortcuts ​

  • Arrow Left - Previous asset
  • Arrow Right - Next asset
  • Escape - Close dialog
  • + / - - Zoom in/out
  • 0 - Reset zoom

Usage Examples ​

Basic Usage ​

vue
<template>
  <PreviewDialog
    :dialog="showPreview"
    :asset="selectedAsset"
    :asset-list="assets"
    :current-index="currentIndex"
    @close="showPreview = false"
    @asset-changed="handleAssetChanged"
  />
</template>

<script>
import PreviewDialog from '~/components/dam/Dialogs/PreviewDialog.vue'

export default {
  components: {
    PreviewDialog
  }
}
</script>

Integration Points ​

  • Asset List: Opens from asset cards
  • Search Results: Preview from search
  • Folder Views: Preview from folders
  • Quick View: Alternative preview

Notes for Development ​

  • Supports multiple file types
  • Keyboard navigation enabled
  • Zoom for images only
  • Video playback supported
  • PDF viewer integration