WordPress : Notifications de personnalisation pour les contrôles désactivés et masqués
question 1
J’affiche conditionnellement une notification de personnalisation sur un contrôle en fonction de la valeur d’un autre contrôle. Lorsque la notification est visible, j’aimerais également pouvoir désactiver (et non désactiver) le contrôle afin que les utilisateurs puissent toujours le voir mais ne pas interagir avec.
Est-ce 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
Lors de la désactivation d’un contrôle, est-il possible d’afficher une notification pour celui-ci ? par exemple « Le contrôle [nom] est masqué car il ne s’applique pas aux pages d’archives. »
Le code ci-dessous montre comment je masque les contrôles, mais j’aimerais également pouvoir afficher une notification pour les contrôles masqués afin d’expliquer pourquoi ils ne sont plus visibles.
( 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 ) );
Je sais que je pourrais contourner ce problème en créant un contrôle « fictif » qui n’affiche aucune interface utilisateur directement et n’agit que comme un crochet pour afficher les notifications, mais c’est un peu un hack.
question 3
Enfin, est-il possible de modifier l’emplacement de rendu d’une notification ? Par défaut, il est rendu directement sous une étiquette de contrôles. Il serait plus flexible si vous pouviez également choisir de rendre une notification avant/après l’interface utilisateur de contrôle.
Solution n°1 trouvée
Objet : Question 1
Au début, je pensais que vous vouliez utiliser l’ activeétat pour gérer l’état désactivé, mais je vois que ce n’est pas le cas. Quoi qu’il en soit, puisque vous basculez déjà la notification, la meilleure suggestion est de simplement basculer l’ disabledétat de toutes les entrées en même temps :
control.container.find( ':input' ).prop( 'disabled', iFrameWidth <= responsiveWidth );
Cela devrait fonctionner dans la plupart des cas.
Objet : Question 2
Dans ce cas où vous utilisez l’ activeétat pour gérer si un contrôle est disponible, et je vous renvoie à cette réponse : https://wordpress.stackexchange.com/a/293701/8521
En bref, vous pouvez surcharger le onChangeActivecallback pour gérer l’affichage de la notification et si les entrées sont désactivées :
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() );
};
} );
Objet : Question 3 :
Oui. Vous pouvez modifier l’emplacement de la notification en remplaçant la Control#getNotificationsContainerElementméthode, ou bien simplement en déplaçant l’emplacement de l’ .customize-control-notifications-containerélément dans le fichier control.container.
Solution n°2 trouvée
Objet : Question 1
Au début, je pensais que vous vouliez utiliser l’ activeétat pour gérer l’état désactivé, mais je vois que ce n’est pas le cas. Quoi qu’il en soit, puisque vous basculez déjà la notification, la meilleure suggestion est de simplement basculer l’ disabledétat de toutes les entrées en même temps :
control.container.find( ':input' ).prop( 'disabled', iFrameWidth <= responsiveWidth );
Cela devrait fonctionner dans la plupart des cas.
Objet : Question 2
Dans ce cas où vous utilisez l’ activeétat pour gérer si un contrôle est disponible, et je vous renvoie à cette réponse : https://wordpress.stackexchange.com/a/293701/8521
En bref, vous pouvez surcharger le onChangeActivecallback pour gérer l’affichage de la notification et si les entrées sont désactivées :
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() );
};
} );
Objet : Question 3 :
Oui. Vous pouvez modifier l’emplacement de la notification en remplaçant la Control#getNotificationsContainerElementméthode, ou bien simplement en déplaçant l’emplacement de l’ .customize-control-notifications-containerélément dans le fichier control.container.
0 commentaire