]>
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: { | |
35 | parent: null, | |
36 | baseURL: "http://webchat.quakenet.org/" | |
37 | }, | |
ebb21d2e | 38 | initialize: function(parent, options) { |
1fe27ded | 39 | this.setOptions(options); |
ebb21d2e | 40 | this.create(parent); |
1fe27ded CP |
41 | this.addSteps(); |
42 | }, | |
43 | create: function(parent) { | |
44 | this.t = parent; | |
45 | ||
46 | var titleRow = this.newRow(); | |
47 | this.title = new Element("h2"); | |
48 | this.title.setStyle("margin-top", "0px"); | |
49 | this.title.setStyle("margin-bottom", "5px"); | |
50 | titleRow.appendChild(this.title); | |
51 | ||
52 | this.firstRow = this.newRow(); | |
53 | this.middleRow = this.newRow(); | |
54 | var hintRow = this.newRow(); | |
55 | this.hint = new Element("div"); | |
56 | this.hint.setStyle("font-size", "0.8em"); | |
57 | this.hint.setStyle("font-style", "italic"); | |
58 | hintRow.appendChild(this.hint); | |
59 | var exampleRow = this.newRow(); | |
60 | this.example = new Element("pre"); | |
61 | exampleRow.appendChild(this.example); | |
62 | ||
63 | var nextRow = this.newRow(); | |
f9b2babd | 64 | nextRow.addClass("wizardcontrols"); |
1fe27ded CP |
65 | var backBtn = new Element("input"); |
66 | backBtn.type = "submit"; | |
67 | backBtn.value = "< Back"; | |
68 | backBtn.addEvent("click", this.back.bind(this)); | |
69 | nextRow.appendChild(backBtn); | |
70 | ||
71 | var nextBtn = new Element("input"); | |
72 | nextBtn.type = "submit"; | |
73 | nextBtn.value = "Next >"; | |
74 | nextRow.appendChild(nextBtn); | |
75 | nextBtn.addEvent("click", this.next.bind(this)); | |
76 | ||
77 | this.nextBtn = nextBtn; | |
78 | this.backBtn = backBtn; | |
79 | }, | |
80 | newRow: function() { | |
81 | var cell = new Element("div"); | |
82 | this.t.appendChild(cell); | |
83 | return cell; | |
84 | }, | |
85 | newStep: function(options) { | |
e20e5a6b | 86 | return new qwebirc.ui.EmbedWizardStep(this, options); |
1fe27ded CP |
87 | }, |
88 | newRadio: function(parent, text, name, selected) { | |
89 | var p = new Element("div"); | |
90 | parent.appendChild(p); | |
f9b2babd | 91 | |
a1e826c7 | 92 | var r = qwebirc.util.createInput("radio", p, name, selected); |
1fe27ded CP |
93 | p.appendChild(document.createTextNode(text)); |
94 | ||
95 | return r; | |
96 | }, | |
97 | addSteps: function() { | |
f9b2babd CP |
98 | var af = function(select) { |
99 | if(Browser.Engine.trident) { | |
100 | var f = function() { | |
101 | this.focus(); | |
102 | if(select) | |
103 | this.select(); | |
104 | }; | |
105 | f.delay(100, this, []); | |
106 | } else { | |
107 | this.focus(); | |
108 | this.select(); | |
109 | } | |
110 | }; | |
1fe27ded CP |
111 | |
112 | this.welcome = this.newStep({ | |
113 | "title": "Welcome!", | |
114 | "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." | |
115 | }); | |
116 | ||
117 | this.chanBox = new Element("input"); | |
f9b2babd | 118 | this.chanBox.addClass("text"); |
1fe27ded CP |
119 | this.chans = this.newStep({ |
120 | "title": "Set channels", | |
121 | "first": "Enter the channels you would like the client to join on startup:", | |
122 | "hint": "You can supply multiple channels by seperating them with a comma, e.g.:", | |
123 | "example": "#rogue,#eu-mage", | |
6c19eb8f | 124 | middle: this.chanBox |
f9b2babd | 125 | }).addEvent("show", af.bind(this.chanBox)); |
1fe27ded CP |
126 | |
127 | var customnickDiv = new Element("div"); | |
128 | this.customnick = this.newStep({ | |
129 | "title": "Nickname mode", | |
130 | "first": "At startup would you like the client to use a random nickname, a preset nickname or a nickname of the users choice?", | |
131 | "hint": "It is recommended that you only use a preset nickname if the client is for your own personal use.", | |
132 | middle: customnickDiv | |
133 | }); | |
134 | ||
6500b600 CP |
135 | this.choosenick = this.newRadio(customnickDiv, "Make the user choose a nickname.", "nick", true); |
136 | this.randnick = this.newRadio(customnickDiv, "Use a random nickname, e.g. qwebirc12883.", "nick"); | |
1fe27ded CP |
137 | this.presetnick = this.newRadio(customnickDiv, "Use a preset nickname of your choice.", "nick"); |
138 | ||
139 | var promptdiv = new Element("form"); | |
140 | this.connectdialog = this.newStep({ | |
141 | "title": "Display connect dialog?", | |
142 | "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?", | |
143 | middle: promptdiv, | |
6c19eb8f | 144 | "hint": "You need to display the dialog if you want the user to be able to set their nickname before connecting." |
1fe27ded CP |
145 | }); |
146 | ||
6500b600 CP |
147 | var autoconnect = this.newRadio(promptdiv, "Connect without displaying the dialog.", "prompt", true); |
148 | this.connectdialogr = this.newRadio(promptdiv, "Show the connect dialog.", "prompt"); | |
1fe27ded CP |
149 | |
150 | this.nicknameBox = new Element("input"); | |
f9b2babd | 151 | this.nicknameBox.addClass("text"); |
1fe27ded CP |
152 | this.nickname = this.newStep({ |
153 | "title": "Set nickname", | |
05d4b0b5 | 154 | "first": "Enter the nickname you would like the client to use by default (use a . for a random number):", |
1fe27ded CP |
155 | "premove": function() { |
156 | if(this.nicknameBox.value == "") { | |
157 | alert("You must supply a nickname."); | |
158 | this.nicknameBox.focus(); | |
159 | return false; | |
160 | } | |
161 | return true; | |
162 | }.bind(this), | |
163 | middle: this.nicknameBox | |
f9b2babd | 164 | }).addEvent("show", af.bind(this.nicknameBox)); |
1fe27ded CP |
165 | |
166 | var codeDiv = new Element("div"); | |
167 | this.finish = this.newStep({ | |
168 | "title": "Finished!", | |
169 | "first": "Your custom link is:", | |
170 | middle: codeDiv | |
171 | }).addEvent("show", function() { | |
172 | var alink = new Element("a"); | |
173 | var abox = new Element("input"); | |
f9b2babd CP |
174 | abox.addClass("iframetext"); |
175 | var url = this.generateURL(false); | |
1fe27ded CP |
176 | |
177 | alink.href = url; | |
8af49135 | 178 | alink.target = "new"; |
1fe27ded | 179 | alink.appendChild(document.createTextNode(url)); |
f9b2babd | 180 | abox.value = "<iframe src=\"" + url + "\" width=\"647\" height=\"400\"></iframe>"; |
1fe27ded CP |
181 | |
182 | var mBox = [ | |
183 | alink, | |
184 | new Element("br"), new Element("br"), | |
185 | document.createTextNode("You can embed this into your page with the following code:"), | |
186 | new Element("br"), | |
187 | abox | |
188 | ]; | |
189 | ||
190 | while(codeDiv.childNodes.length > 0) | |
191 | codeDiv.removeChild(codeDiv.childNodes[0]); | |
192 | ||
193 | mBox.forEach(function(x) { | |
194 | codeDiv.appendChild(x); | |
195 | }); | |
f9b2babd CP |
196 | |
197 | af.bind(abox)(true); | |
198 | abox.addEvent("click", function() { | |
199 | this.select(); | |
200 | }.bind(abox)); | |
1fe27ded CP |
201 | }.bind(this)); |
202 | ||
203 | this.updateSteps(); | |
204 | this.step = 0; | |
205 | ||
206 | this.showStep(); | |
207 | }, | |
208 | updateSteps: function() { | |
209 | this.steps = [this.welcome, this.customnick]; | |
210 | ||
211 | if(this.presetnick.checked) | |
212 | this.steps.push(this.nickname); | |
213 | ||
214 | this.steps.push(this.chans); | |
6500b600 CP |
215 | |
216 | if(this.chanBox.value != "" && !this.choosenick.checked) | |
1fe27ded CP |
217 | this.steps.push(this.connectdialog); |
218 | ||
219 | this.steps.push(this.finish); | |
220 | }, | |
221 | showStep: function() { | |
222 | this.backBtn.disabled = !(this.step > 0); | |
223 | ||
224 | this.nextBtn.value = (this.step >= this.steps.length - 1)?"Close":"Next >"; | |
225 | ||
226 | this.steps[this.step].show(); | |
227 | }, | |
228 | next: function() { | |
229 | var pm = this.steps[this.step].options.premove; | |
230 | ||
231 | if(pm && !pm()) | |
232 | return; | |
233 | ||
234 | this.updateSteps(); | |
235 | if(this.step >= this.steps.length - 1) { | |
236 | this.close(); | |
237 | return; | |
238 | } | |
239 | this.step = this.step + 1; | |
240 | this.showStep(); | |
241 | }, | |
242 | close: function() { | |
243 | this.fireEvent("close"); | |
244 | }, | |
245 | back: function() { | |
246 | if(this.step <= 0) | |
247 | return; | |
248 | ||
249 | this.step = this.step - 1; | |
250 | this.showStep(); | |
251 | }, | |
252 | generateURL: function() { | |
253 | var chans = this.chanBox.value; | |
254 | var nick = this.nicknameBox.value; | |
6500b600 CP |
255 | var connectdialog = this.connectdialogr.checked && chans != "" && !this.choosenick.checked; |
256 | ||
1fe27ded CP |
257 | var URL = []; |
258 | if(this.presetnick.checked) { | |
259 | URL.push("nick=" + escape(nick)); | |
6500b600 CP |
260 | } else if(!this.choosenick.checked) { |
261 | URL.push("randomnick=1"); | |
1fe27ded CP |
262 | } |
263 | ||
264 | if(chans) { | |
265 | var d = chans.split(","); | |
266 | var d2 = []; | |
267 | ||
1fe27ded CP |
268 | d.forEach(function(x) { |
269 | if(x.charAt(0) == '#') | |
270 | x = x.substring(1); | |
271 | ||
272 | d2.push(x); | |
273 | }); | |
274 | ||
275 | URL.push("channels=" + escape(d2.join(","))); | |
276 | } | |
277 | ||
278 | if(connectdialog) | |
279 | URL.push("prompt=1"); | |
280 | ||
6500b600 | 281 | return this.options.baseURL + (URL.length>0?"?":"") + URL.join("&"); |
1fe27ded CP |
282 | } |
283 | }); |