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