The Poor Man's Intersection Observer

Dear Xara...

Since you invented Supersites, it has rankles (no, really upset) me that you also threw out the baby with the bathwater.

Specifically:

• Individual HTML web pages end up subsumed into one large (index.htm) file; for large or graphical sites, the overhead of this is noticeable
• Each web page now has a URL of form ../index.htm#xl_xr_page_escape([Page filename]): escape is a function that replace blanks with %20, amongst other substitutions
  
  • .htaccess rewriteRules cannot handle hashes: the # and the things following
  • Such a rewrite could otherwise have prettied up this mess
  
  
• Other than the first page, you have lost the detail of:
  
  • Page title: Customers now get to see the
  • Page description
  • Page keywords; for these you mung them into the index page's Keyword area
  • Page Pasteboard: I may have wished to display a differentbackground image

In practice, when I navigate to any page I now have a URL display of ../index.htm#xl_xr_page_escape([Page filename]) - good for you but not my Customers.

I have a partial fix that at least now can display the Page Filename in the place of the missing Page Titles.
This at least gives the impression that the browser knows where the customer is viewing.

I decided against the HTML5 Intersection Observer approach as I would have to set up objects on each page to then be monitored: https://css-tricks.com/a-few-functio...nt-is-in-view/.
Instead I used the common Xara concepts already available, my poor man's Intersection Observer:

• A shape with a ClassName of "pageBlob": special Name, htmlclass="pageBlob".
• Set this blob to Repeating.
• Add a Web Animation > Reveal: Fade In + 0 seconds to invoke jQuery and associate the ClassName "animated" with the blob.
• Some Website > HTML Code (body):

Code:

---

<script>
var lastPageTitle = document.title;

function pageTitle() {
  var parentDiv = $('.animated:visible').parent().parent().parent();
  var parDivId = parentDiv.attr('id');
  if (parDivId != lastPageTitle) {
    if (parDivId.substr(0,7) == "xr_page") {
      document.title = parentDiv.children().first().attr('id').substr(8);
      lastPageTitle = parDivId;
    }
  }
}

setInterval(pageTitle, 1500);
</script>

---

We effectively have to check that the file is one for a Supersite.
As there is no Page Title available, we navigate up the DOM to find the page we are on and then its Page Filename [This is not its Title - more later]
This value is pumped into the document.title and it appears at the top of the browser.

Xara does not play fair with a single Page Preview but the code handles this and changes nothing.
The early Xara Preview using IE doesn't display trivial things like Page Titles; you need to use a proper browser.

@Xara:
Please introduce some VITAL Page Attributes: data-pg_title, data-pg_description, data-pg_keywords into <div id="xr_page_..."></div>: <div id="xr_page_..."data-pg_title="This is the Page Title" data-pg_description="The is the Page Description" data-pg_keywords="There are the Page Keywords"></div> and populate them with the values patiently input by the designer.
Then at least it will be possible to iterate round all the pages with similar to $('[id*="xr_page_"]')[0].dataset.pg_title and update the Page Title properly.

:pointAttachment 128724 - navigate or scroll through the available pages

I expect better from a Pro application.

Acorn