Uses wpMediaFrame on TermEditionForm. More updates on ItemEditionPage (adds collapses for fields).
This commit is contained in:
mateuswetah
parent
3cfccecdc7
commit
167b021a9d
File diff suppressed because it is too large
Load Diff
|
|
@ -577,8 +577,8 @@ export default {
|
|||
frame_title: this.$i18n.get('instruction_select_collection_header_image'),
|
||||
},
|
||||
relatedPostId: this.collectionId,
|
||||
onSave: (mediaId) => {
|
||||
this.updateHeaderImage({collectionId: this.collectionId, headerImageId: mediaId})
|
||||
onSave: (media) => {
|
||||
this.updateHeaderImage({collectionId: this.collectionId, headerImageId: media.id})
|
||||
.then((res) => {
|
||||
this.collection.header_image = res.header_image;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="page-container">
|
||||
<div class="tainacan-page-title">
|
||||
<h2>{{ $i18n.get('title_item_edition') }}</h2>
|
||||
<a class="is-success">Voltar</a>
|
||||
<a class="is-secondary">{{ $i18n.get('return') }}</a>
|
||||
<hr>
|
||||
</div>
|
||||
<form
|
||||
|
|
@ -93,9 +93,11 @@
|
|||
:active.sync="isTextModalActive"
|
||||
:width="640"
|
||||
scroll="keep">
|
||||
<div class="modal-area">
|
||||
<h2>{{ $i18n.get('instruction_write_text') }}</h2>
|
||||
<br>
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_write_text') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<b-input
|
||||
type="textarea"
|
||||
v-model="textContent"/>
|
||||
|
|
@ -126,9 +128,11 @@
|
|||
:active.sync="isURLModalActive"
|
||||
:width="640"
|
||||
scroll="keep">
|
||||
<div class="modal-area">
|
||||
<h2>{{ $i18n.get('instruction_insert_url') }}</h2>
|
||||
<br>
|
||||
<div class="tainacan-modal-content">
|
||||
<div class="tainacan-modal-title">
|
||||
<h2>{{ $i18n.get('instruction_insert_url') }}</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<b-input v-model="urlLink"/>
|
||||
|
||||
<div class="field is-grouped form-submit">
|
||||
|
|
@ -206,6 +210,15 @@
|
|||
<div class="column is-1" />
|
||||
<div class="column is-7">
|
||||
<label class="section-label">{{ $i18n.get('fields') }}</label>
|
||||
<br>
|
||||
<a
|
||||
class="collapse-all"
|
||||
@click="toggleCollapseAll()">
|
||||
{{ collapseAll ? $i18n.get('label_collapse_all') : $i18n.get('label_expand_all') }}
|
||||
<b-icon
|
||||
type="is-secondary"
|
||||
:icon=" collapseAll ? 'menu-down' : 'menu-right'" />
|
||||
</a>
|
||||
|
||||
<!-- Status -------------------------------- -->
|
||||
<b-field
|
||||
|
|
@ -228,11 +241,13 @@
|
|||
</b-select>
|
||||
</b-field>
|
||||
|
||||
<!-- Fields from Collection-------------------------------- -->
|
||||
<tainacan-form-item
|
||||
v-for="(field, index) in fieldList"
|
||||
:key="index"
|
||||
:field="field"/>
|
||||
<!-- Fields from Collection-------------------------------- -->
|
||||
<tainacan-form-item
|
||||
v-for="(field, index) in fieldList"
|
||||
:key="index"
|
||||
:field="field"
|
||||
:is-collapsed="!fieldCollapses[index]" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -274,6 +289,8 @@ export default {
|
|||
item: null,
|
||||
collectionId: Number,
|
||||
isLoading: false,
|
||||
fieldCollapses: [],
|
||||
collapseAll: false,
|
||||
form: {
|
||||
collectionId: Number,
|
||||
status: '',
|
||||
|
|
@ -380,8 +397,11 @@ export default {
|
|||
},
|
||||
loadMetadata() {
|
||||
// Obtains Item Field
|
||||
this.fetchFields(this.itemId).then(() => {
|
||||
this.fetchFields(this.itemId).then((fields) => {
|
||||
this.isLoading = false;
|
||||
for (let field of fields) {
|
||||
this.fieldCollapses.push(false);
|
||||
}
|
||||
});
|
||||
},
|
||||
setFileDocument(event) {
|
||||
|
|
@ -478,7 +498,13 @@ export default {
|
|||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
toggleCollapseAll() {
|
||||
this.collapseAll = !this.collapseAll;
|
||||
|
||||
for (let i = 0; i < this.fieldCollapses.length; i++)
|
||||
this.fieldCollapses[i] = this.collapseAll;
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -543,25 +569,18 @@ export default {
|
|||
font-size: 16px !important;
|
||||
font-weight: 500 !important;
|
||||
color: $tertiary !important;
|
||||
line-height: 2.0em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.modal-area {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
|
||||
h2 {
|
||||
color: $tertiary;
|
||||
font-size: 16px;
|
||||
}
|
||||
.form-submit {
|
||||
padding: 1em 0em 0.4em 0em;
|
||||
}
|
||||
.collapse-all {
|
||||
font-size: 12px;
|
||||
.icon { vertical-align: bottom; }
|
||||
}
|
||||
|
||||
.document-box {
|
||||
border: 1px solid $draggable-border-color;
|
||||
padding: 30px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 38px;
|
||||
|
||||
ul {
|
||||
|
|
@ -603,7 +622,7 @@ export default {
|
|||
position: absolute;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
bottom: 50%;
|
||||
bottom: 45%;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
z-index: 99;
|
||||
|
|
|
|||
|
|
@ -15,13 +15,13 @@
|
|||
class="button is-rounred is-secondary"
|
||||
id="button-edit-thumbnail"
|
||||
:aria-label="$i18n.get('label_button_edit_header_image')"
|
||||
@click="editImage($event, true)">
|
||||
@click="headerImageMediaFrame.openFrame($event)">
|
||||
<b-icon icon="pencil"/>
|
||||
</a>
|
||||
<figure class="image is-128x128">
|
||||
<span
|
||||
v-if="editForm.header_image === undefined || editForm.header_image === false"
|
||||
class="image-placeholder">{{ $i18n.get('label_empty_header_image') }}</span>
|
||||
<span
|
||||
v-if="editForm.header_image === undefined || editForm.header_image === false"
|
||||
class="image-placeholder">{{ $i18n.get('label_empty_header_image') }}</span>
|
||||
<img
|
||||
:alt="$i18n.get('label_header_image')"
|
||||
:src="(editForm.header_image === undefined || editForm.header_image === false) ? headerPlaceholderPath : editForm.header_image">
|
||||
|
|
@ -97,6 +97,7 @@
|
|||
|
||||
<script>
|
||||
import {mapActions, mapGetters} from 'vuex';
|
||||
import wpMediaFrames from '../../js/wp-media-frames';
|
||||
|
||||
export default {
|
||||
name: 'TermEditionForm',
|
||||
|
|
@ -104,7 +105,7 @@
|
|||
return {
|
||||
formErrors: {},
|
||||
headerPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_rectangle.png',
|
||||
frameUploader: undefined,
|
||||
headerImageMediaFrame: undefined
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -179,82 +180,25 @@
|
|||
}
|
||||
);
|
||||
},
|
||||
editImage(event) {
|
||||
'use strict';
|
||||
event.preventDefault();
|
||||
initializeMediaFrames() {
|
||||
|
||||
// Create a new media frame
|
||||
this.frameUploader = wp.media.frames.frame_uploader = wp.media({
|
||||
frame: 'select',
|
||||
title: 'Select or Upload and Image.',
|
||||
button: {
|
||||
text: 'Select and Crop',
|
||||
close: false
|
||||
},
|
||||
multiple: false,
|
||||
library: {
|
||||
type: 'image',
|
||||
},
|
||||
uploader: true,
|
||||
states: [
|
||||
new wp.media.controller.Library({
|
||||
title: 'Corta pra mim!',
|
||||
library: wp.media.query({type: 'image'}),
|
||||
multiple: false,
|
||||
date: false,
|
||||
priority: 20,
|
||||
suggestedWidth: 1000,
|
||||
suggestedHeight: 200
|
||||
}),
|
||||
new wp.media.controller.Cropper({
|
||||
imgSelectOptions: {
|
||||
enable: true,
|
||||
handles: true,
|
||||
imageHeight: 200,
|
||||
imageWidth: 1000,
|
||||
instance: true,
|
||||
keys: true,
|
||||
maxWidth: 1000,
|
||||
persistent: true,
|
||||
x1: 0,
|
||||
x2: 250,
|
||||
y1: 0,
|
||||
y2: 50
|
||||
}
|
||||
})
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
this.frameUploader.on('select', () => {
|
||||
this.frameUploader.state('cropper').set('canSkipCrop', true);
|
||||
this.frameUploader.setState('cropper');
|
||||
});
|
||||
|
||||
this.frameUploader.on('skippedcrop', () => {
|
||||
let media = this.frameUploader.state().get('selection').first().toJSON();
|
||||
|
||||
this.editForm = Object.assign({},
|
||||
this.editForm,
|
||||
{
|
||||
header_image_id: media.id.toString(),
|
||||
header_image: media.url
|
||||
this.headerImageMediaFrame = new wpMediaFrames.headerImageControl(
|
||||
'my-header-image-media-frame', {
|
||||
button_labels: {
|
||||
frame_title: this.$i18n.get('instruction_select_term_header_image'),
|
||||
},
|
||||
relatedPostId: this.editForm.id,
|
||||
onSave: (croppedImage) => {
|
||||
this.editForm = Object.assign({},
|
||||
this.editForm,
|
||||
{
|
||||
header_image_id: croppedImage.id.toString(),
|
||||
header_image: croppedImage.url
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
this.frameUploader.on('cropped', (croppedImage) => {
|
||||
|
||||
this.editForm = Object.assign({},
|
||||
this.editForm,
|
||||
{
|
||||
header_image_id: croppedImage.attachment_id.toString(),
|
||||
header_image: croppedImage.url
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
this.frameUploader.open();
|
||||
}
|
||||
);
|
||||
},
|
||||
clearErrors(attributes) {
|
||||
if(attributes instanceof Object){
|
||||
|
|
@ -265,6 +209,9 @@
|
|||
this.formErrors[attributes] = undefined;
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initializeMediaFrames();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ export default {
|
|||
wp.media.view.settings.post = {
|
||||
id: this.params.relatedPostId
|
||||
}
|
||||
console.log(wp.media.view.settings.post);
|
||||
|
||||
this.params.flex_width = 0;
|
||||
this.params.flex_height = 0;
|
||||
|
|
@ -112,9 +111,10 @@ export default {
|
|||
}),
|
||||
// CroppedImageControl, with presets for thumbnail dimensions
|
||||
headerImageControl: wp.customize.CroppedImageControl.extend({
|
||||
|
||||
|
||||
initFrame: function() {
|
||||
var l10n = _wpMediaViewsL10n;
|
||||
|
||||
var l10n = _wpMediaViewsL10n;
|
||||
|
||||
wp.media.view.settings.post = {
|
||||
id: this.params.relatedPostId
|
||||
|
|
@ -153,7 +153,6 @@ export default {
|
|||
]
|
||||
});
|
||||
|
||||
|
||||
//this.frame.state('cropper').set( 'canSkipCrop', true );
|
||||
|
||||
this.frame.on( 'select', this.onSelect, this );
|
||||
|
|
@ -163,7 +162,7 @@ export default {
|
|||
// Called on both skippedcrop and cropped states
|
||||
setImageFromAttachment: function( attachment ) {
|
||||
this.params.attachment = attachment;
|
||||
this.params.onSave(attachment.id);
|
||||
this.params.onSave(attachment);
|
||||
}
|
||||
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -42,6 +42,10 @@ html {
|
|||
z-index: 9999999 !important;
|
||||
}
|
||||
|
||||
.modal-background {
|
||||
background-color: rgba(0, 0, 0, 0.70);
|
||||
}
|
||||
|
||||
/* Rules for sizing the icon. */
|
||||
.material-icons.md-18 { font-size: 18px; }
|
||||
.material-icons.md-24 { font-size: 24px; }
|
||||
|
|
@ -80,7 +84,7 @@ html {
|
|||
}
|
||||
}
|
||||
|
||||
.tainacan-page-title {
|
||||
.tainacan-page-title, .tainacan-modal-title {
|
||||
h1, h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
|
|
@ -88,16 +92,26 @@ html {
|
|||
display: inline-block;
|
||||
}
|
||||
a{
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
float: right;
|
||||
}
|
||||
hr{
|
||||
margin-top: 2px;
|
||||
margin-bottom: 60px;
|
||||
height: 1px;
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-modal-content {
|
||||
background-color: white;
|
||||
padding: 52px 80px;
|
||||
|
||||
.form-submit {
|
||||
padding: 80px 0em 0.4em 0em !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Buefy notices (toast, snackbar...)
|
||||
.notices {
|
||||
z-index: 99999999999999 !important;
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ return [
|
|||
'remove' => __( 'Remove', 'tainacan' ),
|
||||
'save' => __( 'Save', 'tainacan' ),
|
||||
'next' => __( 'Next', 'tainacan' ),
|
||||
'return' => __( 'Return', 'tainacan' ),
|
||||
'see' => __( 'See', 'tainacan' ),
|
||||
'search' => __( 'Search', 'tainacan' ),
|
||||
'advanced_search' => __( 'Advanced Search', 'tainacan' ),
|
||||
|
|
@ -162,6 +163,8 @@ return [
|
|||
'label_text' => __( 'Texto', 'tainacan' ),
|
||||
'label_url' => __( 'URL', 'tainacan' ),
|
||||
'label_select_file' => __( 'Select File', 'tainacan' ),
|
||||
'label_expand_all' => __( 'Expand all', 'tainacan' ),
|
||||
'label_collapse_all' => __( 'Collapse all', 'tainacan' ),
|
||||
|
||||
// Instructions. More complex sentences to guide user and placeholders
|
||||
'instruction_dragndrop_fields_collection' => __( 'Drag and drop Fields here to Collection.', 'tainacan' ),
|
||||
|
|
@ -181,6 +184,7 @@ return [
|
|||
'instruction_select_collection_thumbnail' => __( 'Select a thumbnail image for collection', 'tainacan' ),
|
||||
'instruction_select_item_thumbnail' => __( 'Select a thumbnail image for item', 'tainacan' ),
|
||||
'instruction_select_collection_header_image' => __( 'Select a header image for collection', 'tainacan' ),
|
||||
'instruction_select_term_header_image' => __( 'Select a header image for term', 'tainacan' ),
|
||||
'instruction_select_files_to_attach_to_item' => __( 'Select files to attach to item', 'tainacan' ),
|
||||
'instruction_select_document_file_for_item' => __( 'Select a document file for item', 'tainacan' ),
|
||||
'instruction_insert_url' => __( 'Insert URL', 'tainacan' ),
|
||||
|
|
|
|||
|
|
@ -1,52 +1,64 @@
|
|||
<template>
|
||||
<b-field
|
||||
:addons="false"
|
||||
:label="field.field.name"
|
||||
:message="getErrorMessage"
|
||||
:type="fieldTypeMessage">
|
||||
<span
|
||||
v-if="field.field.required == 'yes'"
|
||||
class="required-field-asterisk"
|
||||
:class="fieldTypeMessage">*</span>
|
||||
<help-button
|
||||
:title="field.field.name"
|
||||
:message="field.field.description"/>
|
||||
<div v-if="isTextInputComponent( field.field.field_type_object.component )">
|
||||
<component
|
||||
:id="field.field.field_type_object.component + '-' + field.field.slug"
|
||||
:is="field.field.field_type_object.component"
|
||||
v-model="inputs[0]"
|
||||
:field="field"
|
||||
@blur="changeValue()"/>
|
||||
<div v-if="field.field.multiple == 'yes'">
|
||||
<div
|
||||
v-if="index > 0"
|
||||
v-for="(input, index) in inputsList "
|
||||
:key="index"
|
||||
class="multiple-inputs">
|
||||
<component
|
||||
:id="field.field.field_type_object.component + '-' + field.field.slug"
|
||||
:is="field.field.field_type_object.component"
|
||||
v-model="inputs[index]"
|
||||
:field="field"
|
||||
@blur="changeValue()"/><a
|
||||
class="button"
|
||||
<b-collapse >
|
||||
<span @click="isCollapsed = !isCollapsed">
|
||||
<b-icon
|
||||
type="is-secondary"
|
||||
:icon="!isCollapsed ? 'menu-down' : 'menu-right'" />
|
||||
<label class="label">{{ field.field.name }}</label>
|
||||
<span
|
||||
v-if="field.field.required == 'yes'"
|
||||
class="required-field-asterisk"
|
||||
:class="fieldTypeMessage">*</span>
|
||||
<span class="field-type">({{ $i18n.get(field.field.field_type_object.component) }})</span>
|
||||
</span>
|
||||
<help-button
|
||||
:title="field.field.name"
|
||||
:message="field.field.description"/>
|
||||
<div
|
||||
v-show="!isCollapsed"
|
||||
v-if="isTextInputComponent( field.field.field_type_object.component )">
|
||||
<component
|
||||
:id="field.field.field_type_object.component + '-' + field.field.slug"
|
||||
:is="field.field.field_type_object.component"
|
||||
v-model="inputs[0]"
|
||||
:field="field"
|
||||
@blur="changeValue()"/>
|
||||
<div v-if="field.field.multiple == 'yes'">
|
||||
<div
|
||||
v-if="index > 0"
|
||||
@click="removeInput(index)">-</a>
|
||||
v-for="(input, index) in inputsList "
|
||||
:key="index"
|
||||
class="multiple-inputs">
|
||||
<component
|
||||
:id="field.field.field_type_object.component + '-' + field.field.slug"
|
||||
:is="field.field.field_type_object.component"
|
||||
v-model="inputs[index]"
|
||||
:field="field"
|
||||
@blur="changeValue()"/><a
|
||||
class="button"
|
||||
v-if="index > 0"
|
||||
@click="removeInput(index)">-</a>
|
||||
</div>
|
||||
<a
|
||||
class="button"
|
||||
@click="addInput">+</a>
|
||||
</div>
|
||||
<a
|
||||
class="button"
|
||||
@click="addInput">+</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<component
|
||||
:id="field.field.field_type_object.component + '-' + field.field.slug"
|
||||
:is="field.field.field_type_object.component"
|
||||
v-model="inputs"
|
||||
:field="field"
|
||||
@blur="changeValue()"/>
|
||||
</div>
|
||||
<div
|
||||
v-show="!isCollapsed"
|
||||
v-else>
|
||||
<component
|
||||
:id="field.field.field_type_object.component + '-' + field.field.slug"
|
||||
:is="field.field.field_type_object.component"
|
||||
v-model="inputs"
|
||||
:field="field"
|
||||
@blur="changeValue()"/>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</b-field>
|
||||
</template>
|
||||
|
||||
|
|
@ -58,7 +70,8 @@
|
|||
props: {
|
||||
field: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
isCollapsed: Boolean
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
|
@ -125,8 +138,36 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@import '../../admin/scss/_variables.scss';
|
||||
|
||||
.multiple-inputs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.field {
|
||||
border-bottom: 1px solid $draggable-border-color;
|
||||
padding: 10px 25px;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-left: 18px;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.field-type {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: $gray;
|
||||
top: -0.2em;
|
||||
position: relative;
|
||||
}
|
||||
.help-wrapper {
|
||||
top: -0.2em;
|
||||
}
|
||||
.collapse .collapse-content>div {
|
||||
margin-left: 45px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue