Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
stepanenko3 committed May 13, 2022
1 parent 86413cd commit 6d059df
Show file tree
Hide file tree
Showing 10 changed files with 119 additions and 217 deletions.
2 changes: 1 addition & 1 deletion dist/js/field.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/js/tool.js

Large diffs are not rendered by default.

26 changes: 14 additions & 12 deletions resources/js/field/DetailField.vue
Original file line number Diff line number Diff line change
@@ -1,32 +1,34 @@
<template>
<div>
<template v-if="field.value">
<PanelItem v-if="display == 'normal'" :field="field" />
<ImagePanel v-else :field="field" />
</template>
<template v-if="field.value">
<PanelItem v-if="display == 'normal'" :index="index" :field="field" />
<PanelItem v-else :index="index" :field="field">
<template #value>
<DetailView :field="field" />
</template>
</PanelItem>
</template>

<template v-else>
<PanelItem :field="field" />
</template>
</div>
<template v-else>
<PanelItem :index="index" :field="field" />
</template>
</template>

<script>
import ImagePanel from './custom/ImagePanel';
import DetailView from '../modules/DetailView'
export default {
props: ['resource', 'resourceName', 'resourceId', 'field'],
components: {
ImagePanel: ImagePanel,
DetailView: DetailView,
},
data: () => ({
display: 'normal',
}),
mounted() {
this.display = this.field.display || 'normal';
this.display = this.field.displayDetail || this.field.display || 'normal';
},
};
</script>
2 changes: 0 additions & 2 deletions resources/js/field/FormField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,6 @@
import RenameModal from '../modals/RenameModal';
import UploadProgress from '../components/UploadProgress';
import ImageDetail from '../modules/ImageDetail';
import FileSelect from './custom/FileSelect';
import api from '../api';
Expand All @@ -103,7 +102,6 @@
components: {
FileSelect: FileSelect,
UploadProgress: UploadProgress,
ImageDetail: ImageDetail,
FilemanagerModal: FilemanagerModal,
CreateFolderModal: CreateFolderModal,
Expand Down
8 changes: 6 additions & 2 deletions resources/js/field/IndexField.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@
class="w-8 h-8"
:class="{ 'rounded-full': field.rounded, rounded: !field.rounded }"
/>
<div v-else v-html="field.image" class="svg-icon"></div>
<div
v-else
v-html="field.image"
class="svg-icon"
></div>
</template>
<template v-else>
<span class="pl-2">&mdash;</span>
Expand All @@ -30,7 +34,7 @@
}),
mounted() {
this.display = this.field.display || 'normal';
this.display = this.field.displayIndex || this.field.display || 'normal';
},
};
</script>
Expand Down
57 changes: 0 additions & 57 deletions resources/js/field/custom/ImagePanel.vue

This file was deleted.

55 changes: 4 additions & 51 deletions resources/js/modals/DetailModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,53 +18,7 @@
</ModalHeader>

<div class="flex flex-col md:flex-row">
<div
class="w-full md:w-3/5 flex-shrink-0 flex items-center justify-center"
style="min-height: 400px"
>
<template v-if="info.type == 'image'">
<img class="h-full w-full" :src="info.image" style="object-fit: contain" />
</template>

<template v-else-if="info.type == 'audio'">
<audio ref="audio" controls>
<source :src="info.src" :type="info.mime" />
</audio>
</template>

<template v-else-if="info.type == 'video'">
<video ref="video" controls crossorigin playsinline>
<source :src="info.url" :type="info.mime" />
</video>
</template>

<template v-else-if="info.type == 'text'">
<pre class="p-4" v-if="codeLoaded"><code
ref="code"
v-html="info.source"
></code></pre>
</template>

<!-- <template v-else-if="info.type == 'zip'">
<TreeView
v-if="zipLoaded"
:json="info.source"
:name="info.name"
></TreeView>
</template> -->

<template v-else-if="info.type == 'pdf'">
<object :data="info.url" type="application/pdf" width="100%" height="100%">
<iframe :src="info.url" width="100%" height="100%" style="border: none">
<object class="no-preview" v-html="info.image"></object>
</iframe>
</object>
</template>

<template v-else>
<Icon :type="mimeIcons[info.mime] || mimeIcons.text" width="64" height="64" />
</template>
</div>
<DetailView class="w-full md:w-3/5 flex-shrink-0 " :field="info" />
<div class="w-full md:w-2/5 p-4 bg-gray-100 dark:bg-gray-900">
<div class="w-full mb-2">
<div class="mb-1">{{ __('Name') }}:</div>
Expand Down Expand Up @@ -228,6 +182,7 @@
import api from '../api';
import MimeIconsEnum from '../tools/MimeIconsEnum'
import ConfirmationButton from '../components/ConfirmationButton'
import DetailView from '../modules/DetailView'
export default {
props: {
Expand Down Expand Up @@ -256,6 +211,7 @@
components: {
ConfirmationButton: ConfirmationButton,
DetailView: DetailView,
},
emits: ['refresh', 'closePreview', 'rename', 'selectFile'],
Expand All @@ -264,7 +220,6 @@
return {
loaded: false,
currentInfo: {},
codeLoaded: false,
zipLoaded: false,
cmOptions: {
tabSize: 2,
Expand Down Expand Up @@ -409,8 +364,7 @@
if (type == 'text') {
this.$nextTick(function () {
this.cmOptions.mode = this.info.mime;
this.codeLoaded = true;
//
});
}
Expand All @@ -427,7 +381,6 @@
});
}
this.codeLoaded = false;
this.zipLoaded = false;
},
Expand Down
68 changes: 68 additions & 0 deletions resources/js/modules/DetailView.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<template>
<div class="flex items-center justify-center" :class="class" style="min-height: 400px">
<template v-if="field.type == 'image'">
<img class="h-full w-full" :src="field.image" style="object-fit: contain" />
</template>

<template v-else-if="field.type == 'audio'">
<audio ref="audio" controls>
<source :src="field.src" :type="field.mime" />
</audio>
</template>

<template v-else-if="field.type == 'video'">
<video ref="video" controls crossorigin playsinline>
<source :src="field.url" :type="field.mime" />
</video>
</template>

<template v-else-if="field.type == 'text'">
<pre class="p-4"><code
ref="code"
v-html="field.source"
></code></pre>
</template>

<!-- <template v-else-if="field.type == 'zip'">
<TreeView
v-if="zipLoaded"
:json="field.source"
:name="field.name"
></TreeView>
</template> -->

<template v-else-if="field.type == 'pdf'">
<object :data="field.url" type="application/pdf" width="100%" height="100%">
<iframe :src="field.url" width="100%" height="100%" style="border: none">
<object class="no-preview" v-html="field.image"></object>
</iframe>
</object>
</template>

<template v-else>
<Icon :type="mimeIcons[field.mime] || mimeIcons.text" width="64" height="64" />
</template>
</div>
</template>

<script>
import MimeIconsEnum from '../tools/MimeIconsEnum'
export default {
props: {
field: {
type: Object,
required: true,
},
class: {
type: String,
default: '',
required: false,
},
},
data: () => ({
mimeIcons: MimeIconsEnum,
}),
};
</script>
Loading

0 comments on commit 6d059df

Please sign in to comment.