Skip to content

Commit

Permalink
feat(media-picker): add intro toast for media uploader #72
Browse files Browse the repository at this point in the history
  • Loading branch information
@mostafaznv
mostafaznv committed Sep 7, 2023
1 parent 8b6f7c1 commit a94b4e7
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 60 deletions.
3 changes: 1 addition & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,13 @@
"@ckeditor/ckeditor5-paragraph": "^39.0.1",
"@ckeditor/ckeditor5-paste-from-office": "^39.0.1",
"@ckeditor/ckeditor5-remove-format": "^39.0.1",
"@ckeditor/ckeditor5-show-blocks": "^39.0.1",
"@ckeditor/ckeditor5-source-editing": "^39.0.1",
"@ckeditor/ckeditor5-table": "^39.0.1",
"@ckeditor/ckeditor5-theme-lark": "^39.0.1",
"@ckeditor/ckeditor5-show-blocks": "^39.0.1",
"@ckeditor/ckeditor5-ui": "^39.0.1",
"@vue/compiler-sfc": "^3.3.4",
"cross-env": "^7.0.3",
"drag-drop": "^6.0.0",
"laravel-mix": "^6.0.49",
"postcss-loader": "^7.3.3",
"raw-loader": "^4.0.2",
Expand Down
21 changes: 6 additions & 15 deletions resources/js/components/loading.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
<template>
<span class="p-2">&nbsp;
<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
class="tronFilter"
>
<circle cx="50" cy="50" r="45" :stroke="color" />
</svg>
</span>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="tronFilter">
<circle cx="50" cy="50" r="45" :stroke="color" />
</svg>
</template>

<script>
Expand All @@ -16,7 +10,7 @@ export default {
props: {
color: {
required: false,
default: () => 'black'
default: () => 'grey'
}
}
}
Expand All @@ -25,12 +19,9 @@ export default {
<style lang="scss" scoped>
svg {
animation: 800ms linear infinite svg;
height: 60%;
width: 100%;
position: absolute;
height: 24px;
width: 24px;
display: block;
top: 20%;
left: 0;
circle {
animation: 800ms ease-in-out infinite both circle;
Expand Down
127 changes: 84 additions & 43 deletions resources/js/components/media-browser.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,46 +59,49 @@
</div>
</div>

<div v-if="isLoading" class="inline-flex self-center items-center p-2">
<div class="relative" style="height: 32px">
<div v-if="isLoading" class="inline-flex self-center items-center">
<div class="relative">
<loading />
</div>
</div>
</div>
</template>

<transition name="image-loading" mode="out-in">
<div v-if="isUploading" class="flex flex-col h-full text-primary-600 content-center justify-center text-center overflow-hidden">
<div class="relative" style="height: 64px">
<loading />
</div>
<div @drop.prevent="handleUploads" @dragover.prevent="" @dragenter="dragCounter++" @dragleave="dragCounter--" class="media-main h-full overflow-hidden" :class="{active: dragCounter > 0}">
<div v-if="isUploading" class="flex flex-col h-full text-primary-600 content-center justify-center text-center overflow-hidden">
<div class="flex items-center justify-center" style="height: 64px">
<loading />
</div>

<p>{{ __('Optimizing & Uploading to Storage...') }}</p>
</div>
<p>{{ __('Optimizing & Uploading to Storage...') }}</p>
</div>

<div v-else-if="items.length" ref="scrollable" @scroll="onScroll" @dragover.prevent="" @drop.prevent="handleUploads" class="h-full w-full overflow-y-scroll">
<div class="flex flex-row flex-wrap justify-center content-center mb-12 mt-6 px-6">
<div v-for="item in items" :key="item.hash" @click="select(item)" class="media-container text-center p-1 cursor-pointer flex flex-col" :title="item.name" :class="{'w-1/6': isImagePicker, 'w-1/5': isVideoPicker}">
<v-lazy-image
v-if="isImagePicker"
class="image-preview rounded shadow bg-white self-center mx-auto"
:key="item.id"
:src="item.url"
:src-placeholder="$options.spinner"
:class="{'image-preview-selected': isSelected(item)}"
/>

<video v-else class="video-player" :poster="item.urls.cover" :class="{'selected': isSelected(item)}">
<source :src="item.urls.video" type="video/mp4">
</video>

<strong class="media-name text-primary-600">{{ item.name }}</strong>
<div v-else-if="items.length" ref="scrollable" @scroll="onScroll" class="h-full w-full overflow-y-scroll">
<div class="grid nc-grid-cols-6 gap-4 mb-12 mt-6 px-6">
<div v-for="item in items" :key="item.hash" @click="select(item)" class="media-container text-center p-1 cursor-pointer" :title="item.name">
<v-lazy-image
v-if="isImagePicker"
class="image-preview rounded shadow bg-white mx-auto"
:key="item.id"
:src="item.url"
:src-placeholder="$options.spinner"
:class="{'image-preview-selected': isSelected(item)}"
/>

<video v-else class="video-player" :poster="item.urls.cover" :class="{'selected': isSelected(item)}">
<source :src="item.urls.video" type="video/mp4">
</video>

<strong class="media-name text-primary-600">{{ item.name }}</strong>
</div>
</div>
</div>
</div>

<div v-else @drop.prevent="handleUploads" @dragover.prevent="" class="flex flex-col h-full text-primary-600 content-center justify-center text-center">
<p>{{ __(isLoading ? 'Loading...' : 'No Results.') }}</p>
<div v-else class="flex flex-col h-full text-primary-600 content-center justify-center text-center">
<p>{{ __('No Results.') }}</p>
<span class="block">{{ __('Drop your files here') }}</span>
</div>
</div>
</transition>

Expand All @@ -124,8 +127,9 @@
import modal from './modal'
import loading from './loading'
import spinner from './../assets/spinner'
import interactsWithResources from "./mixins/interactsWithResources"
import interactsWithResources from './mixins/interactsWithResources'
import VLazyImage from "v-lazy-image"
import debounce from 'lodash/debounce'
export default {
name: "MediaBrowser",
Expand All @@ -148,18 +152,25 @@ export default {
}
}
},
data: () => ({
items: [],
selected: [],
isVisible: false,
isLoading: false,
isUploading: false,
searchTerm: '',
orderBy: 'id',
sort: 'desc',
perPage: 100,
page: 1,
}),
data() {
const introKey = 'nova-ckeditor-uploader-intro-' + this.type
return {
items: [],
selected: [],
dragCounter: 0,
introKey: introKey,
intro: localStorage.getItem(introKey) === 'true',
isVisible: false,
isLoading: false,
isUploading: false,
searchTerm: '',
orderBy: 'id',
sort: 'desc',
perPage: 100,
page: 1,
}
},
computed: {
isImagePicker() {
return this.type === 'image'
Expand Down Expand Up @@ -243,6 +254,7 @@ export default {
}
this.isUploading = true
this.dragCounter = 0
const uploads = []
const requests = ([...dataTransfer.files]).map(file => {
Expand Down Expand Up @@ -339,17 +351,18 @@ export default {
*
* @param target EventTarget
*/
onScroll({target}) {
onScroll: debounce(function({target}) {
if ((target.scrollHeight - target.scrollTop) <= target.clientHeight + 200) {
this.fetch()
}
},
}, 300),
/**
* Show the Modal
*/
show() {
this.isVisible = true
this.displayIntro()
this.fetch(1)
},
Expand All @@ -362,6 +375,23 @@ export default {
this.isVisible = false
}
},
/**
* Display Intro Toast
*/
displayIntro() {
if (!this.intro) {
localStorage.setItem(this.introKey, 'true')
const icon = '<svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>'
const content = this.__('You can upload your files by dragging them here')
Nova.$toasted.info(icon + ' ' + content, {
duration: 15000,
keepOnHover: true
})
}
}
},
created() {
this.$options.spinner = spinner
Expand All @@ -383,6 +413,7 @@ export default {
border: 3px solid transparent;
transition: all 120ms ease-in-out;
height: 11rem;
object-fit: cover;
&:hover {
border-color: var(--primary);
Expand Down Expand Up @@ -429,6 +460,16 @@ export default {
margin-bottom: 4px;
}
}
.media-main {
position: relative;
border: dashed 2px transparent;
transition: all 300ms;
&.active {
border-color: rgba(var(--colors-primary-400));
}
}
</style>

<style lang="scss">
Expand Down
2 changes: 2 additions & 0 deletions resources/js/components/modal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,8 @@ html.modal-open body {
}
.modal {
z-index: 2000;
&.centered-modal {
position: fixed;
width: 80%;
Expand Down
3 changes: 3 additions & 0 deletions resources/sass/field.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,6 @@

.max-h-full
max-height: 100%

.nc-grid-cols-6
grid-template-columns: repeat(6, minmax(0, 1fr))

0 comments on commit a94b4e7

Please sign in to comment.