禁用和隐藏控件的定制器通知

时间:2018-03-22 作者:dgwyer

问题1我正在根据另一个控件的值有条件地在控件上显示自定义程序通知。当通知可见时,我希望能够禁用(而不是停用)控件,以便用户仍然可以看到它,但不与它交互。

这可能吗?

// 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 ) );
问题2停用控件时,是否仍可能显示控件的通知?e、 g.“[名称]控件被隐藏,因为它不适用于存档页。”

下面的代码显示了我是如何隐藏控件的,但我也希望能够显示隐藏控件的通知,以解释为什么它们不再可见。

( 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 ) );
我知道我可以通过创建一个“虚拟”控件来绕过这个问题,该控件不直接呈现UI,只作为一个钩子来显示通知,但这有点麻烦。

问题3最后,是否可以更改通知的呈现位置?默认情况下,它直接渲染在控件标签下方。如果您可以选择在控件UI之前/之后呈现通知,则会更加灵活。

1 个回复
最合适的回答,由SO网友:Weston Ruter 整理而成

回复:问题1开始我以为你想使用active state来管理禁用状态,但我发现情况并非如此。无论如何,既然您已经在切换通知,那么最好的建议就是只切换disabled 同时任何输入的状态:

control.container.find( \':input\' ).prop( \'disabled\', iFrameWidth <= responsiveWidth );
在大多数情况下,这应该是可行的。

回复:在本例中,您使用的是问题2active 状态以管理控件是否可用,请参考以下答案:https://wordpress.stackexchange.com/a/293701/8521

简而言之,您可以覆盖onChangeActive 回调以管理通知的显示和输入是否被禁用:

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() );
    };
} );
回复:问题3:是。您可以通过覆盖Control#getNotificationsContainerElement 方法,或者只是移动.customize-control-notifications-container 元素放置在control.container.

结束

相关推荐