Context Navigation

source: Dev/branches/Cartis/Tiles preview/js/RGraph/libraries/RGraph.modaldialog.js @ 283

Last change on this file since 283 was 283, checked in by tjcschipper, 13 years ago

Cartis Mockup werkt!

W
I
N
N
I
N
G

File size: 9.1 KB

Line
1	/**
2	* o------------------------------------------------------------------------------o
3	* \| This file is part of the RGraph package - you can learn more at: \|
4	* \| \|
5	* \| http://www.rgraph.net \|
6	* \| \|
7	* \| This package is licensed under the RGraph license. For all kinds of business \|
8	* \| purposes there is a small one-time licensing fee to pay and for non \|
9	* \| commercial purposes it is free to use. You can read the full license here: \|
10	* \| \|
11	* \| http://www.rgraph.net/LICENSE.txt \|
12	* o------------------------------------------------------------------------------o
13	*/
14
15	ModalDialog = {}
16	ModalDialog.dialog = null;
17	ModalDialog.background = null;
18	ModalDialog.offset = 50;
19	ModalDialog.events = [];
20
21	/**
22	* Shows the dialog with the supplied DIV acting as the contents
23	*
24	* @param string id The ID of the DIV to use as the dialogs contents
25	* @param int width The width of the dialog
26	*/
27	ModalDialog.Show = function (id, width)
28	{
29	ModalDialog.id = id;
30	ModalDialog.width = width;
31
32	ModalDialog.ShowBackground();
33	ModalDialog.ShowDialog();
34
35	// Install the event handlers
36	window.onresize = ModalDialog.Resize;
37
38
39	// Call them initially
40	ModalDialog.Resize();
41
42	ModalDialog.FireCustomEvent('onmodaldialog');
43	}
44
45
46	/**
47	* Shows the background semi-transparent darkened DIV
48	*/
49	ModalDialog.ShowBackground = function ()
50	{
51	// Create the background if neccessary
52	ModalDialog.background = document.createElement('DIV');
53	ModalDialog.background.className = 'ModalDialog_background';
54	ModalDialog.background.style.position = 'fixed';
55	ModalDialog.background.style.top = 0;
56	ModalDialog.background.style.left = 0;
57	ModalDialog.background.style.width = (screen.width + 100) + 'px';
58	ModalDialog.background.style.height = (screen.height + 100) + 'px';
59	ModalDialog.background.style.backgroundColor = 'rgb(204,204,204)';
60	ModalDialog.background.style.opacity = 0;
61	ModalDialog.background.style.zIndex = 3276;
62	ModalDialog.background.style.filter = "Alpha(opacity=50)";
63
64	document.body.appendChild(ModalDialog.background);
65
66	ModalDialog.background.style.visibility = 'visible';
67	}
68
69
70	/**
71	* Shows the dialog itself
72	*/
73	ModalDialog.ShowDialog = function ()
74	{
75	// Create the DIV if necessary
76	if (!ModalDialog.dialog) {
77	ModalDialog.dialog = document.createElement('DIV');
78
79	ModalDialog.dialog.id = 'ModalDialog_dialog';
80	ModalDialog.dialog.className = 'ModalDialog_dialog';
81
82	var borderRadius = '15px';
83
84	ModalDialog.dialog.style.borderRadius = borderRadius;
85	ModalDialog.dialog.style.MozBorderRadius = borderRadius;
86	ModalDialog.dialog.style.WebkitBorderRadius = borderRadius;
87
88	ModalDialog.dialog.style.boxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
89	ModalDialog.dialog.style.MozBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
90	ModalDialog.dialog.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px';
91
92	ModalDialog.dialog.style.position = 'fixed';
93	ModalDialog.dialog.style.backgroundColor = 'white';
94	ModalDialog.dialog.style.width = parseInt(ModalDialog.width) + 'px';
95	ModalDialog.dialog.style.border = '2px solid #999';
96	ModalDialog.dialog.style.zIndex = 32767;
97	ModalDialog.dialog.style.padding = '5px';
98	ModalDialog.dialog.style.paddingTop = '25px';
99	ModalDialog.dialog.style.opacity = 0;
100
101	if (document.all) {
102	ModalDialog.dialog.style.zIndex = 32767;
103	}
104
105
106
107	// Accomodate various browsers
108	if (navigator.userAgent.indexOf('Opera') != -1) {
109	ModalDialog.dialog.style.paddingTop = '25px';
110
111	} else if (navigator.userAgent.indexOf('MSIE') != -1) {
112	ModalDialog.dialog.style.paddingTop = '25px';
113
114	} else if (navigator.userAgent.indexOf('Safari') != -1) {
115	ModalDialog.dialog.style.paddingTop = '25px';
116	}
117
118	document.body.appendChild(ModalDialog.dialog);
119
120
121	// Now create the grey bar at the top of the dialog
122	var bar = document.createElement('DIV');
123	bar.className = 'ModalDialog_topbar';
124	bar.style.top = 0;
125	bar.style.left = 0;
126	bar.style.width = '100%';//(ModalDialog.dialog.offsetWidth - 4) + 'px';
127	bar.style.height = '20px';
128	bar.style.backgroundColor = '#bbb';
129	bar.style.borderBottom = '2px solid #999';
130	//bar.style.zIndex = 50000;
131	bar.style.position = 'absolute';
132	var borderRadius = '11px';
133	bar.style.WebkitBorderTopLeftRadius = borderRadius;
134	bar.style.WebkitBorderTopRightRadius = borderRadius;
135	bar.style.MozBorderRadiusTopleft = borderRadius;
136	bar.style.MozBorderRadiusTopright = borderRadius;
137	bar.style.borderTopRightRadius = borderRadius;
138	bar.style.borderTopLeftRadius = borderRadius;
139	ModalDialog.dialog.appendChild(bar);
140
141	// Add the content div
142	var content = document.createElement('DIV');
143	//content.style.paddingTop = '20px';
144	content.style.width = '100%';
145	content.style.height = '100%';
146	ModalDialog.dialog.appendChild(content);
147
148	content.innerHTML = document.getElementById(ModalDialog.id).innerHTML;
149
150	// Now reposition the dialog in the center
151	ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px';
152	ModalDialog.dialog.style.top = '30%';
153	}
154
155	// Show the dialog
156	ModalDialog.dialog.style.visibility = 'visible';
157
158	// A simple fade-in effect
159	setTimeout('ModalDialog.dialog.style.opacity = 0.2', 50);
160	setTimeout('ModalDialog.dialog.style.opacity = 0.4', 100);
161	setTimeout('ModalDialog.dialog.style.opacity = 0.6', 150);
162	setTimeout('ModalDialog.dialog.style.opacity = 0.8', 200);
163	setTimeout('ModalDialog.dialog.style.opacity = 1', 250);
164
165	setTimeout('ModalDialog.background.style.opacity = 0.1', 50);
166	setTimeout('ModalDialog.background.style.opacity = 0.2', 100);
167	setTimeout('ModalDialog.background.style.opacity = 0.3', 150);
168	setTimeout('ModalDialog.background.style.opacity = 0.4', 200);
169	setTimeout('ModalDialog.background.style.opacity = 0.5', 250);
170	}
171
172
173	/**
174	* Hides everything
175	*/
176	ModalDialog.Close = function ()
177	{
178	if (ModalDialog.dialog) {
179	ModalDialog.dialog.style.visibility = 'hidden';
180	ModalDialog.dialog.style.opacity = 0;
181	}
182
183	if (ModalDialog.background) {
184	ModalDialog.background.style.visibility = 'hidden';
185	ModalDialog.background.style.opacity = 0;
186	}
187	}
188
189	// An alias
190	ModalDialog.Hide = ModalDialog.Close
191
192
193	/**
194	* Accommodate the window being resized
195	*/
196	ModalDialog.Resize = function ()
197	{
198	if (ModalDialog.dialog) {
199	ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px';
200	}
201
202	ModalDialog.background.style.width = '2500px';
203	ModalDialog.background.style.height = '2500px';
204	}
205
206
207	/**
208	* Returns the page height
209	*
210	* @return int The page height
211	*/
212	ModalDialog.AddCustomEventListener = function (name, func)
213	{
214	if (typeof(ModalDialog.events) == 'undefined') {
215	ModalDialog.events = [];
216	}
217
218	ModalDialog.events.push([name, func]);
219	}
220
221
222	/**
223	* Used to fire the ModalDialog custom event
224	*
225	* @param object obj The graph object that fires the event
226	* @param string event The name of the event to fire
227	*/
228	ModalDialog.FireCustomEvent = function (name)
229	{
230	for (var i=0; i<ModalDialog.events.length; ++i) {
231	if (typeof(ModalDialog.events[i][0]) == 'string' && ModalDialog.events[i][0] == name && typeof(ModalDialog.events[i][1]) == 'function') {
232	ModalDialog.events[i][1]();
233	}
234	}
235	}
236
237
238	/**
239	* Returns true if the browser is IE8
240	*/
241	ModalDialog.isIE8 = function ()
242	{
243	return document.all && (navigatot.userAgent.indexOf('MSIE 8') > 0);
244	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats: