Creating a Table of Contents in Side Drawer
Oxygen general issues.
-
- Posts: 32
- Joined: Mon Apr 10, 2017 8:56 pm
Creating a Table of Contents in Side Drawer
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?




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?




-
- Site Admin
- Posts: 95
- Joined: Thu Jun 09, 2016 2:01 pm
Re: Creating a Table of Contents in Side Drawer
Post 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:
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
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();
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
Jump to
- Oxygen XML Editor/Author/Developer
- ↳ Feature Request
- ↳ Common Problems
- ↳ DITA (Editing and Publishing DITA Content)
- ↳ SDK-API, Frameworks - Document Types
- ↳ DocBook
- ↳ TEI
- ↳ XHTML
- ↳ Other Issues
- Oxygen XML Web Author
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Content Fusion
- ↳ Feature Request
- ↳ Common Problems
- Oxygen JSON Editor
- ↳ Feature Request
- ↳ Common Problems
- Oxygen PDF Chemistry
- ↳ Feature Request
- ↳ Common Problems
- Oxygen Feedback
- ↳ Feature Request
- ↳ Common Problems
- Oxygen XML WebHelp
- ↳ Feature Request
- ↳ Common Problems
- XML
- ↳ General XML Questions
- ↳ XSLT and FOP
- ↳ XML Schemas
- ↳ XQuery
- NVDL
- ↳ General NVDL Issues
- ↳ oNVDL Related Issues
- XML Services Market
- ↳ Offer a Service