]>
Commit | Line | Data |
---|---|---|
1 | /* NEEDS converting to plain HTML! */ | |
2 | qwebirc.ui.EmbedWizardStep = new Class({ | |
3 | Implements: [Options, Events], | |
4 | options: { | |
5 | "title": "", | |
6 | "first": "", | |
7 | "hint": "", | |
8 | "middle": null, | |
9 | "premove": null, | |
10 | "example": "" | |
11 | }, | |
12 | initialize: function(parent, options) { | |
13 | this.setOptions(options); | |
14 | this.parent = parent; | |
15 | }, | |
16 | show: function() { | |
17 | this.parent.title.set("html", this.options.title); | |
18 | this.parent.firstRow.set("html", this.options.first); | |
19 | this.parent.hint.set("html", this.options.hint); | |
20 | this.parent.example.set("text", this.options.example); | |
21 | ||
22 | while(this.parent.middleRow.childNodes.length > 0) | |
23 | this.parent.middleRow.removeChild(this.parent.middleRow.childNodes[0]); | |
24 | ||
25 | if($defined(this.options.middle)) | |
26 | this.parent.middleRow.appendChild(this.options.middle); | |
27 | ||
28 | this.fireEvent("show"); | |
29 | } | |
30 | }); | |
31 | ||
32 | qwebirc.ui.EmbedWizard = new Class({ | |
33 | Implements: [Options, Events], | |
34 | options: { | |
35 | uiOptions: null, | |
36 | optionsCallback: null, | |
37 | baseURL: "http://webchat.quakenet.org/" | |
38 | }, | |
39 | initialize: function(parent, options) { | |
40 | /* for some unknown reason setOptions doesn't work... */ | |
41 | this.options.uiOptions = options.uiOptions; | |
42 | this.options.baseURL = options.baseURL; | |
43 | this.options.optionsCallback = options.optionsCallback; | |
44 | this.create(parent); | |
45 | this.addSteps(); | |
46 | }, | |
47 | create: function(parent) { | |
48 | this.t = parent; | |
49 | ||
50 | var titleRow = this.newRow(); | |
51 | this.title = new Element("h2"); | |
52 | this.title.setStyle("margin-top", "0px"); | |
53 | this.title.setStyle("margin-bottom", "5px"); | |
54 | titleRow.appendChild(this.title); | |
55 | ||
56 | this.firstRow = this.newRow(); | |
57 | this.middleRow = this.newRow(); | |
58 | var hintRow = this.newRow(); | |
59 | this.hint = new Element("div"); | |
60 | this.hint.setStyle("font-size", "0.8em"); | |
61 | this.hint.setStyle("font-style", "italic"); | |
62 | hintRow.appendChild(this.hint); | |
63 | var exampleRow = this.newRow(); | |
64 | this.example = new Element("pre"); | |
65 | exampleRow.appendChild(this.example); | |
66 | ||
67 | var nextRow = this.newRow(); | |
68 | nextRow.addClass("wizardcontrols"); | |
69 | var backBtn = new Element("input"); | |
70 | backBtn.type = "submit"; | |
71 | backBtn.value = "< Back"; | |
72 | backBtn.addEvent("click", this.back.bind(this)); | |
73 | nextRow.appendChild(backBtn); | |
74 | ||
75 | var nextBtn = new Element("input"); | |
76 | nextBtn.type = "submit"; | |
77 | nextBtn.value = "Next >"; | |
78 | nextRow.appendChild(nextBtn); | |
79 | nextBtn.addEvent("click", this.next.bind(this)); | |
80 | ||
81 | this.nextBtn = nextBtn; | |
82 | this.backBtn = backBtn; | |
83 | }, | |
84 | newRow: function() { | |
85 | var cell = new Element("div"); | |
86 | this.t.appendChild(cell); | |
87 | return cell; | |
88 | }, | |
89 | newStep: function(options) { | |
90 | return new qwebirc.ui.EmbedWizardStep(this, options); | |
91 | }, | |
92 | newRadio: function(parent, text, name, selected) { | |
93 | var p = new Element("div"); | |
94 | parent.appendChild(p); | |
95 | ||
96 | var id = qwebirc.util.generateID(); | |
97 | var r = qwebirc.util.createInput("radio", p, name, selected, id); | |
98 | ||
99 | var label = new Element("label", {"for": id}); | |
100 | label.appendChild(document.createTextNode(text)); | |
101 | p.appendChild(label); | |
102 | ||
103 | return r; | |
104 | }, | |
105 | addSteps: function() { | |
106 | var af = function(select) { | |
107 | if(Browser.Engine.trident) { | |
108 | var f = function() { | |
109 | this.focus(); | |
110 | if(select) | |
111 | this.select(); | |
112 | }; | |
113 | f.delay(100, this, []); | |
114 | } else { | |
115 | this.focus(); | |
116 | this.select(); | |
117 | } | |
118 | }; | |
119 | ||
120 | this.welcome = this.newStep({ | |
121 | "title": "Add webchat to your website", | |
122 | "first": "This wizard will help you create an embedded client by asking you questions then giving you the code to add to your website.<br/><br/>You can use the <b>Next</b> and <b>Back</b> buttons to navigate through the wizard; click <b>Next</b> to continue." | |
123 | }); | |
124 | ||
125 | this.chanBox = new Element("input"); | |
126 | this.chanBox.addClass("text"); | |
127 | this.chans = this.newStep({ | |
128 | "title": "Set channels", | |
129 | "first": "Enter the channels you would like the client to join on startup:", | |
130 | "hint": "You can supply multiple channels by seperating them with a comma, e.g.:", | |
131 | "example": "#rogue,#eu-mage", | |
132 | middle: this.chanBox | |
133 | }).addEvent("show", af.bind(this.chanBox)); | |
134 | ||
135 | var customnickDiv = new Element("div"); | |
136 | this.customnick = this.newStep({ | |
137 | "title": "Choose a nickname mode", | |
138 | "first": "At startup would you like the client to use a random nickname, a preset nickname or a nickname of the users choice?", | |
139 | "hint": "It is recommended that you only use a preset nickname if the client is for your own personal use.", | |
140 | middle: customnickDiv | |
141 | }); | |
142 | ||
143 | this.choosenick = this.newRadio(customnickDiv, "Make the user choose a nickname.", "nick", true); | |
144 | this.randnick = this.newRadio(customnickDiv, "Use a random nickname, e.g. qwebirc12883.", "nick"); | |
145 | this.presetnick = this.newRadio(customnickDiv, "Use a preset nickname of your choice.", "nick"); | |
146 | ||
147 | var promptdiv = new Element("form"); | |
148 | this.connectdialog = this.newStep({ | |
149 | "title": "Display connect dialog?", | |
150 | "first": "Do you want the user to be shown the connect dialog (with the values you have supplied pre-entered) or just a connect confirmation?", | |
151 | middle: promptdiv, | |
152 | "hint": "You need to display the dialog if you want the user to be able to set their nickname before connecting." | |
153 | }); | |
154 | ||
155 | var changeOptions = new Element("div"); | |
156 | this.currentLF = this.newRadio(changeOptions, "Use the current look and feel (", "lookandfeel", true); | |
157 | ||
158 | var alterButton = new Element("input"); | |
159 | alterButton.type = "submit"; | |
160 | alterButton.value = "alter"; | |
161 | alterButton.addEvent("click", this.options.optionsCallback); | |
162 | changeOptions.firstChild.appendChild(alterButton); | |
163 | changeOptions.firstChild.appendChild(document.createTextNode(").")); | |
164 | ||
165 | this.defaultLF = this.newRadio(changeOptions, "Use the default look and feel.", "lookandfeel"); | |
166 | ||
167 | this.lookandfeel = this.newStep({ | |
168 | "title": "Configure look and feel", | |
169 | "first": "The look and feel will be copied from the current settings.", | |
170 | middle: changeOptions | |
171 | }); | |
172 | ||
173 | var autoconnect = this.newRadio(promptdiv, "Connect without displaying the dialog.", "prompt", true); | |
174 | this.connectdialogr = this.newRadio(promptdiv, "Show the connect dialog.", "prompt"); | |
175 | ||
176 | this.nicknameBox = new Element("input"); | |
177 | this.nicknameBox.addClass("text"); | |
178 | this.nickname = this.newStep({ | |
179 | "title": "Set nickname", | |
180 | "first": "Enter the nickname you would like the client to use by default:", | |
181 | "premove": function() { | |
182 | if(this.nicknameBox.value == "") { | |
183 | alert("You must supply a nickname."); | |
184 | this.nicknameBox.focus(); | |
185 | return false; | |
186 | } | |
187 | var v = qwebirc.global.nicknameValidator.validate(this.nicknameBox.value, true); | |
188 | if(v != this.nicknameBox.value) { | |
189 | this.nicknameBox.value = v; | |
190 | alert("The supplied nickname was invalid and has been corrected."); | |
191 | this.nicknameBox.focus(); | |
192 | return false; | |
193 | } | |
194 | return true; | |
195 | }.bind(this), | |
196 | middle: this.nicknameBox, | |
197 | hint: "If you use a . (dot/period) then it will be substituted with a random number." | |
198 | }).addEvent("show", af.bind(this.nicknameBox)); | |
199 | ||
200 | var codeDiv = new Element("div"); | |
201 | this.finish = this.newStep({ | |
202 | "title": "Finished!", | |
203 | "first": "Your custom link is:", | |
204 | middle: codeDiv | |
205 | }).addEvent("show", function() { | |
206 | var alink = new Element("a"); | |
207 | var abox = new Element("input"); | |
208 | abox.addClass("iframetext"); | |
209 | var url = this.generateURL(false); | |
210 | ||
211 | alink.href = url; | |
212 | alink.target = "_blank"; | |
213 | alink.appendChild(document.createTextNode(url)); | |
214 | abox.value = "<iframe src=\"" + url + "\" width=\"647\" height=\"400\"></iframe>"; | |
215 | ||
216 | var mBox = [ | |
217 | alink, | |
218 | new Element("br"), new Element("br"), | |
219 | document.createTextNode("You can embed this into your page with the following code:"), | |
220 | new Element("br"), | |
221 | abox | |
222 | ]; | |
223 | ||
224 | while(codeDiv.childNodes.length > 0) | |
225 | codeDiv.removeChild(codeDiv.childNodes[0]); | |
226 | ||
227 | mBox.forEach(function(x) { | |
228 | codeDiv.appendChild(x); | |
229 | }); | |
230 | ||
231 | af.bind(abox)(true); | |
232 | abox.addEvent("click", function() { | |
233 | this.select(); | |
234 | }.bind(abox)); | |
235 | }.bind(this)); | |
236 | ||
237 | this.updateSteps(); | |
238 | this.step = 0; | |
239 | ||
240 | this.showStep(); | |
241 | }, | |
242 | updateSteps: function() { | |
243 | this.steps = [this.welcome, this.customnick]; | |
244 | ||
245 | if(this.presetnick.checked) | |
246 | this.steps.push(this.nickname); | |
247 | ||
248 | this.steps.push(this.chans); | |
249 | ||
250 | if(this.chanBox.value != "" && !this.choosenick.checked) | |
251 | this.steps.push(this.connectdialog); | |
252 | ||
253 | this.steps.push(this.lookandfeel); | |
254 | this.steps.push(this.finish); | |
255 | }, | |
256 | showStep: function() { | |
257 | this.backBtn.disabled = !(this.step > 0); | |
258 | ||
259 | this.nextBtn.value = (this.step >= this.steps.length - 1)?"Close":"Next >"; | |
260 | ||
261 | this.steps[this.step].show(); | |
262 | }, | |
263 | next: function() { | |
264 | var pm = this.steps[this.step].options.premove; | |
265 | ||
266 | if(pm && !pm()) | |
267 | return; | |
268 | ||
269 | this.updateSteps(); | |
270 | if(this.step >= this.steps.length - 1) { | |
271 | this.close(); | |
272 | return; | |
273 | } | |
274 | this.step = this.step + 1; | |
275 | this.showStep(); | |
276 | }, | |
277 | close: function() { | |
278 | this.fireEvent("close"); | |
279 | }, | |
280 | back: function() { | |
281 | if(this.step <= 0) | |
282 | return; | |
283 | ||
284 | this.step = this.step - 1; | |
285 | this.showStep(); | |
286 | }, | |
287 | generateURL: function() { | |
288 | var chans = this.chanBox.value; | |
289 | var nick = this.nicknameBox.value; | |
290 | var connectdialog = this.connectdialogr.checked && chans != "" && !this.choosenick.checked; | |
291 | ||
292 | var URL = []; | |
293 | if(this.presetnick.checked) { | |
294 | URL.push("nick=" + escape(nick)); | |
295 | } else if(!this.choosenick.checked) { | |
296 | URL.push("randomnick=1"); | |
297 | } | |
298 | ||
299 | if(chans) { | |
300 | var d = chans.split(","); | |
301 | var d2 = []; | |
302 | ||
303 | d.forEach(function(x) { | |
304 | if(x.charAt(0) == '#') | |
305 | x = x.substring(1); | |
306 | ||
307 | d2.push(x); | |
308 | }); | |
309 | ||
310 | URL.push("channels=" + escape(d2.join(","))); | |
311 | } | |
312 | ||
313 | if(connectdialog) | |
314 | URL.push("prompt=1"); | |
315 | ||
316 | if(this.currentLF.checked) { | |
317 | var uioptions = this.options.uiOptions.serialise(); | |
318 | if(uioptions != "") | |
319 | URL.push("uio=" + uioptions); | |
320 | } | |
321 | ||
322 | return this.options.baseURL + (URL.length>0?"?":"") + URL.join("&"); | |
323 | } | |
324 | }); |