380 lines
15 KiB
PHP
Executable File
380 lines
15 KiB
PHP
Executable File
<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag; ?>
|
|
<?php foreach($attributes->onlyProps([
|
|
'name' => 'images',
|
|
'allowMultiple' => false,
|
|
'showPlaceholders' => false,
|
|
'uploadedImages' => [],
|
|
'width' => '120px',
|
|
'height' => '120px'
|
|
]) as $__key => $__value) {
|
|
$$__key = $$__key ?? $__value;
|
|
} ?>
|
|
<?php $attributes = $attributes->exceptProps([
|
|
'name' => 'images',
|
|
'allowMultiple' => false,
|
|
'showPlaceholders' => false,
|
|
'uploadedImages' => [],
|
|
'width' => '120px',
|
|
'height' => '120px'
|
|
]); ?>
|
|
<?php foreach (array_filter(([
|
|
'name' => 'images',
|
|
'allowMultiple' => false,
|
|
'showPlaceholders' => false,
|
|
'uploadedImages' => [],
|
|
'width' => '120px',
|
|
'height' => '120px'
|
|
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
|
|
$$__key = $$__key ?? $__value;
|
|
} ?>
|
|
<?php $__defined_vars = get_defined_vars(); ?>
|
|
<?php foreach ($attributes as $__key => $__value) {
|
|
if (array_key_exists($__key, $__defined_vars)) unset($$__key);
|
|
} ?>
|
|
<?php unset($__defined_vars); ?>
|
|
|
|
<v-media-images
|
|
name="<?php echo e($name); ?>"
|
|
v-bind:allow-multiple="<?php echo e($allowMultiple ? 'true' : 'false'); ?>"
|
|
v-bind:show-placeholders="<?php echo e($showPlaceholders ? 'true' : 'false'); ?>"
|
|
:uploaded-images='<?php echo e(json_encode($uploadedImages)); ?>'
|
|
width="<?php echo e($width); ?>"
|
|
height="<?php echo e($height); ?>"
|
|
:errors="errors"
|
|
>
|
|
<?php if (isset($component)) { $__componentOriginal2e576674e3d985561e911b6c77c40893 = $component; } ?>
|
|
<?php if (isset($attributes)) { $__attributesOriginal2e576674e3d985561e911b6c77c40893 = $attributes; } ?>
|
|
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'admin::components.shimmer.image.index','data' => ['class' => 'h-[120px] w-[120px] rounded']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? (array) $attributes->getIterator() : [])); ?>
|
|
<?php $component->withName('admin::shimmer.image'); ?>
|
|
<?php if ($component->shouldRender()): ?>
|
|
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
|
|
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag && $constructor = (new ReflectionClass(Illuminate\View\AnonymousComponent::class))->getConstructor()): ?>
|
|
<?php $attributes = $attributes->except(collect($constructor->getParameters())->map->getName()->all()); ?>
|
|
<?php endif; ?>
|
|
<?php $component->withAttributes(['class' => 'h-[120px] w-[120px] rounded']); ?>
|
|
<?php echo $__env->renderComponent(); ?>
|
|
<?php endif; ?>
|
|
<?php if (isset($__attributesOriginal2e576674e3d985561e911b6c77c40893)): ?>
|
|
<?php $attributes = $__attributesOriginal2e576674e3d985561e911b6c77c40893; ?>
|
|
<?php unset($__attributesOriginal2e576674e3d985561e911b6c77c40893); ?>
|
|
<?php endif; ?>
|
|
<?php if (isset($__componentOriginal2e576674e3d985561e911b6c77c40893)): ?>
|
|
<?php $component = $__componentOriginal2e576674e3d985561e911b6c77c40893; ?>
|
|
<?php unset($__componentOriginal2e576674e3d985561e911b6c77c40893); ?>
|
|
<?php endif; ?>
|
|
</v-media-images>
|
|
|
|
<?php if (! $__env->hasRenderedOnce('45d5efc0-0deb-486e-abb3-cc139d8591e9')): $__env->markAsRenderedOnce('45d5efc0-0deb-486e-abb3-cc139d8591e9');
|
|
$__env->startPush('scripts'); ?>
|
|
<script
|
|
type="text/x-template"
|
|
id="v-media-images-template"
|
|
>
|
|
<!-- Panel Content -->
|
|
<div class="grid">
|
|
<div class="flex flex-wrap gap-1">
|
|
<!-- Upload Image Button -->
|
|
<template v-if="allowMultiple || images.length == 0">
|
|
<!-- Upload Image Button -->
|
|
<label
|
|
class="grid h-[120px] max-h-[120px] min-h-[110px] w-full min-w-[110px] max-w-[120px] cursor-pointer items-center justify-items-center rounded border border-dashed border-gray-300 transition-all hover:border-gray-400 dark:border-gray-800 dark:mix-blend-exclusion dark:invert"
|
|
:class="[(errors?.['images.files[0]'] ?? false) ? 'border border-red-500' : 'border-gray-300']"
|
|
:style="{'max-width': this.width, 'max-height': this.height}"
|
|
:for="$.uid + '_imageInput'"
|
|
>
|
|
<div class="flex flex-col items-center">
|
|
<span class="icon-image text-2xl"></span>
|
|
|
|
<p class="grid text-center text-sm font-semibold text-gray-600 dark:text-gray-300">
|
|
<?php echo app('translator')->get('admin::app.components.media.images.add-image-btn'); ?>
|
|
|
|
<span class="text-xs">
|
|
<?php echo app('translator')->get('admin::app.components.media.images.allowed-types'); ?>
|
|
</span>
|
|
</p>
|
|
|
|
<input
|
|
type="file"
|
|
class="hidden"
|
|
:id="$.uid + '_imageInput'"
|
|
accept="image/*"
|
|
:multiple="allowMultiple"
|
|
:ref="$.uid + '_imageInput'"
|
|
@change="add"
|
|
/>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
|
|
<!-- Uploaded Images -->
|
|
<draggable
|
|
class="flex flex-wrap gap-1"
|
|
ghost-class="draggable-ghost"
|
|
v-bind="{animation: 200}"
|
|
:list="images"
|
|
item-key="id"
|
|
>
|
|
<template #item="{ element, index }">
|
|
<v-media-image-item
|
|
:name="name"
|
|
:index="index"
|
|
:image="element"
|
|
:width="width"
|
|
:height="height"
|
|
@onRemove="remove($event)"
|
|
>
|
|
</v-media-image-item>
|
|
</template>
|
|
</draggable>
|
|
|
|
<!-- Placeholders -->
|
|
<template v-if="showPlaceholders && ! images.length">
|
|
<!-- Front Placeholder -->
|
|
<div
|
|
class="relative h-[120px] max-h-[120px] w-full min-w-[120px] max-w-[120px] rounded border border-dashed border-gray-300 dark:border-gray-800 dark:mix-blend-exclusion dark:invert"
|
|
v-for="placeholder in placeholders"
|
|
>
|
|
<img :src="placeholder.image">
|
|
|
|
<p class="absolute bottom-4 w-full text-center text-xs font-semibold text-gray-400">
|
|
{{ placeholder.label }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="text/x-template" id="v-media-image-item-template">
|
|
<div class="group relative grid max-h-[120px] min-w-[120px] justify-items-center overflow-hidden rounded transition-all hover:border-gray-400">
|
|
<!-- Image Preview -->
|
|
<img
|
|
:src="image.url"
|
|
:style="{'width': this.width, 'height': this.height}"
|
|
/>
|
|
|
|
<div class="invisible absolute bottom-0 top-0 flex w-full flex-col justify-between bg-white p-3 opacity-80 transition-all group-hover:visible dark:bg-gray-900">
|
|
<!-- Image Name -->
|
|
<p class="break-all text-xs font-semibold text-gray-600 dark:text-gray-300"></p>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex justify-between">
|
|
<span
|
|
class="icon-delete cursor-pointer rounded-md p-1.5 text-2xl hover:bg-gray-200 dark:hover:bg-gray-800"
|
|
@click="remove"
|
|
></span>
|
|
|
|
<label
|
|
class="icon-edit cursor-pointer rounded-md p-1.5 text-2xl hover:bg-gray-200 dark:hover:bg-gray-800"
|
|
:for="$.uid + '_imageInput_' + index"
|
|
></label>
|
|
|
|
<input
|
|
type="hidden"
|
|
:name="name + '[' + image.id + ']'"
|
|
v-if="! image.is_new"
|
|
/>
|
|
|
|
<input
|
|
type="file"
|
|
:name="name + '[]'"
|
|
class="hidden"
|
|
accept="image/*"
|
|
:id="$.uid + '_imageInput_' + index"
|
|
:ref="$.uid + '_imageInput_' + index"
|
|
@change="edit"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<script type="module">
|
|
app.component('v-media-images', {
|
|
template: '#v-media-images-template',
|
|
|
|
props: {
|
|
name: {
|
|
type: String,
|
|
default: 'images',
|
|
},
|
|
|
|
allowMultiple: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
|
|
showPlaceholders: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
|
|
uploadedImages: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
|
|
width: {
|
|
type: String,
|
|
default: '120px'
|
|
},
|
|
|
|
height: {
|
|
type: String,
|
|
default: '120px'
|
|
},
|
|
|
|
errors: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
images: [],
|
|
|
|
placeholders: [
|
|
{
|
|
label: "<?php echo app('translator')->get('admin::app.components.media.images.placeholders.front'); ?>",
|
|
image: "<?php echo e(asset('images/product-placeholders/front.svg')); ?>"
|
|
}, {
|
|
label: "<?php echo app('translator')->get('admin::app.components.media.images.placeholders.next'); ?>",
|
|
image: "<?php echo e(asset('images/product-placeholders/next-1.svg')); ?>"
|
|
}, {
|
|
label: "<?php echo app('translator')->get('admin::app.components.media.images.placeholders.next'); ?>",
|
|
image: "<?php echo e(asset('images/product-placeholders/next-2.svg')); ?>"
|
|
}, {
|
|
label: "<?php echo app('translator')->get('admin::app.components.media.images.placeholders.zoom'); ?>",
|
|
image: "<?php echo e(asset('images/product-placeholders/zoom.svg')); ?>"
|
|
}, {
|
|
label: "<?php echo app('translator')->get('admin::app.components.media.images.placeholders.use-cases'); ?>",
|
|
image: "<?php echo e(asset('images/product-placeholders/use-cases.svg')); ?>"
|
|
}, {
|
|
label: "<?php echo app('translator')->get('admin::app.components.media.images.placeholders.size'); ?>",
|
|
image: "<?php echo e(asset('images/product-placeholders/size.svg')); ?>"
|
|
}
|
|
],
|
|
|
|
isLoading: false,
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.images = this.uploadedImages;
|
|
},
|
|
|
|
methods: {
|
|
add() {
|
|
let imageInput = this.$refs[this.$.uid + '_imageInput'];
|
|
|
|
if (imageInput.files == undefined) {
|
|
return;
|
|
}
|
|
|
|
const validFiles = Array.from(imageInput.files).every(file => file.type.includes('image/'));
|
|
|
|
if (! validFiles) {
|
|
this.$emitter.emit('add-flash', {
|
|
type: 'warning',
|
|
message: "<?php echo app('translator')->get('admin::app.components.media.images.not-allowed-error'); ?>"
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
imageInput.files.forEach((file, index) => {
|
|
this.images.push({
|
|
id: 'image_' + this.images.length,
|
|
url: '',
|
|
file: file
|
|
});
|
|
});
|
|
},
|
|
|
|
remove(image) {
|
|
let index = this.images.indexOf(image);
|
|
|
|
this.images.splice(index, 1);
|
|
},
|
|
|
|
getBase64ToFile(base64, filename) {
|
|
var arr = base64.split(','),
|
|
mime = arr[0].match(/:(.*?);/)[1],
|
|
bstr = atob(arr[arr.length - 1]),
|
|
n = bstr.length,
|
|
u8arr = new Uint8Array(n);
|
|
|
|
while (n--) {
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
|
|
return new File([u8arr], filename, {type:mime});
|
|
},
|
|
}
|
|
});
|
|
|
|
app.component('v-media-image-item', {
|
|
template: '#v-media-image-item-template',
|
|
|
|
props: ['index', 'image', 'name', 'width', 'height'],
|
|
|
|
mounted() {
|
|
if (this.image.file instanceof File) {
|
|
this.setFile(this.image.file);
|
|
|
|
this.readFile(this.image.file);
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
edit() {
|
|
let imageInput = this.$refs[this.$.uid + '_imageInput_' + this.index];
|
|
|
|
if (imageInput.files == undefined) {
|
|
return;
|
|
}
|
|
|
|
const validFiles = Array.from(imageInput.files).every(file => file.type.includes('image/'));
|
|
|
|
if (! validFiles) {
|
|
this.$emitter.emit('add-flash', {
|
|
type: 'warning',
|
|
message: "<?php echo app('translator')->get('admin::app.components.media.images.not-allowed-error'); ?>"
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
this.setFile(imageInput.files[0]);
|
|
|
|
this.readFile(imageInput.files[0]);
|
|
},
|
|
|
|
remove() {
|
|
this.$emit('onRemove', this.image)
|
|
},
|
|
|
|
setFile(file) {
|
|
this.image.is_new = 1;
|
|
|
|
const dataTransfer = new DataTransfer();
|
|
|
|
dataTransfer.items.add(file);
|
|
|
|
this.$refs[this.$.uid + '_imageInput_' + this.index].files = dataTransfer.files;
|
|
},
|
|
|
|
readFile(file) {
|
|
let reader = new FileReader();
|
|
|
|
reader.onload = (e) => {
|
|
this.image.url = e.target.result;
|
|
}
|
|
|
|
reader.readAsDataURL(file);
|
|
},
|
|
}
|
|
});
|
|
</script>
|
|
<?php $__env->stopPush(); endif; ?><?php /**PATH /var/www/html/packages/Webkul/Admin/src/Resources/views/components/media/images.blade.php ENDPATH**/ ?>
|