Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

List view Pull to refresh

$
0
0

I am trying to implement list view pull to refresh functionality and making use of this widget But here the problem is the pull to refresh event is fired too quickly, what i mean by that is even when the user has just scrolled to the top the pull to refresh event is triggered. I am not able to figure out what exactly needs to be done here to prevent this from happening and ensure refresh event is fired only when the user actually does a pull action here is the file widget.js

var args = arguments[0] || {};
 
var api = {
    // initialization of our variables
    callback: null,
 
    content: null,
    contentView: null,
    headerPullView: null,
    headerPullControl: null,
    headerPullViewSize : 60,
    headerPullViewArgs : [],
 
    // ios ptr parameters
    iosRefreshControl: [],
 
    // android ptr flags
    isChecking: false,
    offset: 0, // The position of the scroll considering the pull action
    previousOffset: 0,
    pulling: false,
    reloading: false, // boolean to know if it's already reload
 
    initialize: function(parameters) {
        parameters.arguments = parameters.arguments || {};
 
        // create the controller given in argument witch we give the var api in argument
        api.content = Alloy.createController(parameters.controller, { pulltorefresh: api, arguments: parameters.arguments });
 
        api.contentView = api.content.getView();
 
        if (OS_IOS) {
            if (parameters.iosRefreshControl) {
                api.iosRefreshControl.tintColor = parameters.iosRefreshControl.tintColor ? parameters.iosRefreshControl.tintColor : 'black';
                api.iosRefreshControl.title = parameters.iosRefreshControl.title ? parameters.iosRefreshControl.title : null;
            }
 
            var control = Ti.UI.createRefreshControl({
                tintColor: api.iosRefreshControl.tintColor,
                title: api.iosRefreshControl.title
            });
            control.addEventListener('refreshstart', api.doRefresh);
            api.contentView.refreshControl = control;
 
            $.pulltorefresh.add(api.contentView);
        }
        // Our headerpullView for other devices
        else {
 
            if (parameters.headerPullView) {
                api.headerPullViewArgs = parameters.headerPullView;
                if (parameters.headerPullView.view) {
                    api.headerPullViewSize = parameters.headerPullView.view.size ? parameters.headerPullView.view.size : 60;
                }
            }
 
            // create the controller headerPullView
            api.headerPullControl = Widget.createController('headerPullView', { parameters: api.headerPullViewArgs });
            api.headerPullView = api.headerPullControl.getView();
 
            // add it in the ptr scrollview
            $.container.add(api.headerPullView);
            $.container.addEventListener('touchend', api.touchEnd);
            $.container.addEventListener('scroll', api.scroll);
 
            // add the content to the root of the ptr component
            $.container.add(api.contentView);
        }
    },
 
    /*
     * Callback function to refresh the data
     * of your ListView
     */
    doRefresh: function() {
        if (api.callback) {
            api.callback();
        } else {
            api.stop();
        }
    },
 
    setCallback: function(callback) {
        api.callback = callback;
    },
 
    // only for Android
    scroll: function(e) {
        if (e.y != null) {
            api.offset = e.y;
        }
 
        if (!api.isChecking) {
            api.isChecking = true;
 
            var interval = setInterval(function() {
                if (api.previousOffset != api.offset) {
                    api.previousOffset = api.offset;
                    api.isChecking = true;
                } else {
 
                    if (api.offset !== api.headerPullViewSize * Ti.Platform.displayCaps.logicalDensityFactor){
 
                        // the scroll has ended \o/
                        clearInterval(interval);
                        api.isChecking = false;
                        api.touchEnd();
                    }
                }
            }, 2000);
        }
 
        if (api.offset <= 0 && !api.pulling) {
            api.pulling = true;
            api.headerPullControl.pulling();
        } else if (api.pulling && api.offset >= 1 && api.offset < api.headerPullViewSize * Ti.Platform.displayCaps.logicalDensityFactor) {
 
            api.pulling = false;
            api.headerPullControl.pullingStop();
        }
    },
 
    /**
     *   contentHeight: height of the content
     *   hideHeight : size of the header - size of the navBar if there is a navBar
     */
    stop: function(contentHeight, hideHeight) {
        hideHeight = hideHeight || 0;
 
        if (OS_ANDROID) {
            api.reloading = false;
            $.container.scrollTo(0, api.headerPullViewSize * Ti.Platform.displayCaps.logicalDensityFactor);
            api.headerPullControl && api.headerPullControl.updateComplete();
 
            if (contentHeight) {
                $.container.contentHeight = hideHeight * Ti.Platform.displayCaps.logicalDensityFactor
                    + Math.max(contentHeight * Ti.Platform.displayCaps.logicalDensityFactor, Ti.Platform.displayCaps.platformHeight);
            }
        } else {
            if (api.contentView && api.contentView.refreshControl) {
                api.contentView.refreshControl.endRefreshing();
            }
        }
    },
 
    /*
     *
     */
    touchEnd: function(e) {
        if (api.offset <= 0) {
            if (api.pulling && !api.reloading) {
                api.reloading = true;
                api.pulling = false;
                api.headerPullControl.pullingComplete();
                api.doRefresh();
            }
 
        } else if (api.offset < api.headerPullViewSize * Ti.Platform.displayCaps.logicalDensityFactor) {
            api.pulling = false;
            api.headerPullControl.pullingStop();
            api.stop();
        }
    },
};
 
exports.initialize = api.initialize;
and headerpullview.js
var args = arguments[0] || {};
var parameters = args["parameters"] || {};
 
var moment = require('alloy/moment');
 
var api = {
 
    initialize : function() {
        if (parameters) {
            if (parameters.view) {
                $.headerPullView.height = parameters.view.size ? parameters.view.size : 60;
                $.headerPullView.backgroundColor = parameters.view.backgroundColor ? parameters.view.backgroundColor :'FFF';
            }
 
            if (parameters.border) {
                $.border.backgroundColor = parameters.border.backgroundColor ? parameters.border.backgroundColor : 'black';
                $.border.height = parameters.border.height ? parameters.border.height : 2;
            }
 
            if (parameters.arrow) {
                $.arrow.backgroundImage = parameters.arrow.backgroundImage ? parameters.arrow.backgroundImage : WPATH('/images/arrow.png');
                $.arrow.bottom = parameters.arrow.bottom ? parameters.arrow.bottom : 7;
                $.arrow.height = parameters.arrow.height ? parameters.arrow.height : 45;
                $.arrow.left = parameters.arrow.left ? parameters.arrow.left : 35;
                $.arrow.width = parameters.arrow.width ? parameters.arrow.width : 11;
            }
 
            if (parameters.indicator) {
                $.indicator.bottom = parameters.indicator.bottom ? parameters.indicator.bottom : "auto";
                $.indicator.left = parameters.indicator.left ? parameters.indicator.left : "auto";
                $.indicator.right = parameters.indicator.right ? parameters.indicator.right : "auto";
                $.indicator.top = parameters.indicator.top ? parameters.indicator.top : 0;
            }
 
            if (parameters.status) {
                $.status.bottom =  parameters.status.bottom ? parameters.status.bottom : 30 ;
                $.status.color = parameters.status.color ? parameters.status.color: "black";
                $.status.font = parameters.status.font ? parameters.status.font : { fontSize : 13, fontWeight: "bold" };
                $.status.height = parameters.status.height ? parameters.status.height: "auto";
                $.status.textAlign = parameters.status.textAlign ? parameters.status.textAlign : "center";
                $.status.width = parameters.status.width ? parameters.status.width: 200;
            }
 
            if (parameters.lastUpdate) {
                $.lastUpdate.bottom = parameters.lastUpdate.bottom ? parameters.lastUpdate.bottom :  15,
                $.lastUpdate.color = parameters.lastUpdate.color ? parameters.lastUpdate.color :  "black",
                $.lastUpdate.font = parameters.lastUpdate.font ? parameters.lastUpdate.font : { fontSize: 12 },
                $.lastUpdate.height = parameters.lastUpdate.height ? parameters.lastUpdate.height :  "auto",
                $.lastUpdate.textAlign = parameters.lastUpdate.textAlign ? parameters.lastUpdate.textAlign : "center";
                $.lastUpdate.width = parameters.lastUpdate.width ? parameters.lastUpdate.width: 200;
            }
        }
    },
 
    formatDate: function(date) {
        var date = date ? date : new Date();
        return moment(date).format('LLL');
    },
 
    pulling: function() {
        var t = Ti.UI.create2DMatrix();
        t = t.rotate(-180);
        $.arrow.animate({
            transform: t,
            duration: 180
        });
        $.status.text = L('release_to_update');
    },
 
    pullingComplete: function() {
        $.arrow.hide();
        $.indicator.show();
        $.status.text = L('loading');
        $.arrow.transform = Ti.UI.create2DMatrix();
    },
 
    pullingStop: function() {
        var t = Ti.UI.create2DMatrix();
        $.arrow.animate({
            transform: t,
            duration: 180
        });
        $.status.text = L('pull_to_reload');
    },
 
    updateComplete: function() {
        $.indicator.hide();
        $.arrow.show();
        $.status.text = L('pull_to_reload');
        $.lastUpdate.text = L('updated_at') + ' ' + api.formatDate();
    }
};
 
exports.pulling = api.pulling;
exports.pullingComplete = api.pullingComplete;
exports.pullingStop = api.pullingStop;
exports.updateComplete = api.updateComplete;
 
api.initialize();
api.updateComplete();
thanks

Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>