pepebe
4/13/2014 - 11:07 PM
Initial BETA of ppbHelpManager Plugin for MODX
Initial BETA of ppbHelpManager Plugin for MODX
<?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;