Difference between revisions of "Expandable.php"
m |
(this will handle expandables trees too now...) |
||
| Line 1: | Line 1: | ||
<? | <? | ||
| + | # Converts expandable tables and trees | ||
| + | |||
# Insert a JS function into the page to be called when show/hide links are clicked | # Insert a JS function into the page to be called when show/hide links are clicked | ||
$article = preg_replace( | $article = preg_replace( | ||
| − | '/(< | + | '/(<\/head\s*>)/', |
'<script type="text/javascript"> | '<script type="text/javascript"> | ||
function toggleExpandable(id) { | function toggleExpandable(id) { | ||
| − | + | var content = document.getElementById("expandable-"+id); | |
| − | var content = document.getElementById("expandable | ||
if (content.style.display == "none") content.style.display = ""; | if (content.style.display == "none") content.style.display = ""; | ||
else content.style.display = "none"; | else content.style.display = "none"; | ||
this.parent.focus(); | this.parent.focus(); | ||
} | } | ||
| − | </script> | + | function toggleExpandableTreeItem(id) { |
| + | var item = document.getElementById("expandable-"+id); | ||
| + | if (item.style.display == "none") item.style.display = ""; | ||
| + | else item.style.display = "none"; | ||
| + | this.parent.focus(); | ||
| + | } | ||
| + | </script><!-- start content -->', | ||
$article | $article | ||
); | ); | ||
| Line 19: | Line 26: | ||
$i = ++$GLOBALS["expandable/tbl-count"]; | $i = ++$GLOBALS["expandable/tbl-count"]; | ||
$open = $matches[2] ? '' : ' style="display:none;"'; # default to expanded in id present after title attribute | $open = $matches[2] ? '' : ' style="display:none;"'; # default to expanded in id present after title attribute | ||
| − | return '<table class=expandable-heading | + | return '<table class=expandable-heading><tr> |
| − | |||
<td><a class=expandable-link href="javascript:toggleExpandable('.$i.')">► '.$matches[1].'</a></td> | <td><a class=expandable-link href="javascript:toggleExpandable('.$i.')">► '.$matches[1].'</a></td> | ||
<td align=right><a href="'.$GLOBALS['xwScript'].'?title='.$matches[1].'&action=edit"></a></td> | <td align=right><a href="'.$GLOBALS['xwScript'].'?title='.$matches[1].'&action=edit"></a></td> | ||
| − | </tr> | + | </tr><tr id=expandable-'.$i.$open.'><td colspan=2> |
| − | |||
<table class=expandable-content>'.$matches[3].' | <table class=expandable-content>'.$matches[3].' | ||
</td></tr></table>'; | </td></tr></table>'; | ||
| + | } | ||
| + | |||
| + | # Callback function executed for rendering each expandable table | ||
| + | function expandableTreeCallback($matches) { | ||
| + | $id = ++$GLOBALS["expandable/tbl-count"]; | ||
| + | $tree = ''; | ||
| + | if (preg_match_all('/^(\\*+)\\s*(.+)\\s*$/m',$matches[3],$items)) { | ||
| + | foreach ($items[1] as $row => $indent) { | ||
| + | $depth = strlen($indent); | ||
| + | $cs1 = $depth > 1 ? ' colspan="'.($depth-1).'"' : ''; | ||
| + | $cs2 = ' colspan='.(20-$depth); | ||
| + | $open = strlen($items[1][$row+1]) > $depth ? '+' : ''; | ||
| + | $tree .= "<tr id=$row><td$cs1 align="right">$open</td><td>F</td><td$cs2>".$items[2][$row]; | ||
| + | } | ||
| + | return '<table '.$matches[2].$tree.'</table>'; | ||
| + | } | ||
| + | return $matches[0]; | ||
} | } | ||
# Replace all the expandable tables with html containing CSS classes and the show/hide links | # Replace all the expandable tables with html containing CSS classes and the show/hide links | ||
$article = preg_replace_callback( | $article = preg_replace_callback( | ||
| − | '/<table class=["\']?expandable["\']? title=["\']?(.+?)["\']? | + | '/<table class=["\']?expandable["\']? title=["\']?(.+?)["\']?\s*(id=["\']?.+?["\']?)?\s*>(.+?<\/table\s*?>)/s', |
'expandableCallback', | 'expandableCallback', | ||
| + | $article | ||
| + | ); | ||
| + | |||
| + | # Replace all the expandable tree-views | ||
| + | $article = preg_replace_callback( | ||
| + | '/(<div)\\s+(class=["\']?expandable-tree["\']?.+?\s*>)(.+?)(<\/div\s*?>)/s', | ||
| + | 'expandableTreeCallback', | ||
$article | $article | ||
); | ); | ||
?> | ?> | ||
Revision as of 08:51, 23 January 2007
<?
- Converts expandable tables and trees
- Insert a JS function into the page to be called when show/hide links are clicked
$article = preg_replace( '/(<\/head\s*>)/', '<script type="text/javascript"> function toggleExpandable(id) { var content = document.getElementById("expandable-"+id); if (content.style.display == "none") content.style.display = ""; else content.style.display = "none"; this.parent.focus(); } function toggleExpandableTreeItem(id) { var item = document.getElementById("expandable-"+id); if (item.style.display == "none") item.style.display = ""; else item.style.display = "none"; this.parent.focus(); } </script>', $article );
- Callback function executed for rendering each expandable table
function expandableCallback($matches) { $i = ++$GLOBALS["expandable/tbl-count"]; $open = $matches[2] ? : ' style="display:none;"'; # default to expanded in id present after title attribute
return '
<td$cs1 align="right">$open<td$cs2>".$items[2][$row];}
return '<table '.$matches[2].$tree.'| <a class=expandable-link href="javascript:toggleExpandable('.$i.')">► '.$matches[1].'</a> | <a href="'.$GLOBALS['xwScript'].'?title='.$matches[1].'&action=edit"></a> |
|
'.$matches[3].'
}
function expandableTreeCallback($matches) { $id = ++$GLOBALS["expandable/tbl-count"]; $tree = ; if (preg_match_all('/^(\\*+)\\s*(.+)\\s*$/m',$matches[3],$items)) { foreach ($items[1] as $row => $indent) { $depth = strlen($indent); $cs1 = $depth > 1 ? ' colspan="'.($depth-1).'"' : ; $cs2 = ' colspan='.(20-$depth); $open = strlen($items[1][$row+1]) > $depth ? '+' : ; $tree .= " | |
| F | |
';
} return $matches[0]; }
- Replace all the expandable tables with html containing CSS classes and the show/hide links
$article = preg_replace_callback(
'/
(.+?<\/table\s*?>)/s', 'expandableCallback', $article );- Replace all the expandable tree-views
