83a316262c191433c981c02612934e8f5ba9180b
[tine20] / tine20 / Tinebase / js / ux / PopupWindow.js
1 /*
2  * Tine 2.0
3  * 
4  * @license     http://www.gnu.org/licenses/agpl.html AGPL Version 3
5  * @author      Cornelius Weiss <c.weiss@metaways.de>
6  * @copyright   Copyright (c) 2007-2008 Metaways Infosystems GmbH (http://www.metaways.de)
7  *
8  */
9  
10 Ext.ns('Ext.ux');
11
12 /**
13  * Class for handling of native browser popup window.
14  * <p>This class is intended to make the usage of a native popup window as easy as dealing with a modal window.<p>
15  * <p>Example usage:</p>
16  * <pre><code>
17  var win = new Ext.ux.PopupWindow({
18      name: 'TasksEditWindow',
19      width: 700,
20      height: 300,
21      url:index.php?method=Tasks.editTask&taskId=5
22  });
23  * </code></pre>
24  * 
25  * @namespace   Ext.ux
26  * @class       Ext.ux.PopupWindow
27  * @extends     Ext.Component
28  */
29 Ext.ux.PopupWindow = function(config) {
30     Ext.apply(this, config);
31     Ext.ux.PopupWindow.superclass.constructor.call(this);
32 };
33
34 Ext.extend(Ext.ux.PopupWindow, Ext.Component, {
35     /**
36      * @cfg    {String}
37      * @param  {String} url
38      * @desc   url to open
39      */
40     url: null,
41     /**
42      * @cfg {String} internal name of new window
43      */
44     name: 'new window',
45     /**
46      * @cfg {Int} width of new window
47      */
48     width: 500,
49     /**
50      * @cfg {Int} height of new window
51      */
52     height: 500,
53     /**
54      * @cfg {Bolean}
55      */
56     modal: false,
57     /**
58      * @cfg {String}
59      */
60     layout: 'fit',
61     /**
62      * @cfg {String}
63      */
64     title: null,
65     /**
66      * @cfg {String} Name of a constructor to create item property
67      */
68     contentPanelConstructor: null,
69     /**
70      * @cfg {Object} Config object to pass to itemContructor
71      */
72     contentPanelConstructorConfig: {},
73     /**
74      * @property {Browser Window}
75      */
76     popup: null,
77     /**
78      * @property {Ext.ux.PopupWindowMgr}
79      */
80     windowManager: null,
81     
82     /**
83      * @private
84      */
85     initComponent: function(){
86         if (! this.title) {
87             this.title = Tine.title;
88         }
89         
90         this.windowManager = Ext.ux.PopupWindowMgr;
91         Ext.ux.PopupWindow.superclass.initComponent.call(this);
92         
93         //limit the window size
94         this.width = Math.min(screen.availWidth, this.width);
95         this.height = Math.min(screen.availHeight, this.height);
96
97         // open popup window first to save time
98         if (! this.popup) {
99             this.popup = Tine.Tinebase.common.openWindow(this.name, this.url, this.width, this.height);
100         }
101         
102         //. register window ( in fact register complete PopupWindow )
103         this.windowManager.register(this);
104         
105         // does not work on reload!
106         //this.popup.PopupWindow = this;
107         
108         // strange problems in FF
109         //this.injectFramework(this.popup);
110
111         this.addEvents({
112             /**
113              * @event beforecolse
114              * @desc Fires before the Window is closed. A handler can return false to cancel the close.
115              * @param {Ext.ux.PopupWindow}
116              */
117             "beforeclose" : true,
118             /**
119              * @event render
120              * @desc  Fires after the viewport in the popup window is rendered
121              * @param {Ext.ux.PopupWindow} 
122              */
123             "render" : true,
124             /**
125              * @event close
126              * @desc  Fired, when the window got closed
127              */
128             "close" : true
129         });
130         
131         // NOTE: Do not register unregister with this events, 
132         //       as it would be broken on window reloads!
133         /*
134         if (this.popup.addEventListener) {
135             this.popup.addEventListener('load', this.onLoad, true);
136             this.popup.addEventListener('unload', this.onClose, true);
137         } else if (this.popup.attachEvent) {
138             this.popup.attachEvent('onload', this.onLoad);
139             this.popup.attachEvent('onunload', this.onClose);
140         } else {
141             this.popup.onload = this.onLoad;
142             this.popup.onunload = this.onClose;
143         }
144         */
145     },
146     
147     /**
148      * rename window name
149      * 
150      * @param {String} new name
151      */
152     rename: function(newName) {
153         this.windowManager.unregister(this);
154         this.name = this.popup.name = newName;
155         this.windowManager.register(this);
156     },
157     
158     /**
159      * Sets the title text for the panel and optionally the icon class.
160      * 
161      * @param {String} title The title text to set
162      * @param {String} iconCls (optional) iconCls A user-defined CSS class that provides the icon image for this panel
163      */
164     setTitle: function(title, iconCls) {
165         if (this.popup && this.popup.document) {
166             this.popup.document.title = Ext.util.Format.stripTags(title);
167         }
168     },
169     
170     /**
171      * Closes the window, removes it from the DOM and destroys the window object. 
172      * The beforeclose event is fired before the close happens and will cancel 
173      * the close action if it returns false.
174      */
175     close: function() {
176         if(this.fireEvent("beforeclose", this) !== false){
177             this.fireEvent('close', this);
178
179             var popup = this.popup;
180
181             this.destroy();
182
183             if (popup.history && popup.history.length > 1) {
184                 popup.history.back();
185             } else {
186                 Ext.ux.PopupWindow.close(popup);
187             }
188         }
189     },
190     
191     /**
192      * @private
193      * 
194      * called after this.popups native onLoad
195      * note: 'this' references the popup, whereas window references the parent
196      */
197     onLoad: function() {
198         this.Ext.onReady(function() {
199             //console.log(this);
200             //console.log(window);
201         }, this);
202     },
203     
204     /**
205      * @private
206      * 
207      * note: 'this' references the popup, whereas window references the parent
208      */
209     onClose: function() {
210
211     },
212     
213     /**
214      * @private
215      */
216     destroy: function() {
217         Ext.ux.PopupWindow.superclass.destroy.call(this);
218         
219         this.purgeListeners();
220         this.windowManager.unregister(this);
221
222         this.popup = null;
223     }
224 });
225
226 /**
227  * close window and show close message
228  *
229  * @static
230  * @param win
231  */
232 Ext.ux.PopupWindow.close = function(win) {
233     win = win || window;
234     win.close();
235
236     // FIXME there is somthing very fishy here ... / this throws lots of errors
237     // defer messagebox as it should not be displayed too early
238     //    window.setTimeout(function(){
239     //        if (! win) {
240     //            return;
241     //        }
242     //
243     //        win.Ext.MessageBox.alert(
244     //            i18n._('Window can be closed'),
245     //            String.format(i18n._('This Window can be closed now. To avoid this message please deactivate your browsers popup blocker for {0}'), Tine.title),
246     //            function() {
247     //                win.close();
248     //            }
249     //        );
250     //    }, 500);
251 };