Reworking the autotoc extension
foxhound |
|
---|---|
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. 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......... Added 2 days later: Ok, I think I got most to work except one part. <img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
|
|
Dit bericht is bewerkt door foxhound (2013-06-20 14:29, 10 jaren ago) |
lukgoh |
|
---|---|
Have you got a live example of your problem? |
Aragorn-pc |
|
---|---|
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 |
|
---|---|
Hey Luke, I made some more changes and made many different tries already but still unsucessfull. <?php defined('COT_CODE') or die('Wrong URL'); require_once cot_langfile('autotab'); $elems = explode(',', $cfg['plugin']['autotab']['elements']); foreach($elems as $level => $elem) $toc = array(); function buildTOC(&$text, $chapters, $parents = '') $t->assign('PAGE_TOC', buildTOC($text, $toc)); ?>
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 -->
<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 |
|
---|---|
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 |
|
---|---|
It acts as a quick jump between sections within a page and it should only show that particuler section per tab. <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 |
|
---|---|
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 |
|
---|---|
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. <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 |
|
---|---|
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 |
|
---|---|
Yes, but that is only to create the tabs. Added 44 minutes later: Actually, I got a little further :) $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, 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. <img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
|
|
Dit bericht is bewerkt door foxhound (2013-06-25 23:18, 10 jaren ago) |