Changeset 13975

Timestamp:

08/19/2024 08:12:52 PM (7 weeks ago)

Author:

coffee2code

Message:

Photo Directory, Admin: Show a toggle-able list of all EXIF data from a photo.

Props roytanck, jeroenrotty, coffee2code.
Fixes #7734.

Location:

sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory

Files:

• assets/css/admin.css (modified) (1 diff)
• assets/js/admin.js (modified) (1 diff)
• inc/admin.php (modified) (1 diff)

sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/assets/css/admin.css

@@ -133 +133 @@
     margin-left: 1rem;
 }
+
+.photo-all-exif-container {
+    border-top: 1px solid #ccc;
+    margin-top: 6px;
+    padding-top: 6px;
+}
+.photo-all-exif {
+    overflow-wrap: anywhere;
+}

sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/assets/js/admin.js

@@ -92 +92 @@
         document.querySelector('label[for="photoskip-hide"]')?.remove();
     }
+
+    // Handle toggle for full listing of EXIF data.
+    const exifContainer = document.querySelector('.photo-all-exif');
+    const exifToggle = document.querySelector('#photo-all-exif-toggle');
+    if (exifContainer && exifToggle) {
+        function toggleAllEXIF(event) {
+            const newExpandState = exifContainer.classList.toggle('hidden');
+            exifToggle.setAttribute('aria-expanded', newExpandState ? 'false' : 'true');
+            event.preventDefault();
+        }
+        // Hide the full EXIF data by default.
+        exifContainer.classList.add('hidden');
+        exifToggle.setAttribute('aria-expanded', 'false');
+        // Clicking the toggle should toggle the visibility of the EXIF data.
+        exifToggle.addEventListener('click', toggleAllEXIF, true);
+    }
+
 }, false);
 

sites/trunk/wordpress.org/public_html/wp-content/plugins/photo-directory/inc/admin.php

@@ -593 +593 @@
         }
         echo "</dl>\n";
+
+        // Show ALL EXIF data.
+        $all_exif = Photo::get_all_exif( $parent_id );
+        if ( $all_exif ) {
+            ksort( $all_exif );
+
+            echo '<div class="photo-all-exif-container">';
+            echo '<button id="photo-all-exif-toggle" class="button-link hide-if-no-js" type="button" aria-expanded="true">' . esc_html__( 'Toggle all raw EXIF data', 'wporg-photos' ) . '</button>';
+            echo '<dl class="photo-all-exif">';
+
+            foreach ( $all_exif as $key => $value ) {
+                if ( '' === $value ) {
+                    continue;
+                }
+
+                echo '<dt>' . esc_html( $key ) . "</dt>\n";
+                if ( is_array( $value ) ) {
+                    $value = '[' . implode( ', ', $value ) . ']';
+                }
+                echo '<dd>' . esc_html( $value ) . "</dd>\n";
+            }
+
+            echo "</dl></div>\n";
+        }
     }