jQuery version

[marcobiedermann]

Can you also release a jqueryfied version of your plugin?!

[inorganik]

Why do you need a jQuery version?

[marcobiedermann]

If you got multiple elements which you want to call your method on and for chaining.

[inorganik]

You want multiple elements to animate to the same number?

[marcobiedermann]

No. I want three elements with different numbers. I do not want to use three different IDs, instead I would like to call the countUp method on all elements with a class of .count-up for example. The different options should be passed with each elements data-attribute.

[inorganik]

I don't have any plans to build this, but you are welcome to! I'll leave the issue open in case anyone else wants to take it on.

[trevanhetzel]

For those like @marcobiedermann that want to animate multiple elements with different numbers without having to use different IDs, this does the trick (albeit not as performant as modifying the plugin itself to accept classes):

$.each($('.js-countup'), function () {
    var count = $(this).data('count'),
        numAnim = new CountUp(this, 0, count);

    numAnim.start();
});

The markup then just needs a class and data attribute:

<span class="js-countup" data-count="97"></span>
<span class="js-countup" data-count="73"></span>
<span class="js-countup" data-count="67"></span>

[marcobiedermann]

Nice, thanks @trevanhetzel

[hhsnopek]

@inorganik this can be closed out I believe

[inorganik]

I might actually make a jQuery version at some point. Or someone else can.

[hhsnopek]

Why make a jQuery version when countUp can be updated to allow classes and an config option to read data-attributes?

[inorganik]

Although @trevanhetzel's solution is great stopgap measure, a jQuery version could offer things like method chaining, control over more params, and more control over when animations run.

[hhsnopek]

I think if we were to do anything like chaining and such we should just convert the library to ES6 then implement native ES6 promises. We could then make those part of the public api and allow chaining. We can then use babel to support es5 until all browsers support es6.

[inorganik]

That's one way to do it.... I think a lot of new devs like the ease of jQuery though.

Babel looks cool, I hadn't heard of it.

[hhsnopek]

The problem is that all devs are relying on jQuery which we don't want to do. If I want to use chaining I shouldn't have to load jQuery just to do so. A majority of devs don't know the power of promises until they've used them as well. It's better than jQueries "promise" implementation and also native. Plus making jQuery a requirement means that we have to test against new versions of jQuery.

I'm fine with using jQuery, but if countUp started to need jQuery by default that would mean that countUp is no longer light and self sufficient. To me and other devs is one of the most appealing parts of a library, being light and self sufficient.

[inorganik]

countUp will never depend on jQuery - I'm just saying we have it as a separate offering. I know too many people rely on jQuery, but one little lib that forces them to use vanilla js is not enough to convert them. Fact is jQuery is a great convenience, it's even built into Angular. I think it would be a nice thing to offer separately... btw if you ever want to chat more about this stuff hit me up on gchat, we can keep the github spam to a minimum

[inorganik]

Now included.

[ghost]

And how would you use the jQuery version with bower?

[oalexdoda]

bower install countUp.js --save and then include it from the root of the module (bower_components/countup.js/countUp-jquery.js)

[ghost]

That won't work in my scenario and is not how bower is intended to be used.

[oalexdoda]

Then install it via bower as I indicated and then use a task runner like Grunt to copy it to your JS vendor directory. I use this to get everything from bower / npm to my assets/js/vendor: https://github.com/gruntjs/grunt-contrib-copy

[ghost]

Not a viable solution to introduce new stuff to get this to work. And still, not how bower is intended to be used.

I know of 10 different ways to make it work, that's not the issue, the issue is that this doesn't work out of the box with bower.

[oalexdoda]

Not sure what you mean by that.

[inorganik]

@fjeddy, If I included the jquery version in the bower file, people who aren't using jquery in their projects would have the same issue you are having with angular in the issue you filed, #177 - They would get a jQuery undefined error.

The plan is to remove angular from the bower file. Then have separate projects in bower for angular and jquery. That way you'll have three bower projects to choose from so you get only what you need:

• countUp.js
• countUp.js angular
• countUp.js jquery

This hasn't been done yet.

[oalexdoda]

Still, what do you mean by "not how it's intended to be used" ? 👯‍♂️ 😄