Page 1 of 1

Creating a Table of Contents in Side Drawer

Posted: Wed Aug 23, 2017 9:38 pm
by 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?

Image

Image

Image

Image

Re: Creating a Table of Contents in Side Drawer

Posted: Thu Aug 24, 2017 4:04 pm
by 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

Re: Creating a Table of Contents in Side Drawer

Posted: Wed Oct 18, 2017 4:49 pm
by john_m
Thank you Gabriel! This worked perfectly! (Sorry for the delayed response)! :)