Thursday 12 February 2015

Custom Toast Titanium

index.js
var titost = require('titoast');
titost.setMessages("New message for toast");
titost.showOnView($.index);
titoast.js
var currentView;
var toastShown = false;
var toastmsg = 'toast message variable not set.';
var duration =3000;

var container = Ti.UI.createView({
    height : Ti.UI.SIZE,
    width : Ti.UI.FILL,
    bottom : '0dp',
});

var labelContainer = Ti.UI.createView({
    height : Ti.UI.SIZE,
    width : '280dp',
    borderRadius : 5,
    backgroundColor : "#000",
    opacity : 0,
    top : '10dp',
    bottom : '10dp'
});

var label = Ti.UI.createLabel({
    left : "10dp",
    right : "10dp",
    top : '10dp',
    bottom : '10dp',
    height : Ti.UI.SIZE,
    color : "#FFF",
    textAlign : "center",
    font : {
        fontSize : 13,
        fontWeight : "bold"
    },
});

labelContainer.add(label);
container.add(labelContainer);

exports.setMessages = function (msg) {
    toastmsg=msg;
};

exports.showOnView = function(view) {
    if (!toastShown) {
        toastShown = true;
        Ti.API.info('shown');
        currentView = view;
        label.text = toastmsg;
        open();
        setTimeout(function() {
            close();
        }, duration);
    }
};

function open() {   
    currentView.add(container);
    labelContainer.animate({
        opacity : 0.8,
        duration : 250
    });
};

function close() {
    labelContainer.animate({
        opacity : 0,
        duration : 250
    }, function(_event) {
        toastShown=false;
        currentView.remove(container);
        currentView = null;
    });
};

No comments:

Post a Comment