Difference between revisions of "Expandable.php"

From Organic Design wiki
m
({{legacy}})
 
(21 intermediate revisions by the same user not shown)
Line 1: Line 1:
<?
+
{{legacy}}
# Converts expandable tables and trees
+
<php><?
 
 
 
# 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*>)/',
+
'/(<\\/head\\s*>)/',
 
'<script type="text/javascript">
 
'<script type="text/javascript">
 
function toggleExpandable(id) {
 
function toggleExpandable(id) {
Line 12: Line 11:
 
this.parent.focus();
 
this.parent.focus();
 
}
 
}
function toggleExpandableTreeItem(id) {
+
</script>$1',
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 32: Line 25:
 
<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=["\']?(.+?)["\']?\\s*(id=["\']?.+?["\']?)?\\s*>(.+?<\/table\\s*?>)/s',
+
'/<table class=["\']?expandable["\']? title=["\']?(.+?)["\']?\\s*(id=["\']?.+?["\']?)?\\s*>(.+?<\\/table\\s*?>)/s',
 
'expandableCallback',
 
'expandableCallback',
 
$article
 
$article
 
);
 
);
  
# Replace all the expandable tree-views
+
?></php>
$article = preg_replace_callback(
 
'/(<div)\\s+(class=["\']?expandable-tree["\']?.+?\\s*>)(.+?)(<\/div\\s*?>)/s',
 
'expandableTreeCallback',
 
$article
 
);
 
 
?>
 

Latest revision as of 09:41, 14 March 2009

Legacy.svg Legacy: This article describes a concept that has been superseded in the course of ongoing development on the Organic Design wiki. Please do not develop this any further or base work on this concept, now this page is for historic record only.

<php><?

  1. 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(); } </script>$1', $article );

  1. 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 '

<a class=expandable-link href="javascript:toggleExpandable('.$i.')">► '.$matches[1].'</a> <a href="'.$GLOBALS['xwScript'].'?title='.$matches[1].'&action=edit"></a>
'.$matches[3].'
';

}

  1. Replace all the expandable tables with html containing CSS classes and the show/hide links

$article = preg_replace_callback(

'/(.+?<\\/table\\s*?>)/s', 'expandableCallback', $article ); ?></php>