diff --git a/npm-debug.log.1989760898 b/npm-debug.log.1989760898 deleted file mode 100644 index e69de29bb..000000000 diff --git a/npm-debug.log.4286987312 b/npm-debug.log.4286987312 deleted file mode 100644 index e69de29bb..000000000 diff --git a/package.json b/package.json index df5a61b7f..38d87f26e 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "bulma": "^0.7.1", "html-to-json": "^0.6.0", "mdi": "^2.2.43", - "qs": "^6.5.1", "moment": "^2.22.1", "node-sass": "^4.8.3", + "qs": "^6.5.1", "sass-loader": "^7.0.1", "vue": "^2.5.16", "vue-router": "^3.0.1", diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue index 81d0ff09f..d44deec16 100644 --- a/src/admin/components/edition/item-edition-form.vue +++ b/src/admin/components/edition/item-edition-form.vue @@ -14,19 +14,13 @@
- -
-

- -

-

{{ $i18n.get('instruction_image_upload_box') }}

-
-
+ @click="editThumbnail($event)" + class="button is-primary"> + + {{ $i18n.get('label_choose_thumb') }} +
- - - + + + + @click="deleteThumbnail()"> + +
@@ -188,6 +183,8 @@ export default { label: this.$i18n.get('trash') }], formErrorMessage: '', + // Frame Uploader variables + frameUploader: undefined } }, methods: { @@ -287,6 +284,52 @@ export default { }); } }, + editThumbnail(event) { + 'use strict'; + event.preventDefault(); + + // If the media frame already exists, reopen it. + if ( this.frameUploader != undefined ) { + this.frameUploader.open(); + return; + } + + // Create a new media frame + this.frameUploader = wp.media({ + frame: 'select', + title: 'Select or Upload Media Of Your Chosen Persuasion', + button: { + text: 'Use this media' + }, + multiple: false, + library: { + type: 'image', + uploadedTo: this.itemId + }, + uploader: true + }); + + wp.media.view.settings.post = { + id: this.itemId, + featuredImageId: this.item.featured_img_id + } + + this.frameUploader.on('select', () => { + + let media = this.frameUploader.state().get( 'selection' ).first().toJSON(); + + this.updateThumbnail({itemId: this.itemId, thumbnailId: media.id}) + .then((res) => { + this.item.featured_image = res.featured_image; + }) + .catch((error) => { + this.$console.error(error); + }); + + }); + + this.frameUploader.open(); + }, uploadThumbnail($event) { this.sendAttachment({ item_id: this.itemId, file: $event[0] }) diff --git a/src/admin/js/main.js b/src/admin/js/main.js index 9ad91adf9..0cb298604 100644 --- a/src/admin/js/main.js +++ b/src/admin/js/main.js @@ -1,5 +1,6 @@ // Overrides lodash by original WordPress Underscore Library window.lodash = _.noConflict(); +window.underscore = _.noConflict(); // Main imports import Vue from 'vue'; diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php index 3f0d78963..514cc4b63 100644 --- a/src/admin/tainacan-admin-i18n.php +++ b/src/admin/tainacan-admin-i18n.php @@ -90,6 +90,7 @@ return [ 'label_button_edit' => __( 'Button Edit', 'tainacan' ), 'label_button_delete' => __( 'Button Delete', 'tainacan' ), 'label_button_edit_thumb' => __( 'Button Edit Thumbnail', 'tainacan' ), + 'label_choose_thumb' => __( 'Choose Thumbnail', 'tainacan' ), 'label_button_delete_thumb' => __( 'Button Delete Thumbnail', 'tainacan' ), 'label_collections_per_page' => __( 'Collections per Page:', 'tainacan' ), 'label_categories_per_page' => __( 'Categories per Page:', 'tainacan' ),