Another trial on overriding lodash vy underscore.

This commit is contained in:
mateuswetah 2018-04-24 19:40:29 -03:00
parent 59a1aba970
commit 701b267d3c
6 changed files with 66 additions and 21 deletions

View File

@ -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",

View File

@ -14,19 +14,13 @@
<!-- Thumbnail -------------------------------- -->
<b-field :label="$i18n.get('label_image')">
<div class="thumbnail-field">
<b-upload
<button
v-if="item.featured_image == undefined || item.featured_image == false"
v-model="thumbnail"
drag-drop
@input="uploadThumbnail($event)">
<div class="content has-text-centered">
<p>
<b-icon
icon="upload"/>
</p>
<p>{{ $i18n.get('instruction_image_upload_box') }}</p>
</div>
</b-upload>
@click="editThumbnail($event)"
class="button is-primary">
<b-icon icon="upload" />
<span>{{ $i18n.get('label_choose_thumb') }}</span>
</button>
<div v-else>
<figure class="image is-128x128">
<img
@ -34,17 +28,18 @@
:src="item.featured_image">
</figure>
<div class="thumbnail-buttons-row">
<b-upload
model="thumbnail"
@input="uploadThumbnail($event)">
<a
id="button-edit"
:aria-label="$i18n.get('label_button_edit_thumb')"><b-icon icon="pencil"/></a>
</b-upload>
<a
@click="editThumbnail($event)"
id="button-edit"
:aria-label="$i18n.get('label_button_edit_thumb')">
<b-icon icon="pencil"/>
</a>
<a
id="button-delete"
:aria-label="$i18n.get('label_button_delete_thumb')"
@click="deleteThumbnail()"><b-icon icon="delete"/></a>
@click="deleteThumbnail()">
<b-icon icon="delete"/>
</a>
</div>
</div>
</div>
@ -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] })

View File

@ -1,5 +1,6 @@
// Overrides lodash by original WordPress Underscore Library
window.lodash = _.noConflict();
window.underscore = _.noConflict();
// Main imports
import Vue from 'vue';

View File

@ -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' ),