Zurb Foundation 'tabs' snippet advice

- 109 Posts
unsub777 Reply #1, 11 years, 3 months ago
Hello,
I am writing a quick snippet to turn child resources into the markup for 'tabs' in the Zurb Foundation CSS framework.
http://foundation.zurb.com/docs/tabs.php
The markup is thus:
```
<dl class="tabs">
    <dd id="#tab1">
        <a href="#tab1Tab">Tab One</a>
    </dd>
    <dd id="#tab2">
        <a href="#tab2Tab">Tab Two</a>
    </dd>
</dl>
<ul class="tabs-content">
    <li id="#tab1Tab">All Kinds of Tab Content Here...</li>
    <li id="#tab2Tab">Even more tab content, but better.</li>
</ul>
```
Does anyone have an opinion on whether I should use two snippets -- one to 'get' the tabs, and the other to 'get' the tab content -- or use one snippet, and do some string construction and concatenation in that snippet to put the list containers together?
My thinking on this is that to use two snippets makes it easier to keep the markup separate from the snippet (key word being 'easier' -- I know it's not the only way.) [ed. note: unsub777 last edited this post 11 years, 3 months ago.]

109 Posts

unsub777 Reply #2, 11 years, 3 months ago

So I went with the one snippet option; I'd love some critique on this, I'm not the best scripter...
Snippet:

<?php
$limit = isset($limit)?$limit:'5';
$parent = isset($parent)?$parent:$modx->resource->get('parent');
 
$c = $modx->newQuery('modResource');
$c->where(array(
  'published' => true,
  'deleted' => false,
));
$ids=array();
$children = $modx->getChildIds($parent);
foreach($children as $ckey=>$cval)
	array_push($ids,$cval);

if (count($ids) > 0) {
		$c->where(array(
			'id:IN' => $ids,
		));

	$c->sortby('publishedon','DESC');
	$c->limit($limit);
	$resources = $modx->getCollection('modResource',$c);

	$outputTabs = '';
	$outputTabContent = '';

	$i=0;// for 'active' on first tab only.

	foreach ($resources as $resource) {
		$resArray = $resource->toArray();
		$alias = $resArray['alias'];
		$resId = $resArray['id'];
		// make tabs
		$tabArray['alias'] = $alias;
		$tabArray['title'] = $resArray['menutitle'];
		$tabArray['description'] = $resArray['description'];		
		$tabArray['id'] = $resId;
		// make tab content
		$contentArray['alias'] = $alias;
		$contentArray['longtitle'] = $resArray['longtitle'];
		$contentArray['introtext'] = $resArray['introtext'];
		$contentArray['content'] = $resArray['content'];
		$contentArray['id'] = $resId;

		if($i<1){
			$tabArray['tabState'] = 'active';
			$contentArray['tabState'] = 'active';
		}else{
			$tabArray['tabState'] = '';
			$contentArray['tabState'] = '';
		}

		$outputTabs .= $modx->getChunk('tplTab',$tabArray);
		$outputTabContent .= $modx->getChunk('tplTabContent',$contentArray);

		$i++;
	}
	// make one big glob of output...
	$output = $modx->getChunk('tplTabListOpen');
	$output .= $outputTabs;
	$output .= $modx->getChunk('tplTabListClose');
	$output .= $modx->getChunk('tplTabContentListOpen');
	$output .= $outputTabContent;
	$output .= $modx->getChunk('tplTabContentListClose');
}
return $output;

TPL's are pretty simple, just:

<!-- tplTabListOpen -->
<dl class="tabs">

<!-- tplTabListClose -->
</dl>

<!-- tplTabContentListOpen -->
<ul class="tabs-content">

<!-- tplTabContentListClose -->
</ul>

<!-- tplTabs -->
<dd class="[[+tabState]]"><a href="#[[+alias]]" title="[[+description]]">[[+title]]</a></dd>

<!-- tplTabContent -->
<li class="[[+tabState]]" id="[[+alias]]Tab">
<h3>[[+longtitle]]</h3>
[[+introtext:notempty=`<p class="introtext">[[+introtext]]</p>`:default=`[[+content]]`]]
</li>

So, any suggestions, or comments? It works, but honestly it seems like there's a bit of a lag... could just be 'cause I'm on XAMPP right now; production might be faster.

** note, this is an edited version of my working version, with a bunch of stuff taken out for brevity, but I edited it quickly - there may be errors. If you're trying to use what I've done, and you get an error, let me know and I'll try and help.