simonwep / pickr

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
https://simonwep.github.io/pickr
MIT License
4.31k stars 285 forks source link

Dynamically change localization #303

Closed stsrki closed 3 years ago

stsrki commented 3 years ago

Hi everyone. I'm trying to implement pickr into my component library(Blazorise), and most of the things can be changed except for the localization.

I create a picker as usual, as per documentation. Where options.localization is my object with the localized values.

const picker = Pickr.create({
    // other stuff

    // Translations, these are the default values.
    i18n: options.localization || {
        // Strings visible in the UI
        'ui:dialog': 'color picker dialog',
        'btn:toggle': 'toggle color picker dialog',
        'btn:swatch': 'color swatch',
        'btn:last-color': 'use previous color',
        'btn:save': 'Save',
        'btn:cancel': 'Cancel',
        'btn:clear': 'Clear',

        // Strings used for aria-labels
        'aria:btn:save': 'save and close',
        'aria:btn:cancel': 'cancel and close',
        'aria:btn:clear': 'clear and close',
        'aria:input': 'color input field',
        'aria:palette': 'color selection area',
        'aria:hue': 'hue selection slider',
        'aria:opacity': 'selection slider'
    }
});

Later on, if I want to change the i18n it doesn't work. Everything is still in English.

picker.options.i18n = localization;

Does anyone know how it is possible to change localization on the already created picker? Or how to force it to refresh?

simonwep commented 3 years ago

This is not possible as pickr doesn't have a lifecycle (or a re-render). Please use destroy() and create a new instance :)