HTML Paragraphs to Outline Rows

In the following scenario, “Omni-Interactive” code in a webpage extracts the paragraph contents of an HTML <div> element and inserts the retrieved paragraphs into an OmniOutliner outline document as individual rows.

Below are links to the example documents featured in the video above:

Adding “Omni-Interactive” Abilities

The first step in integrating “Omni-Interactive” code in the webpage is to assign the <div> element a unique ID that will be used by JavaScript functions to identify the element and to extract the paragraph elements contained within the element. In this example, the <div> is assigned the ID: “speech”

A short JavaScript function performs the task of retrieving the text of the paragraph elements contained with the element whose ID is passed into the function:

function extractParagraphs(containerID){ var container = document.getElementById(containerID); var paragraphs = container.getElementsByTagName("p"); var listStrings = new Array(); for (var i = 0; i < paragraphs.length; ++i) { listStrings.push(paragraphs[i].textContent); }; return listStrings; }

 01-09  The extractParagraphs(containerID) function performs the task of extracting the text of the paragraph elements contained within the container (<div>) whose ID is passed into the function.

 02  Store a reference to the container, identified by running the getElementById() with the passed-in ID, into the variable: container

 03  Retrieve and store an array of references to the paragraph elements contained within the parent <div> element.

 04  Create an empty array to hold the paragraph strings.

 05-07  Using a for loop, iterate the array of stored paragraph object references, retrieving their text by getting the value of each paragraph element’s textContent property.

 08  Return the array of paragraph strings.

The main JavaScript function (below), triggered when the user taps or clicks the corresponding link, performs the task of gathering paragraph text content, encoding the content, inserting it into a pre-encoded Omni Automation script URL, and executing the script URL.

function addToOutline(containerID){ var listItems = extractParagraphs(containerID); var listItemsString = JSON.stringify(listItems); var encodedListItemsString = encodeURIComponent(listItemsString); var OmniOutlinerScript = 'omnioutliner://localhost/omnijs-run?script=var%20itemArray%20%3D%20DATAPLACEHOLDER%0Avar%20nodes%20%3D%20document%2Eeditors%5B0%5D%2EselectedNodes%0Aif%28nodes%2Elength%20%3D%3D%201%29%7B%0A%09var%20alert%20%3D%20new%20Alert%28%22Item%20Placement%22%2C%20%22Should%20the%20paragraphs%20be%20added%20as%20children%20or%20siblings%20of%20the%20selected%20outline%20item%3F%22%29%0A%09alert%2EaddOption%28%22Children%22%29%0A%09alert%2EaddOption%28%22Siblings%22%29%0A%09alert%2EaddOption%28%22Cancel%22%29%0A%09alert%2Eshow%28function%28result%29%7B%0A%09%09var%20selectedItem%20%3D%20nodes%5B0%5D%2Eobject%0A%09%09if%20%28result%20%3D%3D%200%29%7B%0A%09%09%09for%28i%20%3D%200%3B%20i%20%3C%20itemArray%2Elength%3B%20i%2B%2B%29%7B%0A%09%09%09%09selectedItem%2EaddChild%28selectedItem%2Eend%2Cfunction%28item%29%7Bitem%2Etopic%20%3D%20itemArray%5Bi%5D%7D%29%0A%09%09%09%7D%0A%09%09%7D%20else%20if%20%28result%20%3D%3D%201%29%7B%0A%09%09%09parentItem%20%3D%20selectedItem%2Eparent%0A%09%09%09for%28i%20%3D%200%3B%20i%20%3C%20itemArray%2Elength%3B%20i%2B%2B%29%7B%0A%09%09%09%09parentItem%2EaddChild%28parentItem%2Eend%2Cfunction%28item%29%7Bitem%2Etopic%20%3D%20itemArray%5Bi%5D%7D%29%0A%09%09%09%7D%0A%09%09%7D%20else%20%7B%0A%09%09%09throw%20new%20Error%28%27script%20cancelled%27%29%0A%09%09%7D%0A%09%7D%29%0A%7D%20else%20%7B%0A%09var%20alert%20%3D%20new%20Alert%28%27SELECTION%20ERROR%27%2C%27Please%20select%20a%20single%20outline%20item%20at%20which%20you%20wish%20to%20add%20items%2E%27%29%0A%09alert%2Eshow%28function%28result%29%7B%7D%29%0A%7D'; OmniOutlinerScript = OmniOutlinerScript.replace('DATAPLACEHOLDER',encodedListItemsString); window.location = OmniOutlinerScript; }

 01-08  The addToOutline(containerID) function performs the task of gathering paragraph text content, encoding the content, inserting it into a pre-encoded Omni Automation script URL, and executing the script URL.

 02  Call the previously described extractParagraphs() function to retrieve and store an array of paragraph strings.

 03  Use the JSON.stringify() method to convert the array of strings into a string.

 04  Use the standard JavaScript method encodeURIComponent to encode the array string.

 05  An encoded version of the Omni Automation script URL containing the placeholder DATAPLACEHOLDER.

 06  Store the results of replacing the placeholder DATAPLACEHOLDER in the encoded Omni Automation script with the encoded array string.

 07  Execute the Omni Automation script URL by assigning it to be the value of the browser window’s location property.

The Omni Automation Script

Here is the Omni Automation script that does the work of adding the retrieved list items into the currently open OmniOutliner document. In use, the script is encoded and the encoded script is placed within the main JavaScript function embedded in the webpage. Note the placeholder DATAPLACEHOLDER (line 1) that is replaced with an array of the list item strings before the script is executed by the main JavaScript function.

var itemArray = DATAPLACEHOLDER var nodes = document.editors[0].selectedNodes if(nodes.length == 1){ var alert = new Alert("Item Placement", "Should the list items be added as children or siblings of the selected outline item?") alert.addOption("Children") alert.addOption("Siblings") alert.addOption("Cancel") alert.show(function(result){ var selectedItem = nodes[0].object if (result == 0){ for(i = 0; i < itemArray.length; i++){ selectedItem.addChild(selectedItem.end,function(item){item.topic = itemArray[i]}) } } else if (result == 1){ parentItem = selectedItem.parent for(i = 0; i < itemArray.length; i++){ parentItem.addChild(parentItem.end,function(item){item.topic = itemArray[i]}) } } else { throw new Error('script cancelled') } }) } else { var alert = new Alert('SELECTION ERROR','Please select a single outline item at which you wish to add items.') alert.show(function(result){}) }

Adding Functions from File

You can incude the functionality shown on this webpage in your webpages by either: placing the described functions in the head section of your webpage, or by downloading the addParagraphsToOutline.js file and including this link in the HEAD section of your webpages. Add the TAP|CLICK triggers to your lists as shown above.

UNDER CONSTRUCTION

This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.

DISCLAIMER