@demos-europe/demosplan-ui 0.0.1

package/components/core/DpUpload/DpUploadFiles.vue

@@ -0,0 +1,269 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<template>
+  <fieldset :class="prefixClass('layout')">
+    <legend
+      class="hide-visually"
+      v-text="Translator.trans('upload.files')" />
+    <dp-label
+      v-if="label.text"
+      class="layout__item"
+      v-bind="{
+        for: id,
+        required: required,
+        ...label
+      }" />
+    <dp-upload
+      :allowed-file-types="allowedFileTypes"
+      :chunk-size="chunkSize"
+      :class="[prefixClass('layout__item u-1-of-1-palm'), prefixClass(sideBySide ? 'u-1-of-2' : 'u-1-of-1')]"
+      :max-number-of-files="maxNumberOfFiles"
+      :max-file-size="maxFileSize"
+      :translations="translations"
+      @upload-success="handleUpload" /><!--
+
+ --><dp-uploaded-file-list
+      v-if="uploadedFiles.length > 0"
+      @file-remove="handleRemove"
+      :class="[prefixClass('layout__item u-1-of-1-palm'), prefixClass(sideBySide ? 'u-1-of-2' : 'u-1-of-1 u-mt')]"
+      :files="uploadedFiles" />
+
+    <!--
+      If the component is used in the context of a "traditional" form post, the hashes (ids)
+      of the uploaded files must be included in that form post. Also, when requiring a file upload,
+      the hidden input element is used by dpValidate to check for validation state.
+     -->
+    <input
+      v-if="needsHiddenInput"
+      type="hidden"
+      :name="name !== 'uploadedFiles' ? `uploadedFiles[${name}]` : 'uploadedFiles'"
+      :required="required"
+      :data-dp-validate-if="dataDpValidateIf"
+      :value="fileHashes">
+  </fieldset>
+</template>
+
+<script>
+import { DpLabel } from 'demosplan-ui/components'
+import DpUpload from './DpUpload'
+import DpUploadedFileList from './DpUploadedFileList'
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+
+export default {
+  name: 'DpUploadFiles',
+
+  components: {
+    DpLabel,
+    DpUpload,
+    DpUploadedFileList
+  },
+
+  mixins: [prefixClassMixin],
+
+  props: {
+    /**
+     * Array of mimeTypes or a defined preset as String
+     * @see demosplan/DemosPlanCoreBundle/Resources/client/js/lib/FileInfo.js
+     */
+    allowedFileTypes: {
+      type: [Array, String],
+      required: true,
+      default: 'pdf'
+    },
+
+    /**
+     * Define chunk size for huge files like PDFs
+     */
+    chunkSize: {
+      type: Number,
+      default: Infinity,
+      required: false
+    },
+
+    /**
+     * Use to conditionally validate a required upload field
+     * "required" and "needsHiddenInput" need to be set to true in that case
+     */
+    dataDpValidateIf: {
+      type: [Boolean, String],
+      required: false,
+      default: false
+    },
+
+    id: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    label: {
+      type: Object,
+      default: () => ({}),
+      validator: (prop) => {
+        return Object.keys(prop).every(key => ['hint', 'text', 'tooltip'].includes(key))
+      }
+    },
+
+    /**
+     * Sets the maximally allowed file size for a single file in bytes.
+     */
+    maxFileSize: {
+      type: Number,
+      required: false,
+      default: 10000000
+    },
+
+    /**
+     * Maximum number of files that can be uploaded
+     * Defaults to single file upload
+     */
+    maxNumberOfFiles: {
+      type: Number,
+      required: false,
+      default: 1
+    },
+
+    /**
+     * Used to set the name of the hidden input field if the backend needs a specific name.
+     */
+    name: {
+      type: String,
+      required: false,
+      default: 'uploadedFiles'
+    },
+
+    /**
+     * Adds a hidden input with fileHash(es) as its value to the DOM.
+     * Must be set to true if the uploaded file(s) are intended to be saved via form post, or if the "required"
+     * prop is set to true (because dpValidate uses the input field to check the validity).
+     */
+    needsHiddenInput: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * If set to true, dpValidate checks if at least one file has been uploaded.
+     * "needsHiddenInput" must also be true in that case.
+     */
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Use to overwrite the default translations
+     * you can find all available keys here
+     * @see https://github.com/transloadit/uppy/blob/master/packages/%40uppy/locales/src/de_DE.js
+     * some are already overwritten here
+     * @see demosplan/DemosPlanCoreBundle/Resources/client/js/components/DpUpload/utils/UppyTranslations.js
+     */
+    translations: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+
+    /**
+     * If true the uploaded files list will be displayed next to the dropzone
+     * if false it will be displayed below
+     */
+    sideBySide: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Set a storageName if you want the uploaded files to be stored
+     * in the sessionStorage (i.e., be available across page reloads)
+     */
+    storageName: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+
+  data () {
+    return {
+      fileHashes: [],
+      uploadedFiles: []
+    }
+  },
+
+  watch: {
+    storageName () {
+      if (this.storageName) {
+        this.updateSessionStorage()
+      }
+    }
+  },
+
+  methods: {
+    addFile (file) {
+      // To only show as many files as allowed
+      if (this.maxNumberOfFiles <= this.uploadedFiles.length) {
+        this.fileHashes.shift()
+        this.uploadedFiles.shift()
+      }
+      if (this.needsHiddenInput) {
+        this.fileHashes.push(file.hash)
+      }
+
+      this.uploadedFiles.push(file)
+      if (this.storageName) {
+        this.updateSessionStorage()
+      }
+    },
+
+    clearFilesList () {
+      this.uploadedFiles.forEach(file => {
+        this.removeFile(file)
+      })
+    },
+
+    handleRemove (file) {
+      this.removeFile(file)
+      this.$emit('file-remove', file)
+    },
+
+    handleUpload (file) {
+      this.addFile(file)
+      this.$emit('upload-success', file)
+
+      // Let plain javascript logic also use 'upload-success' event.
+      document.dispatchEvent(new CustomEvent('uploadSuccess', { detail: { file: file, fieldName: this.name } }))
+    },
+
+    removeFile (file) {
+      if (this.needsHiddenInput) {
+        this.fileHashes = this.fileHashes.filter(hash => hash !== file.hash)
+      }
+
+      this.uploadedFiles = this.uploadedFiles.filter(el => el.hash !== file.hash)
+      if (this.storageName) {
+        this.updateSessionStorage()
+      }
+    },
+
+    updateSessionStorage () {
+      sessionStorage.setItem(this.storageName, JSON.stringify(this.uploadedFiles))
+    }
+  },
+
+  mounted () {
+    if (this.storageName) {
+      this.uploadedFiles = JSON.parse(sessionStorage.getItem(this.storageName)) || []
+    }
+  }
+}
+</script>

package/components/core/DpUpload/DpUploadedFile.vue

@@ -0,0 +1,80 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<template>
+  <li>
+    <span
+      aria-hidden="true"
+      v-if="file.mimeType === 'txt'">
+      <i
+        :class="fileIcon" />
+    </span>
+    <span v-if="isImage">
+      <img
+        :src="Routing.generate('core_file', { hash: file.hash })"
+        :aria-label="Translator.trans('image.preview')"
+        width="50px">
+    </span>
+    <span
+      :class="prefixClass('display--inline-block u-pl-0_5')"
+      style="width: calc(100% - 62px);">
+      {{ file.name }}
+      ({{ file.size }})
+      <button
+        type="button"
+        :class="prefixClass('btn-icns u-m-0')"
+        :aria-label="Translator.trans('file.remove')"
+        @click="removeFile">
+        <i
+          :class="prefixClass('fa fa-trash')"
+          aria-hidden="true" />
+      </button>
+    </span>
+  </li>
+</template>
+
+<script>
+import { getFileInfo } from 'demosplan-utils/lib/FileInfo'
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+
+export default {
+  name: 'DpUploadedFile',
+
+  mixins: [prefixClassMixin],
+
+  props: {
+    fileString: {
+      type: String,
+      required: true
+    }
+  },
+
+  computed: {
+    file () {
+      return getFileInfo(this.fileString)
+    },
+
+    fileIcon () {
+      const icon = this.file.mimeType === 'txt' ? 'fa-file-text-o' : 'fa-folder-o'
+      return this.prefixClass('fa ' + icon)
+    },
+
+    isImage () {
+      const imageTypes = ['png', 'jpg', 'gif', 'bmp', 'ico', 'tiff', 'svg']
+      return typeof imageTypes.find(type => type === this.file.mimeType) !== 'undefined'
+    }
+  },
+
+  methods: {
+    removeFile () {
+      this.$emit('file-remove', this.file)
+    }
+  }
+}
+</script>

package/components/core/DpUpload/DpUploadedFileList.vue

@@ -0,0 +1,56 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<template>
+  <div>
+    <h4 :class="prefixClass('u-mb-0_25')">
+      {{ Translator.trans('uploaded.files') }}
+    </h4>
+    <ul :class="prefixClass('o-list space-stack-xs')">
+      <dp-uploaded-file
+        v-for="(fileString, idx) in fileStrings"
+        :file-string="fileString"
+        @file-remove="file => $emit('file-remove', file)"
+        :key="idx" />
+    </ul>
+  </div>
+</template>
+
+<script>
+import DpUploadedFile from './DpUploadedFile'
+import { prefixClassMixin } from 'demosplan-ui/mixins'
+
+export default {
+  name: 'DpUploadedFileList',
+
+  components: {
+    DpUploadedFile
+  },
+
+  mixins: [prefixClassMixin],
+
+  props: {
+    files: {
+      type: Array,
+      required: false,
+      default: () => ([])
+    }
+  },
+
+  computed: {
+    fileStrings () {
+      return this.files.map(file => {
+        let str = Object.values(file).toString()
+        str = str.replace(/,/g, ':')
+        return str
+      })
+    }
+  }
+}
+</script>

package/components/core/DpUpload/utils/GetFileIdsByHash.js

@@ -0,0 +1,42 @@
+/**
+ * (c) 2010-present DEMOS E-Partizipation GmbH.
+ *
+ * This file is part of the package @demos-europe/demosplan-ui,
+ * for more information see the license file.
+ *
+ * All rights reserved
+ */
+
+import { dpApi } from 'demosplan-utils'
+
+/**
+ * Fetch File-Ids by their hashes
+ *
+ * @param {Array<hashes>}
+ *
+ * @returns {Array<Ids>}
+ */
+function getFileIdsByHash (hashes) {
+  return dpApi.get(
+    Routing.generate('api_resource_list', { resourceType: 'File' }),
+    {
+      filter: {
+        hasHash: {
+          condition: {
+            operator: 'IN',
+            path: 'hash',
+            value: hashes
+          }
+        }
+      }
+    },
+    {
+      serialize: true
+    }
+  )
+    .then(({ data }) => {
+      return data.data.map(el => el.id)
+    })
+}
+
+export { getFileIdsByHash }

package/components/core/DpUpload/utils/UppyTranslations.js

@@ -0,0 +1,31 @@
+/**
+ * (c) 2010-present DEMOS E-Partizipation GmbH.
+ *
+ * This file is part of the package @demos-europe/demosplan-ui,
+ * for more information see the license file.
+ *
+ * All rights reserved
+ */
+
+import { convertSize } from 'demosplan-utils/lib/FileInfo'
+const de = () => {
+  return {
+    strings: {
+      /*
+       * Text to show on the droppable area.
+       * `%{browse}` is replaced with a link that opens the system file selection dialog.
+       */
+      dropHereOr: Translator.trans('form.button.upload.pdf', {
+        browse: '{browse}',
+        maxUploadSize: convertSize('GB', window.dplan.settings.maxUploadSize)
+      }),
+      failedToUpload: Translator.trans('form.button.upload.failed', {
+        file: '{file}'
+      }),
+      // This string is clickable and opens the system file selection dialog.
+      browse: Translator.trans('form.button.upload.search')
+    }
+  }
+}
+
+export { de }

package/components/core/DpVideoPlayer.vue

@@ -0,0 +1,115 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<template>
+  <div class="position--relative">
+    <video
+      :aria-labelledby="ariaLabelledby"
+      :id="id"
+      playsinline
+      :data-poster="poster">
+      <source
+        v-for="source in sources"
+        :key="source.src"
+        :src="source.src"
+        :type="source.type">
+      <track
+        v-for="track in tracks"
+        :key="track.src"
+        :src="track.src"
+        :srclang="track.srclang"
+        :label="track.label"
+        :kind="track.kind"
+        :default="!!track.default">
+    </video>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DpVideoPlayer',
+
+  props: {
+    /**
+     * You may pass the id of an element containing content that describes the video.
+     */
+    ariaLabelledby: {
+      type: [String, Boolean],
+      required: false,
+      default: false
+    },
+
+    iconUrl: {
+      type: String,
+      required: true
+    },
+
+    id: {
+      type: String,
+      required: true
+    },
+
+    poster: {
+      type: String,
+      required: false,
+      default: ''
+    },
+
+    sources: {
+      required: false,
+      validator: (value) => {
+        // Check if all sources have a src and a type attribute
+        return Array.isArray(value) && value.filter(source => source.src && source.type).length === value.length
+      },
+      default: () => ([])
+    },
+
+    tracks: {
+      required: false,
+      validator: (value) => {
+        // Check if all tracks have their required attributes
+        return Array.isArray(value) && value.filter(track => track.kind && track.srclang && track.label && track.src).length === value.length
+      },
+      default: () => ([])
+    }
+  },
+
+  data () {
+    return {
+      player: {}
+    }
+  },
+
+  created () {
+    this.player = import('plyr/dist/plyr.polyfilled.min')
+  },
+
+  mounted () {
+    this.player.then(Plyr => {
+      // eslint-disable-next-line new-cap
+      this.player = new Plyr.default('#' + this.id, {
+        iconUrl: this.iconUrl,
+        // For a full list of available controls see https://github.com/sampotts/plyr/blob/master/CONTROLS.md
+        controls: [
+          'play-large',
+          'play',
+          'progress',
+          'duration',
+          'mute',
+          'volume',
+          'captions',
+          'settings',
+          'download',
+          'fullscreen'
+        ]
+      })
+    })
+  }
+}
+</script>

package/components/core/HeightLimit.vue

@@ -0,0 +1,121 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<documentation>
+    <usage variant="Without Ajax">
+        <dp-height-limit
+            :short="shortText"
+            :full="fullText"
+            no-event
+            :element="element"
+        ></dp-height-limit>
+    </usage>
+
+    <usage variant="With Ajax">
+        <dp-height-limit
+            :short="shortText"
+            :full="fullText"
+            no-event
+            :element="element"
+        ></dp-height-limit>
+    </usage>
+</documentation>
+
+<template>
+  <div class="overflow-word-break overflow-x-auto">
+    <dp-text-wrapper :text="currentText !== '' ? currentText : ' '" />
+
+    <button
+      class="btn--blank o-link--default"
+      type="button"
+      :aria-label="Translator.trans('aria.toggle')"
+      @click.stop="toggle"
+      v-if="isShortened">
+      {{ Translator.trans(isExpanded ? 'show.less' : 'show.more') }}
+    </button>
+  </div>
+</template>
+
+<script>
+import DpTextWrapper from './DpTextWrapper'
+
+export default {
+  name: 'DpHeightLimit',
+
+  components: {
+    DpTextWrapper
+  },
+
+  props: {
+    /**
+     * The short text
+     */
+    shortText: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * The long text
+     */
+    fullText: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * If this is true, no callback-event will be fired for full text loading
+     */
+    noEvent: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+
+    /**
+     * Translation string for element to be height-toggled
+     */
+    element: {
+      type: String,
+      required: true
+    },
+
+    isShortened: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      isExpanded: false
+    }
+  },
+
+  computed: {
+    currentText () {
+      return (this.isExpanded) ? this.fullText : this.shortText
+    }
+  },
+
+  methods: {
+    toggle () {
+      if (this.noEvent) {
+        this.isExpanded = !this.isExpanded
+        return
+      }
+
+      this.$emit('heightLimit:toggle', () => {
+        this.isExpanded = !this.isExpanded
+      })
+    }
+  }
+}
+</script>