Changeset 12775

Timestamp:

08/01/2023 10:17:14 PM (20 months ago)

Author:

coffee2code

Message:

Photo Directory, Admin JS/CSS: Highlight taxonomy metaboxes lacking any set terms.

See #7171.

Location:

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

Files:

• css/admin.css (modified) (1 diff)
• js/admin.js (modified) (1 diff)

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

@@ -60 +60 @@
     margin-top: 1rem;
 }
+
+.photo-missing-taxonomy {
+    border-color: orange;
+    background-color: antiquewhite;
+}

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

@@ -23 +23 @@
         document.getElementById('photo_orientationdiv').hidden = true;
     }
+
+    // Highlight custom taxonomies lacking terms.
+    highlightCustomTaxonomiesWithoutTerms();
 }, false);
+
+/**
+ * Highlights when a custom taxonomy lacks at least one term assignment.
+ */
+function highlightCustomTaxonomiesWithoutTerms() {
+    // Highlight/unhighlight custom taxonomies lacking any term assignments.
+    const customTaxMetaboxes = [
+        ['photo_categorydiv', 'tax_input[photo_category][]', 'checkbox'],
+        ['photo_colordiv', 'tax_input[photo_color][]', 'checkbox'],
+        ['photo_orientationdiv', 'tax_input[photo_orientation][]', 'checkbox'],
+        ['tagsdiv-photo_tag', 'newtag[photo_tag]', 'text', '.tagchecklist'],
+    ];
+
+    customTaxMetaboxes.forEach(element => {
+        // Decide on highlight initially.
+        setMetaboxHighlight(element);
+
+        // Listen for changes in value to re-determine highlight.
+        document.querySelectorAll('input[name="' + element[1] + '"]').forEach(item => {
+            item.addEventListener('input', customTaxChangeCB);
+        });
+
+        // The tag list is handled differently. Re-determine as tags are added/removed.
+        if (element[3]) {
+            const observer = new MutationObserver(function(mutations_list) {
+                mutations_list.forEach(function(mutation) {
+                    if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
+                        setMetaboxHighlight(element);
+                    }
+                });
+            });
+
+            observer.observe(document.querySelector(element[3]), { subtree: false, childList: true });
+        }
+    });
+
+    // Callback to call setMetaboxHighlight() for proper event targets.
+    function customTaxChangeCB(e) {
+        const name = e.target.name;
+        let customTaxMetabox = customTaxMetaboxes.find(n => { return n[1] === name; });
+        if (!customTaxMetabox) {
+            return;
+        }
+        setMetaboxHighlight(customTaxMetabox)
+    }
+
+    // Highlights or unhighlights a metabox based on presence of terms.
+    function setMetaboxHighlight(customTaxMetabox) {
+        [metaboxID, inputName, inputType, tagListClass] = customTaxMetabox;
+        const missingTaxClass = 'photo-missing-taxonomy';
+        const div = document.getElementById(metaboxID);
+
+        let selector = 'input[name="' + inputName + '"]';
+        if ('checkbox' === inputType) {
+            selector += ':checked';
+        }
+        let value = document.querySelector(selector)?.value;
+        // If tagListClass is present, see if it has any values if one not already found.
+        if (!value && tagListClass) {
+            value = document.querySelector(tagListClass).hasChildNodes();
+        }
+
+        value ? div?.classList.remove(missingTaxClass) : div?.classList.add(missingTaxClass);
+    }
+}