Changeset 39378 for trunk

Timestamp:

11/30/2016 06:00:53 PM (8 years ago)

Author:

westonruter

Message:

Customize: Fix regression in ability to hide fields for advanced menu properties in nav menu item controls.

Props westonruter, celloexpressions.
See #34391.
Fixes #38952.

Location:

trunk/src/wp-admin

Files:

• css/customize-nav-menus.css (modified) (1 diff)
• js/customize-nav-menus.js (modified) (4 diffs)

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -302 +302 @@
 }
 
-#accordion-panel-nav_menus .field-link-target,
-#accordion-panel-nav_menus .field-title-attribute,
-#accordion-panel-nav_menus .field-css-classes,
-#accordion-panel-nav_menus .field-xfn,
-#accordion-panel-nav_menus .field-description {
-    display: none;
-}
-
-#accordion-panel-nav_menus.field-link-target-active .field-link-target,
-#accordion-panel-nav_menus.field-title-attribute-active .field-title-attribute,
-#accordion-panel-nav_menus.field-css-classes-active .field-css-classes,
-#accordion-panel-nav_menus.field-xfn-active .field-xfn,
-#accordion-panel-nav_menus.field-description-active .field-description {
+.control-section-nav_menu .field-link-target,
+.control-section-nav_menu .field-title-attribute,
+.control-section-nav_menu .field-css-classes,
+.control-section-nav_menu .field-xfn,
+.control-section-nav_menu .field-description {
+    display: none;
+}
+
+.control-section-nav_menu.field-link-target-active .field-link-target,
+.control-section-nav_menu.field-title-attribute-active .field-title-attribute,
+.control-section-nav_menu.field-css-classes-active .field-css-classes,
+.control-section-nav_menu.field-xfn-active .field-xfn,
+.control-section-nav_menu.field-description-active .field-description {
     display: block;
 }

trunk/src/wp-admin/js/customize-nav-menus.js

@@ -787 +787 @@
 
         /**
-         * Show/hide/save screen options (columns). From common.js.
+         * Update field visibility when clicking on the field toggles.
          */
         ready: function() {
             var panel = this;
-            this.container.find( '.hide-column-tog' ).click( function() {
-                var $t = $( this ), column = $t.val();
-                if ( $t.prop( 'checked' ) ) {
-                    panel.checked( column );
-                } else {
-                    panel.unchecked( column );
-                }
-
+            panel.container.find( '.hide-column-tog' ).click( function() {
                 panel.saveManageColumnsState();
             });
-            this.container.find( '.hide-column-tog' ).each( function() {
-            var $t = $( this ), column = $t.val();
-                if ( $t.prop( 'checked' ) ) {
-                    panel.checked( column );
-                } else {
-                    panel.unchecked( column );
-                }
-            });
-        },
-
+        },
+
+        /**
+         * Save hidden column states.
+         *
+         * @since 4.3.0
+         * @private
+         *
+         * @returns {void}
+         */
         saveManageColumnsState: _.debounce( function() {
             var panel = this;
@@ -827 +820 @@
         }, 2000 ),
 
-        checked: function( column ) {
-            this.container.addClass( 'field-' + column + '-active' );
-        },
-
-        unchecked: function( column ) {
-            this.container.removeClass( 'field-' + column + '-active' );
-        },
-
+        /**
+         * @deprecated Since 4.7.0 now that the nav_menu sections are responsible for toggling the classes on their own containers.
+         */
+        checked: function() {},
+
+        /**
+         * @deprecated Since 4.7.0 now that the nav_menu sections are responsible for toggling the classes on their own containers.
+         */
+        unchecked: function() {},
+
+        /**
+         * Get hidden fields.
+         *
+         * @since 4.3.0
+         * @private
+         *
+         * @returns {Array} Fields (columns) that are hidden.
+         */
         hidden: function() {
             return $( '.hide-column-tog' ).not( ':checked' ).map( function() {
@@ -872 +875 @@
          */
         ready: function() {
-            var section = this;
+            var section = this, fieldActiveToggles, handleFieldActiveToggle;
 
             if ( 'undefined' === typeof section.params.menu_id ) {
@@ -924 +927 @@
                 section.container.find( '.menu-item.move-right-disabled .menus-move-right' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
             } );
+
+            /**
+             * Update the active field class for the content container for a given checkbox toggle.
+             *
+             * @this {jQuery}
+             * @returns {void}
+             */
+            handleFieldActiveToggle = function() {
+                var className = 'field-' + $( this ).val() + '-active';
+                section.contentContainer.toggleClass( className, $( this ).prop( 'checked' ) );
+            };
+            fieldActiveToggles = api.panel( 'nav_menus' ).contentContainer.find( '.metabox-prefs:first' ).find( '.hide-column-tog' );
+            fieldActiveToggles.each( handleFieldActiveToggle );
+            fieldActiveToggles.on( 'click', handleFieldActiveToggle );
         },