tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Finally, change order of attachments via dragndrop. #357.

This commit is contained in:
mateuswetah 2020-10-21 15:09:00 -03:00
parent 6c40bad791
commit 9d0fd8d10f
6 changed files with 40 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/classes/api/endpoints/class-tainacan-rest-items-controller.php
View File

@ -273,6 +273,9 @@ class REST_Items_Controller extends REST_Controller {
if ( $request['context'] === 'edit' ) {
$item_arr['current_user_can_edit'] = $item->can_edit();
$item_arr['current_user_can_delete'] = $item->can_delete();
$item_arr['nonces'] = array(
'update-post_' . $item->get_id() => wp_create_nonce('update-post_' . $item->get_id())
);
}
if( isset($item_arr['thumbnail']) ) {
$item_arr['thumbnail_alt'] = get_post_meta( $item->get__thumbnail_id(), '_wp_attachment_image_alt', true );

2
src/classes/entities/class-tainacan-item.php
View File

@ -93,6 +93,8 @@ class Item extends Entity {
}
$attachments_query = [
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'attachment',
'posts_per_page' => -1,
'post_parent' => $item_id,

47
src/views/admin/components/edition/item-edition-form.vue
View File

@ -531,25 +531,20 @@
</template>
<div v-if="item != undefined && item.id != undefined">
<br>
<button
style="margin-left: calc(var(--tainacan-one-column) + 12px)"
type="button"
class="button is-secondary"
@click.prevent="attachmentMediaFrame.openFrame($event)"
:disabled="isLoadingAttachments">
{{ $i18n.get("label_edit_attachments") }}
</button>
<!--
<button
style="margin-left: calc(var(--tainacan-one-column) + 12px)"
type="button"
class="button is-secondary"
@click.prevent="openNewAttachmentsMediaFrame"
:disabled="isLoadingAttachments">
{{ $i18n.get("label_edit_attachments") + ' 2' }}
</button>
-->
<div class="attachments-list-heading">
<button
style="margin-left: calc(var(--tainacan-one-column) + 12px)"
type="button"
class="button is-secondary"
@click.prevent="attachmentMediaFrame.openFrame($event)"
:disabled="isLoadingAttachments">
{{ $i18n.get("label_edit_attachments") }}
</button>
<p>
{{ $i18n.get("info_edit_attachments") }}
</p>
</div>
<attachments-list
v-if="item != undefined && item.id != undefined"
:item="item"
@ -1417,8 +1412,9 @@ export default {
frame_title: this.$i18n.get('instruction_select_files_to_attach_to_item'),
frame_button: this.$i18n.get('label_attach_to_item'),
},
nonce: this.item.nonces['update-post_' + this.item.id],
relatedPostId: this.itemId,
document: this.item.document,
document: this.item.document_type == 'attachment' ? this.item.document : null,
onSave: () => {
// Fetch current existing attachments
this.isLoadingAttachments = true;
@ -1790,6 +1786,17 @@ export default {
}
}
.attachments-list-heading {
display: flex;
align-items: center;
margin-top: 24px;
margin-bottom: 24px;
button {
margin-right: 12px;
}
}
.footer {
padding: 18px var(--tainacan-one-column);
position: absolute;

1
src/views/admin/components/lists/attachments-list.vue
View File

@ -189,7 +189,6 @@
.uploaded-files {
display: block;
text-align: center;
.file-item-container {
display: inline-block;

210
src/views/admin/js/wp-media-frames.js
View File

@ -1,203 +1,4 @@
export default {
// customAttachmentsControl: class customAttachmentsControl {
// constructor(props) {
// this.props = props;
// this.buildAndSetGalleryFrame();
// }
// getGalleryDetailsMediaFrame() {
// /**
// * Custom gallery details frame.
// *
// * @see https://github.com/xwp/wp-core-media-widgets/blob/905edbccfc2a623b73a93dac803c5335519d7837/wp-admin/js/widgets/media-gallery-widget.js
// * @class GalleryDetailsMediaFrame
// * @class
// */
// return wp.media.view.MediaFrame.Post.extend( {
// /**
// * Set up gallery toolbar.
// *
// * @return {void}
// */
// galleryToolbar() {
// const editing = this.state().get( 'editing' );
// this.toolbar.set(
// new wp.media.view.Toolbar( {
// controller: this,
// items: {
// insert: {
// style: 'primary',
// text: editing
// ? wp.media.view.l10n.updateGallery
// : wp.media.view.l10n.insertGallery,
// priority: 80,
// requires: { library: true },
// /**
// * @fires wp.media.controller.State#update
// */
// click() {
// const controller = this.controller,
// state = controller.state();
// controller.close();
// state.trigger(
// 'update',
// state.get( 'library' )
// );
// // Restore and reset the default state.
// controller.setState( controller.options.state );
// controller.reset();
// },
// },
// },
// } )
// );
// },
// /**
// * Create the default states.
// *
// * @return {void}
// */
// createStates: function createStates() {
// this.on( 'toolbar:create:main-gallery', this.galleryToolbar, this );
// this.states.add( [
// new wp.media.controller.Library( {
// id: 'gallery',
// title: wp.media.view.l10n.createGalleryTitle,
// priority: 40,
// toolbar: 'main-gallery',
// filterable: 'unattached',
// multiple: 'add',
// editable: false,
// menu: 'gallery',
// describe: true,
// autoSelect: true,
// syncSelection: false,
// selection: this.options.selection,
// library: wp.media.query( {
// uploadedTo: wp.media.model.settings.post.id,
// orderby: 'menuOrder',
// order: 'ASC',
// posts_per_page: -1,
// query: true
// } ),
// } ),
// new wp.media.controller.GalleryEdit( {
// library: wp.media.query( {
// uploadedTo: wp.media.model.settings.post.id,
// orderby: 'menuOrder',
// order: 'ASC',
// posts_per_page: -1,
// query: true
// } ),
// selection: this.options.selection,
// editing: this.options.editing,
// menu: 'gallery',
// displaySettings: false,
// multiple: true,
// filterable: 'unattached'
// } )
// ] );
// },
// } );
// };
// getAttachmentsCollection() {
// return wp.media.query( {
// uploadedTo: wp.media.model.settings.post.id,
// orderby: 'menuOrder',
// order: 'ASC',
// posts_per_page: -1,
// query: true
// } );
// };
// /**
// * Sets the Gallery frame and initializes listeners.
// *
// * @return {void}
// */
// buildAndSetGalleryFrame() {
// // If a frame already existed remove it.
// if ( this.frame )
// this.frame.remove();
// if ( ! this.GalleryDetailsMediaFrame )
// this.GalleryDetailsMediaFrame = this.getGalleryDetailsMediaFrame();
// const attachments = this.getAttachmentsCollection( );
// const selection = new wp.media.model.Selection( attachments.models, {
// props: attachments.props.toJSON(),
// multiple: true,
// } );
// this.frame = new this.GalleryDetailsMediaFrame( {
// state: this.props.existingAttachments && this.props.existingAttachments.length ? 'gallery-edit' : 'gallery',
// multiple: true,
// selection: selection,
// editing: this.props.existingAttachments && this.props.existingAttachments.length ? true : false,
// } );
// wp.media.frame = this.frame;
// this.frame.on( 'select', (selected) => this.onSelect(selected));
// this.frame.on( 'update', (selected) => this.onUpdate(selected));
// this.frame.on( 'onclose', () => this.onClose() );
// }
// onUpdate( selections ) {
// const state = this.frame.state();
// const selectedImages = selections || state.get( 'selection' );
// if ( ! selectedImages || ! selectedImages.models.length )
// return;
// this.props.onSelect( selectedImages.models.map( ( model ) => model.toJSON() ));
// }
// onSelect() {
// // Get media attachment details from the frame state
// const attachments = this.frame.state().get( 'selection' ).toJSON();
// this.props.onSelect( attachments );
// }
// onClose() {
// const { onClose } = this.props;
// if ( onClose )
// onClose();
// }
// openModal() {
// this.buildAndSetGalleryFrame();
// const frameContent = this.frame.content.get();
// if ( frameContent && frameContent.collection ) {
// const collection = frameContent.collection;
// // clean all attachments we have in memory.
// collection
// .toArray()
// .forEach( ( model ) => model.trigger( 'destroy', model ) );
// // reset has more flag, if library had small amount of items all items may have been loaded before.
// collection.mirroring._hasMore = true;
// // request items
// collection.more();
// }
// // load the images so they are available in the media modal.
// this.getAttachmentsCollection().more();
// this.frame.open();
// }
// },
export default {
attachmentControl: wp.customize.MediaControl.extend({
@ -247,8 +48,10 @@ export default {
wp.media.view.settings.post = {
id: parseInt(this.params.relatedPostId),
wp_customize: 'off'
wp_customize: 'off',
}
wp.media.model.settings.post.nonce = this.params.nonce;
wp.media.model.settings.post.id = parseInt(this.params.relatedPostId);
this.frame = wp.media({
states: [
@ -258,6 +61,7 @@ export default {
uploadedTo: wp.media.view.settings.post.id,
orderby: 'menuOrder',
order: 'ASC',
post__not_in: [ this.params.document ],
posts_per_page: -1,
query: true
}),
@ -268,7 +72,7 @@ export default {
})
]
});
this.frame.$el.addClass( 'tainacan-item-attachments-modal' );
this.frame.on( 'toolbar:create:main-gallery', this.galleryToolbar, this.frame );
@ -276,7 +80,7 @@ export default {
this.frame.on( 'select', () => {
// Get the attachment from the modal frame.
var attachments = this.frame.state().get( 'selection' ).toJSON();
wp.media.view.settings.post.id = {
id: this.params.relatedPostId
}

1
src/views/tainacan-admin-i18n.php
View File

@ -753,6 +753,7 @@ return apply_filters( 'tainacan-admin-i18n', [
'info_submission_processing' => __( 'Please, wait while the submission is being processed', 'tainacan'),
'info_submission_uploading' => __( 'Please, wait while files are uploaded', 'tainacan'),
'info_thumbnail_alt' => __( 'The alternative text of the thumbnail is visible only by screen readers and should be usefull for users with visual impariments.', 'tainacan'),
'info_edit_attachments' => __( 'Order, title or alternative text of the attachments, are edited via the WordPress media modal.', 'tainacan' ),
// Datepicker months
'datepicker_month_january' => __( 'January', 'tainacan' ),