This is still in the cauldron of discovery.
BACKGROUND
Xara has not built-in Search Utility.
Yes - we have web solutions but what of local access to a Print document that is not "published" but is used in a Presentation or emailed?
APPROACH
I didn't just want to search for every single word but I wanted Keywords, Key Phrases and their definition or context across the entire document.
SOLUTION ADOPTED
I felt I could exploit the pop-up text capability
At its simplest, Search Terms are added through Web Animation > Mouse-over > Show pop-up text.
I decided that a Search Term must contain :: to be found.
PROOF OF CONCEPT
I used some CSS to establish if I could find text with Title content (pop-up text).
This locates any object with pop-up text containing :: and shows it with a dotted green underline.Code:<style> span[title*="::"] { text-decoration: underline; text-decoration-style:dotted; text-decoration-color: green; text-decoration-skip-ink: auto; } </style>
[IE manages a solid underline so Preview is a tad disappointing]
The rest is code.
CONSTRUCTION
I added a Search page at the end of my document with a soft-grouped pair of shapes:
- Both hold all the required code so these are the transportable items - Copy & Pasted into your own Print Document, Presentation or Vertical Supersite [A Horizontal Supersite sort of works]
- A Page Transitions Supersite is probably ideal. [In other words, a Conventional Website will not work]
- I have added https://datatables.net (a jQuery plug-in) to make the Search Box remember its last search results and column position.
- The soft-grouped Placeholder Code (Head) has the set-up of the HTML Table and the green dotted underline.
- The Placeholder has HTML code (body) for the singular transparent box that has a Name 'search' and is:
Code:<script>var tableRows = "<table id='searchBox' style='pointer-events: auto;' class='display compact cell-border hover stripe'>"; tableRows += "<thead><tr><th>Term</th><th>Description</th><th>Anchor</th><th>Position</th></tr></thead>"; var searchTerms = document.querySelectorAll('[title*="::"]'); for (var i = 0; i < searchTerms.length; ++i) { if ( searchTerms[i].id == "" ) { searchTerms[i].id = searchTerms[i].title.substr(0,2) + i; }; tableRows += "<tr>" tableRows += "<td><a href='#" + searchTerms[i].id + "'>" + searchTerms[i].textContent + "</a>" + "</td>" tableRows += "<td>" + searchTerms[i].title + "</td>" tableRows += "<td>" + searchTerms[i].id + "</td>" tableRows += "<td>" + i + "</td>" tableRows += "</tr>"; }; tableRows += "</table>"; document.getElementById("search").innerHTML = tableRows; $(document).ready(function() { $('#searchBox').DataTable({ "lengthMenu": [[ 10, 20 ], ["Enough", "More than Enough"]] , colReorder: true , stateSave: true }); } ); $('#search').css('pointer-events', 'auto'); $('#search a').attr('target', '_parent'); </script>- The code adds the HTML rows to a table built up row by row from the Title contents of any object with a ::.
OPERATION
Add the Search Box to a bottom page.
Ensure you use :: in your pop-up text definition.
The rest is automatic.
DEMONSTRATOR
Please run and play with:
JS-Search Box.xar
I cribbed these pages form the PDF Help File for v17.0.
There are some issues with selecting some items, which is how Xara renders PDF into a Xara format.
WAY AHEAD
I invite suggestions for development.
I chose to omit images for the moment but it would be possible to add thumbnails into the table.
If so, I can visualise the approach to be used in a "native" Shopping Cart.
Acorn
Bookmarks