Adding support for translations and media queries

[NateWr]

I'd like to use Colorcase but had a couple of features I'll need. I'm happy to implement them but wanted to run them by you before putting in the time.

Translations Because array keys are used for section and control titles, they can't be safely translated. Currently the structure looks like this:

$color_locations = array(

    'sections' => array(

        'Sidebar' => array(
            'Background Color' => array(
                'selector' => 'body:before',
                'attribute' => 'background-color',
                'default' => '#FFFFFF',
            ),
        )
    )
);

I'd like to extend it to have a label argument for sections and controls:

$color_locations = array(

    'sections' => array(

        'sidebar' => array(
            'label' => __( 'Sidebar', 'theme-slug' ),
            'controls' => array(
                'background' => array(
                    'label' => __( 'Background Color', 'theme-slug' ),
                    'selector' => 'body:before',
                    'attribute' => 'background-color',
                    'default' => '#FFFFFF',
                )
            )
        )
    )
);

To ensure backwards compatibilty, I'd look for a label array key and then load the controls appropriately depending on whether or not one exists. There's a small potential for a clash if someone called a section or control "label", but it seems unlikely for it to be lower-case.

I'm open to alternatives, like _label if you want to protect this more. Or we could preserve the array structure and just add a _label control alongside the existing controls, which we pluck out before processing the controls:

$color_locations = array(

    'sections' => array(

        'sidebar' => array(
                '_label' => __( 'Sidebar', 'theme-slug' ),
                'background' => array(
                    'label' => __( 'Background Color', 'theme-slug' ),
                    'selector' => 'body:before',
                    'attribute' => 'background-color',
                    'default' => '#FFFFFF',
                )
            )
        )
    )
);

This approach may actually be less code to maintain backwards compatibility. Though it may muddy the simplicity of the data structure for new adopters.

Media Queries I'd like to add support for adding selectors wrapped in a media query, since this is something I need to tackle. I would suggest an implementation like this:

$color_locations = array(

    'sections' => array(

        'sidebar' => array(
                '_label' => __( 'Sidebar', 'theme-slug' ),
                'background' => array(
                    'label' => __( 'Background Color', 'theme-slug' ),
                    'selector' => 'body:before',
                    'attribute' => 'background-color',
                    'default' => '#FFFFFF',
                    'media_queries' => array(
                        array(
                            'query' => "@media(min-width:500px)",
                            'selector' => '.site-header',
                        ),
                        array(
                            'query' => "@media(min-width:900px)",
                            'selector' => '.site-footer',
                        ),
                    ),
                )
            )
        )
    )
);

I can work on this stuff later this week if you think it's something you'd like to merge.

[NateWr]

Thinking on this a bit more, there is also a need for one color to match different attributes. For instance, I may have one color that I want to be used for background-color with some selectors and border-color with others.

What about if the selector and attribute arguments could be string or array, like this:

$color_locations = array(

    'sections' => array(

        'sidebar' => array(
                '_label' => __( 'Sidebar', 'theme-slug' ),
                'background' => array(
                    'label' => __( 'Background Color', 'theme-slug' ),
                    'selector' => array( 'body', '.widget-area' ),
                    'attribute' => array( 'background-color', 'border-color' ),
                    'default' => '#FFFFFF',
                )
            )
        )
    )
);

Then if it's an array we just match array keys. We could then mimic this structure with media queries, like this:

$color_locations = array(

    'sections' => array(

        'sidebar' => array(
                '_label' => __( 'Sidebar', 'theme-slug' ),
                'background' => array(
                    'label' => __( 'Background Color', 'theme-slug' ),
                    'selector' => array( 'body', '.widget-area' ),
                    'media_query' => array( false, '@media(min-width: 500px)' ),
                    'attribute' => array( 'background-color', 'border-color' ),
                    'default' => '#FFFFFF',
                )
            )
        )
    )
);