0.readme.md

Purpose:

Give a visual feedback on all moregallery custom fields starting with "color".

Usage:

Add custom fields to moregallery.

Start the variable name with "color". "colorBg" or "colorText" are valid field names

Add Plugin

Add plugin code to modx and trigger it on OnDocFormPrerender

2do

It might be worth extending the plug to also search for color TVs.

mg.colorField.plugin.php

<?php

switch ($modx->event->name) {
    case 'OnDocFormPrerender': // Activated in plugin settings
        /* these works */
        
        $script = "
            <script>
            
                /* pepebe */
            
                function isHexColor (hex) {
                    hex = hex.replace('#', '');
                
                    return typeof hex === 'string'
                        && hex.length === 6
                        && !isNaN(Number('0x' + hex))
                }
            
                // update custom fields starting with color
                window.addEventListener('click', event => {
                    document.querySelectorAll('[id^=\"mgimage-custom-field-color\"]').forEach(
                        item => {
                        
                            color = item.value;
                            if(isHexColor(color)){
                                item.style.border = '1px solid ' + color;
                                item.style.borderRight = '100px solid ' + color;
                            }
                        }
                    );
                });        

                // change background colors on change event
                window.addEventListener('change', event => {
                
                        id = event.target.id;
                        pattern = 'mgimage-custom-field-color';
                
                        if(!id.includes(pattern)) {
                            return;
                        }
                
                        color = event.target.value;
                        console.log('color: ' + color);
                        
                        // validate value
                        if(isHexColor(color)){
                
                            target = event.target;
                            target.style.border      = '1px solid ' + color;
                            target.style.borderRight = '100px solid ' + color;
                        }
                        else {
                            event.target.value = '#ffffff';
                        }  
                });
                            
                
            </script>        
        ";
        $modx->regClientStartupHTMLBlock($script);
        break;
}

mg.customfields.json

{
    "linkLabel": {
        "label": "Beschriftung button"
    },
    "color": {
        "label": "Color picker",
    },
    "colorBg": {
        "label": "Background color",
        "type": "select",
        "options": [
            {
                "label": "white",
                "value": "#ffffff"
            },
            {
                "label": "black",
                "value": "#000000"
            },
            {
                "label": "grey light",
                "value": "#f5f2f2"
            },
            {
                "label": "grey",
                "value": "#e6e6e6"
            },
            {
                "label": "grey dark (smoking)",
                "value": "#707076"
            },
            {
                "label": "green dark (tael)",
                "value": "#177871"
            },
            {
                "label": "blue light (true)",
                "value": "#e6e6e6"
            },
            {
                "label": "blue dark (studio)",
                "value": "#3b67af"
            },
            {
                "label": "pink light (barby)",
                "value": "#ffc4d0"
            },
            {
                "label": "pink dark (tulip)",
                "value": "#ed6a99"
            },
            {
                "label": "red (cherry)",
                "value": "#dd3451"
            },
            {
                "label": "orange (marmalade)",
                "value": "#f6a31c"
            }
        ]
    }
}