123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- <!--
- - @copyright Copyright (c) 2020 John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @author John Molakvoæ <skjnldsv@protonmail.com>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
-
- <template>
- <li class="template-picker__item">
- <input :id="id"
- :checked="checked"
- type="radio"
- class="radio"
- name="template-picker"
- @change="onCheck">
-
- <label :for="id" class="template-picker__label">
- <div class="template-picker__preview"
- :class="failedPreview ? 'template-picker__preview--failed' : ''">
- <img class="template-picker__image"
- :src="realPreviewUrl"
- alt=""
- draggable="false"
- @error="onFailure">
- </div>
-
- <span class="template-picker__title">
- {{ nameWithoutExt }}
- </span>
- </label>
- </li>
- </template>
-
- <script>
- import { generateUrl } from '@nextcloud/router'
- import { encodeFilePath } from '../utils/fileUtils.js'
- import { getToken, isPublic } from '../utils/davUtils.js'
-
- // preview width generation
- const previewWidth = 256
-
- export default {
- name: 'TemplatePreview',
- inheritAttrs: false,
-
- props: {
- basename: {
- type: String,
- required: true,
- },
- checked: {
- type: Boolean,
- default: false,
- },
- fileid: {
- type: [String, Number],
- required: true,
- },
- filename: {
- type: String,
- required: true,
- },
- previewUrl: {
- type: String,
- default: null,
- },
- hasPreview: {
- type: Boolean,
- default: true,
- },
- mime: {
- type: String,
- required: true,
- },
- ratio: {
- type: Number,
- default: null,
- },
- },
-
- data() {
- return {
- failedPreview: false,
- }
- },
-
- computed: {
- /**
- * Strip away extension from name
- *
- * @return {string}
- */
- nameWithoutExt() {
- return this.basename.indexOf('.') > -1 ? this.basename.split('.').slice(0, -1).join('.') : this.basename
- },
-
- id() {
- return `template-picker-${this.fileid}`
- },
-
- realPreviewUrl() {
- // If original preview failed, fallback to mime icon
- if (this.failedPreview && this.mimeIcon) {
- return this.mimeIcon
- }
-
- if (this.previewUrl) {
- return this.previewUrl
- }
- // TODO: find a nicer standard way of doing this?
- if (isPublic()) {
- return generateUrl(`/apps/files_sharing/publicpreview/${getToken()}?fileId=${this.fileid}&file=${encodeFilePath(this.filename)}&x=${previewWidth}&y=${previewWidth}&a=1`)
- }
- return generateUrl(`/core/preview?fileId=${this.fileid}&x=${previewWidth}&y=${previewWidth}&a=1`)
- },
-
- mimeIcon() {
- return OC.MimeType.getIconUrl(this.mime)
- },
- },
-
- methods: {
- onCheck() {
- this.$emit('check', this.fileid)
- },
- onFailure() {
- this.failedPreview = true
- },
- },
- }
- </script>
-
- <style lang="scss" scoped>
-
- .template-picker {
- &__item {
- display: flex;
- }
-
- &__label {
- display: flex;
- // Align in the middle of the grid
- align-items: center;
- flex: 1 1;
- flex-direction: column;
-
- &, * {
- cursor: pointer;
- user-select: none;
- }
-
- &::before {
- display: none !important;
- }
- }
-
- &__preview {
- display: block;
- overflow: hidden;
- // Stretch so all entries are the same width
- flex: 1 1;
- width: var(--width);
- min-height: var(--height);
- max-height: var(--height);
- padding: 0;
- border: var(--border) solid var(--color-border);
- border-radius: var(--border-radius-large);
-
- input:checked + label > & {
- border-color: var(--color-primary);
- }
-
- &--failed {
- // Make sure to properly center fallback icon
- display: flex;
- }
- }
-
- &__image {
- max-width: 100%;
- background-color: var(--color-main-background);
-
- object-fit: cover;
- }
-
- // Failed preview, fallback to mime icon
- &__preview--failed &__image {
- width: calc(var(--margin) * 8);
- // Center mime icon
- margin: auto;
- background-color: transparent !important;
-
- object-fit: initial;
- }
-
- &__title {
- overflow: hidden;
- // also count preview border
- max-width: calc(var(--width) + 2*2px);
- padding: var(--margin);
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
-
- </style>
|