]>
Commit | Line | Data |
---|---|---|
05d4b0b5 | 1 | /* NEEDS converting to plain HTML! */ |
e20e5a6b | 2 | qwebirc.ui.EmbedWizardStep = new Class({ |
1fe27ded CP |
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 | ||
e20e5a6b | 32 | qwebirc.ui.EmbedWizard = new Class({ |
1fe27ded CP |
33 | Implements: [Options, Events], |
34 | options: { | |
c0f2f367 CP |
35 | uiOptions: null, |
36 | optionsCallback: null, | |
1fe27ded CP |
37 | baseURL: "http://webchat.quakenet.org/" |
38 | }, | |
ebb21d2e | 39 | initialize: function(parent, options) { |
c0f2f367 CP |
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; | |
ebb21d2e | 44 | this.create(parent); |
1fe27ded CP |
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(); | |
f9b2babd | 68 | nextRow.addClass("wizardcontrols"); |
1fe27ded CP |
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) { | |
e20e5a6b | 90 | return new qwebirc.ui.EmbedWizardStep(this, options); |
1fe27ded CP |
91 | }, |
92 | newRadio: function(parent, text, name, selected) { | |
93 | var p = new Element("div"); | |
94 | parent.appendChild(p); | |
f9b2babd | 95 | |
a9cbd00d CP |
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); | |
1fe27ded CP |
102 | |
103 | return r; | |
104 | }, | |
105 | addSteps: function() { | |
f9b2babd CP |
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 | }; | |
1fe27ded CP |
119 | |
120 | this.welcome = this.newStep({ | |
c0f2f367 | 121 | "title": "Add webchat to your website", |
1fe27ded CP |
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"); | |
f9b2babd | 126 | this.chanBox.addClass("text"); |
1fe27ded CP |
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", | |
6c19eb8f | 132 | middle: this.chanBox |
f9b2babd | 133 | }).addEvent("show", af.bind(this.chanBox)); |
1fe27ded CP |
134 | |
135 | var customnickDiv = new Element("div"); | |
136 | this.customnick = this.newStep({ | |
a9cbd00d | 137 | "title": "Choose a nickname mode", |
1fe27ded CP |
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 | ||
6500b600 CP |
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"); | |
1fe27ded CP |
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, | |
6c19eb8f | 152 | "hint": "You need to display the dialog if you want the user to be able to set their nickname before connecting." |
1fe27ded | 153 | }); |
c0f2f367 | 154 | |
a9cbd00d CP |
155 | var changeOptions = new Element("div"); |
156 | this.currentLF = this.newRadio(changeOptions, "Use the current look and feel (", "lookandfeel", true); | |
c0f2f367 | 157 | |
a9cbd00d CP |
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 | ||
c0f2f367 | 167 | this.lookandfeel = this.newStep({ |
a9cbd00d | 168 | "title": "Configure look and feel", |
c0f2f367 CP |
169 | "first": "The look and feel will be copied from the current settings.", |
170 | middle: changeOptions | |
171 | }); | |
1fe27ded | 172 | |
6500b600 CP |
173 | var autoconnect = this.newRadio(promptdiv, "Connect without displaying the dialog.", "prompt", true); |
174 | this.connectdialogr = this.newRadio(promptdiv, "Show the connect dialog.", "prompt"); | |
1fe27ded CP |
175 | |
176 | this.nicknameBox = new Element("input"); | |
f9b2babd | 177 | this.nicknameBox.addClass("text"); |
1fe27ded CP |
178 | this.nickname = this.newStep({ |
179 | "title": "Set nickname", | |
a9cbd00d | 180 | "first": "Enter the nickname you would like the client to use by default:", |
1fe27ded CP |
181 | "premove": function() { |
182 | if(this.nicknameBox.value == "") { | |
183 | alert("You must supply a nickname."); | |
184 | this.nicknameBox.focus(); | |
185 | return false; | |
186 | } | |
187 | return true; | |
188 | }.bind(this), | |
a9cbd00d CP |
189 | middle: this.nicknameBox, |
190 | hint: "If you use a . (dot/period) then it will be substituted with a random number." | |
f9b2babd | 191 | }).addEvent("show", af.bind(this.nicknameBox)); |
1fe27ded CP |
192 | |
193 | var codeDiv = new Element("div"); | |
194 | this.finish = this.newStep({ | |
195 | "title": "Finished!", | |
196 | "first": "Your custom link is:", | |
197 | middle: codeDiv | |
198 | }).addEvent("show", function() { | |
199 | var alink = new Element("a"); | |
200 | var abox = new Element("input"); | |
f9b2babd CP |
201 | abox.addClass("iframetext"); |
202 | var url = this.generateURL(false); | |
1fe27ded CP |
203 | |
204 | alink.href = url; | |
8af49135 | 205 | alink.target = "new"; |
1fe27ded | 206 | alink.appendChild(document.createTextNode(url)); |
f9b2babd | 207 | abox.value = "<iframe src=\"" + url + "\" width=\"647\" height=\"400\"></iframe>"; |
1fe27ded CP |
208 | |
209 | var mBox = [ | |
210 | alink, | |
211 | new Element("br"), new Element("br"), | |
212 | document.createTextNode("You can embed this into your page with the following code:"), | |
213 | new Element("br"), | |
214 | abox | |
215 | ]; | |
216 | ||
217 | while(codeDiv.childNodes.length > 0) | |
218 | codeDiv.removeChild(codeDiv.childNodes[0]); | |
219 | ||
220 | mBox.forEach(function(x) { | |
221 | codeDiv.appendChild(x); | |
222 | }); | |
f9b2babd CP |
223 | |
224 | af.bind(abox)(true); | |
225 | abox.addEvent("click", function() { | |
226 | this.select(); | |
227 | }.bind(abox)); | |
1fe27ded CP |
228 | }.bind(this)); |
229 | ||
230 | this.updateSteps(); | |
231 | this.step = 0; | |
232 | ||
233 | this.showStep(); | |
234 | }, | |
235 | updateSteps: function() { | |
236 | this.steps = [this.welcome, this.customnick]; | |
237 | ||
238 | if(this.presetnick.checked) | |
239 | this.steps.push(this.nickname); | |
240 | ||
241 | this.steps.push(this.chans); | |
6500b600 CP |
242 | |
243 | if(this.chanBox.value != "" && !this.choosenick.checked) | |
1fe27ded CP |
244 | this.steps.push(this.connectdialog); |
245 | ||
c0f2f367 | 246 | this.steps.push(this.lookandfeel); |
1fe27ded CP |
247 | this.steps.push(this.finish); |
248 | }, | |
249 | showStep: function() { | |
250 | this.backBtn.disabled = !(this.step > 0); | |
251 | ||
252 | this.nextBtn.value = (this.step >= this.steps.length - 1)?"Close":"Next >"; | |
253 | ||
254 | this.steps[this.step].show(); | |
255 | }, | |
256 | next: function() { | |
257 | var pm = this.steps[this.step].options.premove; | |
258 | ||
259 | if(pm && !pm()) | |
260 | return; | |
261 | ||
262 | this.updateSteps(); | |
263 | if(this.step >= this.steps.length - 1) { | |
264 | this.close(); | |
265 | return; | |
266 | } | |
267 | this.step = this.step + 1; | |
268 | this.showStep(); | |
269 | }, | |
270 | close: function() { | |
271 | this.fireEvent("close"); | |
272 | }, | |
273 | back: function() { | |
274 | if(this.step <= 0) | |
275 | return; | |
276 | ||
277 | this.step = this.step - 1; | |
278 | this.showStep(); | |
279 | }, | |
280 | generateURL: function() { | |
281 | var chans = this.chanBox.value; | |
282 | var nick = this.nicknameBox.value; | |
6500b600 CP |
283 | var connectdialog = this.connectdialogr.checked && chans != "" && !this.choosenick.checked; |
284 | ||
1fe27ded CP |
285 | var URL = []; |
286 | if(this.presetnick.checked) { | |
287 | URL.push("nick=" + escape(nick)); | |
6500b600 CP |
288 | } else if(!this.choosenick.checked) { |
289 | URL.push("randomnick=1"); | |
1fe27ded CP |
290 | } |
291 | ||
292 | if(chans) { | |
293 | var d = chans.split(","); | |
294 | var d2 = []; | |
295 | ||
1fe27ded CP |
296 | d.forEach(function(x) { |
297 | if(x.charAt(0) == '#') | |
298 | x = x.substring(1); | |
299 | ||
300 | d2.push(x); | |
301 | }); | |
302 | ||
303 | URL.push("channels=" + escape(d2.join(","))); | |
304 | } | |
305 | ||
306 | if(connectdialog) | |
307 | URL.push("prompt=1"); | |
308 | ||
a9cbd00d CP |
309 | if(this.currentLF.checked) { |
310 | var uioptions = this.options.uiOptions.serialise(); | |
311 | if(uioptions != "") | |
312 | URL.push("uio=" + uioptions); | |
313 | } | |
314 | ||
6500b600 | 315 | return this.options.baseURL + (URL.length>0?"?":"") + URL.join("&"); |
1fe27ded CP |
316 | } |
317 | }); |