bbcode for anchor and toc

[Robert9]

It seems there is one paid add-on for a toc, but you cant pay it immediately.
So i ask here if there is anything else. If not it should be not so hard to do it for my own?

[toc]
title1|anchor1
title2|anchor2
...
[/toc]

and
[anc]anchor1[/anc]
...


Then we substitute the toc with some css, get the lines first by \n, then by | and give back something like <a name= in a nice div with another color, bold font ...
the same we do with [anc] as id name=

Maybe we ad list ordered an unorderd with toc1 or tocl,
maybe we need a second level like:

title1|anchor1
*title2|anchor2
*title3|anchor3
title4|anchor4


Is this enough or are there more ideas and steps to do?


Maybe with a form for users?
Maybe with buttons and javascript to add a name and #name somehow automatically for users who need it?


Personally i dont see what could be more for now. And at least for myself i prefer the a shortcut version to write it fast.


I will watch this tomorrow

Anchor BBcode (BBM) - Anchorman

otto submitted a new resource: Anchorman - a Anchor BBcode for BBM addon - Add anchors to your posts in your Xenforo forum. Anchor BBM BBcode - Anchorman Thanks to: ccclearhout, Jake Bunce und ForestForTrees for inspiration and hints. I found not working ressources, short hints at serveral...

xenforo.com

while i want to have it shorter [toc]...[/toc] and regex instead of iurl for every line.


Here is code for another forum software

https://gitlab.haruk.in/harukin/core/commit/b12d4c03cbc2627774b279f17a413860d868e854

Here is the paid one without payment function

Table Of Contents - (Xenforo TOC)

Generate a table of contents automatically from content of a thread, user-friendly view A user friendly, featured focused plugin which allows you to insert a table of contents automatically from content of a thread, user-friendly view.

awesomeforo.com

jquery? There are more.

Table of Contents jQuery Plugin — jquery.toc

Table of Contents jQuery Plugin - jquery.toc.js - A minimal, tiny jQuery plugin that will generate a table of contents, drawing from headings on the page.

ndabas.github.io

If you have more ideas, please let me know.

 

[Robert9]

Hmmm, we could do also something like ...

[anc]1[/anc]Rest of the line
New line text

[anc]2[/anc]Rest of the line
New line text

And from this

div>
a name=1>Rest of the line</a
...

So we dont need to write the toc itself, but then we are bound to Rest of line


Maybe:

toc and anc

or ank Rest of the line

and now i have to think about how this could be mixed.

 

[Xon]

My (paid) Advanced Bb Codes Pack addon has an anchor tag (with bb-code editor for new tags).

However I use my (paid) Threadmarks add-on to layer a table-of-content like system on posts rather than explicit bb-codes. This way each post can have a next/previous button, categories and an easy access to the entire list.

 

[Robert9]

Yes, i have both and use it. My idea is to have the toc inside the post, so i will try this next week.
For the anchor i will use your syntac with a shorter copy of the name also.

 

[Slion]

I did develop a TOC add-on for xf1 three years ago.
It's running there:

Integrate a C++ library with your Android build system

Purpose & Scope This article is intended for a software engineer audience developing Android applications. We will explain how to integrate a CMake based C++ library with your Android build system. That includes compiling and debugging your C++ library from Android Studio along side your...

slions.net

I may have to port it to xf2 in the coming weeks.
Sadly I never got around publishing it.

The implementation of it was documented there:

TOC BB code add-on implementation

I'm trying to implement some BB code add-on that would build a Table Of Content for a post. I'm new to PHP and XenForo and have never implemented add-ons before. However I'm familiar with Perl and other web applications. I would like to publish the following BB codes: H1 to H6 and TOC. I got my...

xenforo.com

 

[uffig]

I wrote a custom bb code which does all with javascript. You don't need to use special bb codes for heading, the headings are determined by font-size.

<?php

namespace XF\Toc;

use XF\BbCode\Renderer\AbstractRenderer;



class FontSizeToc {


    public static function getFontSizeToc($tagChildren, $tagOption, $tag, array $options, AbstractRenderer $renderer) {
      
        $randnum = rand();
        $randid = "font-size-toc-" . $randnum;
        $funcid = "func" . $randnum;
        $js = "<div id=\"" . $randid . "\"></div><script> setTimeout(function() { " . $funcid . "(); }, 500); function " . $funcid . "() { var searchedid = \"" . $randid . "\";" . <<<EOT

var div = document.getElementById(searchedid);
var divsearch = div;

while(divsearch !== undefined){
  
    var classValue = divsearch.getAttribute("class");
    if(classValue !== null && classValue.indexOf("message-userContent") !== -1){
        break;
    }

    divsearch = divsearch.parentElement;
}

var spans = divsearch.getElementsByTagName("span");
var dict = {};
var dictLevel = {};
var headings = {};

for(i=0;i<spans.length;i++){
  var fontSize = parseFloat(window.getComputedStyle(spans[i], null).getPropertyValue('font-size'));
  if (fontSize > 15) {
    if(dict[fontSize] === undefined) { dict[fontSize] = 0; }
    dict[fontSize]++;
    spans[i].id = fontSize + "_" + dict[fontSize];
    headings[spans[i].id] = { text: spans[i].innerText, fontSize: fontSize };
    //alert(spans[i].innerHTML + fontSize + "_" + dict[fontSize]);
  }
}

var level = 0;

// sort dict by key dont know how..
for(i = 50; i > 0; i--){
  if(dict[i] !== undefined){
     dictLevel[i] = level;
     level++;
  }
}

var tocDiv = document.createElement("div");
tocDiv.setAttribute("style", "border-width:1px;border-color: black;border-style:solid;float:right; padding:0.5em; max-width:40%;");
var tocHeader = document.createElement("h3");
tocHeader.appendChild(document.createTextNode("Table of Contents"));

tocDiv.appendChild(tocHeader);

for(var key in headings){
  var headingP = document.createElement("p");
  headingP.setAttribute("style", "margin-left: " + (dictLevel[headings[key].fontSize] * 1) + "em;font-weight: bold;font-size:15px;");
  var headingLink = document.createElement("a");
  headingLink.setAttribute("href", "#" + key);
  headingLink.appendChild(document.createTextNode(headings[key].text));
  headingP.appendChild(headingLink);
  tocDiv.appendChild(headingP);
}

div.appendChild(tocDiv); }

</script>
EOT;
        return $js;
    }
  
}

The only thing i hate on this is the setTimeout usage, but dont know how to make it better.

Example:

 

[Slion]

Slions - Table Of Content

Provides the following BB codes: TOC: For table of content placement. H1, H2, H3, H4, H5, H6: For various headings level. Editor buttons for headings and table of content. Supports WYSIWYG editor. Supports named anchor so you can reorganize...

xenforo.com