New features requests

[vijayhardaha]

Hey,

I am not sure if there is an option available to ignore Ajaxify calls on any specific anchor tag or not. the documentation was not very friendly to find it.

So what I am doing right now, I have added a new option argument selectorskip

{
    //  basic config parameters
    (selector: "a:not(.no-ajaxy)"), //selector for links to trigger swapping - not elements to be swapped - i.e. a selection of links

    // THIS IS NEW OPTION
    (selectorskip: ""), // selector of links to be ignored from ajaxify( e.g. ".header a.show-mini-mart, .header a.menu-toggle")
};

then I have defined a new function _noAjaxy in Pronto class like this:

_noAjaxy = () => {
    const selectors = typeof $.s.selectorskip === "string" && $.s.selectorskip.length > 0 ? $.s.selectorskip.split(", ") : false;
    if (selectors && selectors.length) {
        selectors.forEach((elem) => {
            qa(elem.trim()).forEach((e) => {
                if (!e.classList.contains("no-ajaxy")) {
                    e.classList.add("no-ajaxy");
                }
            });
        });
    }
};

This function check for selectorskip option if the option data is valid then with forEach call we add no-ajaxy call in all the selectors. This function is being called in 2 places

this.a = function ($this, h) {
    if (!h) return; //ensure data

    _noAjaxy();

    if (h === "I") {
    }
    /// Rest code
};

First in the Pronto Class constructor.

_doRender = () => {
    $.scrolly("!");
    _gaCaptureView(href);
    $.trigger("render");

    _noAjaxy();
};

Second after render is completed. Because once the page is rendered the previous no-ajaxy classes will be removed.

The second feature what I am looking for is to provide 2 callback option in settings like this:

{
    cb: 0, // callback handler on completion of each Ajax request - default 0
    beforeRender: false, // callback handler on before of each Ajax request - default 0
    afterRender: false, // callback handler on after of each Ajax request - default 0
};

and they should be called like this:

_request = (notPush) => {
    if ($.s.beforeRender) $.s.beforeRender();
    // Rest code
};

_doRender = () => {
    // Rest code
    if ($.s.cb) $.s.cb();
    if ($.s.afterRender) $.s.afterRender();
};

I can see there is already callback function cb available but it will good to have proper names for each callback. after and before Render will be helpful to show and hide any loader while the page is rendering.

for the no-ajaxy classes, we can add no-ajaxy in our HTML code but in some websites, we cannot control the HTML everywhere in that classes this javascript should handle that thing.

Let me know if you think these features will be good to have and you can implement them if you have free time.

Here is my forked repo, you can review the changes here https://github.com/vijayhardaha/ajaxify

Thanks, Vijay

[arvgta]

Hi Vijay,

sorry about the delay! Thanks for all those details - I have consulted a technical team member and would like to ask:

why don't you just use the selectorproperty like this e.g.:

selector: "a:not(.header a.show-mini-mart, .header a.menu-toggle)"

I totally agree that documentation has to be improved!

Thanks and regards, Arvind

[edito]

Hi @vijayhardaha,

I am not sure if there is an option available to ignore Ajaxify calls on any specific anchor tag or not. the documentation was not very friendly to find it.

Ajaxify uses document.querySelectorAll("[selector]") for matching of the elements where [selector] part can be any of CSS selectors. This means that propper usage for current ajaxify state to meet your expectations would be

let ajaxify = new Ajaxify({
    selector : "a:not(.no-ajaxy):not(.header a.show-mini-mart, .header a.menu-toggle)",
    // (... rest of the options)
});

// I would like to emphasize that you can chain :not() selectors for e.g.
{selector : "a:not(.no-ajaxy):not(.header a.show-mini-mart):not( .header a.menu-toggle)"}

And it will cover html structure similar to this

<div class="header">
    <a href="/showminimart" class="show-mini-mart">Show Mini Mart</a>
    <a href="" class="menu-toggle">Menu Toggle</a>
    <a href="/otherurl">Other url</a> <!-- "Other url" won't be ignored by ajaxify -->
</div>

Also, regarding of second feature

The second feature what I am looking for is to provide 2 callback option in settings like this:

cb: 0, // callback handler on completion of each Ajax request - default 0 beforeRender: false, // callback handler on before of each Ajax request - default 0 afterRender: false, // callback handler on after of each Ajax request - default 0

It won't be neccessary for the example above, but in case you need those callback options for something different you can use them through ajaxify events:

• First read the documentation for better understanding of events.

• Then you can add and test listeners this way

  window.addEventListener("pronto.request", function () {
     // code that has to be executed on ajaxify request
  });
  
  window.addEventListener("pronto.render", function () {
    // code that has to be executed after ajaxify render
  });

Best regards, Edin

[vijayhardaha]

Thanks, It will solve my problem then.

[arvgta]

Hi Vijay,

closing for the moment. Feel free to reopen, if need be...

Thanks and regards, Arvind