Scroller ready event ?

Hi,

I want to decorate my Scrollers to show arrows for scrolling manually (and to see more easily that user can scroll, it's not always obvious imo).
I succeeded to show those arrows on resize and onscroll, but i can't find a way to init those, depending on scrollBounds, when the children are set and rendered into the scroller.

Is there any event which could fire my decorate method ?
NB: my scrollers store DataRepeater, but I would enjoy to have a standard solution.

My code:
enyo.kind({
    name: 'Beshamel.Scroller',
    kind: 'enyo.Scroller',
    handlers: {
        onScroll: 'decorate',
        onresize: 'decorate'
    },
    initComponents: enyo.inherit(function (sup) {
            return function() {
                this.createComponents([{name: "topDecorator", classes: "top-decorator"},{name: "bottomDecorator", classes: "bottom-decorator"}]);
                sup.apply(this, arguments);
            };
    }),
    decorate:  function() {
        var bounds = this.$.strategy._getScrollBounds();
        this.addRemoveClass('scroller-top-decorator', bounds.top > 0);
        this.addRemoveClass('scroller-bottom-decorator', bounds.top < bounds.maxTop);
    }
});
Thank you :)

Comments

  • Try overriding rendered:
    rendered: enyo.inherit(function(sup) {
        return function rendered() {
            sup.apply(this, arguments);
            this.decorate();
        };
    })
  • I think i already tried this solution, but now, it's not working.
    DataRepeaters are populated async (or kind of), so I must decorate it once it's populated, i did not found a solution to trigger it at the right moment.
  • I'm trying to understand how Moon.Scroller could have solved my problem, but i'm not really sure it does.
    So i'm still hoping someone have an idea about how to trigger the initialization once the cointainer has its full size, maybe some moon authors could help.
    Thanks.
  • Are you populating your data from an external source? I modified our DataRepeater sample to conditionally display something on the top and bottom in this fiddle: http://jsfiddle.net/aarontam/9U6NY/
  • Yes, i populate it from a async REST API, which could change the inner height of the container at any moment. But I didn't found an event when the height is changed (from the Scroller or ScrollStragegy), without tweaking all DataRepeaters or List to specifically send it.
    Is that the only solution, to tweak child component ?

    I'll try to bind modelsAdded, collectionChanged, and others to do so.
  • edited February 2014
    The best working solution i just found:
    enyo.kind({
        name: 'Beshamel.DataRepeater',
        kind: 'enyo.DataRepeater',
        events: {
            onRefresh: ''
        },
        modelsAdded: enyo.inherit(function (sup) {
            return function () {
                sup.apply(this, arguments);
                this.doRefresh();
            };
        }),
        modelsRemoved: enyo.inherit(function (sup) {
            return function () {
                sup.apply(this, arguments);
                this.doRefresh();
            };
        }),
        refresh: enyo.inherit(function (sup) {
            return function () {
                sup.apply(this, arguments);
                this.doRefresh();
            };
        }),
        collectionChanged: enyo.inherit(function (sup) {
            return function () {
                sup.apply(this, arguments);
                this.doRefresh();
            };
        })
    })
    and calling:
    {name: 'equipments', kind: "Beshamel.DataRepeater",
                                    onRefresh: 'decorate'}
    ...
        decorate: function(inSender,inEvent) {
            inSender.container.decorate();
        }
    I don't know if i can automatically handle event from scroller or datarepeater, would it be reasonable to call from datarepeater something like this.container.decorate ?
  • Have you tried handling the refresh event in the Scroller? The event should bubble up.
  • Yeah perfect, it works. Thanks

    Don't DataRepeaters (and other controls) may need to trigger a refresh event to solve this kind of issue ?
    I mean, it could be useful depending on the app to have features depending on this specific moment, when control are populated with async method.
    I just added a doRefresh in refresh.
Sign In or Register to comment.