Gallery Plugin

This plugin is used for saving and organizing photos into different folders. It offers features like uploading, editing, deleting, downloading, converting to PDF, adding comments, and more. It makes managing multiple photos easy and efficient.

Demo version

How to use

Plugin options interface

interface PluginOptions {
  contractId: number
  token?: string
  selector?: string
  credentials?: {
    customerNumber: string
    user: string
    password: string
  }
}

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- load plugin styles -->
    <link href="https://plugins.wedat.eu/gallery/plugin.css" rel="stylesheet" />
  </head>
  <body>
    <!-- element to which plugin will be rendered -->
    <div class="plugin"></div>

    <!-- load plugin JS synchronously -->
    <script src="https://plugins.wedat.eu/gallery/plugin.js"></script>

    <!-- init plugin options in your JS file or inline JS like this -->
    <script>
      window.GALLERY_API.init({
        selector: '.plugin',
        contractId: '14182472'
      })
    </script>
  </body>
</html>

Example with token

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- load plugin styles -->
    <link href="https://plugins.wedat.eu/gallery/plugin.css" rel="stylesheet" />
  </head>
  <body>
    <!-- element to which plugin will be rendered -->
    <div class="plugin"></div>

    <!-- load plugin JS synchronously -->
    <script src="https://plugins.wedat.eu/gallery/plugin.js"></script>

    <!-- init plugin options in your JS file or inline JS like this -->
    <script>
      window.GALLERY_API.init({
        selector: '.plugin',
        contractId: '14182472',
        token:
          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJkYXQiLCJpYXQiOjE2Mjc5MTAwMTg0MDUsImNsbnQiOiIzMTMxNDExIiwidXNlciI6ImZlcnJzaW1vIiwiYXBpdCI6IlJTQS1PQUVQLTI1NiIsImFwaXIiOiJKR2lPUE5mNXMwbDVnS2xiZ2hjZjYwOEhPNU04UkRyc3l5c3ByL3RJd1BJWUJBQWNqaTJTSlRJTXowbkkwS1IyaXpwZFhUMDJEY2tHd0xEWjVKTng2MzB0TlF5OWR5cmVEM3FRN0pYWm5uUFBqU2FtR3AzbnRleTJieUdIcTAyY3I1TEF1OE1seUVGT0tDSzlGQW5BdFNXK0QvbUdwa1ZqWHNiTnphN1FMbEFZZlpadENyWnM5ejNWTXdzU1ZBVkJpbGVOc1JsTHVxbGh0bjlBVGRscjhyOEFFNlQ3QVZlV1E0RzhiWUd0amlxQmFoMzZvRG1qMlBWTFRKTGZ5NnJnN1RqRW1aNkxGOWxXTmJTT2R2YUlzTXlISjRnUFZpTUJ1T1VXejUzRkorcmVlcU1DU3VGN3loR2s1SjVRNE5PWW5aUnpjVHV4SGxkMGVyQjU3ODg1ZkJheDdyVEhTQ3ZhYjA1REUrSldKd0ovM015dzVxeDBNeXV0UDRqTjlWTS85YVF5T214Y2luYlp0OUIxNHdyR0I1RFE5dVFING9CWWhVQzNQYjUwU3plbEtQT3RZQUVCWUR6UlpqVit0cXdHTSs0clBkZVBEVVFzUGdXM0NIeXF2QUNlKzJpSGZ1a0tBbFl6bU5RWUtlbWg2TXpaZmNDWUdZVVlPVk0yVWUwMFltZ3dBc3ozdHo5VlB0OW1XQUgwTjVuWjlOYy9YOUlFYmhqN2tZYXN6cjliaVF3SVY3UVA5U1ZGRlVMc3ZUcW1ReDVjUnZXUEluaXJFTWtGcEV6Rm5ZT0trZ2d2eThKa2RQbVFIYkRuYWhOQnV3KzFlVU5SQTg0RTRYcEJwVmNxbXpidVZpNTh3d1JKVUZ4aFlUNWZPdlowa21VM3h2SGNNRVp2Q2VrYkJ4ST0ifQ.u_BZmFLGiU6W1gBSi_Q91iplYNRfmoEURVh9E'
      })
    </script>
  </body>
</html>

interface Configuration {
  configuration: {
    default: {
      products: {
        gallery: {
          groups?: AttachmentGroup[]
          photoCapture?: {
            steps?: PluginCarsGroupStep[]
          }
        }
      }
    }
  }
}

AttachmentGroup interface

interface AttachmentGroup {
  name: string
  id: number
  max?: number
}

PluginCarsGroupStep interface

interface PluginCarsGroupStep {
  groupId: number
  // type of photo ('damage' | 'vehicle' or ets.)
  photoType: string
  // show retake page after capture (default is true)
  withRetake?: boolean
  // embed geolocation, date, time in the photo (default is true)
  embedGeo?: boolean
  // show step in landscape mode (default is false it is mean forcePortrait)
  forceLandscape?: boolean
  // show comment block after make photo
  isShowComment?: boolean
  // image for help photo modal (if empty "Help modal" doesnt show before capture)
  helpImg?: string
  // title below help image in modal
  helpTitle?: string
  // description of help image
  helpDescription?: string
  // image for mask over video
  maskImg?: string
  // small image in slider during photo
  previewImg?: string
  // title for preview image in slider during photo
  previewTitle?: string
}