/webroot/js/pop.js
[return to app]1
/**
2 * Popup simplifies generating pop up windows
3 * @author Eric David Benari
4 * @link http://www.Vork.us
5
6 Documentation for the popup function:
7
8 Usage example:
9 popup('/myPageToPopOpen', {'height': 300, 'width': 500});
10
11 When multiple popups will use the same properties you can set defaults via syntax:
12 popup.height = 300;
13 popup.width = 500;
14 popup('/url1');
15 popup('/url2', {'left': 200, 'top': 250});
16
17 All default properties can be overridden by inline definitions:
18 popup.focus = 1;
19 popup('/url3'); //this will pop in the foreground and take focus
20 popup('/url4', {'blur': true}); //this will pop in the background
21
22
23 The following optional properties are available:
24 blur - (Boolean) sets the popup to open behind the current window
25 focus - (Boolean) sets the popup to take focus once it opens
26
27 center - (Boolean) centers the popup on the screen
28 centerx - (Boolean) centers the popup horizontally on the screen
29 centery - (Boolean) centers the popup vertically on the screen
30
31 id - this is the internal name for the popup, if you open two popups with the same ID the second one will load
32 in the window of the first. This is used as the second argument to window.open()
33 replace - (Boolean) if true then the new location will replace the current page in the browser's navigation
history
34 Note: many browsers do this anyway. if supplied, this is used as the fourth argument to window.open().
35
36 returnobject - (Boolean) if Boolean true then the window.open object is returned instead of executed. This grants
you
37 total control over the window, allowing you to do things like:
38 var pop = popup('/somePage', {'returnobject': true});
39 setTimeout('closepop(pop)', 2000);
40
41 If returnobject is not defined or is set to false then the return value of popup() will be Boolean false, this is
for
42 convenience as it allows you to easily make pop-ups that degrade gracefully and become ordinary links if
JavaScript
43 is turned off:
44 <a href="/myPage" onclick='return popup(this.href)'">
45
46 The following properties are also valid and are the arguments built into JavaScript for the window.open function:
47 height, width,
48 outerheight, outerwidth,
49 innerheight, innderwidth,
50 left, top,
51 screenx, screeny,
52 alwayslowered, alwaysraised,
53 channelmode, copyhistory, dependent, directories, fullscreen, hotkeys,
54 location, menubar, resizable, scrollbars, status, toolbar, z-lock
55 */
56 var validproperties = [ 'height', 'width',
57 'outerheight', 'outerwidth',
58 'innerheight', 'innderwidth',
59 'left', 'top',
60 'screenx', 'screeny',
61 'alwayslowered', 'alwaysraised',
62 'channelmode', 'copyhistory', 'dependent', 'directories', 'fullscreen', 'hotkeys',
63 'location', 'menubar', 'resizable', 'scrollbars', 'status', 'toolbar', 'z-lock'];
64 /**
65 * Calculates the top or left position of a centered window based on the size of the popup
66 *
67 * @param string returnLeftOrTop Valid values are 'left' and 'top'
68 * @param int popupSize
69 * @return int
70 */
71 /* protected */ function _getCenterStartingPosition(returnLeftOrTop, popupSize) {
72 var screenSize = (returnLeftOrTop.toLowerCase() == 'top' ? screen.height : screen.width);
73 var remainingRealEstate = screenSize - popupSize;
74 if (remainingRealEstate < 0) {
75 remainingRealEstate = 0;
76 }
77 return (remainingRealEstate / 2);
78 }
79
80 /**
81 * Calculates the outerwidth of a window based on the innerwidth
82 *
83 * @param string returnWidthOrHeight Valid values are 'width' and 'height'
84 * @param int popupInnerSize
85 * @return int
86 */
87 /* protected */ function _getOuterFromInner(returnWidthOrHeight, popupInnerSize) {
88 var borderSize = (returnWidthOrHeight.toLowerCase() == 'height' ? (window.outerHeight - window.innerHeight)
89 : (window.outerWidth - window.innerWidth));
90 if (borderSize < 0) {
91 borderSize = 0;
92 }
93 return (borderSize + popupInnerSize);
94 }
95
96 /**
97 * Adds the correct positioning dimensions to the optionsArray to open a popup centered on the screen
98 *
99 * @param object optionsArray
100 * @param object popupObject
101 * @param object properties
102 * @return object optionsArray
103 */
104 /* protected */ function _getCenterDimensions(optionsArray, popupObject, properties) {
105 var width = 640; //these are default values used only when centering a popup without defined dimensions
106 var height = 480;
107 var centerPropertiesArray = new Object;
108 var checkproperties = (typeof properties != 'undefined');
109 var centerxRequested = false, centeryRequested = false, centerx = false, centery = false
110 var definedLeft = false, definedTop = false;
111 var definedCenterx = false, definedCentery = false;
112
113 var centerProperties = ['center', 'centerx', 'centery'];
114 centerPropertiesLength = centerProperties.length;
115 for (var x = 0; x < centerPropertiesLength; x++) {
116 if (checkproperties && typeof properties[centerProperties[x]] != 'undefined'
117 && properties[centerProperties[x]] != null) {
118 centerPropertiesArray[centerProperties[x]] = properties[centerProperties[x]];
119 } else if (typeof popupObject[centerProperties[x]] != 'undefined'
120 && popupObject[centerProperties[x]] != null) {
121 centerPropertiesArray[centerProperties[x]] = popupObject[centerProperties[x]];
122 }
123 }
124
125 if (typeof centerPropertiesArray['center'] != 'undefined' && centerPropertiesArray['center']) {
126 centerxRequested = true;
127 centeryRequested = true;
128 } else {
129 centerxRequested = (typeof centerPropertiesArray['centerx'] != 'undefined'
130 && centerPropertiesArray['centerx']);
131 centeryRequested = (typeof centerPropertiesArray['centery'] != 'undefined'
132 && centerPropertiesArray['centery']);
133 }
134
135 if (checkproperties) {
136 //left/top entered inline overwrites center request
137 definedLeft = (typeof properties['left'] != 'undefined' && properties['left'] != null);
138 definedTop = (typeof properties['top'] != 'undefined' && properties['top'] != null);
139 if (!definedLeft && typeof properties['screenx'] != 'undefined' && properties['screenx'] != null) {
140 definedLeft = true;
141 }
142 if (!definedTop && typeof properties['screeny'] != 'undefined' && properties['screeny'] != null) {
143 definedTop = true;
144 }
145 }
146 //center written either inline or instance-scope overrides left/top defined at the instance-scope
147 centerx = (!definedLeft && centerxRequested);
148 centery = (!definedTop && centeryRequested);
149
150 if (centerx) {
151 if (typeof optionsArray['width'] != 'undefined') {
152 width = optionsArray['width'];
153 } else if (typeof optionsArray['outerwidth'] != 'undefined') {
154 width = optionsArray['outerwidth'];
155 } else if (typeof optionsArray['innerwidth'] != 'undefined'
156 && typeof window.outerWidth != 'undefined') {
157 width = _getOuterFromInner('width', optionsArray['innerwidth']);
158 } else {
159 optionsArray['width'] = width;
160 }
161 optionsArray['left'] = _getCenterStartingPosition('left', width);
162 }
163
164 if (centery) {
165 if (typeof optionsArray['height'] != 'undefined') {
166 height = optionsArray['height'];
167 } else if (typeof optionsArray['outerheight'] != 'undefined') {
168 height = optionsArray['outerheight'];
169 } else if (typeof optionsArray['innerheight'] != 'undefined'
170 && typeof window.outerHeight != 'undefined') {
171 height = _getOuterFromInner('height', optionsArray['innerheight']);
172 } else {
173 optionsArray['height'] = height;
174 }
175 optionsArray['top'] = _getCenterStartingPosition('top', height);
176 }
177 return optionsArray;
178 }
179
180 /**
181 * Opens popups
182 *
183 * @param string url
184 * @param object properties
185 * @return mixed
186 */
187 /* public */ function popup(url, properties) {
188 var popup;
189 var popupname = '';
190 var optionsArray = new Object;
191 var options = '';
192 var validpropertieslength = validproperties.length;
193 var checkproperties = (typeof properties != 'undefined');
194
195 for (var x = 0; x < validpropertieslength; x++) {
196 if (checkproperties && typeof properties[validproperties[x]] != 'undefined'
197 && properties[validproperties[x]] != null) {
198 optionsArray[validproperties[x]] = properties[validproperties[x]];
199 } else if (typeof this.popup[validproperties[x]] != 'undefined'
200 && this.popup[validproperties[x]] != null) {
201 optionsArray[validproperties[x]] = this.popup[validproperties[x]];
202 }
203 }
204 if (typeof optionsArray['width'] == 'undefined' && typeof optionsArray['outerwidth'] != 'undefined'
205 && typeof window.outerWidth == 'undefined') {
206 optionsArray['width'] = optionsArray['outerwidth'];
207 }
208 if (typeof optionsArray['height'] == 'undefined' && typeof optionsArray['outerheight'] != 'undefined'
209 && typeof window.outerHeight == 'undefined') {
210 optionsArray['height'] = optionsArray['outerheight'];
211 }
212
213 if (checkproperties) {
214 optionsArray = _getCenterDimensions(optionsArray, this.popup, properties);
215 } else {
216 optionsArray = _getCenterDimensions(optionsArray, this.popup);
217 }
218
219 for (var option in optionsArray) {
220 if (options != '') {
221 options += ', ';
222 }
223 options += option + '=' + optionsArray[option];
224 }
225
226 if (checkproperties && typeof properties['id'] != 'undefined') {
227 popupname = properties['id'];
228 } else if (typeof this.popup.id != 'undefined') {
229 popupname = this.popup.id;
230 }
231
232 if (checkproperties && typeof properties['replace'] != 'undefined') {
233 var popupreplace = properties['replace'];
234 } else if (typeof this.popup.replace != 'undefined') {
235 var popupreplace = this.popup.replace;
236 }
237
238 if (typeof popupreplace == 'undefined') {
239 popup = window.open(url, popupname, options);
240 } else {
241 popup = window.open(url, popupname, options, popupreplace);
242 }
243
244 if (typeof popup != 'undefined' && popup) {//this prevents errors if the client has popups blocked
245 if (checkproperties && typeof properties['focus'] != 'undefined' && properties['focus']) {
246 popup.focus();
247 } else if (checkproperties && typeof properties['blur'] != 'undefined' && properties['blur']) {
248 popup.blur();
249 } else if (typeof this.popup.focus != 'undefined' && this.popup.focus) {
250 popup.focus();
251 } else if (typeof this.popup.blur != 'undefined' && this.popup.blur) {
252 popup.blur();
253 }
254 }
255
256 if ((checkproperties && typeof properties['returnobject'] != 'undefined' && properties['returnobject'])
257 || (typeof this.popup.returnobject != 'undefined' && this.popup.returnobject)) {
258 return popup;
259 } else {
260 return false;
261 }
262 }
263
264 /**
265 * Closes popups
266 *
267 * @param object popupObject Optional window object to be closed, if omitted then the current window will close
268 */
269 /* public */ function closepop(popupObject) {
270 if (typeof popupObject == 'undefined') {
271 popupObject = this;
272 }
273 popupObject.close();
274 }