malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Update meta fields some more

Browse Source
This commit is contained in:
Tetrakern 2023-09-21 16:03:12 +02:00
parent 985de301a4
commit d09481077d
3 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
includes/functions/_meta_fields.php
View File

@ -40,7 +40,7 @@ function fictioneer_get_metabox_text( $post, $meta_key, $args = [] ) {
ob_start();
// Start HTML ---> ?>
<div class="fictioneer-meta-field" <?php echo $data_required; ?>>
<div class="fictioneer-meta-field fictioneer-meta-field--text" <?php echo $data_required; ?>>
<?php if ( $label ) : ?>
<label class="fictioneer-meta-field__label" for="<?php echo $meta_key; ?>"><?php echo $label; ?></label>
@ -48,7 +48,9 @@ function fictioneer_get_metabox_text( $post, $meta_key, $args = [] ) {
<input type="hidden" name="<?php echo $meta_key; ?>" value="0" autocomplete="off">
<input type="text" id="<?php echo $meta_key; ?>" class="fictioneer-meta-field__input" name="<?php echo $meta_key; ?>" value="<?php echo $meta_value; ?>" placeholder="<?php echo $placeholder; ?>" autocomplete="off" <?php echo $required; ?>>
<div class="fictioneer-meta-field__wrapper">
<input type="text" id="<?php echo $meta_key; ?>" class="fictioneer-meta-field__input" name="<?php echo $meta_key; ?>" value="<?php echo $meta_value; ?>" placeholder="<?php echo $placeholder; ?>" autocomplete="off" <?php echo $required; ?>>
</div>
<?php if ( $description ) : ?>
<div class="fictioneer-meta-field__description"><?php echo $description; ?></div>
@ -72,7 +74,7 @@ function fictioneer_get_metabox_url( $post, $meta_key, $args = [] ) {
ob_start();
// Start HTML ---> ?>
<div class="fictioneer-meta-field" <?php echo $data_required; ?>>
<div class="fictioneer-meta-field fictioneer-meta-field--url" <?php echo $data_required; ?>>
<?php if ( $label ) : ?>
<label class="fictioneer-meta-field__label" for="<?php echo $meta_key; ?>"><?php echo $label; ?></label>
@ -109,7 +111,7 @@ function fictioneer_get_metabox_array( $post, $meta_key, $args = [] ) {
ob_start();
// Start HTML ---> ?>
<div class="fictioneer-meta-field" <?php echo $data_required; ?>>
<div class="fictioneer-meta-field fictioneer-meta-field--array" <?php echo $data_required; ?>>
<?php if ( $label ) : ?>
<label class="fictioneer-meta-field__label" for="<?php echo $meta_key; ?>"><?php echo $label; ?></label>
@ -141,7 +143,7 @@ function fictioneer_get_metabox_select( $post, $meta_key, $options, $args = [] )
ob_start();
// Start HTML ---> ?>
<div class="fictioneer-meta-field" <?php echo $data_required; ?>>
<div class="fictioneer-meta-field fictioneer-meta-field--select" <?php echo $data_required; ?>>
<?php if ( $label ) : ?>
<label class="fictioneer-meta-field__label" for="<?php echo $meta_key; ?>"><?php echo $label; ?></label>
@ -182,7 +184,7 @@ function fictioneer_get_metabox_textarea( $post, $meta_key, $args = [] ) {
ob_start();
// Start HTML ---> ?>
<div class="fictioneer-meta-field" <?php echo $data_required; ?>>
<div class="fictioneer-meta-field fictioneer-meta-field--textarea" <?php echo $data_required; ?>>
<?php if ( $label ) : ?>
<label class="fictioneer-meta-field__label" for="<?php echo $meta_key; ?>"><?php echo $label; ?></label>
@ -219,13 +221,13 @@ function fictioneer_get_metabox_image( $post, $meta_key, $args = [] ) {
ob_start();
// Start HTML ---> ?>
<div class="fictioneer-meta-field" data-target="fcn-image-meta-select">
<div class="fictioneer-meta-field fictioneer-meta-field--select" data-target="fcn-meta-field-image">
<?php if ( $label ) : ?>
<div class="fictioneer-meta-field__label"><?php echo $label; ?></div>
<?php endif; ?>
<input type="hidden" name="<?php echo $meta_key; ?>" value="<?php echo esc_attr( $meta_value ); ?>" autocomplete="off" data-target="fcn-image-meta-id">
<input type="hidden" name="<?php echo $meta_key; ?>" value="<?php echo esc_attr( $meta_value ); ?>" autocomplete="off" data-target="fcn-meta-field-image-id">
<div class="fictioneer-meta-field__wrapper fictioneer-meta-field__wrapper--image">
<div class="fictioneer-meta-field__image-display" <?php echo $image_css; ?>></div>

10
src/js/admin.js
View File

@ -396,7 +396,7 @@ function fcn_mediaUpload(event) {
event.preventDefault();
// Metabox
const metabox = event.currentTarget.closest('[data-target="fcn-image-meta-select"]');
const metabox = event.currentTarget.closest('[data-target="fcn-meta-field-image"]');
// Open media modal
var uploader = wp.media({
@ -409,11 +409,11 @@ function fcn_mediaUpload(event) {
.on('select', () => {
const attachment = uploader.state().get('selection').first().toJSON();
metabox.querySelector('[data-target="fcn-image-meta-id"]').value = attachment.id;
metabox.querySelector('[data-target="fcn-meta-field-image-id"]').value = attachment.id;
metabox.querySelector('.fictioneer-meta-field__image-display').style.backgroundImage = `url("${attachment.url}")`;
metabox.querySelector('.fictioneer-meta-field__image-upload').classList.add('hidden');
metabox.querySelector('.fictioneer-meta-field__image-actions').classList.remove('hidden');
})
});
}
// Listen for clicks on image upload and replace
@ -428,10 +428,10 @@ _$$('.fictioneer-meta-field__image-remove').forEach(button => {
event.preventDefault();
// Metabox
const metabox = event.currentTarget.closest('[data-target="fcn-image-meta-select"]');
const metabox = event.currentTarget.closest('[data-target="fcn-meta-field-image"]');
// Reset
metabox.querySelector('[data-target="fcn-image-meta-id"]').value = '';
metabox.querySelector('[data-target="fcn-meta-field-image-id"]').value = '';
metabox.querySelector('.fictioneer-meta-field__image-display').style.backgroundImage = '';
metabox.querySelector('.fictioneer-meta-field__image-upload').classList.remove('hidden');
metabox.querySelector('.fictioneer-meta-field__image-actions').classList.add('hidden');

3
src/scss/admin/admin.scss
View File

@ -264,7 +264,7 @@ td.comment {
&__wrapper {
position: relative;
&-image {
&--image {
background: #f0f0f0;
border-radius: 2px;
}
@ -399,6 +399,7 @@ td.comment {
display: block;
font-size: 16px;
margin: 0;
border-radius: 2px;
width: 100%;
@include bp(600px) {