Customize the look

[orck-adrouin]

Hello,

is it possible to customize the look of pulltorefresh.js? I like this library and it works very well, however I would like to have more of an Android look (see screenshot below) for a progressive web app that I am developing.

[faelsoto]

That's in our roadmap, however there's no branch for it. Maybe you contribute by starting it?

[orck-adrouin]

I was able to achieve the look I wanted by heavily customizing the styles and using a rotating svg element for instructionsPullToRefresh.

[pateketrueke]

Additionally you can use the options getMarkup and getStyles for custom templating and such.

Both options should be functions and must return html/css respectively, I think is better than heavely override the css.

Of course, it would be helpful to know how you did it.

[orck-adrouin]

This is what I meant by 'overriding the css':

This Javascript code is used in a React component but it should still be clear what I changed

// somewhere in my componentWillMount
PtrJs.init({
      mainElement: '#ptr123',
      cssProp: 'top',
      iconArrow: '',
      iconRefreshing: '',
      instructionsRefreshing: ' ',
      instructionsReleaseToRefresh: '<div style="display: inline-block; height: 40px;">' + this.getReleaseIcon() + '</div>',
      instructionsPullToRefresh: '<div style="display: inline-block; height: 40px;">' + this.getPullIcon() + '</div>',
    getStyles: this.getStyles()
    onRefresh: function(done) { ... }

My getStyles method:

getStyles: function() {

        return ".__PREFIX__ptr { " +
               "      position: absolute; " +
               "      z-index: 1000;  " +
               "      pointer-events: none; " +
               "      font-size: 0.85em; " +
               "      font-weight: bold; " +
               "      top: 0; " +
               "      height: 40px; " +
               "      margin-top: -55px; " +
               "      transition: height 0.3s, min-height 0.3s; " +
               "      text-align: center; " +
               "      width: 100%; " +
               "      overflow: hidden; " +
               "      display: flex; " +
               "      align-items: flex-end; " +
               "      align-content: stretch; " +
               "    } " +
               "      .__PREFIX__box { " +
               "    " +
               "    flex-basis: 100%; " +
               "  } " +
               ".__PREFIX__pull { " +
               "    transition: none; " +
               "  } " +
               ".__PREFIX__text { " +
               "    margin-top: .33em; " +
               "    color: rgba(0, 0, 0, 0.3); " +
               "  } " +
               ".__PREFIX__icon { " +
               "    color: rgba(0, 0, 0, 0.3); " +
               "    transition: transform .3s; " +
               "    display: none; " +
               "  } " +
               ".__PREFIX__top { " +
               "    touch-action: pan-x pan-down pinch-zoom; " +
               "  } " +
               ".__PREFIX__release .__PREFIX__icon { " +
               "    transform: rotate(180deg); " +
               "  }";
      },

<div style={{position: 'relative', minHeight: '50vh'}}>
  <div id="ptr123">
      <div style={{width: '100%'}}>
         <!-- this is the content of my React page -->
        <PureRefreshIndicator isVisible={isLoading}
                              offset={offset - indicatorSize + max - 15} />
        {children}

        <input type="text"/>
      </div>
    </div>
</div>

This is how it looks:

[orck-adrouin]

I forgot to attach the image...

[akash-pal]

please share your entire code.