From 4b0663ecfdef86d0fc1800cbecd3b3f6bacfe003 Mon Sep 17 00:00:00 2001
From: Joachim Happel <joachim.happel@gmail.com>
Date: Wed, 5 Jun 2024 10:55:48 +0200
Subject: [PATCH] button positionning

---
 css/style.css                     |  15 ++--
 image-rights-html-generator.php   | 116 +++++++++++-------------------
 js/image-rights-html-generator.js |  25 +------
 3 files changed, 52 insertions(+), 104 deletions(-)

diff --git a/css/style.css b/css/style.css
index e76bdc9..869ae35 100644
--- a/css/style.css
+++ b/css/style.css
@@ -121,13 +121,16 @@
 #openModal {
   background-color: #007bff;
   color: #fff;
-  padding: 6px 19px;
+  padding: 10px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
-  max-width: 110px;
-}
-.media-modal #openModal {
-  position: fixed;
-  margin-top: 26px;
+  font-size: 14px;
+  font-weight: bold;
+  text-align: center;
+  margin-top: 10px;
 }
+
+#openModal:hover {
+  background-color: #0056b3;
+}
\ No newline at end of file
diff --git a/image-rights-html-generator.php b/image-rights-html-generator.php
index 79ac6da..192ec7e 100644
--- a/image-rights-html-generator.php
+++ b/image-rights-html-generator.php
@@ -29,86 +29,54 @@ add_action( 'admin_enqueue_scripts', 'irhg_enqueue_scripts' );
 
 function irhg_add_modal() {
     ?>
-    <div
-      id="modal"
-      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>
+    <div id="modal" class="hidden">
+      <div class="modal-content bg-white">
         <form id="metaDataForm">
-          <label for="imageTitle" class="block text-sm font-medium text-zinc-800 dark:text-zinc-200">Titel</label>
-          <input
-            type="text"
-            id="imageTitle"
-            name="imageTitle"
-            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"
-          />
-          <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>
-          <input
-            type="text"
-            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="imageSourceUrlHelp"
-          />
-          <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>
-          <input
-            type="text"
-            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>
+          <label for="imageTitle">Bildtitel</label>
+          <input type="text" id="imageTitle" name="imageTitle">
+
+          <label for="imageSourceUrl">Bildquelle URL</label>
+          <input type="url" id="imageSourceUrl" name="imageSourceUrl">
+
+          <label for="imageAuthor">Autor</label>
+          <input type="text" id="imageAuthor" name="imageAuthor">
+
+          <label for="authorImageUrl">Autor Bild URL</label>
+          <input type="url" id="authorImageUrl" name="authorImageUrl">
+
+          <label for="imageLicense">Lizenz/Rechte</label>
+          <input type="text" id="imageLicense" name="imageLicense">
+
+          <label for="licenseUrl">Lizenz URL</label>
+          <input type="url" id="licenseUrl" name="licenseUrl">
+
+          <div class="btn-container">
+            <button type="submit">Speichern</button>
+            <button type="button" id="closeModal">Schließen</button>
           </div>
         </form>
       </div>
     </div>
+    <button id="openModal">Bildrechte</button>
+
     <?php
 }
 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);
+
 ?>
diff --git a/js/image-rights-html-generator.js b/js/image-rights-html-generator.js
index babdd77..2c223ff 100644
--- a/js/image-rights-html-generator.js
+++ b/js/image-rights-html-generator.js
@@ -1,29 +1,6 @@
 (function($) {
   $(document).ready(function() {
-    // Funktion zum Hinzufügen des Buttons unter das Beschriftungsfeld
-    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
+   // Event-Listener für das Öffnen des Modals
     $(document).on('click', '#openModal', function() {
       $('#modal').removeClass('hidden');