function displayPatterns($dir, $exclude)
{
global $patternsPath;
global $absolutePath;
$ffs = scandir($dir);
//Loop through directories
foreach ($ffs as $ff) {
if (is_array($exclude) and !in_array($ff, $exclude)) {
if ($ff != '.' && $ff != '..') {
$fName = basename($ff, '.php');
$noNum = substr(strstr($fName, "-"), 1);
$fPlain = str_replace("-", " ", $noNum);
$fCaps = ucwords($fPlain);
$pathToFile = str_replace($patternsPath, "", $dir);
if (is_dir($dir . '/' . $ff)) {
/*If main section */
echo '<div class="sg-section" id="' . $fName . '">';
} else {
/* If SubItem */
if (pathinfo($ff, PATHINFO_EXTENSION) == 'php') {
//Skip non-PHP files
echo '<h2 class="sg-head sg-sub" id="' . $fName . '"><a href="' . $absolutePath . '?url=' . $pathToFile . '/' . $ff . '" class="sg-pop">' . $fCaps . '</a></h2>';
echo '<div class="sg-pattern">';
include $dir . '/' . $ff;
echo '</div>';
}
}
if (is_dir($dir . '/' . $ff)) {
if (!in_array($ff, array('03-Templates', '04-Pages'))) {
//Exclude displaying the templates
displayPatterns($dir . '/' . $ff, $exclude);
}
}
if (is_dir($dir . '/' . $ff)) {
/*If main section */
echo '</div>';
echo '<!-====================================================================================================-->';
}
}
}
}
}
function displayPatterns($dir)
{
global $patternsPath;
global $styleguidePath;
$ffs = scandir($dir);
foreach ($ffs as $ff) {
if ($ff != '.' && $ff != '..') {
$fName = basename($ff, '.html');
$fPlain = ucwords(str_replace('-', '. ', $fName));
$pathToFile = str_replace($patternsPath, '', $dir);
if (is_dir($dir . '/' . $ff)) {
// If main section
if ($fName == 'article') {
echo "<section class=\"xx-section\" id=\"" . $fName . "\">\n";
echo " <h3 class=\"xx-section-title\">" . $fPlain . "</h3>\n";
echo " <article class=\"article-layout hentry\">\n";
echo " <div class=\"main-content\">\n\n";
} else {
echo "<section class=\"xx-section\" id=\"" . $fName . "\">\n";
echo " <h3 class=\"xx-section-title\">" . $fPlain . "</h3>\n\n";
}
} else {
// If sub section
if (pathinfo($ff, PATHINFO_EXTENSION) == 'html' && $ff != 'foot.html') {
// Skip non-HTML files
echo "<div class=\"pattern\" id=\"" . $fName . "\">\n";
echo " <details class=\"pattern-details\">\n";
echo " <summary class=\"pattern-name\">" . $fName . " <a class=\"pattern-link\" rel=\"bookmark\" href=\"" . $styleguidePath . "?url=" . $pathToFile . "/" . $ff . "\" title=\"View just this pattern\">#</a></summary>\n";
echo " <code class=\"pattern-markup language-markup\">" . htmlspecialchars(@file_get_contents($dir . '/' . $ff)) . "</code>\n";
echo " <pre class=\"pattern-usage\"><strong>Usage:</strong> " . htmlspecialchars(@file_get_contents($dir . '/' . str_replace('.html', '.txt', $ff))) . "</pre>\n";
echo " </details>\n";
echo " <div class=\"pattern-preview\">\n";
include $dir . '/' . $ff;
echo " </div>\n";
echo "</div>\n\n";
}
}
if (is_dir($dir . '/' . $ff)) {
// If main section
displayPatterns($dir . '/' . $ff);
echo " </div>\n";
echo " </article>\n";
echo "</section>\n\n";
}
}
}
}
<h3 class="pattern-name">Typography</h3>
</div>
<div class="pattern-preview">
<ul>
<li style="font-family: 'Georgia Pro', Georgia, serif">Body text: Georgia Pro <small>· <a href="http://www.webtype.com/font/georgia-pro-complete-family-2/">View at Webtype</a></small></li>
<li style="font-family: 'Georgia Pro', Georgia, serif; font-style: italic">Body text: Georgia Pro Italic</li>
<li style="font-family: 'Georgia Pro Semibold', Georgia, serif">Bold body text: Georgia Pro Semibold</li>
<li style="font-family: 'Georgia Pro Cond', serif">Condensed body for mobile: Georgia Pro Condensed</li>
<li style="font-family: 'Franklin ITC Pro', sans-serif;">Sans-serif: Franklin ITC Pro · <a href="http://www.webtype.com/font/itc-franklin-family/">View at Webtype</a></li>
<li style="font-family: 'Franklin ITC Pro Bold', sans-serif;">Sans-serif Bold: Franklin ITC Pro Bold</li>
</ul>
</div>
</div>
<?php
displayPatterns($patternsPath);
?>
</main>
</section>
<?php
}
?>
</body>
<script src="js/pattern-lib.js"></script>
</html>
