Adapting the file-item component to new attachments format.
This commit is contained in:
Mateus Machado Luna
parent
618e32a589
commit
9587ec512a
|
|
@ -51,9 +51,10 @@
|
|||
:size="178"
|
||||
:file="{
|
||||
media_type: 'image',
|
||||
guid: { rendered: collection.thumbnail['tainacan-medium'] ? collection.thumbnail['tainacan-medium'][0] : collection.thumbnail.medium[0] },
|
||||
title: { rendered: $i18n.get('label_thumbnail')},
|
||||
description: { rendered: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + collection.thumbnail.full[0] + `'/>` }}"/>
|
||||
thumbnails: { 'tainacan-medium': [ collection.thumbnail['tainacan-medium'] ? collection.thumbnail['tainacan-medium'][0] : collection.thumbnail.medium[0] ] },
|
||||
title: $i18n.get('label_thumbnail'),
|
||||
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + collection.thumbnail.full[0] + `'/>`
|
||||
}"/>
|
||||
<figure
|
||||
v-if="collection.thumbnail == undefined || ((collection.thumbnail.medium == undefined || collection.thumbnail.medium == false) && (collection.thumbnail['tainacan-medium'] == undefined || collection.thumbnail['tainacan-medium'] == false))"
|
||||
class="image">
|
||||
|
|
|
|||
|
|
@ -301,9 +301,10 @@
|
|||
:size="178"
|
||||
:file="{
|
||||
media_type: 'image',
|
||||
guid: { rendered: item.thumbnail['tainacan-medium'] ? item.thumbnail['tainacan-medium'][0] : item.thumbnail.medium[0] },
|
||||
title: { rendered: $i18n.get('label_thumbnail')},
|
||||
description: { rendered: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + item.thumbnail.full[0] + `'/>` }}"/>
|
||||
thumbnails: { 'tainacan-medium': [ item.thumbnail['tainacan-medium'] ? item.thumbnail['tainacan-medium'][0] : item.thumbnail.medium[0] ] },
|
||||
title: $i18n.get('label_thumbnail'),
|
||||
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + item.thumbnail.full[0] + `'/>`
|
||||
}"/>
|
||||
<figure
|
||||
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail['tainacan-medium'] == undefined || item.thumbnail['tainacan-medium'] == false))"
|
||||
class="image">
|
||||
|
|
|
|||
|
|
@ -71,8 +71,8 @@
|
|||
:modal-on-click="false"
|
||||
:show-name="true"
|
||||
:file="{
|
||||
title: { rendered: attachment.title },
|
||||
guid: { rendered: attachment.url },
|
||||
title: attachment.title ,
|
||||
thumbnails: { 'tainacan-medium': [ attachment.url ] },
|
||||
mime_type: attachment.mime_type,
|
||||
media_type: attachment.mime_type.includes('image') ? 'image' : 'other'
|
||||
}"/>
|
||||
|
|
@ -180,8 +180,8 @@
|
|||
:modal-on-click="false"
|
||||
:show-name="true"
|
||||
:file="{
|
||||
title: { rendered: attachment.title },
|
||||
guid: { rendered: attachment.url },
|
||||
title: attachment.title,
|
||||
thumbnails: { 'tainacan-medium': [ attachment.url ] },
|
||||
mime_type: attachment.mime_type,
|
||||
media_type: attachment.mime_type.includes('image') ? 'image' : 'other'
|
||||
}"/>
|
||||
|
|
@ -291,8 +291,8 @@
|
|||
:modal-on-click="false"
|
||||
:show-name="true"
|
||||
:file="{
|
||||
title: { rendered: activity.old_value.title },
|
||||
guid: { rendered: activity.old_value.url },
|
||||
title: activity.old_value.title,
|
||||
thumbnails: { 'tainacan-medium': [ activity.old_value.url ] },
|
||||
mime_type: activity.old_value.mime_type,
|
||||
media_type: activity.old_value.mime_type.includes('image') ? 'image' : 'other'
|
||||
}"/>
|
||||
|
|
@ -433,8 +433,8 @@
|
|||
:modal-on-click="false"
|
||||
:show-name="true"
|
||||
:file="{
|
||||
title: { rendered: activity.new_value.title },
|
||||
guid: { rendered: activity.new_value.url },
|
||||
title: activity.new_value.title,
|
||||
thumbnails: { 'tainacan-medium': [ activity.new_value.url ] },
|
||||
mime_type: activity.new_value.mime_type,
|
||||
media_type: activity.new_value.mime_type.includes('image') ? 'image' : 'other'
|
||||
}"/>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
@click="modalOnClick? isPreviewModalActive = true : null">
|
||||
<figcaption
|
||||
:style="{ 'max-width': size != undefined ? size + 'px' : '112px' }"
|
||||
v-if="showName && file.title != undefined">{{ file.title.rendered }}</figcaption>
|
||||
v-if="showName && file.title != undefined">{{ file.title }}</figcaption>
|
||||
<div
|
||||
:style="{ 'width': size != undefined ? size + 'px' : '112px', 'height': size != undefined ? size + 'px' : '112px' }"
|
||||
class="image-wrapper">
|
||||
<div
|
||||
v-if="file.media_type == 'image'"
|
||||
class="image"
|
||||
:style="{ 'background-image': 'url(' + file.guid.rendered + ')' }"/>
|
||||
:style="{ 'background-image': 'url(' + file.thumbnails['tainacan-medium'] ? file.thumbnails['tainacan-medium'][0] : file.thumbnails['medium'][0] + ')' }"/>
|
||||
<div
|
||||
:style="{ 'background-color': '#f2f2f2' }"
|
||||
v-else
|
||||
|
|
@ -43,15 +43,15 @@
|
|||
aria-modal
|
||||
class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2 v-if="file.title != undefined">{{ file.title.rendered }}</h2>
|
||||
<h2 v-if="file.title != undefined">{{ file.title }}</h2>
|
||||
</div>
|
||||
<div
|
||||
class="is-flex rendered-content"
|
||||
v-html="file.description.rendered" />
|
||||
v-html="file.description" />
|
||||
<iframe
|
||||
style="width: 100%; min-height: 50vh;"
|
||||
v-if="file.guid != undefined && file.guid.rendered != undefined && file.mime_type != undefined && file.mime_type == 'application/pdf'"
|
||||
:src="file.guid.rendered" />
|
||||
v-if="file.url != undefined && file.url != undefined && file.mime_type != undefined && file.mime_type == 'application/pdf'"
|
||||
:src="file.url" />
|
||||
<div class="field is-grouped form-submit">
|
||||
<div class="control">
|
||||
<button
|
||||
|
|
@ -86,26 +86,32 @@ export default {
|
|||
methods: {
|
||||
getIconForMimeType(mimeType) {
|
||||
|
||||
let type = mimeType.split('/');
|
||||
if (type[0] == 'application' && type[1] != undefined){
|
||||
switch (type[1]) {
|
||||
case 'pdf':
|
||||
return 'pdf';
|
||||
default:
|
||||
return 'attachments';
|
||||
|
||||
if (mimeType) {
|
||||
const type = mimeType.split('/');
|
||||
if (type[0] == 'application' && type[1] != undefined){
|
||||
switch (type[1]) {
|
||||
case 'pdf':
|
||||
return 'pdf';
|
||||
default:
|
||||
return 'attachments';
|
||||
}
|
||||
} else {
|
||||
switch (type[0]) {
|
||||
case 'video':
|
||||
return 'video';
|
||||
case 'audio':
|
||||
return 'audio';
|
||||
case 'text':
|
||||
return 'text';
|
||||
default:
|
||||
return 'attachments';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
switch (type[0]) {
|
||||
case 'video':
|
||||
return 'video';
|
||||
case 'audio':
|
||||
return 'audio';
|
||||
case 'text':
|
||||
return 'text';
|
||||
default:
|
||||
return 'attachments';
|
||||
}
|
||||
return 'attatchments'
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,8 @@ export default {
|
|||
font-size: 0.875rem !important;
|
||||
font-weight: normal !important;
|
||||
white-space: normal !important;
|
||||
overflow: visible;
|
||||
overflow: visible !important;
|
||||
max-height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -64,8 +64,11 @@ export default {
|
|||
thumbnailControl: wp.customize.CroppedImageControl.extend({
|
||||
|
||||
initFrame: function() {
|
||||
|
||||
var MyCustomizeImageCropper = wp.media.controller.Cropper.extend({
|
||||
|
||||
var l10n = _wpMediaViewsL10n;
|
||||
|
||||
// Same of WordPress wp.media.controller.CustomizeImageCropper, but without `wp_customize: on`
|
||||
var customImageCropper = wp.media.controller.Cropper.extend({
|
||||
|
||||
doCrop: function( attachment ) {
|
||||
var cropDetails = attachment.get( 'cropDetails' ),
|
||||
|
|
@ -93,8 +96,6 @@ export default {
|
|||
}
|
||||
});
|
||||
|
||||
var l10n = _wpMediaViewsL10n;
|
||||
|
||||
wp.media.view.settings.post = {
|
||||
id: null
|
||||
}
|
||||
|
|
@ -127,7 +128,7 @@ export default {
|
|||
suggestedHeight: this.params.height,
|
||||
uploadedTo: this.params.relatedPostId
|
||||
}),
|
||||
new MyCustomizeImageCropper({
|
||||
new customImageCropper({
|
||||
imgSelectOptions: this.calculateImageSelectOptions,
|
||||
control: this
|
||||
})
|
||||
|
|
@ -153,7 +154,36 @@ export default {
|
|||
|
||||
initFrame: function() {
|
||||
|
||||
var l10n = _wpMediaViewsL10n;
|
||||
var l10n = _wpMediaViewsL10n;
|
||||
|
||||
// Same of WordPress wp.media.controller.CustomizeImageCropper, but without `wp_customize: on`
|
||||
var customImageCropper = wp.media.controller.Cropper.extend({
|
||||
|
||||
doCrop: function( attachment ) {
|
||||
var cropDetails = attachment.get( 'cropDetails' ),
|
||||
control = this.get( 'control' ),
|
||||
ratio = cropDetails.width / cropDetails.height;
|
||||
|
||||
// Use crop measurements when flexible in both directions.
|
||||
if ( control.params.flex_width && control.params.flex_height ) {
|
||||
cropDetails.dst_width = cropDetails.width;
|
||||
cropDetails.dst_height = cropDetails.height;
|
||||
|
||||
// Constrain flexible side based on image ratio and size of the fixed side.
|
||||
} else {
|
||||
cropDetails.dst_width = control.params.flex_width ? control.params.height * ratio : control.params.width;
|
||||
cropDetails.dst_height = control.params.flex_height ? control.params.width / ratio : control.params.height;
|
||||
}
|
||||
|
||||
return wp.ajax.post( 'crop-image', {
|
||||
wp_customize: 'off',
|
||||
nonce: attachment.get( 'nonces' ).edit,
|
||||
id: attachment.get( 'id' ),
|
||||
context: control.id,
|
||||
cropDetails: cropDetails
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
wp.media.view.settings.post = {
|
||||
id: null
|
||||
|
|
@ -196,7 +226,7 @@ export default {
|
|||
suggestedWidth: this.params.width,
|
||||
suggestedHeight: this.params.height
|
||||
}),
|
||||
new wp.media.controller.CustomizeImageCropper({
|
||||
new customImageCropper({
|
||||
imgSelectOptions: this.calculateImageSelectOptions,
|
||||
control: this
|
||||
})
|
||||
|
|
|
|||
|
|
@ -80,9 +80,10 @@
|
|||
:size="178"
|
||||
:file="{
|
||||
media_type: 'image',
|
||||
guid: { rendered: item.thumbnail['tainacan-medium'] ? item.thumbnail['tainacan-medium'][0] : item.thumbnail.medium[0] },
|
||||
title: { rendered: $i18n.get('label_thumbnail')},
|
||||
description: { rendered: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + item.thumbnail.full[0] + `'/>` }}"/>
|
||||
thumbnails: { 'tainacan-medium': [ item.thumbnail['tainacan-medium'] ? item.thumbnail['tainacan-medium'][0] : item.thumbnail.medium[0] ] },
|
||||
title: $i18n.get('label_thumbnail'),
|
||||
description: `<img alt='` + $i18n.get('label_thumbnail') + `' src='` + item.thumbnail.full[0] + `'/>`
|
||||
}"/>
|
||||
<figure
|
||||
v-if="item.thumbnail == undefined || ((item.thumbnail.medium == undefined || item.thumbnail.medium == false) && (item.thumbnail['tainacan-medium'] == undefined || item.thumbnail['tainacan-medium'] == false))"
|
||||
class="image">
|
||||
|
|
|
|||
|
|
@ -219,13 +219,13 @@ export const fetchAttachments = ({ commit }, { page, attachmentsPerPage, itemId,
|
|||
commit('cleanAttachments');
|
||||
commit('setTotalAttachments', null);
|
||||
|
||||
let endpoint = '/media/?parent=' + itemId + '&per_page=' + attachmentsPerPage + '&page=' + page;
|
||||
let endpoint = '/items/' + itemId + '/attachments?per_page=' + attachmentsPerPage + '&page=' + page;
|
||||
|
||||
if (documentId)
|
||||
endpoint += '&exclude=' + documentId;
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.wp.get(endpoint)
|
||||
axios.tainacan.get(endpoint)
|
||||
.then(res => {
|
||||
let attachments = res.data;
|
||||
let total = res.headers['x-wp-total'];
|
||||
|
|
|
|||
Loading…
Reference in New Issue