Supporting inconsistent content elements

The previous issue, which was a pre-requisite for this one has finally been implemented, with no errors reported yet.

New validation of the main jQuery selector

Within the _ld() function, which loads a single content element from the target page, the following validation code is new (at the very beginning):

if(typeof $h[0] == "undefined") { //target element not defined on target page
    //handle inconsistent elements
    return; //Skip this element and continue - skip the rest of the _ld() function
}

The new functionality kindly requested by an advanced Ajaxify user via email:

You could offer the following new functionality:

"Permanent Selectors" for all consistent elements (present on all webpages) example: Navigation, Main Content, Footer.

"Local Selectors" for inconsistent elements (present on at least one webpage) example: Background image, Image Slider. Both "Local Selector" examples could be present on only a couple of pages, imagine a slider that is permanent on only 4 of the 20 pages were the slider stay's and content below changes. The same for background images, sometimes only used on the Home page.

The code could be:

$(document).ready(function(){
jQuery('#main, #header-stay, #footer-stay').ajaxify({'selector':'#header-stay a, #footer-stay a','verbosity': 2, scrolltop: true, alwayshints: "leaflet-embed", localSelectors:"#background-image, #imageSlider"});
});

Hope it makes sense to you, but from a designers point of view this would be ideal!

The first thing to specify is whether to introduce a new parameter:

localSelectors

Unlike the above user, I would tend to keep the interface the same, but relax the requirements for the main jQuery selection, in that the user may pass IDs, the elements of which do not have to be present on all pages. From this point of view, if an element is present on all pages, that is just a special case of the rule...

Moving forward to a specification of the solution in pseudo-code, the first thing necessary is to extend the interface of the existing _ld() function to:

function _ld($currrent, $new)

...where $current and $new are jQuery representations of the corresponding elements to swap and can both be undefined ($current is the existing element in the DOM, if any and $new is the element in the DOM from the target page, if any)

That gives rise to four cases to be handled, the first three of which are trivial:

$current and $new are both undefined -> nothing to do
$current and $new both exist -> copy the element, as is done currently already
$current exists and $new is undefined -> erase $current
$current is undefined and $new is given -> insert $new from scratch

...the last case (4) is not trivial to me at the moment.

It is not so much the question how to copy over the $new element but rather where to insert it.

So the tricky question is:

Given the $new element and its position on the target page, how can the corresponding and exact location to insert it on the current page be calculated?

Without any doubt this is standard programming knowledge, but unfortunately, I never learned this pattern.

It reminds me of a UNIX filecmp (i.e. file compare), or a GitHub highlighting of changes in source code, which easily perform the above, apart from other things.

arvgta / ajaxify

Supporting inconsistent content elements #169