Initial BETA of ppbHelpManager Plugin for MODX

ppbHelpManager.plugin.php

<?php
/*
    ppbHelpManager Plugin
    by info@pepeebe.de
    
    Version: 0.0.1e - This is a BETA version. Use it at your own risk!
    
    DESCRIPTION:
    * hides descriptions of tvs in collapsibles, 
    * adds modals windows to some or all of them.
      Modals can display content from any embedable url.
    * adds a help tab for some or all resources based on the current template
      Help tabs can display content from any embedable url.
    
    EVENTS(S):
    OnDocFormPrerender
    
    USAGE:
    Add your help urls to the templates array below.
    The second key must be equal to the id of a template or tv.
    The url can be any embeddable url.
    If you want to embed files relative to the root, add ../ in fron of your path.
    
    Set a tabTitle for your help tab and adjust the height to satisfy your needs
    
    OPTIONS:
    tabTitle (string): Help or Hilfe or ...
    height   (int) : 400 (px)
    modalLinkTitle: (string): Help or Hilfe
    
    CHANGELOG
    2014-04-14 - v0.0.1a - Initial release
    2014-04-14 - v0.0.1b - Moved css block to config section / added a new Title field / minor tv layout changes
    2014-04-14 - v0.0.1c - More layout changes
    2014-04-14 - v0.0.1d - Fixed a minor bug appearing if a TV has no description.
    2014-04-15 - v0.0.1e - Added active class to tv toggle button.
    2014-06-05 - v0.0.1f - Final code cleanup and some styling changes.
    
    TODO:
    Think about moving the url array into a table and add a cmp to handle it.
    
    KNOWN BUGS:
    Embedding content from rtfm.modx.com breaks layout. It only happend so far with this source.
    Reason is still unknown. Embedding content from other sources didn't have this effect.
    Beats me why.
    
    */
    
    $urls = array();
    
    /* ---------------------------------- */
    /* You MAY want to MODIFY this */
    /* ---------------------------------- */
    
        $tabTitle       = "Help";
        $modalLinkTitle = "?";
        $toogleText     = "?";
        $height         = 500;
        $activeClass    = "active";
        
    /* ---------------------------------- */
    /* You NEED TO MODIFY that */
    /* ---------------------------------- */
    
        /* Add urls describing your templates here */
        $urls['template'][1] = 'http://c0109.paas1.tx.modxcloud.com/assets/components/ppbHelpManager/html/help_template_1.html'; /* [1] is the id of the template... */
        $urls['template'][2] = 'http://c0109.paas1.tx.modxcloud.com/assets/components/ppbHelpManager/html/help_template_2.html'; /* [2] is the id of the template... */
        
        /* Add urls describing your tvs here */
        $urls['tv'][1]       = 'http://c0109.paas1.tx.modxcloud.com/assets/components/ppbHelpManager/html/help_tv_1.html';
        $urls['tv'][2]       = 'http://c0109.paas1.tx.modxcloud.com/assets/components/ppbHelpManager/html/help_tv_2.html';
        $urls['tv'][5]       = 'http://c0109.paas1.tx.modxcloud.com/assets/components/ppbHelpManager/html/help_tv_2.html';
        
    /* ---------------------------------- */
    /* Add YOUR FLAVOUR here... */
    /* ---------------------------------- */

    $style = "
        <style>
            .modx-tv {
                padding: 15px 0 0!important;
            }
        
            .modx-tv .modx-tv-label-description {
                float: right;
            }
        
            .modx-tv .modx-tv-description a,
            .modx-tv .modx-tv-label-description a {
                font-weight: bold;
                text-decoration: none;
                font-style: normal;
            }
            .modx-tv .modx-tv-description {
                font-size: 12px;
                color: gray;
            }
            
            
            .modx-tv .modx-tv-label-description a {
                display: inline-block;
                margin-left: 5px;
                font-size: 10px;
                line-height: 17px;
                height: 17px;
                width: 17px;
                border-radius: 8px;
                background: #658F1A;
                color: #fff;
                text-align: center;
                transition: all .4s ease;
            }

                .modx-tv .modx-tv-label-description a.active,
                .modx-tv .modx-tv-label-description a:hover {
                    background: #666;
                }
            
            .modx-tv .modx-tv-description a {
                display: inline-block;
                margin-left: 10px;
                color: #658F1A;
            }
            
                .modx-tv .modx-tv-description a:hover {
                    color: #666;
                }
                
        </style>
    ";

    /* --------------------------------------------------------------------- */
    /* DON'T MODIFY anything below this line if you don't know your code-fu! */
    /* --------------------------------------------------------------------- */
    
    $urls = $modx->toJSON($urls);   

    $script = "
        <script type='text/javascript'>
            console.log('ppbHelpManager loaded');

            MODx.loadModal = function(url,id,html) {
                if (!url || !id) return;
                MODx.helpWindow = new Ext.Window({
                     title: 'Help'
                    ,id: id
                    ,width: 850
                    ,height: 500
                    ,modal: true
                    ,layout: 'fit'
                    ,html: html
                });
                MODx.helpWindow.show(Ext.getBody());
            };                                    
            
            
            MODx.on('ready',function() {
            
                var tabTitle        = '" . $tabTitle        . "';
                var modalLinkTitle  = '" . $modalLinkTitle  . "';
                var toogleText      = '" . $toogleText      . "';
                
                var activeClass     = '" . $activeClass     . "';
                
                var height          =  " . $height          . " ;
                var urls            =  " . $urls            . " ;


                /* ------------------------ */
                /* Add help tab to template */
                /* ------------------------ */
                
                var templateTv = Ext.getCmp('modx-resource-template');

                if(templateTv != 'undefined'){
                    var templateId   = templateTv.getValue();
                    console.log('templateId: ' + templateId);
                }
                
                var url = urls['template'][templateId];
                
                if(typeof url != 'undefined'){
                
                    var html = '<iframe id=\'helpTemplate\' src=\'' + url + '\' width=\'100%\' height=\'100%\' frameborder=\'0\'></iframe>';
                    
                    MODx.addTab('modx-resource-tabs',{
                         title: tabTitle
                        ,id: 'helpWindow'
                        ,width: '95%'
                        ,layout: 'fit'
                        ,items: [{
                             html: html
                            ,height: height
                        }]
                    });
                
                }

                /* ------------------------ */
                /* Add help link to TVs */
                /* ------------------------ */
                
                var tvs = Ext.select('.modx-tv');
                
                tvs.each(function(element){
                    
                    var tv = Ext.get(element);
                    var description = tv.child('.modx-tv-label-description');

                    if(description!= 'undefined'){
                    
                        var descriptionHtml = description.dom.innerHTML;
                    
                        var caption = tv.child('.modx-tv-caption');                    
                    
                        var tvId = tv.getAttribute('id'); /* tv1-tr */
                        var tvId = tvId.replace( 'tv' ,'');
                        var tvId = tvId.replace('-tr' ,'');
                        
                        //console.log('tvID: ' + tvId); /* 1-n */
    
                        toogleTv = '<a id=\'tv' + tvId + '-toggle\' href=\'#tv' + tvId + '-description\'>' + toogleText + '</a>';
                        description.update(toogleTv);

                        url = urls['tv'][tvId];
                        
                        if(url){
                            more = ' <a id=\'tv' + tvId + '-help\' href=\'' + url + '\' rel=\'help\'>' + modalLinkTitle + '</a>';
                            descriptionHtml = descriptionHtml + more; 
                            description.update('<p>' + descriptionHtml + '</p>');
                            
                            Ext.get('tv' + tvId + '-help').on(
                                'click',
                                function(e,t) {
                                    var href = t.getAttribute('href');
                                    var html = '<iframe src=\'' + url + '\' width=\'100%\' height=\'100%\' frameborder=\'0\'></iframe>';
                                    MODx.loadModal(href, 'modalTv' + tvId , html);
                                },
                                this,
                                {
                                    preventDefault: true
                                }
                            );
                        }
                        else {
                            description.update('<p>' + descriptionHtml + '</p>');
                        }
                    }
                });
            });
            </script>
    ";

    $modx->regClientStartupHTMLBlock($script);
    $modx->regClientStartupHTMLBlock($style);
    return;