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 confirm dialog view. It is derived from M.DialogView 17 * and mainly used for implementing a confirm dialog view specific render method. 18 * 19 * @extends M.DialogView 20 */ 21 M.ConfirmDialogView = M.DialogView.extend( 22 /** @scope M.ConfirmDialogView.prototype */ { 23 24 /** 25 * The type of this object. 26 * 27 * @type String 28 */ 29 type: 'M.ConfirmDialogView', 30 31 /** 32 * The default title of an confirm dialog. 33 * 34 * @type String 35 */ 36 title: 'Confirm', 37 38 /** 39 * The default message of an confirm dialog. 40 * 41 * @type String 42 */ 43 message: '', 44 45 /** 46 * Determines the value of the button, means the text label on it. 47 * 48 * @type String 49 */ 50 confirmButtonValue: 'Ok', 51 52 /** 53 * Determines the value of the button, means the text label on it. 54 * 55 * @type String 56 */ 57 cancelButtonValue: 'Cancel', 58 59 /** 60 * If set, contains the dialog's callbacks in sub objects named 'confirm' and 'cancel' or as functions named confirm and cancel. 61 * 62 * @type Object 63 */ 64 callbacks: null, 65 66 /** 67 * Renders a confirm dialog as a pop-up. 68 * 69 * @private 70 * @returns {String} The confirm 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 this.html += '<div class="tmp-dialog-footer">'; 82 var that = this; 83 /* build confirm button */ 84 var button = M.ButtonView.design({ 85 value: this.confirmButtonValue, 86 cssClass: 'b tmp-dialog-smallerbtn-confirm', 87 events: { 88 tap: { 89 target: that, 90 action: 'confirmed' 91 } 92 } 93 }); 94 /* build cancel button */ 95 var button2 = M.ButtonView.design({ 96 value: this.cancelButtonValue, 97 cssClass: 'd tmp-dialog-smallerbtn-confirm', 98 events: { 99 tap: { 100 target: that, 101 action: 'canceled' 102 } 103 } 104 }); 105 /*Grid View for positioning buttons*/ 106 var grid = M.GridView.design({ 107 childViews: 'confirm cancel', 108 layout: M.TWO_COLUMNS, 109 confirm: button, 110 cancel: button2 111 }); 112 this.html += grid.render(); // renders also buttons (childViews) 113 this.html += '</div>'; 114 this.html += '</div>'; 115 116 $('body').append(this.html); 117 if(button.type) { 118 button.registerEvents(); 119 button.theme(); 120 } 121 if(button2.type) { 122 button2.registerEvents(); 123 button2.theme(); 124 } 125 }, 126 127 show: function() { 128 this.render(); 129 var dialog = $('#' + this.id); 130 var background = $('.tmp-dialog-background') ; 131 132 this.positionDialog(dialog); 133 this.positionBackground(background); 134 135 dialog.addClass('pop in'); 136 }, 137 138 hide: function() { 139 var dialog = $('#' + this.id); 140 var background = $('.tmp-dialog-background'); 141 dialog.addClass('pop out'); 142 background.remove(); 143 this.destroy(); 144 145 /* now wait 100ms and then call the next in the queue */ 146 var that = this; 147 window.setTimeout(function() { 148 M.DialogView.isActive = NO; 149 that.dequeue(); 150 }, 100); 151 }, 152 153 confirmed: function() { 154 this.hide(); 155 if(this.callbacks && M.EventDispatcher.checkHandler(this.callbacks.confirm)){ 156 this.bindToCaller(this.callbacks.confirm.target, this.callbacks.confirm.action)(); 157 } 158 }, 159 160 canceled: function() { 161 this.hide(); 162 if(this.callbacks && M.EventDispatcher.checkHandler(this.callbacks.cancel)){ 163 this.bindToCaller(this.callbacks.cancel.target, this.callbacks.cancel.action)(); 164 } 165 }, 166 167 positionDialog: function(dialog) { 168 /* position alert in the center of the possibly scrolled viewport */ 169 var screenSize = M.Environment.getSize(); 170 var scrollYOffset = window.pageYOffset; 171 var scrollXOffset = window.pageXOffset; 172 var dialogHeight = dialog.outerHeight(); 173 var dialogWidth = dialog.outerWidth(); 174 175 var xPos = scrollXOffset + (screenSize[0]/2); 176 var yPos = scrollYOffset + (screenSize[1]/2); 177 178 dialog.css('position', 'absolute'); 179 dialog.css('top', yPos + 'px'); 180 dialog.css('left', xPos + 'px'); 181 dialog.css('z-index', 10000); 182 dialog.css('margin-top', '-' + (dialogHeight/2) + 'px'); 183 dialog.css('margin-left', '-' + (dialogWidth/2) + 'px'); 184 }, 185 186 positionBackground: function(background) { 187 background.css('height', $(document).height() + 'px'); 188 background.css('width', $(document).width() + 'px'); 189 } 190 191 });