Support for #AARRGGBB vs #RRGGBBAA

[drmrbrewer]

It would be great if there could be support for #AARRGGBB format (i.e. with alpha AA at the start not at the end). I am coming to this from an Android environment, where all my colours are represented in this format (see here) and whilst it would be possible to create a bolt-on to translate from #AARRGGBB to #RRGGBBAA before vanilla sees it, and then translate back at the other end to #AARRGGBB, it would be really nice if this could be supported natively.

[Sphinxxxx]

Wow, why did Google decide on that format..? And also, did it change with Android P?

Anyway, unless a lot of people start requesting this, I'm not going to change the supported formats. It should be easy enough to change the hex order before and after.

[drmrbrewer]

@Sphinxxxx is there a way of just overriding the relevant function (without creating a modified version of the whole thing) so that it treats all hex codes as #AARRGGBB instead of #RRGGBBAA? For my use case all hex codes are in the former format. Specifically I'm using it in this sort of context where I'm just importing the vanilla picker so that it can handle hex color fields of the json-editor library.

[Sphinxxxx]

In your case, you'll probably have to override json-editor. It's not pretty, but looking at their code, you may be able to do something like this:

var editor = new JSONEditor(document.getElementById('editor_holder'), { ... });

//Do this for all your schema properties that are colors:
useARGB(editor.getEditor('root.hexa'));
useARGB(editor.getEditor( ... ));

function useARGB(colorEditor) {
    colorEditor._setValue = colorEditor.setValue;
    colorEditor.setValue = function(RGBA, initial, fromTemplate) {
        var ARGB = '#' + RGBA.slice(-2) + RGBA.slice(1, 7);
        var res = this._setValue(ARGB, initial, fromTemplate);

        if (this.picker_instance) {
            this.picker_instance.setColor(RGBA, true);
        }
        return res;
    }

    //Sync initial color:
    colorEditor._createPicker = colorEditor.createPicker;
    colorEditor.createPicker = function(create) {
        this._createPicker(create);
        if(create) {
            var originalARGB = this.value,
                originalRGBA = '#' + originalARGB.slice(-6) + originalARGB.slice(1, 3);
            this.setValue(originalRGBA);
        }
    }
}

[drmrbrewer]

@Sphinxxxx absolutely spot on first time, thanks. For reference, to apply the useARGB() function to all color elements on the json-editor page you can use the following loop:

var elems = document.querySelectorAll('[data-schemaformat="color"]');
elems.forEach(function (elem) {
	// elem.name is in the form "root[sun][elevation][color]" but we want it instead in the form root.sun.elevation.color
	var name = elem.name.replace(/\[(.*?)\]/g, '.$1');
	useARGB(editor.getEditor(name));
});

I had previously implemented a version which converted hex values before exposing them to vanilla, then converted them back after, but my page shows both raw values and converted values so it just got confusing to have both formats on the same page. Just overriding the picker and leaving the hex values alone is a lot easier.

[drmrbrewer]

@Sphinxxxx several years later, something has broken and I can't figure out what. On this page I am following the solution suggested in your post above, to alter the behaviour of the root.aarrggbb element to use #aarrggbb format instead of #rrggbbaa format. The colour starts as #ff00ff00, which is pure green #00ff00 with opacity #ff, but clicking into the field to open the colour picker for the first time, it shows as pink... seems like it's interpreting #ff00ff00 as #ff00ff with opacity #00 i.e. as #rrggbbaa, rather than as #00ff00 with opacity #ff i.e. as #aarrggbb. But after editing and saving the colour using the colour picker, it's fine from there onwards, i.e. reading/saving as #aarrggbb. From the console log, it seems that colorEditor.createPicker() is never called, so maybe that's the problem. Any ideas?

EDIT: think I sorted it! Problem was that I was doing the customisation in editor.on('ready'... (because I don't know the field names in advance), which is after the pickers have been created.

[Sphinxxxx]

@drmrbrewer Thanks for the update, glad you fixed it!