wake-up-neo.com

Wie höre ich Farbänderungen auf dem Farbwähler?

Ich versuche, jedes Mal, wenn sich die Farbe des Farbwählers ändert, eine benutzerdefinierte Abfragefunktion auszuführen. Der Colorpicker ist Teil des WP -Kerns. Ich habe mir den JS-Code angesehen, kann aber nicht herausfinden, welcher Auslöser die Farbe aktualisiert.

Ich habe versucht, für mehrere Klassen zuzuhören und auch auf Änderungen an der Texteingabe zu achten (die den Hex-Farbwert enthält), aber kein Glück.

Hat das schon mal jemand gemacht?

widgetsjqueryadmincore
3
gdaniel

Ich hasse es, meine eigene Frage zu beantworten, aber hoffentlich kann dies jemand anderem bei ähnlichen Problemen helfen:

Wordpress verwendet die Iris-Farbauswahl. http://automattic.github.io/Iris/#

Wordpress erstellt auch ein JQuery-Widget mit Standardeinstellungen für Iris. Die Datei finden Sie unter wp-admin/js/color-picker.js

Zuerst habe ich versucht, Werte direkt an iris () zu übergeben, was funktioniert, aber das überschreibt das WordPress-Widget.

Nachdem ich etwas über das Widget erfahren hatte, schrieb ich Folgendes:

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

Der wpColirPicker akzeptiert eine benutzerdefinierte Funktion für das Änderungsereignis. Daher werden zuerst die Standardaktionen ausgeführt, und dann können Sie Ihre eigenen Aktionen hinzufügen.

6
gdaniel

Wie gdaniel in seiner Antwort sagte, verwendet WordPress Iris Farbauswahl. Sie können Ihre Rückrufe an das wpColorPicker-Plugin übergeben, indem Sie die Optionen change und clear verwenden. Bitte beachten Sie, dass Change-Callback alle Änderungen mit Ausnahme der Bereinigung des Feldes über die Schaltfläche "Löschen" verarbeitet. Verwenden Sie dazu Clear-Callback.

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
        }
    }
});

Beachten Sie auch, dass Sie den alten Wert anstelle des neuen Werts erhalten, wenn Sie element.value in Ihrem Änderungsrückruf verwenden.

0
kapai1890