Skip to content

Commit

Permalink
Removed duplicated help text in Gallery
Browse files Browse the repository at this point in the history
  • Loading branch information
@VGirol
VGirol committed May 17, 2024
1 parent 262cfb3 commit 8e5990e
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 114 deletions.
2 changes: 1 addition & 1 deletion dist/js/field.js
View file

Large diffs are not rendered by default.

211 changes: 98 additions & 113 deletions resources/js/components/Gallery.vue
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,18 @@
<template>
<div class="gallery" :class="{editable}" @mouseover="mouseOver = true" @mouseout="mouseOver = false">
<cropper
v-if="field.type === 'media' && editable"
:image="cropImage"
:must-crop="field.mustCrop"
@close="onCloseCroppedImage"
@crop-completed="onCroppedImage"
:configs="field.croppingConfigs"
/>
<div class="gallery" :class="{ editable }" @mouseover="mouseOver = true" @mouseout="mouseOver = false">
<cropper v-if="field.type === 'media' && editable" :image="cropImage" :must-crop="field.mustCrop"
@close="onCloseCroppedImage" @crop-completed="onCroppedImage" :configs="field.croppingConfigs" />

<draggable v-if="images.length > 0" v-model="images" class="gallery-list clearfix">
<template #item="{element, index}">
<template #item="{ element, index }">
<div style="float:left; margin-right: 1em;">
<component :is="singleComponent" class="mb-3 p-3 mr-3"
:key="index" :image="element" :field="field" :editable="editable" :removable="removable || editable" @remove="remove(index)"
:is-custom-properties-editable="customProperties && customPropertiesFields.length > 0"
@edit-custom-properties="customPropertiesImageIndex = index"
@crop-start="cropImageQueue.push($event)"
/>
<component :is="singleComponent" class="mb-3 p-3 mr-3" :key="index" :image="element" :field="field"
:editable="editable" :removable="removable || editable" @remove="remove(index)"
:is-custom-properties-editable="customProperties && customPropertiesFields.length > 0"
@edit-custom-properties="customPropertiesImageIndex = index" @crop-start="cropImageQueue.push($event)" />

<CustomProperties
v-if="customPropertiesImageIndex !== null"
v-model="images[customPropertiesImageIndex]"
:fields="customPropertiesFields"
@close="customPropertiesImageIndex = null"
/>
<CustomProperties v-if="customPropertiesImageIndex !== null" v-model="images[customPropertiesImageIndex]"
:fields="customPropertiesFields" @close="customPropertiesImageIndex = null" />
</div>
</template>
</draggable>
Expand All @@ -34,7 +22,8 @@
<br style="clear: both" />

<span v-if="editable" class="">
<input :id="`__media__${field.attribute}`" :multiple="multiple" ref="file" class="form-file-input" type="file" :disabled="uploading" @change="add"/>
<input :id="`__media__${field.attribute}`" :multiple="multiple" ref="file" class="form-file-input" type="file"
:disabled="uploading" @change="add" />
<label :for="`__media__${field.attribute}`" class="">
<DefaultButton type="button" @click.prevent="focusFileInput">
<template v-if="uploading">{{ __('Uploading') }} ({{ uploadProgress }}%)</template>
Expand All @@ -43,10 +32,6 @@
</label>
</span>

<help-text v-if="field.type !== 'media'" :show-span="showHelpText" class="mt-2">
{{ field.helpText }}
</help-text>

<p v-if="hasError" class="my-2 text-danger">
{{ firstError }}
</p>
Expand Down Expand Up @@ -97,7 +82,7 @@ export default {
},
computed: {
cropImage() {
return this.cropImageQueue.length ? this.cropImageQueue[this.cropImageQueue.length - 1] : null
return this.cropImageQueue.length ? this.cropImageQueue[ this.cropImageQueue.length - 1 ] : null
},
draggable() {
return this.editable && this.multiple;
Expand All @@ -108,62 +93,62 @@ export default {
label() {
const type = this.field.type === 'media' ? 'Media' : 'File';
if (this.multiple || this.images.length === 0) {
return this.__(`Add New ${type}`);
if ( this.multiple || this.images.length === 0 ) {
return this.__( `Add New ${type}` );
}
return this.__(`Upload New ${type}`);
return this.__( `Upload New ${type}` );
},
mustCrop() {
return ('mustCrop' in this.field && this.field.mustCrop);
return ( 'mustCrop' in this.field && this.field.mustCrop );
}
},
watch: {
modelValue(value) {
modelValue( value ) {
this.images = value || [];
},
images(value, old) {
this.queueNewImages(value, old)
this.$emit('update:modelValue', this.images);
images( value, old ) {
this.queueNewImages( value, old )
this.$emit( 'update:modelValue', this.images );
},
value(value, old) {
this.queueNewImages(value, old)
value( value, old ) {
this.queueNewImages( value, old )
this.images = value;
},
},
methods: {
focusFileInput() {
this.$refs.file.click();
},
remove(index) {
this.images = this.images.filter((value, i) => i !== index);
remove( index ) {
this.images = this.images.filter( ( value, i ) => i !== index );
},
onCroppedImage(image) {
if (this.uploadsToVapor) {
onCroppedImage( image ) {
if ( this.uploadsToVapor ) {
image.isVaporUpload = true;
this.uploadToVapor(image.file).then((imageProperties) => {
this.uploadToVapor( image.file ).then( ( imageProperties ) => {
image.vaporFile = imageProperties;
});
} );
}
let index = this.images.indexOf(this.cropImage);
this.images[index] = Object.assign(image, {custom_properties: this.cropImage.custom_properties});
let index = this.images.indexOf( this.cropImage );
this.images[ index ] = Object.assign( image, { custom_properties: this.cropImage.custom_properties } );
},
add() {
Array.from(this.$refs.file.files).forEach(file => {
const blobFile = new Blob([file], {type: file.type});
Array.from( this.$refs.file.files ).forEach( file => {
const blobFile = new Blob( [ file ], { type: file.type } );
blobFile.lastModifiedDate = new Date();
blobFile.name = file.name;
this.readFile(blobFile);
});
this.readFile( blobFile );
} );
// reset file input so if you upload the same image sequentially
this.$refs.file.value = null;
},
readFile(file) {
readFile( file ) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.readAsDataURL( file );
reader.onload = () => {
const fileData = {
file: file,
Expand All @@ -173,81 +158,81 @@ export default {
},
name: file.name,
file_name: file.name,
...(this.mustCrop && {mustCrop: true}),
...( this.mustCrop && { mustCrop: true } ),
};
if (!this.validateFile(fileData.file)) {
if ( !this.validateFile( fileData.file ) ) {
return;
}
if (this.uploadsToVapor) {
if ( this.uploadsToVapor ) {
// This flag signals to FormField that this is an uploaded file.
fileData.isVaporUpload = true;
this.uploadToVapor(file).then((imageProperties) => {
this.uploadToVapor( file ).then( ( imageProperties ) => {
fileData.vaporFile = imageProperties;
});
} );
}
// Copy to trigger watcher to recognize differnece between new and old values
// https://github.com/vuejs/vue/issues/2164
let copiedArray = this.images.slice(0)
if (this.multiple) {
copiedArray.push(fileData);
let copiedArray = this.images.slice( 0 )
if ( this.multiple ) {
copiedArray.push( fileData );
} else {
copiedArray = [fileData];
copiedArray = [ fileData ];
}
this.images = copiedArray
};
},
retrieveImageFromClipboardAsBlob(pasteEvent, callback) {
if (pasteEvent.clipboardData == false) {
if (typeof (callback) == "function") {
callback(undefined);
retrieveImageFromClipboardAsBlob( pasteEvent, callback ) {
if ( pasteEvent.clipboardData == false ) {
if ( typeof ( callback ) == "function" ) {
callback( undefined );
}
}
var items = pasteEvent.clipboardData.items
if (items == undefined) {
if (typeof (callback) == "function") {
callback(undefined)
if ( items == undefined ) {
if ( typeof ( callback ) == "function" ) {
callback( undefined )
}
}
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") == -1) continue;
var blob = items[i].getAsFile()
for ( var i = 0; i < items.length; i++ ) {
if ( items[ i ].type.indexOf( "image" ) == -1 ) continue;
var blob = items[ i ].getAsFile()
if (typeof (callback) == "function") {
callback(blob)
if ( typeof ( callback ) == "function" ) {
callback( blob )
}
}
},
validateFile(file) {
return this.validateFileSize(file) && this.validateFileType(file);
validateFile( file ) {
return this.validateFileSize( file ) && this.validateFileType( file );
},
validateFileSize(file) {
if (this.field.maxFileSize && ((file.size / 1024) > this.field.maxFileSize)) {
Nova.error(this.__(
validateFileSize( file ) {
if ( this.field.maxFileSize && ( ( file.size / 1024 ) > this.field.maxFileSize ) ) {
Nova.error( this.__(
'Maximum file size is :amount MB',
{amount: String(this.field.maxFileSize / 1024)}
));
{ amount: String( this.field.maxFileSize / 1024 ) }
) );
return false;
}
return true;
},
validateFileType(file) {
if (!Array.isArray(this.field.allowedFileTypes)) {
validateFileType( file ) {
if ( !Array.isArray( this.field.allowedFileTypes ) ) {
return true;
}
for (const type of this.field.allowedFileTypes) {
if (file.type.startsWith(type)) {
for ( const type of this.field.allowedFileTypes ) {
if ( file.type.startsWith( type ) ) {
return true;
}
}
Nova.error(this.__(
Nova.error( this.__(
'File type must be: :types',
{types: this.field.allowedFileTypes.join(' / ')}
));
{ types: this.field.allowedFileTypes.join( ' / ' ) }
) );
return false;
},
Expand All @@ -261,64 +246,64 @@ export default {
* @param value
* @param old
*/
queueNewImages(value, old) {
queueNewImages( value, old ) {
let aThis = this
if (this.mustCrop) {
if ( this.mustCrop ) {
// For each of the new values (one)
// If it's not in the old value (two)
// And it's not already queued (three)
let toCrop = value.filter(function (one) {
return !(old.filter(function (two) {
let toCrop = value.filter( function ( one ) {
return !( old.filter( function ( two ) {
return one === two
}).length) && !(aThis.cropImageQueue.filter(function (three) {
} ).length ) && !( aThis.cropImageQueue.filter( function ( three ) {
return one === three
}).length)
})
} ).length )
} )
// Added them to the queue
for (let i in toCrop) {
this.cropImageQueue.push(toCrop[i])
for ( let i in toCrop ) {
this.cropImageQueue.push( toCrop[ i ] )
}
}
},
/**
* Start the upload process to Vapor.
*/
uploadToVapor(file) {
uploadToVapor( file ) {
this.uploading = true;
this.$emit('file-upload-started');
return Vapor.store(file, {
this.$emit( 'file-upload-started' );
return Vapor.store( file, {
progress: progress => {
this.uploadProgress = Math.round(progress * 100);
this.uploadProgress = Math.round( progress * 100 );
}
}).then(response => {
} ).then( response => {
this.uploading = false;
this.uploadProgress = 0;
this.$emit('file-upload-finished');
this.$emit( 'file-upload-finished' );
return {
key: response.key,
uuid: response.uuid,
filename: file.name,
mime_type: response.headers['Content-Type'],
mime_type: response.headers[ 'Content-Type' ],
file_size: file.size,
};
});
} );
}
},
mounted: function () {
this.$nextTick(() => {
window.addEventListener("paste", (e) => {
if (!this.mouseOver) {
this.$nextTick( () => {
window.addEventListener( "paste", ( e ) => {
if ( !this.mouseOver ) {
return;
}
this.retrieveImageFromClipboardAsBlob(e, (imageBlob) => {
if (imageBlob) {
this.readFile(imageBlob)
this.retrieveImageFromClipboardAsBlob( e, ( imageBlob ) => {
if ( imageBlob ) {
this.readFile( imageBlob )
}
})
}, false)
})
} )
}, false )
} )
},
};
</script>
Expand Down

0 comments on commit 8e5990e

Please sign in to comment.