Revo 2.28 - TV Multiselect - displaying icons as options with FontAwesome

10 Posts

epic-web Reply #1, 13 years, 2 months ago

Two questions that I've been unable to find examples or documentation for:

Is there any way to use html, a chunk or snippet as an option for a TV multiselect?
Can multi select options be grouped with a heading or divider?

First question detail - I would like to have a TV that offers a multi-select list of fontawesome icons. I can do it with just the class names, but it would be, uh hum, "awesome" to have a visual display of the actual icons when selecting. The idea is to have an input option values something like this:

<i class="icon-search"><i> icon-search==icon-search||<i class="icon-star"><i> icon-star==icon-star

But of course the html tags just display as text. Is there a practical way to do this or should I just move on and live with just the class names?

Second question detail - For a multiselect with many items, is there a way to add a descriptive header that essentially groups elements? I would like to display options like:

Option Group 1 heading

Option 1
Option 2

Option Group 2 heading

Option 3
Option 4

Thanks in advance for any help, and forgive me if I missed a post or documentation about this. I'm a two week newb to modx but am absolutely loving the flexibility!

Aubrey

This question has been answered by randall. See the first response.

discuss.answer

65 Posts

randall Reply #2, 13 years, 2 months ago

There used to be a great tutorial on Bindings on sottwell's site, it has been preserved here: http://sottwell.pogwatch.com/tv-bindings.html

1. For chunks, for example, in the 'Input Option Values' simply type:
@CHUNK chunkname

where the chunk 'chunkname' would consist of:
Display Name 1==Value 1||Display Name 2==Value 2||Display Name 3==Value 3

It's possible to run snippets using Bindings too, see sottwell again and:

http://rtfm.modx.com/display/Evo1/What+are+%28at%29+Bindings

2. Not sure about that, but there is usually a way of doing most things fairly easily.

10 Posts

epic-web Reply #3, 13 years, 2 months ago

Thanks Randall. I realized that bindings must be the way to do this. Still a little foggy on all the usage aspects but I was able to pretty much do what I asked the question about. I will check those resources you posted. Very helpful.

For the record, here's the solution I found. Granted, I'm new to modx and php ain't my thang, so there is probably a more elegant way to do this.

First question detail - I would like to have a TV that offers a multi-select list of fontawesome icons.

1. First thing you have to do is add the fontawesome css link to the manager template header.tpl file. I created an override template folder per http://rtfm.modx.com/display/revolution20/Manager+Templates+and+Themes] Because of the next step, I actually copied the fontawesome css file to that new folder - because I didn't want to change the main site css.

That breaks some manager tree text formatting because of class*= usage, so in the fontawesome css file need to add fallbacks to the fontface:

[class*=" icon-"] {
  font-family: FontAwesome,Arial, Helvetica, sans-serif;

Now the manager tree is back to normal.

2. Create a snippet that parses the icon class names from the fontawesome css file, passes those values and returns a chunk, formats results in a long string for the TV input options value(option||value, etc..). Here's an example of that:[/li]
Snippet: ParseIcons

<?php
$site_url=$modx->config['site_url'];
$pattern = '/\.(icon-(?:\w+(?:-)?)+):before\s/';
$subject = file_get_contents($site_url .'assets/components/epic-bootstrap/bootstrap/less/font-awesome/css/font-awesome.css');

preg_match_all($pattern, $subject, $matches, PREG_SET_ORDER);

foreach($matches as $match){
    $iconclass = $match[1]; 
    $iconselect = $modx->getChunk('epic.Icon',array('icon_class' => $iconclass .' icon-large')) .' '.$iconclass .'==' . $iconclass;
    $icons= $icons . $iconselect .'||';
}

$icons= '--FontAwesome Icons--||' . $icons;
return ($icons);

Chunk: epic.Icon

<i class="[[+icon_class]]"></i>

3. Create IconType TV with output delimited by a space, and the input a multi-select listbox with the following input option values @EVAL statement

@EVAL return $modx->runSnippet('ParseIcons');

And that's it. A TV that outputs space delimited fontawesome classnames by multilist select. [ed. note: epic-web last edited this post 13 years, 2 months ago.]

5,888 Posts

Bruno17 Reply #4, 13 years, 2 months ago

you could also use a MIGX - TV - grid for displaying/selecting your icons

if you want to have filtering by icon-groups you could use a MIGXdb - TV with some special processors

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

10 Posts

epic-web Reply #5, 13 years, 2 months ago

Quote from: Bruno17 at Jul 11, 2013, 11:38 PM

you could also use a MIGX - TV - grid for displaying/selecting your icons

if you want to have filtering by icon-groups you could use a MIGXdb - TV with some special processors

Bruno, thank you for the input. I am putting migx through the paces right now for other things... and I'm beginning to think that once I have a complete grasp on it's possibilities, that I will be using it EVERYWHERE!

I went through the tutorials you put together today. That's a pretty amazing component you created. I have an idea to integrate the multi column, drag and drop approach for the bootstrap .less template I have developed.

Answered Revo 2.28 - TV Multiselect - displaying icons as options with FontAwesome