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 });