OmniOutliner: HTML Paragraphs to Outline Rows

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”

HTML DIV Containing Paragraphs

<p>To begin with, this case should never have come to trial. etc.</p>

<p>I have nothing but pity in my heart for the Chief Witness… etc.</p>

<p>Now what did she do? She tempted a negro. She was white… etc.</p>

<p>The witnesses for the State, with the exception of… etc.</p>

<p>And so, a quiet, humble, respectable negro, who has had… etc.</p>

<p>Now, gentlemen, in this country our courts are… etc.</p>

<p>Now I am confident that you gentlemen will review… etc.</p>

</div>

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; }

Retrieving Paragraphs

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.

Link

<p><a href="javascript:void(0);" onClick="addToOutline('speech')">TAP | CLICK</a> to open in OmniOutliner</p>

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; }

Main Function: Add to Outline

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.

Add Items to Outline

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.

JavaScript Script File

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

Mention of third-party websites and products is for informational purposes only and constitutes neither an endorsement nor a recommendation. OMNI-AUTOMATION.COM assumes no responsibility with regard to the selection, performance or use of information or products found at third-party websites. OMNI-AUTOMATION.COM provides this only as a convenience to our users. OMNI-AUTOMATION.COM has not tested the information found on these sites and makes no representations regarding its accuracy or reliability. There are risks inherent in the use of any information or products found on the Internet, and OMNI-AUTOMATION.COM assumes no responsibility in this regard. Please understand that a third-party site is independent from OMNI-AUTOMATION.COM and that OMNI-AUTOMATION.COM has no control over the content on that website. Please contact the vendor for additional information.