0
|
1 /*
|
|
2 --------------------------------------------------------
|
|
3 glayer_ex.js (glayer.js extensions)
|
|
4 Version 1.0 (Update 2007/05/28)
|
|
5
|
|
6 - onozaty (http://www.enjoyxstudy.com)
|
|
7
|
|
8 Released under the Creative Commons License(Attribution 2.1 Japan):
|
|
9 http://creativecommons.org/licenses/by/2.1/jp/
|
|
10
|
|
11 For details, see the web site:
|
|
12 http://www.enjoyxstudy.com/javascript/glayer/extension/
|
|
13 http://www.enjoyxstudy.com/javascript/glayer/
|
|
14
|
|
15 --------------------------------------------------------
|
|
16 */
|
|
17 Glayer.copyProperties(Glayer, {
|
|
18 //// Base ////
|
|
19 boxClassName: 'glayer_box',
|
|
20 createBox: function(boxElement) {
|
|
21 boxElement = this.createElement(boxElement);
|
|
22 boxElement.className = this.boxClassName;
|
|
23 return boxElement;
|
|
24 },
|
|
25 showBox: function(boxElement, boxOptions, grayElement) {
|
|
26 this.setBoxPosition(boxElement, boxOptions);
|
|
27 return this.showParallel([boxElement], grayElement);
|
|
28 },
|
|
29 hideBox: function(boxElement, grayElement) {
|
|
30 return this.hideParallel([boxElement], grayElement);
|
|
31 },
|
|
32 fadeInBox: function(boxElement, boxOptions, grayElement, fadeOption) {
|
|
33 this.setBoxPosition(boxElement, boxOptions);
|
|
34 return this.fadeInParallel([boxElement], grayElement, fadeOption);
|
|
35 },
|
|
36 fadeOutBox: function(boxElement, grayElement, fadeOption) {
|
|
37 return this.fadeOutParallel([boxElement], grayElement, fadeOption);
|
|
38 },
|
|
39
|
|
40 setBoxPosition: function(boxElement, boxOptions) {
|
|
41 var style = boxElement.style;
|
|
42
|
|
43 boxOptions = boxOptions || {};
|
|
44 var topRatio = boxOptions.topRatio != null ? boxOptions.topRatio : 0.5;
|
|
45 var leftRatio = boxOptions.leftRatio != null ? boxOptions.leftRatio : 0.5;
|
|
46 style.width = boxOptions.width || '';
|
|
47 style.height = boxOptions.height || '';
|
|
48
|
|
49 var windowTop = 0;
|
|
50 var windowLeft = 0;
|
|
51 var position = this._getStyle(boxElement, 'position');
|
|
52 if (position != 'fixed') {
|
|
53 windowTop = document.documentElement.scrollTop || document.body.scrollTop;
|
|
54 windowLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
|
|
55 }
|
|
56
|
|
57 style.display = '';
|
|
58 var offsetHeight = boxElement.offsetHeight;
|
|
59 var offsetWidth = boxElement.offsetWidth;
|
|
60 style.display = 'none';
|
|
61
|
|
62 var windowSize = this.getWindowSize();
|
|
63
|
|
64 style.top = ((windowSize.height * topRatio) - (offsetHeight * topRatio) + windowTop) + 'px';
|
|
65 style.left = ((windowSize.width * leftRatio) - (offsetWidth * leftRatio) + windowLeft) + 'px';
|
|
66 },
|
|
67
|
|
68 //// Message ////
|
|
69 defaultMessage: {
|
|
70 boxId: 'glayer_message',
|
|
71 textId: 'glayer_message_text'
|
|
72 },
|
|
73 createMessageBox: function(message, boxOptions) {
|
|
74 boxOptions = boxOptions || {};
|
|
75 var boxElement = boxOptions.box || this.defaultMessage.boxId;
|
|
76 var boxId = boxElement.id || boxElement;
|
|
77 var textElement = boxOptions.text || this.defaultMessage.textId;
|
|
78 var textId = textElement.id || textElement;
|
|
79
|
|
80 boxElement = this.getElement(boxElement);
|
|
81 if (!boxElement) {
|
|
82 boxElement = this.createBox(boxId);
|
|
83 textElement = document.createElement('p');
|
|
84 textElement.id = textId;
|
|
85 boxElement.appendChild(textElement);
|
|
86 } else {
|
|
87 textElement = this.getElement(textElement);
|
|
88 }
|
|
89
|
|
90 textElement.innerHTML = message;
|
|
91 return boxElement;
|
|
92 },
|
|
93
|
|
94 showMessage: function(message, boxOptions, grayElement) {
|
|
95 return this.showBox(this.createMessageBox(message, boxOptions), boxOptions, grayElement);
|
|
96 },
|
|
97 hideMessage: function(boxElement, grayElement) {
|
|
98 return this.hideBox(boxElement || this.defaultMessage.boxId, grayElement);
|
|
99 },
|
|
100 fadeInMessage: function(message, boxOptions, grayElement, fadeOption) {
|
|
101 return this.fadeInBox(this.createMessageBox(message, boxOptions), boxOptions, grayElement, fadeOption);
|
|
102 },
|
|
103 fadeOutMessage: function(boxElement, grayElement, fadeOption) {
|
|
104 return this.fadeOutBox(boxElement || this.defaultMessage.boxId, grayElement, fadeOption);
|
|
105 },
|
|
106
|
|
107 //// Alert ////
|
|
108 defaultAlert: {
|
|
109 boxId: 'glayer_alert',
|
|
110 textId: 'glayer_alert_text',
|
|
111 buttonId: 'glayer_alert_button',
|
|
112 okId: 'glayer_alert_ok',
|
|
113 okLabel: 'OK'
|
|
114 },
|
|
115 getDefaultAlertOkFunc: function() {
|
|
116 return function(){ Glayer.hideAlert(); };
|
|
117 },
|
|
118
|
|
119 createAlertBox: function(message, boxOptions) {
|
|
120
|
|
121 boxOptions = boxOptions || {};
|
|
122 var boxElement = boxOptions.box || this.defaultAlert.boxId;
|
|
123 var boxId = boxElement.id || boxElement;
|
|
124 var textElement = boxOptions.text || this.defaultAlert.textId;
|
|
125 var textId = textElement.id || textElement;
|
|
126 var okElement = boxOptions.ok || this.defaultAlert.okId;
|
|
127 var okId = okElement.id || okElement;
|
|
128
|
|
129 boxElement = this.getElement(boxElement);
|
|
130 if (!boxElement) {
|
|
131 boxElement = this.createBox(boxId);
|
|
132
|
|
133 textElement = document.createElement('p');
|
|
134 textElement.id = textId;
|
|
135 boxElement.appendChild(textElement);
|
|
136
|
|
137 var buttonElement = document.createElement('p');
|
|
138 buttonElement.id = this.defaultAlert.buttonId;
|
|
139 boxElement.appendChild(buttonElement);
|
|
140
|
|
141 okElement = document.createElement('input');
|
|
142 okElement.type = 'button';
|
|
143 okElement.id = okId;
|
|
144 buttonElement.appendChild(okElement);
|
|
145 } else {
|
|
146 textElement = this.getElement(textElement);
|
|
147 okElement = this.getElement(okElement);
|
|
148 }
|
|
149
|
|
150 textElement.innerHTML = message;
|
|
151
|
|
152 okElement.value = boxOptions.okLabel || this.defaultAlert.okLabel;
|
|
153 okElement.onclick = boxOptions.callback || this.getDefaultAlertOkFunc();
|
|
154
|
|
155 return boxElement;
|
|
156 },
|
|
157
|
|
158 showAlert: function(message, boxOptions, grayElement) {
|
|
159 return this.showBox(this.createAlertBox(message, boxOptions), boxOptions, grayElement);
|
|
160 },
|
|
161 hideAlert: function(boxElement, grayElement) {
|
|
162 return this.hideBox(boxElement || this.defaultAlert.boxId, grayElement);
|
|
163 },
|
|
164 fadeInAlert: function(message, boxOptions, grayElement, fadeOption) {
|
|
165 return this.fadeInBox(this.createAlertBox(message, boxOptions), boxOptions, grayElement, fadeOption);
|
|
166 },
|
|
167 fadeOutAlert: function(boxElement, grayElement, fadeOption) {
|
|
168 return this.fadeOutBox(boxElement || this.defaultAlert.boxId, grayElement, fadeOption);
|
|
169 },
|
|
170
|
|
171 //// Confirm ////
|
|
172 defaultConfirm: {
|
|
173 boxId: 'glayer_confirm',
|
|
174 textId: 'glayer_confirm_text',
|
|
175 buttonId: 'glayer_confirm_button',
|
|
176 okId: 'glayer_confirm_ok',
|
|
177 okLabel: 'OK',
|
|
178 cancelId: 'glayer_confirm_cancel',
|
|
179 cancelLabel: 'Cancel'
|
|
180 },
|
|
181 getConfirmResultFunc: function(callback, result) {
|
|
182 return function(){ callback(result); };
|
|
183 },
|
|
184
|
|
185 createConfirmBox: function(message, resultCallback, boxOptions) {
|
|
186
|
|
187 boxOptions = boxOptions || {};
|
|
188 var boxElement = boxOptions.box || this.defaultConfirm.boxId;
|
|
189 var boxId = boxElement.id || boxElement;
|
|
190 var textElement = boxOptions.text || this.defaultConfirm.textId;
|
|
191 var textId = textElement.id || textElement;
|
|
192 var okElement = boxOptions.ok || this.defaultConfirm.okId;
|
|
193 var okId = okElement.id || okElement;
|
|
194 var cancelElement = boxOptions.cancel || this.defaultConfirm.cancelId;
|
|
195 var cancelId = cancelElement.id || cancelElement;
|
|
196
|
|
197 boxElement = this.getElement(boxElement);
|
|
198 if (!boxElement) {
|
|
199 boxElement = this.createBox(boxId);
|
|
200
|
|
201 textElement = document.createElement('p');
|
|
202 textElement.id = textId;
|
|
203 boxElement.appendChild(textElement);
|
|
204
|
|
205 var buttonElement = document.createElement('p');
|
|
206 buttonElement.id = this.defaultConfirm.buttonId;
|
|
207 boxElement.appendChild(buttonElement);
|
|
208
|
|
209 okElement = document.createElement('input');
|
|
210 okElement.type = 'button';
|
|
211 okElement.id = okId;
|
|
212 buttonElement.appendChild(okElement);
|
|
213 cancelElement = document.createElement('input');
|
|
214 cancelElement.type = 'button';
|
|
215 cancelElement.id = cancelId;
|
|
216 buttonElement.appendChild(cancelElement);
|
|
217 } else {
|
|
218 textElement = this.getElement(textElement);
|
|
219 okElement = this.getElement(okElement);
|
|
220 cancelElement = this.getElement(cancelElement);
|
|
221 }
|
|
222
|
|
223 textElement.innerHTML = message;
|
|
224
|
|
225 okElement.value = boxOptions.okLabel || this.defaultConfirm.okLabel;
|
|
226 okElement.onclick = this.getConfirmResultFunc(resultCallback, true);
|
|
227
|
|
228 cancelElement.value = boxOptions.cancelLabel || this.defaultConfirm.cancelLabel;
|
|
229 cancelElement.onclick = this.getConfirmResultFunc(resultCallback, false);
|
|
230
|
|
231 return boxElement;
|
|
232 },
|
|
233
|
|
234 showConfirm: function(message, resultCallback, boxOptions, grayElement) {
|
|
235 return this.showBox(this.createConfirmBox(message, resultCallback, boxOptions), boxOptions, grayElement);
|
|
236 },
|
|
237 hideConfirm: function(boxElement, grayElement) {
|
|
238 return this.hideBox(boxElement || this.defaultConfirm.boxId, grayElement);
|
|
239 },
|
|
240 fadeInConfirm: function(message, resultCallback, boxOptions, grayElement, fadeOption) {
|
|
241 return this.fadeInBox(this.createConfirmBox(message, resultCallback, boxOptions), boxOptions, grayElement, fadeOption);
|
|
242 },
|
|
243 fadeOutConfirm: function(boxElement, grayElement, fadeOption) {
|
|
244 return this.fadeOutBox(boxElement || this.defaultConfirm.boxId, grayElement, fadeOption);
|
|
245 }
|
|
246 });
|