Changeset 12775

Timestamp:

08/01/2023 10:17:14 PM (3 years 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);
+        }
+}