Add activity binding support for font-awesome spinners.

[niemyjski]

It would be nice if you could add activity support for font-awesome spinners. Also it would be really nice to be able to have default text,, loading text and completed text that changes once a specific command state changed like if this observable becomes dirty..

Scenario: I have a save button. I could specify the button text. Save, Saving, Saved... Right now you can do the save and saving text with a knockout template and look at the is executing..

[hfjallemark]

The font-awesome spinner is something I've thought about since they released it, looks really slick and could simplify a lot of things - how good is the browser support for the spinner classes?

I will look into how the texts can be implemented, I did something similar a year back but not integreated with the async command.

[niemyjski]

It's worked really well for us and seems to work in every browser. Here is what I ended up doing :)

<button class="btn btn-primary" data-bind="command: saveCommand, template: { name: 'command-button-template', data: { command: saveCommand, name: 'Save', executingName: 'Saving' } }" />

<script type="text/html" id="command-button-template">
    <!-- ko ifnot: $data.command.isExecuting -->
    <span data-bind="text: $data.name"></span>
    <!-- /ko -->
    <!-- ko if: $data.command.isExecuting -->
    <i data-bind="css: $data.command.isExecuting ? 'icon-refresh icon-spin' : ''"></i> 
    <span data-bind="text: $data.executingName"></span>
    <!-- /ko -->
</script>

I'm sure it could be done much cleaner..

[hfjallemark]

Neat. So the icon-spin animation class works in all browsers?

[niemyjski]

Yeah, Every browser I've tested it against. I'm pretty sure it works across the board as all of their stuff is heavily tested. You have to put the icon-refresh icon-spin class on a child element otherwise your element will spin :)

[niemyjski]

They say Ie7 support. I don't have a box around that has ie6 to test let alone care about ie6 :).

[hfjallemark]

Awesome. Then I will probably go ahead and get rid of the whole jQuery activity plugin all together, which will make it a lot lighter and less hacky :-)

[niemyjski]

Awesome!

[neoDD69]

Awesome!

niemyjski, thanks very much for sharing you great trick!

For me, in Chrome 26.0 the icon-spin class dont work :(

But I binded activity and I got the name changing plus the spin animation done by KoLite ;).

<button class="btn btn-primary " data-bind="activity: save.isExecuting, command: save, template: { name: 'command-button-template', data: { command: save, name: 'Save', executingName: 'Saving' } }" />
<script type="text/html" id="command-button-template">
    <!-- ko ifnot: $data.command.isExecuting -->
    <span data-bind="text: $data.name"></span>
    <!-- /ko -->
    <!-- ko if: $data.command.isExecuting -->
   <span data-bind="text: $data.executingName"></span>
    <!-- /ko -->
</script>

For fun I tried to bind activity to the FORM

<form  data-bind="activity: save.isExecuting" />

and a big, but rough, spin will animate over all a form surface!
Pretty, but to use this trick in a end-user app I need to found how to customize the spin drwaed by knockout.activity.js ... any idea where I can found any information/examples?

[niemyjski]

For it to work you have to be using font-awesome 3.x

[niemyjski]

You might also want to look into the spin js library as that works better on anything not a button.

[neoDD69]

niemyjski, thanks very much for these two tricks!!

Yes, with font-awesome it works.
I have not had time to look spin js library, but your idea about the use of template with asyncCommands work fine with out this lib.

I've chged a little the template of your example and works:

<script type="text/html" id="command-button-template">
    <!-- ko ifnot: $data.command.isExecuting -->
        <span style="font-size:28px;" data-bind="text: $data.name"></span>
        <i class="icon-ok icon-2x"></i> 
    <!-- /ko -->
    <!-- ko if: $data.command.isExecuting -->
    <div>
        <i class="icon-spinner icon-spin icon-2x"></i>
        <span data-bind="text: $data.executingName"></span>
    </div>
    <!-- /ko -->
</script>

You can see the result on this page: http://coagent.azurewebsites.net/CoAgent/SchClienteNuovo.aspx?ID=f27d473e-aa03-4400-ba0d-6407a235f4b1

That is a part of WebApp-prototype that I'm using to test the new features for the Web-based UI ... you can try any actions, is not production env ;)
I came from .Net-C#-WinForm-Wpf skills.

[acornejo]

I've created a pull request #39 that should close this issue. By default it uses font-awesome spinner icon, but it can be customized to user other icons (or other classes).

[hfjallemark]

Fixed in #39 by @acornejo.