Custom TV input type needed for color scheme selection

- 49 Posts
Michael van Laar Reply #1, 13 years, 3 months ago
I’m looking for a solution to create a nice custom TV input type for a color scheme selection. I’m not a big JavaScript coder and haven’t used ExtJS yet. But since the solution I’m thinking of seems to be pretty simple, perhaps someone can easily push my mind into the right direction.

Initial situation:
Editors can create and modify color schemes. Each color scheme is a (hidden) resource with four TVs ([tt][[*color-1][/tt]] to [tt][[*color-4]][/tt]), one for each color of the scheme.
On visible pages which should use a certain color scheme, there is a TV (called [tt][[*colorscheme]][/tt]) which allows you to pick one of the existing color schemes. The TV input is a simple @SELECT binding:
```
@SELECT `pagetitle`, `id` FROM `[[+PREFIX]]site_content` WHERE `parent`=20 ORDER BY `pagetitle` ASC
```
The Task:
I want the editor to be able to have a preview of each scheme’s colors to make the decision easier. (Because one will hardly remember the differences between the color schemes “blue”, “navy blue” and “dark blue”, which you defined months ago.) That’s why the [tt][[*colorscheme]][/tt] TV should have a custom input type:
A radio button list which shows not only the name of the color scheme (i.e. the [tt][[*pagetitle]][/tt] of the corresponding resource), but also a preview of the four colors. The result should look more or less like the attached image.

So basically I just need four simple boxes after the color scheme’s name, each with the content of the corresponding resource’s [tt][[*color-1][/tt]] to [tt][[*color-4]][/tt] as background colors.

I had a look at the default radio button list TV input template shipped with the system ([tt]/manager/templates/default/element/tv/renders/input/radio.tpl[/tt]):
```
<div id="tv{$tv->id}-cb"></div>

<script type="text/javascript">
// <![CDATA[
{literal}
MODx.load({
{/literal}
    xtype: 'radiogroup'
    ,id: 'tv{$tv->id}'
    ,vertical: true
    ,columns: 1
    ,renderTo: 'tv{$tv->id}-cb'
    ,width: 500
    ,allowBlank: true
    ,hideMode: 'offsets'

    ,items: [{foreach from=$opts item=item key=k name=cbs}
    {literal}{{/literal}
        name: 'tv{$tv->id}'
        ,id: 'tv{$tv->id}-{$k}'
        ,boxLabel: '{$item.text|escape:"javascript"}'
        ,checked: {if $item.checked}true{else}false{/if}
        ,inputValue: {if $item.value !== 0 AND $item.value !== null}'{$item.value|escape:"javascript"}'{else}0{/if}
        ,value: {if $item.value !== 0 AND $item.value !== null}'{$item.value|escape:"javascript"}'{else}0{/if}

        {literal},listeners: { 'check': MODx.fireResourceFormChange }{/literal}

    {literal}}{/literal}{if NOT $smarty.foreach.cbs.last},{/if}
    {/foreach}]
{literal}}{/literal});

// ]]>
</script>
```
The following part (line 21) would be the output of the color scheme’s name, as far as I get it:
```
        ,boxLabel: '{$item.text|escape:"javascript"}'
```
But how can I change this to squeeze in the additional HTML code for the boxes?
And how do I receive the content of the [tt][[*color-1]][/tt] to [tt][[*color-4]][/tt] TVs for each line? Using [tt][[getResourceField]][/tt] doesn’t work here, does it?

Any tips and advice is really appreciated.