Context Navigation

source: Dev/branches/jQueryUI/client/RGraph/libraries/RGraph.modaldialog.js @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.

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: