Customizing Infinite Scroll/ Pull to Refresh Icons


#1

Hi,

As provided in the docs, the ion-refresher directive can be customized to a large extent. In a similar manner, can the ion-infinite-scroll directive be customized a bit, say change the animated icon in use? I would really like to be able to specify an icon to be used myself.


#2

You can customize it.

Here’s a rather old and ugly modification : http://plnkr.co/edit/3AhwbOSRdbEfI70VJS1o

You just need to modify the CSS for .scroll-refresher and .ionic-refresher-content


#3

Hi @Calendee, thanks for your reply but you sort of misread my question. What I really want to do is be able to alter the animated icon the directives use by default, that is, make use of ‘ion-loading-c’ or something else rather than the default ‘ion-loading-d’ for pull to refresh and infinite scroll.
In short, is there a way to override the templates for the directives?


#4

@tolu360 I understood and misunderstood at the same time!

Unfortunately, the ionRefresher directive is hard-coded. It doesn’t have an interface for changing the template or passing in a template.

From the “ionicContent” file:

.directive('ionRefresher', function() {
  return {
    restrict: 'E',
    replace: true,
    require: ['^?ionContent', '^?ionList'],
    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-d icon-refreshing"></i></div></div>',
    scope: true
  };
})

You could try to override the default directive, but I dabbled and had no success. You could Extend Ionic, but that’s way over my head to setup a sample.

I’ve opened a feature request ( # 760 ) : https://github.com/driftyco/ionic/issues/760


#5

Thanks for your feedback @Calendee. I was able to override the ion-refresher directive as below but no luck with the ion-infinite-scroll so the feature request was in order!

.directive('myRefresher', function() {
      return {
        restrict: 'E',
        replace: true,
        require: ['^?ionContent', '^?ionList'],
        template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-c icon-refreshing"></i></div></div>',
        scope: true
      };
    });

#6

@tolu360 You can just ‘extend’ the ionRefresher directive in your own module like this:

// Somewhere in app.js you've defined this:
angular.module('yourApp.modules', [
    // optional dependencies
]);

// And this:
angular.module('yourApp', [
    'yourApp.modules'
    // and other dependencies
]);

//*** The actual example starts here ***//

angular.module('yourApp.modules')

.directive('ionRefresher', function() {
  return {
    priority: 1, // make sure it runs AFTER the original ionRefresher
    template: '<div class="scroll-refresher"><div class="ionic-refresher-content"><i class="icon ion-arrow-down-c icon-pulling"></i><i class="icon ion-loading-c icon-refreshing"></i></div></div>'
  };
});

If I’m not mistaken, due to the fact that you’re overwriting the original, you only have to define the actual properties that have changed and thus there is no need for scope, require, replace, etc.

Let me know if this worked :smile:


#7

@tolu360 : I was able to get your version working. Nice job with that. Example : http://plnkr.co/edit/1sPIdMrjzuxFT19MPuvT

@Robin I couldn’t get your version working. Any ideas? http://plnkr.co/edit/OjWxtX43WvHXm8AhAbC2?p=preview


#8

Thanks @Calendee and @Robin. Couldn’t get @Robin’s version to work either!


#9

My bad. Should be working when you add restrict: 'E',

See: http://plnkr.co/edit/GOWqsfsN326kPEN9xWUB

I used this resource to come to this solution:
http://stackoverflow.com/questions/17005122/extending-angular-directive (see the answer to that question)


#10

@Robin I seem to be getting this Error: $compile:multidir Multiple Directive Resource Contention. Any ideas?


#11

@tolu360 Can you reproduce this in a plnkr for me?


#12

@Robin please see: http://codepen.io/tolu360/pen/dfxan

It might actually be an angular 1.2 issue. I read somewhere that in 1.2+, multiple directives cannot perform transclusion on a single DOM node. Please review my codepen example though.


#13

Apparently my solution wasn’t flawless… When extending directives like this, its prohibited to declare a new template file.
What you can do however is skip the template defintion and use link: function (scope, element) {} to manipulate your original directive.

In this case, inside the link method you can do

element
    .find('.cool-icon-thingy')
    .removeClass('cool-icon')
    .addClass('awesome-icon');

Thats what I have been doing for ion-content as well. Just manipulated the link function


#14

Update : The feature request has been completed. However, this is a breaking change.
See notes here : https://github.com/driftyco/ionic/commit/573df56db4d79eee517df61b45c4f780a58ce4f8

Here is a new working sample :


Using a custom PNG icon in Ion-refresher
#15

Hi @Calendee thank you for following this through!


#16

Dude, you rock! Awesome update and awesome example.

I was just figuring out why my pull to refresh wasn’t working anymore and then I noticed a reply on this post where you posted the link to the change.

@andy Good work on the very descriptive change log. Helped me out instantly and gives me the confidence and courage to use the nightly build in my production app.

By the way; is there any documentation yet on the new ion-refresher? I’m diving into the source code as we speak…


#17

That change log example I linked to will eventually become the docs for ion-refresher. Devs are working on self-documenting feature that will rolll out ??

So, the docs are essentially already in Andy’s code changes.


#18

@Calendee I saw you using some stuff that wasn’t mentioned in that changelog, hence my question. But as a developer, I’m not allergic to diving into the code in my search for an API.


#19

Oh, I see what you are talking about. Probably because deeper in the code is this:

 @param {expression=} on-refresh Called when the user pulls down enough and lets go 
 + * of the refresher.
 + * @param {expression=} on-pulling Called when the user starts to pull down 
 + * on the refresher.
 + * @param {string=} pulling-icon The icon to display while the user is pulling down.  
 + * Default: 'ion-arrow-down-c'.
 + * @param {string=} pulling-text The text to display while the user is pulling down. 
 + * @param {string=} refreshing-icon The icon to display after user lets go of the 
 + * refresher.
 + * @param {string=} refreshing-text The text to display after the user lets go of
 + * the refresher.
 + *

Again, that will be part of the documentation. Right now, the top of Adam’s changelog doesn’t show all the params.


#21

Is there a good Code Pen out there that shows how a custom ion-refresher would work? I’d like to use my own SVG here. Did you get this working @Calendee?