GithubHelp home page GithubHelp logo

Comments (8)

ddnexus avatar ddnexus commented on August 25, 2024 1

@Bahanix I am using the function.apply(null, array) in the global refactoring of the pagy.js passing it a simple array as in your example. It is just wrapped by a loop of the 3 extras.

Pagy.init = function(){
              ['compact', 'items', 'responsive'].forEach(function(name){
                Array.from(document.getElementsByClassName("pagy-"+name)).forEach(function(json) {
                  Pagy[name].apply(null, JSON.parse(json.innerHTML))
                })
              })
            };

I will push to dev the refactoring in a few hours. It works well for all the extras already, but I have just to adapt the tests and update the doc. Thanks for your effort and help.

from pagy.

ddnexus avatar ddnexus commented on August 25, 2024 1

@Bahanix please, try the dev branch and let me know if the docs is clear enough and if it works. Thanks.

from pagy.

ddnexus avatar ddnexus commented on August 25, 2024

Hi @Bahanix. Yeah, the inline script maybe a little brutal, I know :)
The reason is there is that is almost self contained, in the sense that the user has only to add the pagy-responsive.js and the helper will take care of the rest.

Of course your PR would be welcome! However, please, keep in mind this 2 concepts:

  1. the changes should not require any more writing from the user if possible (and I think it is)
  2. the changes should be generic as much as possible (e.g. "turbolink:load" would be very specific)

If you have different possible alternative about how to implement it, please, feel free to discuss it in the chat in advance.

Thanks!

from pagy.

ddnexus avatar ddnexus commented on August 25, 2024

What about using a nonce? Maybe passing it as an extra variable, so it will become totally optional and its generation will be up to the user.

from pagy.

ddnexus avatar ddnexus commented on August 25, 2024

Actually, the only advantage of a nonce is that it wouldn't break the current implementation, but using it is probably more complex than using your approach of removing the inline script all together.

We could create a PagyResponsiveLoad function that will encapsulate the code for executing all the PagyReponsive calls (your code), and it could be used in an addEventListener like for example:

window.addEventListener("turbolinks:load", PagyReponsiveLoad)

That will break the current implementation and require to write an extra line, but it would be quite easy to use.

Waiting for your PR ;)

from pagy.

Bahanix avatar Bahanix commented on August 25, 2024

My WIP: Bahanix@dc0f24e

I had to replace a lot of simple-quotes and double-quotes since valid JSON need double-quotes for strings and keys to be parsed through JSON.parse. (I still did not updated tests for this quite painful change)

For testing purpose, I am writting the JS part in my app before adding it in Pagy:

  Array.from(document.getElementsByClassName("pagy-responsive")).forEach(function(pagination) {
    PagyResponsive.apply(null, JSON.parse(pagination.innerHTML));
  });

Note that function.apply(null, array) is a JS equivalent to ruby function(*array). I think it may be useful if we end by using this pattern for every Pagy JS extra that currently inject JS in the view.

So, it correctly triggers the Pagy render method on resize, but it does nothing. At this point I had no idea why, so I disabled CSP to give it a try without my WIP. It doesn't work, because my JS is included in the bottom of my <body> for performance purpose, so the PagyResponsive is still not defined when the Pagy <script> are injected. I think it makes this PR a bit more essential!

So, still for testing purpose, I moved my application.js to the <head> and it still not work. At this point I have no more idea to continue my work, I take a break :)

from pagy.

Bahanix avatar Bahanix commented on August 25, 2024

@ddnexus it works perfectly!

from pagy.

ddnexus avatar ddnexus commented on August 25, 2024

Great then. Thanks.

from pagy.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.