web-dev-qa-db-fra.com

Comment écouter les changements de couleur sur le sélecteur de couleurs?

J'essaie d'exécuter une fonction jQuery personnalisée chaque fois que la couleur du sélecteur de couleurs change. Le colorpicker est inclus dans le noyau WP. J'ai examiné le code JS, mais je ne peux pas comprendre quel est le déclencheur qui met à jour la couleur.

J'ai essayé d'écouter plusieurs classes et d'écouter les modifications apportées à la saisie de texte (celle qui contient la valeur hexadécimale de la couleur), mais sans succès.

Est-ce que quelqu'un a déjà fait ça?

widgetsjqueryadmincore
3
gdaniel

Je déteste répondre à ma propre question, mais j'espère que cela pourra aider quelqu'un d'autre avec des problèmes similaires:

Wordpress utilise le sélecteur de couleur Iris. http://automattic.github.io/Iris/#

Wordpress crée également un widget JQuery avec les paramètres par défaut pour Iris. Le fichier se trouve sous wp-admin/js/color-picker.js

Au début, j'essayais de transmettre des valeurs directement à iris (), ce qui fonctionne, mais remplace le widget wordpress.

Une fois que j'ai découvert le widget, j'ai écrit ce qui suit:

$(".wp-color-picker").wpColorPicker(
  'option',
  'change',
  function(event, ui) {
    //do something on color change here
  }
);

WpColirPicker accepte une fonction personnalisée pour l'événement change. Donc, il exécute d'abord les actions par défaut, puis vous permet d'ajouter les vôtres.

6
gdaniel

Comme le disait gdaniel dans sa réponse, WordPress utilise Iris color picker. Vous pouvez passer vos rappels au plug-in wpColorPicker en utilisant change et clear options. Veuillez noter que change-callback gérera tous les changements sauf le nettoyage du champ via le bouton "Effacer". Donc, utilisez clear-callback à cette fin.

jQuery('.wp-color-picker').wpColorPicker({
    /**
     * @param {Event} event - standard jQuery event, produced by whichever
     * control was changed.
     * @param {Object} ui - standard jQuery UI object, with a color member
     * containing a Color.js object.
     */
    change: function (event, ui) {
        var element = event.target;
        var color = ui.color.toString();

        // Add your code here
    },

    /**
     * @param {Event} event - standard jQuery event, produced by "Clear"
     * button.
     */
    clear: function (event) {
        var element = jQuery(event.target).siblings('.wp-color-picker')[0];
        var color = '';

        if (element) {
            // Add your code here
        }
    }
});

Veuillez également noter que si vous utilisez element.value dans votre changement de rappel, vous obtiendrez l'ancienne valeur au lieu de la nouvelle.

0
kapai1890