Message Dialog

app.css

.page.message {
    -webkit-box-pack: center;
    -webkit-box-align: center;
    background: rgba(0,0,0,0.75);
    z-index: 999;
}
.popup {
    display: -webkit-box;
    width: 290px;
    background: #fff;
    margin: 0 15px;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.36);
    padding: 10px;
    opacity: 0;
    -webkit-transform: scale(1.185);
}
.popup.modal-in {
    opacity: 1;
    -webkit-transition: 400ms;
    -webkit-transform: scale(1);
}
.popup.modal-out {
    opacity: 0;
    -webkit-transition: 400ms;
    -webkit-transform: scale(0.815);
}

.popup h1 {
    font-size: 17px;
    color: #1e2233;
    margin: 10px 10px 0;
}

.popup div {
    font-size: 14px;
    color: #000;
    margin: 15px 10px;
    text-align: center;
}
.popup footer {
    width: 100%;
    display: -webkit-box;
    -webkit-box-pack: end;
    margin-top: 5px;
}

.popup footer .button {
    margin-top: 0;
    margin-bottom: 0;
    height: 36px;
    background: none;
    border-radius: 0;
    color: #a0a1aa;
    font-size: 12px;
    text-transform: uppercase;
}
.popup footer .button.active {
    opacity: .5;
}
.popup footer .button.hidden {
    display: none;
}

Example.js

//Simple default example
var _this = this;
var message = new Message();
message.setTitle('Login required');
message.setContent('You must be logged in to create an event.<br />Go to settings to sign in with your google account.');

_this.context.messageManager.showMessage(message).then(function(){
    //TODO go to settings
}, function(){
    //TODO reject action
});

//Nested messages with button manipulations
var _this = this;
var message = new Message();
message.setTitle('Warning');
message.setContent('Are you sure you want to delete this event.');
message.setResolveButton(true, 'Yes');
message.setRejectButton(true, 'No');

this.context.messageManager.showMessage(message).then(function(){
    var message = new Message();
    message.setTitle('Success');
    message.setContent('The event was successfully deleted.');
    message.setRejectButton(false);
    //TODO do event delete 
    setTimeout(function(){
        _this.context.messageManager.showMessage(message).then(function(){
            //TODO notification message dismiss
        });
    }, 1000);
}, function(){
    //TODO delete event rejected
});

message.html

<div class="popup">
    <h1 id="message-title"></h1>
    <div id="message-content"></div>
    <footer>
        <button id="message-resolve-button" class="button">
            <span></span>
        </button>
        <button id="message-reject-button" class="button">
            <span></span>
        </button>
    </footer>
</div>

MessageManager.js

(function(){
    var Promise = mobile.content.Promise;
    var Intent = mobile.content.Intent;

    /*
     * How To Use
    var message = new Message();
    message.setTitle("Message Title");
    message.setContent("Message Content");

    this.context.messageManager.showMessage(message).then(function(res){
    }, function(err){
    });
    */

    register('app.Message', 
        Base.extend({
            constructor: function(){
                this.title = null;
                this.content = null;
                this.promise = new Promise();

                this.hasResolveButton = true;
                this.resolveButtonText = "Ok";

                this.hasRejectButton = true;
                this.rejectButtonText = "Cancel";
            },
            setTitle: function(title){
                this.title = title;
            },
            setContent: function(content){
                this.content = content;
            },
            setResolveButton: function(isVisible, text){
                this.hasResolveButton = isVisible;
                this.resolveButtonText = text;
            },
            setRejectButton: function(isVisible, text){
                this.hasRejectButton = isVisible;
                this.rejectButtonText = text;
            }
        })
    );

    register('app.MessageManager',
        Base.extend({
            constructor: function(context, pageName){
                this.context = context;
                this.messages = [];
                this.pageName = pageName || 'MessagePage';
            },
            showMessage: function(message){
                if(!this.page){
                    this.page = this.context.pages[this.pageName];
                    this._originalTransitionEnd = this.page.onTransitionEnd;
                    this.page.onTransitionEnd = this.onTransitionEnd.scope(this);
                }
                var _this = this;

                _this.saveMessage(message);
                if(!_this.page.isVisible){
                    _this.showMessagePage(_this.messages.shift());
                }
                return new Promise(function(resolve, reject){
                    message.promise.then(function(){
                        resolve();
                    }, function(){
                        reject();
                    });
                });
            },
            onTransitionEnd: function(){
                var _this = this;
                this._originalTransitionEnd.call(this.page);
                if(this.page.isVisible) {
                    return;
                }
                if(this.messages.length > 0){
                    setTimeout(function(){
                        _this.showMessagePage(_this.messages.shift());
                    }, 0);
                }
            },
            showMessagePage: function(message){
                var intent = new Intent(this, this.pageName);
                intent.extra.message = message;
                this.context.startPage(intent)
                this.context.overridePendingTransition('fade-in', null);
            },
            saveMessage: function(message){
                this.messages.push(message);
            }
        })
    );

})();

MessagePage.js

var MessagePage = (function(){
    var Button = mobile.widgets.Button;

    return mobile.app.Page.extend({
        onCreate: function(context){
            this.base(context);
            this.message = null;
            this.element = this.getElementById('message-page');

            this.titleElement = this.getElementById('message-title');
            this.contentElement = this.getElementById('message-content');

            this.resolveButton = new Button(this.getElementById('message-resolve-button'), true);
            this.rejectButton = new Button(this.getElementById('message-reject-button'), true);
            this.resolveButton.onTouchListener = this.onResolve.scope(this);
            this.rejectButton.onTouchListener = this.onReject.scope(this);
        },
        onResolve: function(sender){
            this.message.promise.resolve();
            this.stop();
            this.context.overridePendingTransition(null, 'fade-out');
        },
        onReject: function(sender){
            this.message.promise.reject();
            this.stop();
            this.context.overridePendingTransition(null, 'fade-out');
        },
        onStart: function(intent){
            this.base(intent);
            this.rejected = true;
            this.message = intent.extra.message;
            this.element.children[0].classList.add('modal-in');

            this.updateUI(this.message);
        },
        onTransitionEnd: function(){
            if(!this.isVisible){
                this.element.children[0].classList.remove('modal-out');
            }
        },
        onStop: function(intent){
            this.base(intent);
            this.element.children[0].classList.remove('modal-in');
            this.element.children[0].classList.add('modal-out');
        },
        updateUI: function(message){
            this.titleElement.innerHTML = message.title;
            this.contentElement.innerHTML = message.content;
            if(message.hasResolveButton){
                this.resolveButton.element.classList.remove('hidden');
                this.resolveButton.element.children[0].innerHTML = message.resolveButtonText;
            }else{
                this.resolveButton.element.classList.add('hidden');
            }
            if(message.hasRejectButton){
                this.rejectButton.element.classList.remove('hidden');
                this.rejectButton.element.children[0].innerHTML = message.rejectButtonText;
            }else{
                this.rejectButton.element.classList.add('hidden');
            }
        }
    });
})();