{"id":305,"date":"2012-12-09T19:55:11","date_gmt":"2012-12-09T19:55:11","guid":{"rendered":"http:\/\/tregner.com\/flare-blog\/?p=305"},"modified":"2012-12-09T19:55:30","modified_gmt":"2012-12-09T19:55:30","slug":"sorting-tocs-in-and-output-with-javascript","status":"publish","type":"post","link":"https:\/\/tregner.com\/flare-blog\/sorting-tocs-in-and-output-with-javascript\/","title":{"rendered":"Sorting TOCs in an Output with JavaScript"},"content":{"rendered":"

Having discussed\u00a0sorting TOCs in a project<\/a> before a build, let\u2019s look at sorting a TOC in an HTML5 target output with JavaScript.<\/p>\n

I\u2019m using Google Chrome to test the JavaScript on the online help files for MadCap Flare version 8<\/a>. Please note that I am using Flare online help because it is a\u00a0recognizable, high quality HTML5 output. I don’t work for MadCap Software or have any involvement with that help file.<\/p>\n

In the screen shot, notice the unordered list for the TOC is being inspected with the developer tools in Chrome. To bring up these tools, right-click somewhere on a page displayed in Chrome and select Inspect element<\/strong>.<\/p>\n

\"TOC<\/a>
TOC tree in Google Chrome<\/figcaption><\/figure>\n

The unordered list has a class value of \u201ctree\u201d (ul.tree). The children are list items (li) and the class varies depending on the state of the node and the position in the tree. For example, the skin changes the class value when the node is selected. In the next image, the Welcome<\/em> topic is selected. Notice the value is:<\/p>\n

tree-node tree-node-leaf tree-node-selected<\/p>\n

\"TOC<\/a>
TOC tree node in Google Chrome<\/figcaption><\/figure>\n

For this post, only the top nodes will be sorted. To test getting those, JavaScript can be executed from the Console<\/strong> which is the option on the far right of the developer tools. This will retrieve the child nodes of the first ul.tree element on the page:<\/p>\n

document.getElementsByClassName(\"tree\")[0].childNodes<\/pre>\n
In the next screen shot, this has been executed.<\/p>\n
\"child<\/a>
Child nodes of TOC tree retrieved with JavaScript<\/figcaption><\/figure>\n
The result can be assigned to an array and sorted. Once sorted, the content of the list items can be replaced with the sorted content. But the class for the li elements must also be changed. Not only does that class change dynamically when you select the entry but the class varies depending on placement in the tree. To be safe, the class name should also convey.<\/p>\n
Rather than multidimensional arrays, JavaScript allows for arrays of objects or arrays of arrays. To keep the class value and the inner HTML together, an array of objects can be used. The sort will be performed on the text of the label. The label text appears as the third descendant of the list item. But there is no other text so it can be taken from the list item itself. Here is a good discussion on Stack Overflow: http:\/\/stackoverflow.com\/questions\/2808926\/javascript-multidimensional-arrays<\/a>.<\/p>\n
For basics about JavaScript arrays:\u00a0w3schools.com JavaScript Array Object tutorial<\/a><\/p>\n
Since the sort is to be performed on an array of objects, a sort function must be specified. This is a good explanation: http:\/\/www.javascriptkit.com\/javatutors\/arraysort2.shtml<\/a>. In addition to placing the inner HTML and the class for the node in an array, the label text from the inner HTML is pulled as as a separate piece. The sort is based on the label text. This makes it easier to identify. Otherwise the script would have to drill in to the inner HTML for each node during the sort.<\/p>\n
Here is the the code:<\/p>\n
var topNodes = document.getElementsByClassName(\"tree\")[0].childNodes;\r\nvar nodeHtmlAndClasses = [];\r\n\r\nfor (var i = 0, l = topNodes.length; i < l; i++) {\r\n    var nodeHtmlAndClass = { iH: topNodes[i].innerHTML, cN: topNodes[i].className, lbl: topNodes[i].textContent };\r\n    nodeHtmlAndClasses.push(nodeHtmlAndClass);\r\n}\r\n\r\nnodeHtmlAndClasses.sort(function (a, b) {\r\n    var labelA = a.lbl.toLowerCase(), labelB = b.lbl.toLowerCase()\r\n    if (labelA < labelB)\r\n        return -1\r\n    if (labelA > labelB)\r\n        return 1\r\n    return 0\r\n});\r\n\r\nfor (var i = 0, l = topNodes.length; i < l; i++) {\r\n    topNodes[i].innerHTML = nodeHtmlAndClasses[i][\"iH\"];\r\n    topNodes[i].className = nodeHtmlAndClasses[i][\"cN\"];\r\n}<\/pre>\n
To test, you can open an HTML5 output and execute the copied code from the developer tools in a browser. Here is the TOC before:<\/p>\n
\"TOC<\/a>
TOC before sorting with a JavaScript<\/figcaption><\/figure>\n
And here is the TOC in alphabetical order after executing the JavaScript:<\/p>\n
\"TOC<\/a>
TOC after sorting with a JavaScript<\/figcaption><\/figure>\n
What next?<\/p>\n
You can add this script to a function and configure a toolbar button to execute it when clicked. MadCap Software has recently posted instructions about how to do that:<\/p>\n
Adding Custom Buttons to HTML5 (and WebHelp) Outputs<\/a><\/p>\n
It would also be nice to script the return to the original order or to script flattening or sorting at each level as was described in the previous post. But I’ll end this post with an appeal for comments about what kinds of sorting would be useful in Flare HTML5 outputs. The spam system on this blog has been changed. If you don’t see you comment published, please email info@tregner.com so I can track your comment down.<\/p>\n","protected":false},"excerpt":{"rendered":"
Having discussed\u00a0sorting TOCs in a project before a build, let\u2019s look at sorting a TOC in an HTML5 target output with JavaScript. I\u2019m using Google Chrome to test the JavaScript on the online help files for MadCap Flare version 8. Please note that I am using Flare online help because it is a\u00a0recognizable, high quality… Continue reading Sorting TOCs in an Output with JavaScript<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts\/305"}],"collection":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/comments?post=305"}],"version-history":[{"count":16,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts\/305\/revisions"}],"predecessor-version":[{"id":327,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/posts\/305\/revisions\/327"}],"wp:attachment":[{"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/media?parent=305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/categories?post=305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tregner.com\/flare-blog\/wp-json\/wp\/v2\/tags?post=305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}