Customizer notifications for disabled and hidden controls

Question

Question 1

I'm conditionally displaying a customizer notification on a control depending on the value of another control. When the notification is visible I'd like to be able to disable (not deactivate) the control too so users can still see it but not interact with it.

Is this possible?

// JavaScript that runs on the customizer panel
( function( $, api ) {
  'use strict';

  api.control( 'sidebar_width', function(control) {

  var showSidebarWidthNotification = function() {

    var iFrameWidth = parseInt($('#customize-preview').width());
    var responsiveWidth = api( 'sidebar_width' )._value);
    var code = 'test_responsive_width';

    /* show notification under the primary sidebar width slider if the site is in responsive mode as changing the sliders won't have any effect */
    if( iFrameWidth <= responsiveWidth ) {
      control.setting.notifications.add( code, new wp.customize.Notification(
        code,
        {
          type: 'info',
          message: 'Sidebar sliders won\'t have any visual effect when responsive layout is active.'
        }
      ));
    } else {
      control.setting.notifications.remove( code );
    }
  };

  // events to listen for (and run on customizer load)
  showSidebarWidthNotification();
  api( 'responsive_width' ).bind( function() {
    showSidebarWidthNotification();
  });
  $(window).resize(function() {
    showSidebarWidthNotification();
  });
});

}( jQuery, wp.customize ) );

Question 2

When deactivating a control is it possible to still show a notification for it? e.g. "The [name] control is hidden as it doesn't apply to archive pages."

The code below shows how I'm hiding controls but I'd also like to be able to show a notification for hidden controls to explain why they are no longer visible.

( function( $, api ) {
  'use strict';

  // display sidebar width controls depending on current column layout
  api( 'column_layout', function( setting ) {

    api.control( 'sidebar_width', function(control) {

      var displaySidebarWidth = function() {
        var columnLayout = setting.get();
        return columnLayout > 1 ? true : false;
      }

      var setActiveState = function() {
        control.active.set( displaySidebarWidthr );
      }
      control.active.validate = displaySidebarWidth;

      setActiveState();
      setting.bind( setActiveState );
    };
  });
}( jQuery, wp.customize ) );

I know I could get round this by creating a 'dummy' control that renders no UI directly and only acts as a hook to display notifications but it's a bit of a hack.

Question 3

Finally, is it possible to alter the rendering location of a notification? By default it's rendered directly underneath a controls label. It would be more flexible if you could choose to render a notification before/after the control UI too.

Answer 1

Re: Question 1

At first I was thinking you were wanting to use the active state to manage the disabled state but I see that is not the case. Anyway, since you are already toggling the notification then the best suggestion is to just toggle the disabled state of any inputs at the same time:

control.container.find( ':input' ).prop( 'disabled', iFrameWidth <= responsiveWidth );

That should work in most cases.

Re: Question 2

In this case where you are using the active state to manage whether a control is available, and I refer you to this answer: https://wordpress.stackexchange.com/a/293701/8521

In short, you can override the onChangeActive callback to manage the displaying of the notification and whether the inputs are disabled:

wp.customize.control( 'sidebar_width', function( control ) {
    control.onChangeActive = function( active ) {
        if ( ! displaySidebarWidth() ) {
            control.notifications.add( new api.Notification( code /* ... */ ) );
        } else {
            control.notifications.remove( code );
        }
        control.container.find( ':input' ).prop( 'disabled', ! displaySidebarWidth() );
    };
} );

Re: Question 3:

Yes. You can change the location of the notification by overriding the Control#getNotificationsContainerElement method, or else rather just moving where the .customize-control-notifications-container element is placed in the control.container.