Creating a Table of Contents in Side Drawer

[john_m]

Hello,

In XMLWebAuthor I'm trying to create a Table of Contents in a custom side view. The html is composed of simple anchor tags. The anchor tags have the proper href values set but the links do not seem to be working. How do I direct the anchors to link to the relevant id's for elements in the currently open document?

[Gabriel Titerlea]

Hello,

You can add an on-click listener to the links you create for the TOC. This listener will scroll the document to the element with the given id and set the selection right at the beginning of the element.

Here's how to implement the on-click listener:

Code: Select all

// Get the html element with the required id.

var elem = document.querySelector('[data-attr-id="' + elementId + '"]');



// Create a selection which is set in the element.

var xmlNode = sync.api.dom.createApiNode(elem);

var sel = sync.api.Selection.createEmptySelectionInNode(xmlNode, 'before');



// Put the editor selection into the xmlNode.

editor.getSelectionManager().setSelection(sel);



// Scroll the page to make sure the element is visible.

elem.scrollIntoView();

You can get a reference to the editor variable in the sync.view.ViewRenderer.prototype.editorChanged method.

Here's some relevant documentation [1][2][3].

Best,
Gabriel

[1] https://www.oxygenxml.com/maven/com/oxy ... tionInNode
[2] https://www.oxygenxml.com/maven/com/oxy ... ionManager
[3] https://www.oxygenxml.com/maven/com/oxy ... torChanged

[john_m]

Thank you Gabriel! This worked perfectly! (Sorry for the delayed response)!