Webpage List to Outline
Here’s another example of transferring data from a webpage to an Omni document. Omni Automation enables the contents to be extracted from a list on the webpage into the current OmniOutliner document:
Here are some example webpages that contain lists and data that can be transferred to an open OmniOutliner document using the techniques shown on this page.
- U.S. Census Regions and Divisions (shown in video)
- Common Lists
- Grocery Shopping List (plugin)
- I Have a Dream (speech)
- Gettysburg Address (speech)
- Atticus Finch - Closing Argument (speech)
- Table Transfer Example
The Main Function
This is the main JavaScript function, embedded in the webpage, or linked from a file (see bottom of this page), that performs the following:
- (line 2) Retrieves the contents of the targeted HTML list
- (line 3) Converts the resulting array into a JSON object string
- (line 4) Encodes the JSON object string
- (line 6) Replaces a placeholder in an encoded Omni Automation script (line 5) with the encoded JSON data
- (line 7) Executes the encoded Omni Automation script
| Main Function | ||
| 01 | function addToOutline(listID){ | |
| 02 | var listItems = getListItemStrings(listID); | |
| 03 | var listItemsString = JSON.stringify(listItems); | |
| 04 | var encodedListItemsString = encodeURIComponent(listItemsString); | |
| 05 | var OmniOutlinerScript = 'omnioutliner:///omnijs-run?script=var%20itemArray%20%3D%20XXXXX%0Avar%20nodes%20%3Detc.'; | |
| 06 | OmniOutlinerScript = OmniOutlinerScript.replace('XXXXX',encodedListItemsString); | |
| 07 | window.location = OmniOutlinerScript; | |
| 08 | } | |
You can make an HTML list “tap-able” by adding an onClick() handler. Clicking or tapping any list item will cause the main JavaScript function to run.
| Making a List Clickable | ||
| 01 | <ul id="pacific-region" onclick="addToOutline('pacific-region')"> | |
| 02 | <li>Alaska</li> | |
| 03 | <li>California</li> | |
| 04 | <li>Hawaii</li> | |
| 05 | <li>Oregon</li> | |
| 06 | <li>Washington</li> | |
| 07 | </ul> | |
Getting List Items
The first step in transferring the contents of an HTML list to an OmniOutliner document is to create a JavaScript array containing the text of the list items. This is accomplished using this JavaScript function placed in the host webpage.
| Getting List Items | ||
| 01 | function getListItemStrings(listID){ | |
| 02 | var ul = document.getElementById(listID); | |
| 03 | var items = ul.getElementsByTagName("li"); | |
| 04 | var listStrings = new Array(); | |
| 05 | for (var i = 0; i < items.length; ++i) { | |
| 06 | listStrings.push(items[i].textContent); | |
| 07 | }; | |
| 08 | return listStrings; | |
| 09 | } | |
When this function is called by the main function, it is passed the CSS id of the list whose contents are to be retrieved.
| Getting List Items (alternate) | ||
| 01 | function getListItemStrings(listID){ | |
| 02 | var ul = document.getElementById(listID); | |
| 03 | var items = ul.getElementsByTagName("li"); | |
| 04 | var listStrings = items.map(function(item){ | |
| 05 | return item.textContent; | |
| 06 | }; | |
| 07 | return listStrings; | |
| 08 | } | |
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 XXXXX (line 1) that is replaced with an array of the list item strings before the script is executed by the main JavaScript function.
| Add List Items to Outline | ||
| 01 | var itemArray = XXXXX | |
| 02 | var nodes = document.editors[0].selectedNodes | |
| 03 | if(nodes.length == 1){ | |
| 04 | var alert = new Alert("Item Placement", "Should the list items be added as children or siblings of the selected outline item?") | |
| 05 | alert.addOption("Children") | |
| 06 | alert.addOption("Siblings") | |
| 07 | alert.addOption("Cancel") | |
| 08 | alert.show(function(result){ | |
| 09 | var selectedItem = nodes[0].object | |
| 10 | if (result == 0){ | |
| 11 | for(i = 0; i < itemArray.length; i++){ | |
| 12 | selectedItem.addChild(selectedItem.end,function(item){item.topic = itemArray[i]}) | |
| 13 | } | |
| 14 | } else if (result == 1){ | |
| 15 | parentItem = selectedItem.parent | |
| 16 | for(i = 0; i < itemArray.length; i++){ | |
| 17 | parentItem.addChild(parentItem.end,function(item){item.topic = itemArray[i]}) | |
| 18 | } | |
| 19 | } else { | |
| 20 | throw new Error('script cancelled') | |
| 21 | } | |
| 22 | }) | |
| 23 | } else { | |
| 24 | var alert = new Alert('SELECTION ERROR','Please select a single outline item at which you wish to add items.') | |
| 25 | alert.show(function(result){}) | |
| 26 | } | |
Adding Functions from File
You can incude the functionality shown on this webpage in your webpages by downloading the addListToOutline.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 | ||
| 01 | <script type="text/javascript" src="addListToOutline.js"></script> | |
This webpage is in the process of being developed. Any content may change and may not be accurate or complete at this time.
DISCLAIMER