button positionning
This commit is contained in:
parent
22b5e75fde
commit
4b0663ecfd
|
|
@ -121,13 +121,16 @@
|
||||||
#openModal {
|
#openModal {
|
||||||
background-color: #007bff;
|
background-color: #007bff;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 6px 19px;
|
padding: 10px 20px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
max-width: 110px;
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
.media-modal #openModal {
|
|
||||||
position: fixed;
|
#openModal:hover {
|
||||||
margin-top: 26px;
|
background-color: #0056b3;
|
||||||
}
|
}
|
||||||
|
|
@ -29,86 +29,54 @@ add_action( 'admin_enqueue_scripts', 'irhg_enqueue_scripts' );
|
||||||
|
|
||||||
function irhg_add_modal() {
|
function irhg_add_modal() {
|
||||||
?>
|
?>
|
||||||
<div
|
<div id="modal" class="hidden">
|
||||||
id="modal"
|
<div class="modal-content bg-white">
|
||||||
class="fixed inset-0 flex items-center justify-center bg-white bg-opacity-90 dark:bg-zinc-800 dark:bg-opacity-90 z-50 hidden"
|
|
||||||
role="dialog"
|
|
||||||
aria-modal="true"
|
|
||||||
aria-labelledby="modalTitle"
|
|
||||||
>
|
|
||||||
<div class="bg-white dark:bg-zinc-800 p-4 rounded-lg shadow-lg w-full max-w-md">
|
|
||||||
<h2 id="modalTitle" class="text-lg font-bold mb-4 text-zinc-800 dark:text-zinc-200">
|
|
||||||
Bild Metadaten bearbeiten
|
|
||||||
</h2>
|
|
||||||
<form id="metaDataForm">
|
<form id="metaDataForm">
|
||||||
<label for="imageTitle" class="block text-sm font-medium text-zinc-800 dark:text-zinc-200">Titel</label>
|
<label for="imageTitle">Bildtitel</label>
|
||||||
<input
|
<input type="text" id="imageTitle" name="imageTitle">
|
||||||
type="text"
|
|
||||||
id="imageTitle"
|
<label for="imageSourceUrl">Bildquelle URL</label>
|
||||||
name="imageTitle"
|
<input type="url" id="imageSourceUrl" name="imageSourceUrl">
|
||||||
class="w-full border-zinc-300 dark:border-zinc-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
||||||
aria-describedby="imageTitleHelp"
|
<label for="imageAuthor">Autor</label>
|
||||||
/>
|
<input type="text" id="imageAuthor" name="imageAuthor">
|
||||||
<span id="imageTitleHelp" class="sr-only">Titel des Bildes eingeben</span>
|
|
||||||
<label for="imageSourceUrl" class="block text-sm font-medium text-zinc-800 dark:text-zinc-200 mt-2">Bildquelle Url</label>
|
<label for="authorImageUrl">Autor Bild URL</label>
|
||||||
<input
|
<input type="url" id="authorImageUrl" name="authorImageUrl">
|
||||||
type="text"
|
|
||||||
id="imageSourceUrl"
|
<label for="imageLicense">Lizenz/Rechte</label>
|
||||||
name="imageSourceUrl"
|
<input type="text" id="imageLicense" name="imageLicense">
|
||||||
class="w-full border-zinc-300 dark:border-zinc-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
||||||
aria-describedby="imageSourceUrlHelp"
|
<label for="licenseUrl">Lizenz URL</label>
|
||||||
/>
|
<input type="url" id="licenseUrl" name="licenseUrl">
|
||||||
<span id="imageSourceUrlHelp" class="sr-only">URL der Bildquelle eingeben</span>
|
|
||||||
<label for="imageAuthor" class="block text-sm font-medium text-zinc-800 dark:text-zinc-200 mt-2">Autor</label>
|
<div class="btn-container">
|
||||||
<input
|
<button type="submit">Speichern</button>
|
||||||
type="text"
|
<button type="button" id="closeModal">Schließen</button>
|
||||||
id="imageAuthor"
|
|
||||||
name="imageAuthor"
|
|
||||||
class="w-full border-zinc-300 dark:border-zinc-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
||||||
aria-describedby="imageAuthorHelp"
|
|
||||||
/>
|
|
||||||
<span id="imageAuthorHelp" class="sr-only">Autor des Bildes eingeben</span>
|
|
||||||
<label for="authorImageUrl" class="block text-sm font-medium text-zinc-800 dark:text-zinc-200 mt-2">Autor URL</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="authorImageUrl"
|
|
||||||
name="authorImageUrl"
|
|
||||||
class="w-full border-zinc-300 dark:border-zinc-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
||||||
aria-describedby="authorImageUrlHelp"
|
|
||||||
/>
|
|
||||||
<span id="authorImageUrlHelp" class="sr-only">URL des Autors eingeben</span>
|
|
||||||
<label for="imageLicense" class="block text-sm font-medium text-zinc-800 dark:text-zinc-200 mt-2">Lizenz</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="imageLicense"
|
|
||||||
name="imageLicense"
|
|
||||||
class="w-full border-zinc-300 dark:border-zinc-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
||||||
aria-describedby="imageLicenseHelp"
|
|
||||||
/>
|
|
||||||
<span id="imageLicenseHelp" class="sr-only">Lizenz des Bildes eingeben</span>
|
|
||||||
<label for="licenseUrl" class="block text-sm font-medium text-zinc-800 dark:text-zinc-200 mt-2">Lizenz URL</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="licenseUrl"
|
|
||||||
name="licenseUrl"
|
|
||||||
class="w-full border-zinc-300 dark:border-zinc-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
|
|
||||||
aria-describedby="licenseUrlHelp"
|
|
||||||
/>
|
|
||||||
<span id="licenseUrlHelp" class="sr-only">URL der Lizenz eingeben</span>
|
|
||||||
<div class="mt-4 flex justify-end">
|
|
||||||
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md">Speichern</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
id="closeModal"
|
|
||||||
class="bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-200 px-4 py-2 rounded-md ml-2"
|
|
||||||
>
|
|
||||||
Abbrechen
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<button id="openModal">Bildrechte</button>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
}
|
}
|
||||||
add_action( 'admin_footer', 'irhg_add_modal' );
|
add_action( 'admin_footer', 'irhg_add_modal' );
|
||||||
|
|
||||||
|
|
||||||
|
function add_custom_button_to_attachment_fields($form_fields, $post) {
|
||||||
|
// Fügen Sie das HTML-Snippet für den Button hinzu
|
||||||
|
$form_fields['open_modal_button'] = array(
|
||||||
|
'label' => '',
|
||||||
|
'input' => 'html',
|
||||||
|
'html' => '<div style="margin-top: 20px;">
|
||||||
|
<button id="openModal" class="button button-primary">Nutzungsrechte</button>
|
||||||
|
</div>',
|
||||||
|
);
|
||||||
|
|
||||||
|
return $form_fields;
|
||||||
|
}
|
||||||
|
|
||||||
|
add_filter('attachment_fields_to_edit', 'add_custom_button_to_attachment_fields', 10, 2);
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
|
||||||
|
|
@ -1,29 +1,6 @@
|
||||||
(function($) {
|
(function($) {
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// Funktion zum Hinzufügen des Buttons unter das Beschriftungsfeld
|
// Event-Listener für das Öffnen des Modals
|
||||||
const positionButton = () => {
|
|
||||||
const captionFields = [
|
|
||||||
$('#attachment-details-two-column-caption'),
|
|
||||||
$('#attachment-details-caption'),
|
|
||||||
$('#attachment_caption')
|
|
||||||
];
|
|
||||||
|
|
||||||
captionFields.forEach(field => {
|
|
||||||
if (field.length && !field.next('#openModal').length) {
|
|
||||||
const buttonHtml = '<div id="openModal" class="bg-blue-500 text-white px-4 py-2 rounded-md">Bildrechte</div>';
|
|
||||||
field.after(buttonHtml);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
$('#attachment_caption').ready(positionButton);
|
|
||||||
|
|
||||||
// Event-Listener für das Öffnen der Mediathek
|
|
||||||
$(document).on('click change focus keydown mousedown resize', '.media-modal .attachment, .upload-files-button, .attachment-info, .media-button, .edit-attachment', function() {
|
|
||||||
setTimeout(positionButton, 1); // Warte, bis die Mediathek geladen ist
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event-Listener für das Öffnen des Modals
|
|
||||||
$(document).on('click', '#openModal', function() {
|
$(document).on('click', '#openModal', function() {
|
||||||
$('#modal').removeClass('hidden');
|
$('#modal').removeClass('hidden');
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue