1 // ==========================================================================
  2 // Project:   The M-Project - Mobile HTML5 Application Framework
  3 // Copyright: (c) 2010 M-Way Solutions GmbH. All rights reserved.
  4 // Creator:   Dominik
  5 // Date:      23.11.2010
  6 // License:   Dual licensed under the MIT or GPL Version 2 licenses.
  7 //            http://github.com/mwaylabs/The-M-Project/blob/master/MIT-LICENSE
  8 //            http://github.com/mwaylabs/The-M-Project/blob/master/GPL-LICENSE
  9 // ==========================================================================
 10 
 11 m_require('ui/dialog.js');
 12 
 13 /**
 14  * @class
 15  *
 16  * This is the prototype for any alert dialog view. It is derived from M.DialogView
 17  * and mainly used for implementing a alert dialog view specific render method.
 18  *
 19  * @extends M.DialogView
 20  */
 21 M.AlertDialogView = M.DialogView.extend(
 22 /** @scope M.AlertDialogView.prototype */ {
 23 
 24     /**
 25      * The type of this object.
 26      *
 27      * @type String
 28      */
 29     type: 'M.AlertDialogView',
 30 
 31     /**
 32      * The default title of an alert dialog.
 33      *
 34      * @type String
 35      */
 36     title: 'Alert',
 37 
 38     /**
 39      * The default message of an alert dialog.
 40      *
 41      * @type String
 42      */
 43     message: '',
 44 
 45     /**
 46      * Determines whether the alert dialog gets a default ok button.
 47      *
 48      * @type Boolean
 49      */
 50     hasConfirmButton: YES,
 51 
 52     /**
 53      * Determines the value of the button, means the text label on it.
 54      *
 55      * @type String
 56      */
 57     confirmButtonValue: 'Ok',
 58 
 59     /**
 60      * If set, contains the dialog's callback in a sub object named 'confirm' or as a function named confirm.
 61      *
 62      * @type Object
 63      */
 64     callbacks: null,
 65 
 66     /**
 67      * Renders an alert dialog as a pop up
 68      *
 69      * @private
 70      * @returns {String} The alert dialog view's html representation.
 71      */
 72     render: function() {
 73         this.html = '<div class="tmp-dialog-background"></div>';
 74         this.html += '<div id="' + this.id + '" class="tmp-dialog">';
 75         this.html += '<div class="tmp-dialog-header">';
 76         this.html += this.title ? this.title : '';
 77         this.html +='</div>';
 78         this.html += '<div class="tmp-dialog-content">';
 79         this.html += this.message;
 80         this.html +='</div>';
 81         var button;
 82         if(this.hasConfirmButton) {
 83             this.html += '<div class="tmp-dialog-footer">';
 84             var that = this;
 85             button = M.ButtonView.design({
 86                 value: this.confirmButtonValue,
 87                 cssClass: 'b tmp-dialog-smallerbtn',
 88                 events: {
 89                     tap: {
 90                         target: that,
 91                         action: 'handleCallback'
 92                     }
 93                 }
 94             });
 95             this.html += button.render();
 96             this.html += '</div>';
 97         }
 98         this.html += '</div>';
 99 
100         $('body').append(this.html);
101         if(button.type) {
102             button.registerEvents();
103             button.theme();
104         }
105     },
106 
107     show: function() {
108         /* call the dialog's render() */
109         this.render();
110         var dialog = $('#' + this.id);
111         var background = $('.tmp-dialog-background')    ;
112 
113         this.positionDialog(dialog);
114         this.positionBackground(background);
115 
116         dialog.addClass('pop in');
117     },
118 
119     hide: function() {
120         var dialog = $('#' + this.id);
121         var background = $('.tmp-dialog-background');
122         dialog.addClass('pop out');
123         background.remove();
124         this.destroy();
125 
126         /* now wait 100ms and then call the next in the queue */
127         var that = this;
128         window.setTimeout(function() {
129             M.DialogView.isActive = NO;
130             that.dequeue();
131         }, 100);
132     },
133 
134     handleCallback: function() {
135         this.hide();
136         if(this.callbacks && M.EventDispatcher.checkHandler(this.callbacks.confirm)){
137             this.bindToCaller(this.callbacks.confirm.target, this.callbacks.confirm.action)();
138         }
139     },
140 
141     positionDialog: function(dialog) {
142         /* position alert in the center of the possibly scrolled viewport */
143         var screenSize = M.Environment.getSize();
144         var scrollYOffset = window.pageYOffset;
145         var scrollXOffset = window.pageXOffset;
146         var dialogHeight = dialog.outerHeight();
147         var dialogWidth = dialog.outerWidth();
148 
149         var xPos = scrollXOffset + (screenSize[0]/2);
150         var yPos = scrollYOffset + (screenSize[1]/2);
151 
152         dialog.css('position', 'absolute');
153         dialog.css('top', yPos + 'px');
154         dialog.css('left', xPos + 'px');
155         dialog.css('z-index', 10000);
156         dialog.css('margin-top', '-' + (dialogHeight/2) + 'px');
157         dialog.css('margin-left', '-' + (dialogWidth/2) + 'px');
158     },
159 
160     positionBackground: function(background) {
161         background.css('height', $(document).height() + 'px');
162         background.css('width', $(document).width() + 'px');
163     }
164 
165 });