Cotonti / Open Source PHP Content Management FrameworkContent Management Framework

Forums / Cotonti / Extensions / Support / Autotab - create tabs on my pages where I want them

Reworking the autotoc extension

foxhound
#1 2013-06-18 20:27

I am trying to make tabs to be added to my pages automatically. For this I am using the autotoc extension which I am trying to rework to do this.
I have no idea if what I am trying actually works but before I can find that out I have tix an error which I am not sure how to do.

Here is the html to create the tabs

				<!-- *************** - Tabs Container - *************** -->	
				<div class="tabs-1 newssel">
					<ul class="tabs-nav clearfix">
						<li><a href="#tab1">ALL</a></li>
						<li><a href="#tab2">ARMA 3</a>
							<ul>
								<li><a href="#tab2_1" title="Show only general Arma 3 news">General news</a></li>
								<li><a href="#tab2_2" title="Show only general Arma 3 news">Mods & Addons news</a></li>
								<li><a href="#tab2_3" title="Show only general Arma 3 news">Tools news</a></li>
							</ul>
						</li>
						<li><a href="#tab3">ARMA 2: OA / CO</a>
							<ul>
								<li><a href="index.php?c=news_arma2" title="Show only general Arma 3 news">General news</a></li>
							</ul>
						</li>
						<li><a href="#tab4">ARMA 2</a></li>
						<li><a href="#tab5">ARMA</a></li>
						<li><a href="#tab6">BI</a></li>
						<li><a href="#tab7">COMMUNITY</a></li>
						<li><a href="#tab8">WEBSITE</a></li>
					</ul><!--/ .tabs-nav -->

					<div class="tabs-container">
						<div class="tab-content" id="tab1">
							<div class="gamelist">
								{INDEX_NEWS}
							</div><!--/ .gamelist-->
						</div><!--/ #tab1-->
						<div class="tab-content" id="tab2">
							<div class="gamelist">
								{INDEX_NEWS_NEWS_ARMA3}
							</div><!--/ .gamelist-->
						</div><!--/ #tab2-->
						<div class="tab-content" id="tab2_1">
							<div class="gamelist">
								{INDEX_NEWS_NEWS_ARMA3_GENERAL}
							</div><!--/ .gamelist-->
						</div><!--/ #tab2_1-->
						<div class="tab-content" id="tab2_2">
							<div class="gamelist">
								{INDEX_NEWS_NEWS_ARMA3_MODS}
							</div><!--/ .gamelist-->
						</div><!--/ #tab2_2-->
						<div class="tab-content" id="tab2_3">
							<div class="gamelist">
								{INDEX_NEWS_NEWS_ARMA3_TOOLS}
							</div><!--/ .gamelist-->
						</div><!--/ #tab2_3-->
						<div class="tab-content" id="tab3">
							<div class="gamelist">
								{INDEX_NEWS_NEWS_ARMA2OA}
							</div><!--/ .gamelist-->
						</div><!--/ #tab3-->
						<div class="tab-content" id="tab4">
							<div class="gamelist">
								{INDEX_NEWS_NEWS_ARMA2}
							</div><!--/ .gamelist-->
						</div><!--/ #tab4-->
						<div class="tab-content" id="tab5">
							<div class="gamelist">
								{INDEX_NEWS_NEWS_ARMA}
							</div><!--/ .gamelist-->
						</div><!--/ #tab5-->
					</div><!--/ .tabs-container-->
				</div><!--/ .tabs-1-->
				<!-- *************** - END Tabs Container - *************** -->

In autotoc.page.tags.php I added the following:

function buildTOC(&$text, $chapters, $parents = '')
{
	global $chapters_elem;
	$i=0;
	$toc = '<div class="tabs-1"><ul class="tabs-nav clearfix">';
	foreach($chapters as $chapter_raw => $subchapters)
	{
		$chapter = strip_tags(trim($chapter_raw));
		$i++;
		$elem = $chapters_elem[$chapter_raw];
		$level = $parents.$i;
		$url = $_SERVER["REQUEST_URI"] . "#ch$level";
		$toc .= "<li><a href=\"$url\" title=\"$chapter\">$level. $chapter</a>";
		$text = str_replace("<$elem>$chapter_raw</$elem>", "<div class=\"tabs-container\"><div class=\"tab-content\" id=\"ch$level\"><div class=\"gamelist\"><$elem>$level. $chapter</$elem>", $text);
		if (count($subchapters) > 0)
		{
			$toc .= buildTOC($text, $subchapters, $level.'.');
		}
		$toc .= '</li>';
	}
	$toc .= '</ul>';
	return $toc;
}

I still need to close 3 divs and i think they should be closed after

$elem>$level. $chapter</$elem>", $text

 

So I tried:

<$elem>$level. $chapter</$elem>", $text , "</div></div></div>"

and some other combinations but none will work. So here I am again hoping someone can help me with this!

 

** Sighhhh..... I do so much hate this editor, I can not make a single proper post and I have no idea why its always completely screwed up.........fixing fixed ......

Added 2 days later:

Ok, I think I got most to work except one part.
I create the tabs with an h2 tag, if it sees that tag it creates a tab button linking to tab 1 (anchor) and increments with every new h2 tag (so every new h2 is a new tab with correct anhor).

But now where I am stuck.......
The text which should show when clicking on tab 1 is between a h3 tag. The text which should show when clicking tab 2 is betwee the next h3 tag.
And that is what I can not solve.....
I do not know how to change the plugin so it only shows that particular text when clicking a specific tab.

Right now the plugin shows all text when you open the page (and the tabs) and when you click a tab all text is gone.

I really would appreciate some help with this, if I could get this to work it might even be a nice addition to the download section? (I wont take any credit for it since it uses the autotoc plugin as base).


In the meantime I got all this to work with the bbcode editor, so unless I get some help I will just have to use bbcode.

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />

This post was edited by foxhound (2013-06-20 14:29, 7 years ago)
lukgoh
#2 2013-06-23 19:39

Have you got a live example of your problem? 

Aragorn-pc
#3 2013-06-25 13:02

Css and js not found : )

.# Aragorn-pc // Turkish Information Technology's Underground World
Aragorn-pc.org
http://www.kankayizz.biz
http://www.sanalarsiv.gen.tr
http://www.osmanli-devleti.net
Prosed.NET Seditio SedBlog Themes Sharing
foxhound
#4 2013-06-25 18:51

Hey Luke, I made some more changes and made many different tries already but still unsucessfull.
Here is the full php:

<?php
/* ====================
[BEGIN_COT_EXT]
Hooks=page.tags
[END_COT_EXT]
==================== */

defined('COT_CODE') or die('Wrong URL');

require_once cot_langfile('autotab');

$elems = explode(',', $cfg['plugin']['autotab']['elements']);
$text = $t->vars['PAGE_TEXT'];
$chapters = array();
$chapters_elem = array();

foreach($elems as $level => $elem)
{
    $elem = trim($elem);
    $headings = array();
    preg_match_all("`<$elem>(.*?)</$elem>`is", $text, $headings, PREG_OFFSET_CAPTURE);
    $headings = $headings[1];
    if (!$headings) continue;
    foreach($headings as $heading)
    {
        $title = $heading[0];
        $chapters[$heading[1]] = array($title, $level);
        $chapters_elem[$title] = $elem;
    }
}
ksort($chapters);

$toc = array();
$parents = array();
foreach($chapters as $chapter)
{
    list($title, $level) = $chapter;
    switch($level)
    {
        case 0:
            $toc[$title] = array();
            $parents[$level] = $title;
            break;
        case 1:
            $toc[$parents[0]][$title] = array();
            $parents[$level] = $title;
            break;
        default:
            $toc[$parents[0]][$parents[1]][$title] = array();
            break;
    }
}

function buildTOC(&$text, $chapters, $parents = '')
{
    global $chapters_elem;
    $i=0;
    $toc = '<div class="tabs-1"><ul class="tabs-nav clearfix">';
    foreach($chapters as $chapter_raw => $subchapters)
    {
        $chapter = strip_tags(trim($chapter_raw));
        $i++;
        $elem = $chapters_elem[$chapter_raw];
        $level = $parents.$i;
        $url = $_SERVER["REQUEST_URI"] . "#tab$level";
        $toc .= "<li><a href=\"$url\" title=\"$chapter\">$chapter</a>";
        // $text = str_replace("<$elem>$chapter_raw</$elem>", "<div class=\"tab-content\" id=\"tab$level\"><div class=\"gamelist\"><$elem>$level. $chapter</$elem>", "");
        //if (count($subchapters) > 0)
        //{
        // $toc .= buildTOC($text, $subchapters, $level.'.');
        $text = str_replace("<$elem>$chapter_raw</$elem>", "<div class=\"tab-content\" id=\"tab$level\"><div class=\"gamelist\"><$elem>$level. $chapter</$elem>", $text);
        // $text .= '</div></div>'; this does not work cause now it creates xx number, equal to the number of tabs cause it loop, of ending divs after the last tab text.
        //}
        $toc .= '</li>';
        // $text .= '</div>'; this does not work cause now it creates xx number, equal to the number of tabs cause it loop, of ending divs after the last tab text.
    }
    $end .= '</div></div>';
    $toc .= '</ul><div class="tabs-container">';
    $text .= '</div></div>'; // this div closes the tabs-1 and the tabs-container div!
    return $toc;
}

$t->assign('PAGE_TOC', buildTOC($text, $toc));
$t->assign('PAGE_TEXT', $text);

?>

 

 

And here is the html output:

<div class="fake">
<div class="tabs-1"><ul class="tabs-nav clearfix"><li><a href="/new_armaholic/index.php?e=page&c=page&al=test-12#tab1" title="tab1">tab1</a></li><li><a href="/new_armaholic/index.php?e=page&c=page&al=test-12#tab2" title="tab2">tab2</a></li><li><a href="/new_armaholic/index.php?e=page&c=page&al=test-12#tab3" title="tab3">tab3</a></li></ul>
<div class="tabs-container">
<div class="tab-content" id="tab1"><div class="gamelist"><h2>1. tab1</h2>
<h3>text tab 1</h3>
<div class="tab-content" id="tab2"><div class="gamelist"><h2>2. tab2</h2>
<h3>text tab 2</h3>
<div class="tab-content" id="tab3"><div class="gamelist"><h2>3. tab3</h2>
<h3>text tab 3</h3></div></div>
</div><!-- end fake class -->


The thing is, I need to close 2 divs after each H3 tag and 4 after the last H3 tag.
I can not figure out where I need to place the code to close the 2 divs in the right position, I can make them close after the last H3 without issues but I need it after all H3 tags.

I hope you may know how I can manage to do this.

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
lukgoh
#5 2013-06-25 19:26

Yes, html inbedded in the php. The reason I asked for a working example was so I can properly understand what it is you are trying to do (I apologise if I am coming across slow).

These tabs acts as quick jumps between sections of a page or pages in a category? Or does this act as a bread crumb for current location? 

foxhound
#6 2013-06-25 19:45

It acts as a quick jump between sections within a page and it should only show that particuler section per tab.
Those sections are created by the 2 elements H2 and H3. The H2 to create the tab title (works perfectly already) and the H3 to create the text which should display in that particuler tab.

Just like for example how the tabs work here: http://voky.com.ua/showcase/pcss3t/examples/theme0.html
Please note that is not the actual tabs I am using, it is merely an example for you to see what my tabs should be doing if working. Only dispalying specific content from 1 page.

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
lukgoh
#7 2013-06-25 20:16

Perhaps Aragorn-pc's method would be a better option. Tabs like these are easily produced with JS and CSS. For example: http://twitter.github.io/bootstrap/javascript.html#tabs Twitter's bootstrap would make this very easy. It would also mean that you could only include it where you wanted it instead of every page and would be editable (add tabs/delete tabs, etc) via the text editor as long as html is parsed. 

However, if you think an "automated" system is better then I will have a closer look at this code. 

foxhound
#8 2013-06-25 20:25

Thing is, like you know (but maybe not others) on my website normal people who may have no knowledge at all about HTML etc will be working on pages (their own pages).

So, I want it to be fully automatic when using the H2 and H3 tags. That way we provide them with a simple template and all they do is change/add text where needed.
If I give them a full html code I am sure I will be spending hours fixing page after page cause they messed up the code.

I have indeed made it also working by using BBcode as a backup if this plugin fails. However that is a lot of bbcode and although for people who do not know any HTML it will be easy but an automated plugin would be way easier.
If I do not want a page to have tabs we just do not use the H2 and H3 elements ;)

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
lukgoh
#9 2013-06-25 20:36

The markup is very simple: 

<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

but I understand your point. I will take a look at this tomorrow and see what I can make of it. 

foxhound
#10 2013-06-25 21:39

Yes, but that is only to create the tabs.
After that people still need to add the markup for the table contents as well. Not to mention the fact with the WYSIWYG editors they do need to change it to code to be able to see the html and add all the info which they want to show in any particular tab.
Maybe it can be made in the editor as a plugin or something but again........for me implementing that would be as difficult as making this plugin and so it probably wont be done ;)

Added 44 minutes later:

Actually, I got a little further :)

I added the following code after the closing "}" of the chapter foreeach:

$text = str_replace("</h3>", "</h3></div></div>", $text);

What this does is checking the page_text for any h3 and if it finds it it replaces it with the proper H3 with closing divs.
And this actually works. It is now properly closing all divs.................BUT.........it is not showing the text on the page for some weird reason.
The HTML source shows all the text is there but in page it does not show. When you first open the page it shows the text + title from Tab 1 but if you than click on another tab the page stays empty. In fact if you than press Tab 1 it also does not display the Tab 1 text.

And, like I said that is weird cause in the HTML source all the text is there. Look at this:

				<div>
					<div class="tabs-1"><ul class="tabs-nav clearfix"><li><a href="/new_armaholic/index.php?e=page&c=page&al=test-12#tab1" title="tab1">tab1</a></li><li><a href="/new_armaholic/index.php?e=page&c=page&al=test-12#tab2" title="tab2">tab2</a></li><li><a href="/new_armaholic/index.php?e=page&c=page&al=test-12#tab3" title="tab3">tab3</a></li><li><a href="/new_armaholic/index.php?e=page&c=page&al=test-12#tab4" title="tab4">tab4</a></li></ul><div class="tabs-container">
					<div class="tab-content" id="tab1"><div class="gamelist"><h2>1. tab1</h2>

<h3>text tab 1</h3></div></div>

<div class="tab-content" id="tab2"><div class="gamelist"><h2>2. tab2</h2>

<h3>text tab 2</h3></div></div>

<div class="tab-content" id="tab3"><div class="gamelist"><h2>3. tab3</h2>

<h3>text tab 3</h3></div></div>

<div class="tab-content" id="tab4"><div class="gamelist"><h2>4. tab4</h2>

<h3>text tab 4</h3></div></div></div></div>
				</div>

 

Added 55 minutes later:

Ok, and more progress.
I think the isue why the text is not displaying is cause the H3 is a subchapter (that is the default plugin behaviour/setting).
So, I need to change " $text = str_replace("<$elem>$chapter_raw</$elem>", "<div class=\"tab-content\" id=\"tab$level\"><div class=\"gamelist\"><$elem>$level. $chapter</$elem>", $text);" so it does not display "chapter" but "subchapter".
If I change it to "$subchapters" the oly output I got in my page was "Array" instead of any text. That seems logic as it is meant to show a subchapter count but than the plugin needs to be adapted so "$subchapters" is handles the same as "$chapter" ....... right?
Does that make any sense?

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />

This post was edited by foxhound (2013-06-25 23:18, 7 years ago)