Creating a Table of Contents in Side Drawer

<oXygen/> general issues.
john_m
Posts: 32

Creating a Table of Contents in Side Drawer

Wed Aug 23, 2017 9:38 pm

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?

Image

Image

Image

Image
Gabriel Titerlea
Posts: 33

Re: Creating a Table of Contents in Side Drawer

Thu Aug 24, 2017 4:04 pm

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
Posts: 32

Re: Creating a Table of Contents in Side Drawer

Wed Oct 18, 2017 4:49 pm

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

Return to “Other Issues”

Who is online

Users browsing this forum: No registered users and 1 guest