pepebe
3/5/2015 - 11:17 PM

Proof of concept for toggling tv groups with a select TV in MODX.

Proof of concept for toggling tv groups with a select TV in MODX.

<?php
/*
toggleTVSet plugin for modx 
v0.0.5 (2015-03-06 17:24)

Author:
-----------------------------
info@pepebe.de

Changelog:
-----------------------------
v0.0.1 Initial release
v0.0.2 Corrected cut and paste mishap
v0.0.3 More cut and paste mishap (don't work in multiple tabs...)
v0.0.4 Minor changes to js to clean up code. New instructions
v0.0.5 Added some sanity checks and trimming to selectors

Todo:
-----------------------------
Add iterator to handle more than one group of TV Sets.

Usage:
------------------------------
1. Add plugin to modx manager.
2. Check OnDocFormPreRender Event
3. Setup Header TVs (Example):
  * Standard_Headline (4)
  * Jumbotron_BG_Color (5)
  * Jumbotron_BG_Image (6)
  * Jumbotron_RTE (7)
  * Carousel_MIGX_TV (8)
  * Cover_Background_Image (9)
  * Cover_RTE (10)
4. Setup Select TV used for picking header type:
  * Name: Header
  * Type: Single Select TV
  * Input Option Values: "Standard==4||Carousel==8||Cover==9,10||Jumbotron==5,6,7"
  * Allow blank: false
  * Enable typeahead: false
  * Move it to the very top of your List of TVs
5. Done!
*/

$selectTV = "tv11"; // Add the id of your Header Single Select Here

/* No changes below this line. */

$js = "
    Ext.onReady(function () {

        function toggleTVSet(tvs,displayValue){
            for(x in tvs){
                if (typeof tvs[x] !== 'function') {
                    var tvId = 'tv' + tvs[x].trim() + '-tr';
                    var tv = Ext.get(tvId);
                    if(tv){
                        tv.setStyle('display',displayValue);
                    }
                }
            }
            console.log('toggleTVSet triggered tvs(' + tvs + ') set to display: ' + displayValue );
        }
    
        Ext.getCmp('modx-resource-tabs').on('tabchange',function(e){

            if(e.getActiveTab().id == 'modx-panel-resource-tv'){
            
                var selectTV = Ext.getCmp('".$selectTV."');
                
                var hideTVs = selectTV.store.data.keys.join().split(',')
                var showTVs = selectTV.getValue().split(',')
                
                toggleTVSet(hideTVs , 'none');
                toggleTVSet(showTVs , 'block');
                
                selectTV.on('select',function(selectTV){
                
                    hideTVs = selectTV.store.data.keys.join().split(',')
                    showTVs = selectTV.getValue().split(',')
                    
                    toggleTVSet(hideTVs , 'none');                
                    toggleTVSet(showTVs , 'block');
                });
            }
        });
    });
";

$modx->regClientStartupHTMLBlock('<script>'.$js.'</script>');

return;

This plugin has a dedicated repository now. You can find it here:

https://github.com/pepebe/toggleTVSet

I'll listen to bug reports and any advice that comes around.

In ther future this will hopefully develop into a proper package that can be installed by the MODx package manager.

Thanks for taking interest in my work.

pepebe

<?php

/* 
Output filter to retrieve names of TVs from a list of TV ids
info@pepebe.de

Idea:
Use it with toogleTVSet plugin (included below) to handel different template options.

Usage:
This is a simple output filter. 
You can use it in snippets like getResources or pdoTools to add TVs to your query:

Example:
&includeTVs=`[[*Header:getTVNames]]`

*/

$tvNames = array();

$tvIds = explode(',' ,$input);

foreach($tvIds as $tvId){
    $tv = $modx->getObject('modTemplateVar', $tvId);
    $tvNames[] = $tv->get('name');
}

$tvNames = implode(',',$tvNames);

return $tvNames;
<?php
/*
getTVLabel snippet for modx 2.3

Version:
------------------
v0.0.1 (2015-03-06 16:44)

Author:
------------------
info@pepebe.de

Problem:
------------------
You have a selectTV with these input options: "Standard==4||Carousel==8||Cover==9,10||Jumbotron==5,6,7"
In your template you want 
* to use [[$[[*selectTV]]]] 
* to call [[$Standard]] or [[$Carousel]].

In this case you need the selected label instead of the current value.

This snippet will retrieve the label of the value you have selected.

Usage:
------------------------------------------------------
If your TV is not prefixed, use the snippet like this:
[[*Header:getTVLabel]]

If you are working in getResources/pdoResources, etc and your TV is prefixed (example [[+tv.Header]], etc.), use it like this:
[[+tv.Header:getTVLabel=`tv.`]]

*/

    $debug = false;

    /* -------------------------------------------------- */
    if(!function_exists('ppb_msg')){
        function ppb_msg($msg) {
            $output = "<pre>".print_r($msg,true)."</pre>";
            return $output;
        }
    }
    /* -------------------------------------------------- */
    
    $msg = array();  
  
    if(!empty($options)){
        $name = str_replace($options,'',$name);
        $c = array('name'=> $name);
    }
    else {
        $c = array('name'=>$name);
    }
    
    $msg['c']           = $c;
    $msg['name']        = $name;
    $msg['options']     = $options;
    
    $tv = $modx->getObject('modTemplateVar', $c);
    
    $elements = $tv->get('elements');
    $msg['elements'] = $elements;
    $elements = explode('||',$elements);
    
    $tvValue = $modx->resource->getTVValue(reset($c)); 
    $msg['tvValue'] = $tvValue;
    
    foreach($elements as $key => $element){
        $element = explode('==',$element);
        $msg['element'][$key] = $element;
        
        if($element[1] == $tvValue){
            $msg['currentValue'] = $element[0];
            $output = $element[0];
        }
    }
    
    $msg['output'] = $output;
    
    if($debug == true){
        return ppb_msg($msg);
    }
    else {
        return $output;    
    }